Web 应用开发 - 实训一 网页开发

Web应用开发

实训一 网页开发

一、预习：

1、阅读：教材P1-P39
2、要掌握知识要点：表单标记、超链接标记、CSS的引用方式、CSS选择器、DOM、JavaScript的引入（内嵌式、外链式）、JavaScript的使用（事件处理、常用对象）。

二、验证：用谷歌浏览器或IE浏览器打开页面文件（源代码见chapter1.rar）

1、文件1-1（htmlDemo01.html，见p2），效果如图1-1所示。
2、文件1-3（htmlDemo03.html，见p5），效果如图1-4所示。
3、文件1-5（htmlDemo05.html，见p6），效果如图1-6所示。
4、文件1-6（htmlDemo06.html，见p8），效果如图1-8所示。
5、文件1-7（htmlDemo07.html，见p10），效果如图1-10所示。
6、文件1-8（htmlDemo08.html，见p11），效果如图1-11所示。
7、文件1-9（htmlDemo09.html，见p12），效果如图1-12所示。
8、文件1-10（cssDemo01.html，见p14），效果如图1-15所示。
9、文件1-11（cssDemo03.html，见p17），效果如图1-17所示。
10、文件1-12（jsDemo01.html，见p21），效果如图1-19所示。
11、文件1-13（jsDemo02.html，见p22），效果如图1-20所示。
12、文件1-14（jsDemo03.html，见p26），效果如图1-21所示。

三、实训：

1、完成传智书城首页设计,编写文件1-15(index.html,p29，所需其他文件见源代码chapter1.rar）
)，效果如图1-23所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- 导入首页轮播图css和js脚本 -->
<link type="text/css" href="css/autoplay.css" rel="stylesheet" />
<script type="text/javascript" src="js/autoplay.js"></script></head>
<body class="main"><!-- 1.网上书城顶部 start -->
<div id="divhead"><table cellspacing="0" class="headtable"><tr><td><a href="#"><img src="images/logo.png" width="200" height="60" border="0" /> </a></td><td style="text-align:right"><img src="images/cart.gif" width="26" height="23" style="margin-bottom:-4px" />&nbsp;<a href="#">购物车</a> | <a href="#">帮助中心</a> | <a href="#">我的帐户</a>| <a href="register.html">新用户注册</a>							</td>		</tr></table>
</div><!-- 网上书城顶部  end --><!--2. 网上书城菜单列表  start -->
<div id="divmenu"><a href="#">文学</a> <a href="#">生活</a> <a href="#">计算机</a> <a href="#">外语</a> <a href="#">经管</a><a href="#">励志</a> <a href="#">社科</a> <a href="#">学术</a> <a href="#">少儿</a><a href="#">艺术</a> <a href="#">原版</a> <a href="#">科技</a> <a href="#">考试</a> <a href="#">生活百科</a> <a href="#" style="color:#FFFF00">全部商品目录</a>		
</div>
<div id="divsearch">
<form action="#" id="searchform"><table width="100%" border="0" cellspacing="0"><tr><td style="text-align:right; padding-right:220px">Search <input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"onmouseover="this.focus();"onclick="my_click(this, 'textfield');"onBlur="my_blur(this, 'textfield');"/> <a href="#"><img src="images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/> </a></td></tr></table>
</form>
</div>
<!-- 网上书城菜单列表  end --><!-- 3.网上书城首页轮播图  start --><div id="box_autoplay"><div class="list"><ul><li><img src="ad/index_ad1.jpg" width="900" height="335"/></li><li><img src="ad/index_ad2.jpg" width="900" height="335"/></li><li><img src="ad/index_ad3.jpg" width="900" height="335"/></li><li><img src="ad/index_ad4.jpg" width="900" height="335"/></li><li><img src="ad/index_ad5.jpg" width="900" height="335"/></li></ul></div><!-- 网上书城首页轮播图  end --><!--4. 公告板和本周热卖  start --><div id="divcontent"><table width="900px" border="0" cellspacing="0" ><tr><td width="497"><img src="images/billboard.gif" width="497" height="38"/><table cellspacing="0" class="ctl"><tr><td width="485" headers="29">尊敬的传智书城用户，<br/>为了让大家有更好的购物体验，3月25号起，当日达业务关小黑屋回炉升级！<br/>具体开放时间留意公告，感谢大家的支持与理解，祝大家购物愉快！<br/>3月23日<br/>传智博客 传智书城系统管理部<br/></td>						</tr></table></td><td style="padding: 5px 15px 10px 40px"><table width="100%" border="0" cellspacing="0"><tr><td><img src="images/hottitle.gif" width="126" height="29"></td></tr></table><table width="100%" border="0" cellspacing="0"><tr><td style="width: 80; text-align:center"><a href="#"><img src="bookcover/105.jpg" width="102" height="130" border="0"></a><br/></td><td style="width: 80; text-align:center"><a href="#"><img src="bookcover/106.jpg" width="102" height="130" border="0"></a><br/></td></tr></table></td></tr></table></div>
<!-- 公告板和本周热卖  end -->	<!--5. 网上书城底部 start -->
<div id="divfoot"><table width="100%" border="0" cellspacing="0"><tr><td rowspan="2" style="width: 10%"><img src="images/logo.png" width="195" height="50" style="margin-left: 175px"></td><td style="padding-top: 5px; padding-left: 50px"><a href="#"><font color="#747556"><b>CONTACT US</b></font></a></td></tr><tr><td style="padding-left: 50px"><font color="#CCCCCC"><b>COPYRIGHT 2015 &copy; BookStore All Right RESERVED.</b></font></td></tr></table>
</div><!-- 网上书城底部  end -->
</body>
</html>

2、完成传智书城注删页面设计,编写文件1-17(register.html,p34，所需其他文件见源代码chapter1.rar)，效果如图1-25所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/form.js"></script>
</head>
<body class="main"><!-- 1.网上书城顶部 start -->
<div id="divhead"><table cellspacing="0" class="headtable"><tr><td><a href="index.html"><img src="images/logo.png" width="200" height="60" border="0" /> </a></td><td style="text-align:right"><img src="images/cart.gif" width="26" height="23" style="margin-bottom:-4px" />&nbsp;<a href="#">购物车</a> | <a href="#">帮助中心</a> | <a href="#">我的帐户</a>| <a href="register.html">新用户注册</a>							</td>		</tr></table>
</div><!-- 网上书城顶部  end --><!--2. 网上书城菜单列表  start -->
<div id="divmenu"><a href="#">文学</a> <a href="#">生活</a> <a href="#">计算机</a> <a href="#">外语</a> <a href="#">经管</a><a href="#">励志</a> <a href="#">社科</a> <a href="#">学术</a> <a href="#">少儿</a><a href="#">艺术</a> <a href="#">原版</a> <a href="#">科技</a> <a href="#">考试</a> <a href="#">生活百科</a> <a href="#" style="color:#FFFF00">全部商品目录</a>		
</div>
<div id="divsearch">
<form action="#" id="searchform"><table width="100%" border="0" cellspacing="0"><tr><td style="text-align:right; padding-right:220px">Search <input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"onmouseover="this.focus();"onclick="my_click(this, 'textfield');"onBlur="my_blur(this, 'textfield');"/> <a href="#"><img src="images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/> </a></td></tr></table>
</form>
</div>
<!-- 网上书城菜单列表  end -->
<!-- 3.网上书城用户注册  start --><div id="divcontent" align="center"><form action="registersuccess.html" method="post" onsubmit="return checkForm();"><table width="850px" border="0" cellspacing="0"><tr><td style="padding: 30px"><h1>新会员注册</h1><table width="70%" border="0" cellspacing="2" class="upline"><tr><td style="text-align: right; width: 20%">会员邮箱：</td><td style="width: 40%"><input type="text" class="textinput" id="email"name="email" onkeyup="checkEmail();"></td><td colspan="2"><span id="emailMsg"></span><font color="#999999">请输入有效的邮箱地址</font></td></tr><tr><td style="text-align: right">会员名：</td><td><input type="text" class="textinput" id="username"name="username" onkeyup="checkUsername();"></td><td colspan="2"><span id="usernameMsg"></span><font color="#999999">字母数字下划线1到10位，不能是数字开头</font></td></tr><tr><td style="text-align: right">密码：</td><td><input type="password" class="textinput" id="password"name="password" onkeyup="checkPassword();"></td><td><span id="passwordMsg"></span><font color="#999999">密码请设置6-16位字符</font></td></tr><tr><td style="text-align: right">重复密码：</td><td><input type="password" class="textinput" id="repassword"name="repassword" onkeyup="checkConfirm();"></td><td><span id="confirmMsg">&nbsp;</span></td></tr><tr><td style="text-align: right">性别：</td><td colspan="2">&nbsp;&nbsp;<input type="radio" name="gender" value="男" checked="checked/">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="gender" value="女" />女</td><td>&nbsp;</td></tr><tr><td style="text-align: right">联系电话：</td><td colspan="2"><input type="text" class="textinput" style="width: 350px" name="telephone"/></td><td>&nbsp;</td></tr><tr><td style="text-align: right">个人介绍：</td><td colspan="2"><textarea class="textarea" name="introduce"></textarea>							</td><td>&nbsp;</td></tr></table><table width="70%" border="0" cellspacing="0"><tr><td style="padding-top: 20px; text-align: center"><input type="image" src="images/signup.gif" name="submit" border="0"/></td></tr></table></td></tr></table></form></div><!-- 网上书城用户注册  end --><!--4. 网上书城下方显示 start -->
<div id="divfoot"><table width="100%" border="0" cellspacing="0"><tr><td rowspan="2" style="width: 10%"><img src="images/logo.png" width="195" height="50" style="margin-left: 175px"></td><td style="padding-top: 5px; padding-left: 50px"><a href="#"><font color="#747556"><b>CONTACT US</b></font></a></td></tr><tr><td style="padding-left: 50px"><font color="#CCCCCC"><b>COPYRIGHT 2015 &copy; BookStore All Right RESERVED.</b></font></td></tr></table></div><!--4. 网上书城下方显示 start -->
</body>
</html>

四、提交编写的源代码

打包成压缩文件：学号+姓名+实训1.rar

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/65594.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

服务器允许ssh登录root

服务器允许ssh登录root

用vim打开/etc/ssh/sshd_config sudo vim /etc/ssh/sshd_config将sshd_config中的PermitRootLogin属性改为yes ... PermitRootLogin yes ...重启sshd服务 sudo service sshd restart
阅读更多...
docker 笔记2 Docker镜像和数据卷

docker 笔记2 Docker镜像和数据卷

参考&#xff1a; 1.镜像是什么&#xff1f;&#xff08;面试题&#xff09; 是一种轻量级、可执行的独立软件包&#xff0c;它包含运行某个软件所需的所有内容&#xff0c;我们把应用程序和配置依赖打包好形成一个可交付的运行环境(包括代码、运行时需要的库、环境变量和配置文…
阅读更多...
微信小程序-生成canvas图片并保存到手机相册

微信小程序-生成canvas图片并保存到手机相册

wxml页面 <button class"rightbtn bottomBtnCss" catch:tap"canvasImg"><image src{{imgUrl}}/images/mine/jspj-icon.png class"restNumImg"></image><text class"btnText">生成图片</text></but…
阅读更多...
算法笔记——路径问题

算法笔记——路径问题

在引入介绍如何写一个算法的时候&#xff0c;我们先引入一个题作为例子 1137. 第 N 个泰波那契数 - 力扣&#xff08;LeetCode&#xff09; 作为刚开始学习算法的我们&#xff0c;看到这个题目的时候&#xff0c;应该想好以下的问题&#xff1a; 1.状态表示 我们要用什么来表…
阅读更多...
Windows7安装SSH客户端的解决方案

Windows7安装SSH客户端的解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
SQL sever中库管理

SQL sever中库管理

目录 一、创建数据库 1.1库界面方式 1.2SQL命令方式 二、修改数据库 2.1库界面方式 2.2SQL命令方式 三、删除数据库 3.1库界面方式 3.2SQL命令方式 四、附加和分离数据库 4.1附加和分离数据库概述 4.2作用 4.3附加和分离数据库方法 4.4示例 一、创建数据库 1.1库…
阅读更多...
第 3 章 栈和队列 （循环队列）

第 3 章 栈和队列 （循环队列）

1. 背景说明 和顺序栈相类似&#xff0c;在队列的顺序存储结构中&#xff0c;除了用一组地址连续的存储单元依次存放从队列头到队列尾的元素之外&#xff0c; 尚需附设两个指针 front 和 rear 分别指示队列头元素及队列尾元素的位置。约定&#xff1a;初始化建空队列时&#x…
阅读更多...
力扣：81. 搜索旋转排序数组 II（Python3）

力扣：81. 搜索旋转排序数组 II（Python3）

题目&#xff1a; 已知存在一个按非降序排列的整数数组 nums &#xff0c;数组中的值不必互不相同。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转 &#xff0c;使数组变为 [nums[k], nums[k1], .…
阅读更多...
XmlDocument.SelectNodes 不起作用

XmlDocument.SelectNodes 不起作用

今天采用Xpath读取Xml节点&#xff0c;怎么都读不出。 问题分析&#xff1a; 错误代码如下&#xff1a; XmlDocument xmlD new XmlDocument();xmlD.PreserveWhitespace true;xmlD.LoadXml(xStr);xmlD.SelectNodes("job-scheduling-data/schedule/job");经排查 do…
阅读更多...
Python学习笔记——从面试题出发学习Python

Python学习笔记——从面试题出发学习Python

Python学习笔记——从面试题出发学习Python Python学习笔记——从面试题出发学习Python1. 可变数据类型与不可变数据类型&#xff0c;深拷贝与浅拷贝&#xff0c;函数参数的传递机制1.1 变量与对象1.2 可变数据类型与不可变数据类型1.3 深拷贝与浅拷贝1.4 函数参数的传递机制1.…
阅读更多...
element-plus的周选择器 一周从周一开始

element-plus的周选择器 一周从周一开始

1、代码 1&#xff09;、template中 <el-date-picker v-model"value1" type"week" format"[Week] ww" placeholder"巡访周" change"change"value-format"YYYY-MM-DD" /> 2&#xff09;、方法中 import…
阅读更多...
Matlab（画图初阶）

Matlab（画图初阶）

目录 1.plot()函数 2. hold(添加新绘图是否保留旧绘图) 3. Plot Style 3.1 线型 3.2 标记 3.3 颜色 ​编辑 4. legend() 5.X 、Y and Title&#xff1f; 6. Text()和annotation() 7.line(创建基本线条) 7.1 基本语法 7.2 指定线条属性 7.3 更改线条属性 8.图像属性 8.1 …
阅读更多...
c++入门一

c++入门一

参考&#xff1a;https://www.learncpp.com/cpp-tutorial/ When you finish, you will not only know how to program in C, you will know how NOT to program in C, which is arguably as important. Tired or unhappy programmers make mistakes, and debugging code tends…
阅读更多...
软考高级架构师——6、软件架构设计

软考高级架构师——6、软件架构设计

像学写文章一样&#xff0c;在学会字、词、句之后&#xff0c;就应上升到段落&#xff0c;就应追求文章的“布局谋 篇”&#xff0c;这就是架构。通俗地讲&#xff0c;软件架构设计就是软件系统的“布局谋篇”。 人们在软件工程实践中&#xff0c;逐步认识到了软件架构的重要性…
阅读更多...
HarmonyOS Codelab 优秀样例——购物应用，体验一次开发多端部署魅力

HarmonyOS Codelab 优秀样例——购物应用，体验一次开发多端部署魅力

一. 样例介绍 本篇Codelab基于自适应布局和响应式布局&#xff0c;实现购物应用在手机、折叠屏、平板不同屏幕尺寸设备上按不同设计显示。通过三层工程结构组织代码&#xff0c;实现一次开发&#xff0c;多端部署 。 手机运行效果如图所示&#xff1a; 折叠屏运行效果图&#x…
阅读更多...
C语言：大小端字节序存储

C语言：大小端字节序存储

一、大小端字节序存储介绍 大端字节序存储模式&#xff1a;把一个数据低位字节处的数据存放在高地址处&#xff0c;数据高位字节处的数据存放在低地址处 小端字节序存储模式&#xff1a;把一个数据低位字节处的数据存放在低地址处&#xff0c;数据高位字节处的数据存放在高地址…
阅读更多...
MATLAB中isequal函数转化为C语言

MATLAB中isequal函数转化为C语言

背景 有项目算法使用matlab中isequal函数进行运算&#xff0c;这里需要将转化为C语言&#xff0c;从而模拟算法运行&#xff0c;将算法移植到qt。 MATLAB中isequal简单介绍 语法 tf isequal(A,B) tf isequal(A1,A2,...,An) 说明 如果 A 和 B 等效&#xff0c;则 tf is…
阅读更多...
C++ 信号处理

C++ 信号处理

信号是由操作系统传给进程的中断&#xff0c;会提早终止一个程序。在 UNIX、LINUX、Mac OS X 或 Windows 系统上&#xff0c;可以通过按 CtrlC 产生中断。 有些信号不能被程序捕获&#xff0c;但是下表所列信号可以在程序中捕获&#xff0c;并可以基于信号采取适当的动作。这些…
阅读更多...
【Python】PySpark 数据计算 ⑤ ( RDD#sortBy方法 - 排序 RDD 中的元素 )

【Python】PySpark 数据计算 ⑤ ( RDD#sortBy方法 - 排序 RDD 中的元素 )

文章目录 一、RDD#sortBy 方法1、RDD#sortBy 语法简介2、RDD#sortBy 传入的函数参数分析 二、代码示例 - RDD#sortBy 示例1、需求分析2、代码示例3、执行结果 一、RDD#sortBy 方法 1、RDD#sortBy 语法简介 RDD#sortBy 方法 用于 按照 指定的 键 对 RDD 中的元素进行排序 , 该方…
阅读更多...
用 ChatGPT 写代码太省时间了

用 ChatGPT 写代码太省时间了

几个月前&#xff0c;我们聊过陶哲轩使用 ChatGPT 辅助解决数学问题。当时&#xff0c;他觉得虽然测试结果不太令人满意&#xff0c;但也并没有对 ChatGPT 持完全否定的态度。他觉得&#xff0c;像 ChatGPT 这类大型语言模型在数学中可以用来做一些半成品的语义搜索工作&#x…
阅读更多...
最新文章

Copyright @ 2022~2023