Web前端开发实验指导书20XX年09月目录实验1 HTML基础与布局元素 (3)实验2 表格与表单的应用 (6)实验3 框架 (8)实验4 CSS样式表基础 (12)实验5 CSS样式布局 (16)实验6 Dreamweaver制作网页 (19)实验7 网站设计 (22)实验8 JavaScript基础 (26)实验9 JavaScript对象 (29)实验10 DOM编程 (33)实验11 JavaScript常用特效 (36)实验1 HTML基础与布局元素一、实验目的1．掌握使用HTML的基本结构创建网页2．掌握使用行级和块级标签组织页面内容3．掌握使用图像标签实现图文并茂的页面二、实验内容使用HTML基本元素设计基本网页三、实验环境（1）使用的操作系统及版本。
Windows XP Professional（2）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1基本块级元素使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果任务2用于布局的块级元素编写HTML代码，实现如图所示的页面效果任务3行级元素编写HTML代码，实现如图所示的页面效果。
任务4超链接编写HTML代码，实现导航菜单的链接●单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。
●单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。
●单击ww.html的返回链接可以返回到lj.html。
●单击“联系我们”，将自动打开本机的电子邮件程序。
小结及思考题扩展训练：实现如图所示的页面效果实验2 表格与表单的应用一、实验目的1. 掌握表格的基本结构，熟悉表格标签的使用。
2. 会使用表格标签属性修饰美化表格。
3. 了解表单的基本形式，掌握表单元素的使用方法。
二、实验内容使用表单标签与表格标签设计应用网页二、实验环境1. 使用的操作系统及版本。
Windows XP Professional2. 使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1表格嵌套和表格内的标签任务2 跨多行多列的表格任务3给表单加分类边框任务4注册表单布局小结及思考题编写HTML代码，实现如图所示的页面效果。
使用所学的表单元素相关知识，制作商城网站注册页。
实现如图所示的页面效果。
实验3 框架一、实验目的1、会使用框架集来创建框架，掌握target属性的使用方法。
2、实现基于框架基础上的页面跳转3、会使用iframe实现页面重用二、实验内容1 行列划分的框架2 窗口间的关联3 iframe的基本用法4 利用框架技术布局页面三、实验环境（1）使用的操作系统及版本。
Windows XP Professional（2）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 行列划分的框架使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果任务2窗口间的关联编写HTML代码，实现如图所示的页面效果1、右边框架设置name属性为"showFrame"；2、左边框架文件中，将链接目标设置为"showFrame"。
以此实现窗口间的关联。
任务3iframe的基本用法编写HTML代码，实现如图所示的页面效果。
任务4利用框架技术布局页面使用HTML编辑工具，编写HTML代码，实现一个简单的帮助中心页面，并实现基于框架的页面跳转，如图所示的页面效果。
框架结构分为上下两个部分，在下面部分中再分为左右两个部分。
target=#value，#value为页面跳转区域的框架名称。
框架上部及跳转页面内容可采用截图方式。
小结及思考题考虑如何实现这个页面？实验4 CSS样式表基础一、实验目的1．掌握类选择器和ID选择器的使用2．掌握文本和字体样式美化网页的使用3．掌握背景样式美化网页的使用4．掌握伪类样式控制超链接样式的使用二、实验内容使用HTML基本元素设计基本网页三、实验环境（3）使用的操作系统及版本。
Windows XP Professional（4）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 ID选择器使用HTML编辑工具，编写HTML代码，实现如图所示样式的页面效果任务2 背景设置，重复背景编写HTML代码，实现如图所示样式的页面效果任务3无序列表的修饰编写HTML代码，实现如图所示样式的页面效果。
任务4超链接编写HTML代码，实现如下图样式的链接小结及思考题扩展训练：实现如图所示的页面效果CSS各类选择器应用编写HTML代码，实现如图所示的页面效果。
列表修饰风格超链接实验5 CSS样式布局一、实验目的1. 掌握表格的基本结构，熟悉表格标签的使用。
2. 会使用表格标签属性修饰美化表格。
3. 了解表单的基本形式，掌握表单元素的使用方法。
二、实验内容CSS样式应用及div+css布局三、实验环境（5）使用的操作系统及版本。
Windows XP Professional（6）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1表格嵌套和表格内的标签任务2 跨多行多列的表格任务3给表单加分类边框任务4注册表单布局小结及思考题扩展训练：编写HTML代码，实现如图所示的页面效果。
使用所学的表单元素相关知识，制作商城网站注册页。
实现如图所示的页面效果。
实验6 Dreamweaver制作网页一、实验目的1．使用Dreamweaver实现图文混编2．使用Dreamweaver实现表格3．使用Dreamweaver实现表单4．使用Dreamweaver实现框架5．使用Dreamweaver工具实现样式表二、实验内容使用Dreamweaver工具设计网页三、实验环境（1）使用的操作系统及版本。
Windows XP Professional（2）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 使用Dreamweaver实现表格布局和图文混编任务2 使用Dreamweaver实现表格和表单页面任务3使用Dreamweaver实现样式表任务4使用Dreamweaver实现框架页面扩展训练：使用Dreamweaver工具，利用表格制作一个用户注册的表单页面，最后用CSS修饰。
实现如图所示的页面效果。
使用Dreamweaver实现框架页面布局，页面效果如图所示。
实验7 网站设计一、实验目的1. 根据网站开发流程制作网站2. 掌握使用<iframe/>制作网页模板3. 学会使用DIV+CSS制作简单的页面布局4. 学会使用Dreamweaver工具制作网页二、实验内容使用Dreamweaver工具设计网站，合理布局网页三、实验环境1. 使用的操作系统及版本。
Windows XP Professional2. 使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 创建站点按照步骤创建dangdang网站，并建立相应目录结构，如图所示。
任务2制作首页任务3制作模板任务4复用模板制作商品列表页面扩展训练：1、使用Dreamweaver工具，制作dangdang注册页面，页面效果如图所示2、制作购物车页面，页面效果如图所示。
实验8 JavaScript基础一、实验目的1. 掌握Javascript的变量定义与使用2. 掌握Javascript的运算符与表达式的应用3. 掌握Javascript的控制语句的使用4. 掌握Javascript的常用函数的使用5. 掌握Javascript的自定义函数的设计与调用二、实验内容JavaScript基础编程练习三、实验环境（1）使用的操作系统及版本。
Windows XP Professional（2）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 用户输入成绩，程序输出相应的成绩等级。
要求成绩必须在0~100之间，否则提示错误并要求重新输入，等级分为优秀、良好、中等、及格和不及格。
如下图所示。
任务2 基本块级元素任务3 简单计算器根据提示输入操作数和被操作数（如图8.21所示），然后输入运算符（如图8.22所示），程序计算结果，然后弹出对话框输出表达式和结果，如图8.23所示。
任务4 用户输入最喜欢的一天，程序输出相应的信息。
周一->今天是这个礼拜的第一天，要好好工作。
周二->今天是这个礼拜的第二天，怎么感觉好困。
周三->今天是这个礼拜的第三天，工作好忙啊。
周四->今天是这个礼拜的第四天，怎么还没到周末啊。
周五->今天是这个礼拜的第五天，明天休息，今天晚上可以玩个够了。
周六->今天休息啊，可以好好放松一下了！周日->今天虽然也休息，但明天开始又要上班了。
不填->为什么不填周几呢？小结及思考题扩展训练：写一个的程序，页面效果如图所示。
逻辑：红球：从1~33 中，选取 6 个，不能够重复蓝球：从1~16 中，选取 1 个要求：点击“begin"，红球按从小到大的顺序输出提示：Math.random() 生成[0，1 )之间的随机数实验9 JavaScript对象一、实验目的1. 掌握使用数组对象常用方法2. 掌握使用字符串对象常用方法3. 掌握使用日期对象常用方法4. 掌握数学对象常用方法的使用5. 掌握创建自定义对象二、实验内容常用JavaScript对象的使用方法三、实验环境1. 使用的操作系统及版本。
Windows XP Professional2. 使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 制作12小时的时钟需求说明显示年、月、日显示星期几显示时钟特效，时钟为12小时进制实现思路使用getFullYear()获得当前年份使用getMonth()+1获得当前月份使用getDate()获得当前日期根据getHours()获得的小时，使用if语句判断当前时间是否大于12使用getDay()获取当前表示星期几的数字，然后使用switch设置当前星期几任务2 实现一个小型计算器运用各种运算方法结合前面的知识制作一个简易的计算器。
提示：本题使用按钮被用户单击后执行函数的方法，所有的按钮都执行start（）函数，通过向start函数传递不同的参数完成不同功能。
在函数体内部可以通过switch条件分支进行判断，执行不同的运算，最后将结果存放在文本框中。
任务3 制作简单的网页动画setInterval（）方法可用于图片、文字等元素的移动。
利用该方法间隔显示不同的文字，如图9.21和9.22所示。
可以使指定div元素动态改变宽度，如图9.20和9.21所示。