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

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

《Web前端开发实验教学指导书.docx》由会员分享，可在线阅读，更多相关《Web前端开发实验教学指导书.docx（19页珍藏版）》请在冰豆网上搜索。

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

Web前端开发技术

实训项目方案

课程名称：

Web前端开发

适用专业：

计算机应用技术

指导教师：

实验1HTML基础与布局元素

一、实验目的

1．掌握使用HTML的基本结构创建网页

2．掌握使用行级和块级标签组织页面内容

3．掌握使用图像标签实现图文并茂的页面

二、实验内容

使用HTML基本元素设计基本网页

三、实验环境

（1）使用的操作系统及版本。

Windows10

（2）使用的编译系统及版本。

VSCode或其他开发工具

四、实验步骤及说明

³任务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.使用的操作系统及版本。

Windows10

2.使用的编译系统及版本。

VSCode或其他开发工具

四、实验步骤及说明

³任务1表格嵌套和表格内的标签

³任务2跨多行多列的表格

³任务3给表单加分类边框

³任务4注册表单布局

实验3CSS样式表基础

一、实验目的

1．掌握类选择器和ID选择器的使用

2．掌握文本和字体样式美化网页的使用

3．掌握背景样式美化网页的使用

4．掌握伪类样式控制超链接样式的使用

二、实验内容

使用HTML基本元素设计基本网页

三、实验环境

（3）使用的操作系统及版本。

Windows10

（4）使用的编译系统及版本。

VSCode或其他开发工具

四、实验步骤及说明

³任务1ID选择器

使用HTML编辑工具，编写HTML代码，实现如图所示样式的页面效果

³任务2背景设置，重复背景

编写HTML代码，实现如图所示样式的页面效果

³任务3无序列表的修饰

编写HTML代码，实现如图所示样式的页面效果。

³任务4超链接

编写HTML代码，实现如下图样式的链接

小结及思考题

扩展训练：

实现如图所示的页面效果

³CSS各类选择器应用

³编写HTML代码，实现如图所示的页面效果。

³列表修饰风格

³超链接

实验4CSS样式布局

一、实验目的

1.掌握表格的基本结构，熟悉表格标签的使用。

2.会使用表格标签属性修饰美化表格。

3.了解表单的基本形式，掌握表单元素的使用方法。

二、实验内容

CSS样式应用及div+css布局

三、实验环境

（5）使用的操作系统及版本。

Windows10

（6）使用的编译系统及版本。

VSCode或其他开发工具

四、实验步骤及说明

³任务1表格嵌套和表格内的标签

³任务2跨多行多列的表格

³任务3给表单加分类边框

³任务4注册表单布局

实验5JavaScript基础

一、实验目的

1.掌握Javascript的变量定义与使用

2.掌握Javascript的运算符与表达式的应用

3.掌握Javascript的控制语句的使用

4.掌握Javascript的常用函数的使用

5.掌握Javascript的自定义函数的设计与调用

二、实验内容

JavaScript基础编程练习

三、实验环境

（1）使用的操作系统及版本。

Windows10

（2）使用的编译系统及版本。

VSCode或其他开发工具

四、实验步骤及说明

³任务1用户输入成绩，程序输出相应的成绩等级。

要求成绩必须在0~100之间，否则提示错误并要求重新输入，等级分为优秀、良好、中等、及格和不及格。

如下图所示。

³任务2基本块级元素

³任务3简单计算器

根据提示输入操作数和被操作数（如图8.21所示），然后输入运算符（如图8.22所示），程序计算结果，然后弹出对话框输出表达式和结果，如图8.23所示。

³任务4用户输入最喜欢的一天，程序输出相应的信息。

周一->今天是这个礼拜的第一天，要好好工作。

周二->今天是这个礼拜的第二天，怎么感觉好困。

周三->今天是这个礼拜的第三天，工作好忙啊。

周四->今天是这个礼拜的第四天，怎么还没到周末啊。

周五->今天是这个礼拜的第五天，明天休息，今天晚上可以玩个够了。

周六->今天休息啊，可以好好放松一下了！

周日->今天虽然也休息，但明天开始又要上班了。

不填->为什么不填周几呢？

实验6JavaScript对象

一、实验目的

1.掌握使用数组对象常用方法

2.掌握使用字符串对象常用方法

3.掌握使用日期对象常用方法

4.掌握数学对象常用方法的使用

5.掌握创建自定义对象

二、实验内容

常用JavaScript对象的使用方法

三、实验环境

1.使用的操作系统及版本。

Windows10

2.使用的编译系统及版本。

VSCode或其他开发工具

四、实验步骤及说明

³任务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所示。

提示：

设置2个按钮，分别控制setInterval（）方法的启动与清除，单击”开始”按钮后，页面效果如图9.21所示。

实验7DOM编程

一、实验目的

6.掌握使用window对象属性、方法及事件的使用

7.掌握使用document对象属性和方法的使用

8.掌握使用getElementByID（）方法访问DOM元素

9.掌握使用getElementByName（）方法访问DOM元素

10.掌握使用getElementByTagName（）方法访问DOM元素

二、实验内容

使用Dreamweaver工具练习使用DOM框架中的各元素

三、实验环境

3.使用的操作系统及版本。

Windows10

4.使用的编译系统及版本。

VSCode或其他开发工具

四、实验步骤及说明

³任务1带关闭按钮的广告图片

制作带关闭按钮的广告图片页面，页面效果如图所示。

1.用一个div用于显示广告图片，另一个div用于显示关闭按钮；

2.带关闭按钮图层增加onclick事件用于图层的关闭（隐藏）。

³任务2带按扭的轮换横幅广告

制作带按钮的轮换横幅广告页面，页面效果如图所示。

1、一个div用于存放需轮换的图片，另一个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）使用的操作系统及版本。

Windows10

（2）使用的编译系统及版本。

VSCode或其他开发工具

四、实验步骤及说明