Web前端开发实验教学指导书.docx

1、Web前端开发实验教学指导书Web前端开发技术实训项目方案课程名称： Web前端开发 适用专业： 计算机应用技术 指导教师： 实验1 HTML基础与布局元素一、实验目的1掌握使用HTML的基本结构创建网页2掌握使用行级和块级标签组织页面内容 3掌握使用图像标签实现图文并茂的页面二、实验内容使用HTML基本元素设计基本网页三、实验环境（1）使用的操作系统及版本。 Windows 10 （2）使用的编译系统及版本。VS Code或其他开发工具四、实验步骤及说明任务1基本块级元素使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果任务2用于布局的块级元素编写HTML代码，实现如图所示的页面

2、效果任务3行级元素编写HTML代码，实现如图所示的页面效果。任务4超链接编写HTML代码，实现导航菜单的链接单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。单击ww.html的返回链接可以返回到lj.html。单击“联系我们”，将自动打开本机的电子邮件程序。实验2 表格与表单的应用一、实验目的1.掌握表格的基本结构，熟悉表格标签的使用。2.会使用表格标签属性修饰美化表格。3.了解表单的基本形式，掌握表单元素的使用方法。二、实验内容使用表单标签与表格标签设计应用网页二、实验环境1.使用的操作系统

3、及版本。 Windows 10 2.使用的编译系统及版本。VS Code或其他开发工具四、实验步骤及说明任务1表格嵌套和表格内的标签任务2 跨多行多列的表格任务3给表单加分类边框任务4注册表单布局实验3 CSS样式表基础一、实验目的1掌握类选择器和ID选择器的使用2掌握文本和字体样式美化网页的使用3掌握背景样式美化网页的使用4掌握伪类样式控制超链接样式的使用二、实验内容使用HTML基本元素设计基本网页三、实验环境（3）使用的操作系统及版本。 Windows 10 （4）使用的编译系统及版本。VS Code或其他开发工具四、实验步骤及说明任务1 ID选择器使用HTML编辑工具，编写HTML代码，

4、实现如图所示样式的页面效果任务2 背景设置，重复背景编写HTML代码，实现如图所示样式的页面效果任务3无序列表的修饰编写HTML代码，实现如图所示样式的页面效果。任务4超链接编写HTML代码，实现如下图样式的链接小结及思考题扩展训练：实现如图所示的页面效果CSS各类选择器应用编写HTML代码，实现如图所示的页面效果。列表修饰风格超链接实验4 CSS样式布局一、实验目的1.掌握表格的基本结构，熟悉表格标签的使用。2.会使用表格标签属性修饰美化表格。3.了解表单的基本形式，掌握表单元素的使用方法。二、实验内容CSS样式应用及div+css布局三、实验环境（5）使用的操作系统及版本。 Windows

5、 10 （6）使用的编译系统及版本。VS Code或其他开发工具四、实验步骤及说明任务1表格嵌套和表格内的标签任务2 跨多行多列的表格任务3给表单加分类边框任务4注册表单布局实验5 JavaScript基础一、实验目的1.掌握Javascript的变量定义与使用2.掌握Javascript的运算符与表达式的应用3.掌握Javascript的控制语句的使用4.掌握Javascript的常用函数的使用5.掌握Javascript的自定义函数的设计与调用二、实验内容JavaScript基础编程练习三、实验环境（1）使用的操作系统及版本。Windows 10（2）使用的编译系统及版本。 VS Code

6、或其他开发工具四、实验步骤及说明任务1 用户输入成绩，程序输出相应的成绩等级。要求成绩必须在0100之间，否则提示错误并要求重新输入，等级分为优秀、良好、中等、及格和不及格。如下图所示。任务2 基本块级元素任务3 简单计算器根据提示输入操作数和被操作数（如图8.21所示），然后输入运算符（如图8.22所示），程序计算结果，然后弹出对话框输出表达式和结果，如图8.23所示。任务4 用户输入最喜欢的一天，程序输出相应的信息。周一-今天是这个礼拜的第一天，要好好工作。周二-今天是这个礼拜的第二天，怎么感觉好困。周三-今天是这个礼拜的第三天，工作好忙啊。周四-今天是这个礼拜的第四天，怎么还没到周末啊。

7、周五-今天是这个礼拜的第五天，明天休息，今天晚上可以玩个够了。周六-今天休息啊，可以好好放松一下了！周日-今天虽然也休息，但明天开始又要上班了。不填-为什么不填周几呢？实验6 JavaScript对象一、实验目的1. 掌握使用数组对象常用方法2. 掌握使用字符串对象常用方法3. 掌握使用日期对象常用方法4. 掌握数学对象常用方法的使用5. 掌握创建自定义对象二、实验内容常用JavaScript对象的使用方法三、实验环境1.使用的操作系统及版本。Windows 10 2.使用的编译系统及版本。VS Code或其他开发工具四、实验步骤及说明任务1 制作12小时的时钟需求说明 显示年、月、日 显示星

8、期几 显示时钟特效，时钟为12小时进制实现思路 使用getFullYear()获得当前年份 使用getMonth()+1获得当前月份 使用getDate()获得当前日期 根据getHours()获得的小时，使用if语句判断当前时间是否大于12 使用getDay()获取当前表示星期几的数字，然后使用switch设置当前星期几任务2 实现一个小型计算器 运用各种运算方法结合前面的知识制作一个简易的计算器。 提示：本题使用按钮被用户单击后执行函数的方法，所有的按钮都执行start（）函数，通过向start函数传递不同的参数完成不同功能。在函数体内部可以通过switch条件分支进行判断，执行不同的运算

9、，最后将结果存放在文本框中。任务3 制作简单的网页动画 setInterval（）方法可用于图片、文字等元素的移动。利用该方法间隔显示不同的文字，如图9.21和9.22所示。可以使指定div元素动态改变宽度，如图9.20和9.21所示。 提示：设置2个按钮，分别控制setInterval（）方法的启动与清除，单击”开始”按钮后，页面效果如图9.21所示。实验7 DOM编程 一、实验目的6.掌握使用window对象属性、方法及事件的使用7.掌握使用document对象属性和方法的使用8.掌握使用getElementByID()方法访问DOM元素9.掌握使用getElementByName()方法

10、访问DOM元素10.掌握使用getElementByTagName()方法访问DOM元素二、实验内容使用Dreamweaver工具练习使用DOM框架中的各元素三、实验环境3.使用的操作系统及版本。Windows 10 4.使用的编译系统及版本。VS Code或其他开发工具四、实验步骤及说明任务1 带关闭按钮的广告图片制作带关闭按钮的广告图片页面，页面效果如图所示。1.用一个div用于显示广告图片，另一个div用于显示关闭按钮；2. 带关闭按钮图层增加onclick事件用于图层的关闭（隐藏）。任务2 带按扭的轮换横幅广告制作带按钮的轮换横幅广告页面，页面效果如图所示。1、一个div用于存放需轮换

11、的图片，另一个div存放切换的数字；2、定义一个函数用于图片的显示和隐藏；3、设置计算器用户图片的自动切换；4、给数字按钮绑定轮换横幅广告函数。任务3 制作树形菜单制作树形菜单页面，页面效果如图所示。1使用项目列表制作一个完整的树形菜单2使用带参数的函数，通过参数来控制显示或隐藏某个列表扩展训练：1、制作html页面，使用DOM操作增加或删除表格行，如图所示。2、制作html页面，使用表单控件和DOM编程，如图10.27所示实验8 综合网站制作一、实验目的1.会使用表单事件和脚本函数实现表单验证2.会使用String对象和文本框控件常用属性和方法实现客户端验证3.会使用JavaScript和CSS进行简单的交互4.会使用JavaScript实现级联效果二、实验内容JavaScript事件、函数等应用三、实验环境（1）使用的操作系统及版本。Windows 10（2）使用的编译系统及版本。 VS Code或其他开发工具四、实验步骤及说明