《WEB前端开发技术》实验教学大纲
课程名称（中文／英文）：网页制作与设计／Webpage making and Design
课程代码： 课程类型：专业基础课
课程性质：必修课 设置类别：非独立设课
课程总学时：64 课程总学分：学分
实验学时： 30 实验学分： 0
适用专业：软件工程本科 开实验学期：三
一、实验教学的目的与基本要求
《网页制作与设计》是一门实践性很强的课程。上机实验是学习和掌握本课程的重要环节。要学好本课程，应在掌握必要的Dreamweaver基础知识基础上，通过上机实验，将课堂所学理论知识与实际应用结合起来，熟练掌握调试程序的方法和编写简单程序的初步能力。
二、实验项目与主要内容
|
序号 |
实 验 项 目 |
主 要 内 容 |
实验性质 |
实验类型 |
学时分配 |
每组人数 |
备注 |
|
1 |
实验一HTML的基本标记
|
1.掌握图像排列操作。 2.学会文字排列。 3.掌握段落排列 |
设计
|
必做 |
4 |
1 |
|
|
2 |
实验二： CSS的基础应用
|
1.掌握css的语法。 2.学会文本的大小和颜色的设置。 |
设计
|
必做 |
4 |
1 |
|
|
3 |
实验三：利用div+css布局网页
|
给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。 给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。 |
设计
|
必做 |
6 |
1 |
|
|
4 |
实验四：CSS样式应用
|
运用背景属性（background）为ul添加大的背景图。 为li添加宽高和边框样式，并设置最后一个li为无边框样式。 |
设计
|
必做 |
4 |
1 |
|
|
5 |
实验五： JS 的基础应用
|
观察效果图8-22不难看出，本案例模拟了一款计算器。其中，前两个文本输入框用于输入操作数，<select>下拉菜单中包含＋、－、×、÷四个运算符，默认为加法运算符。用户输入操作数并选择相应的运算符，然后按下“等号”按钮，这时最后一个文本框中将输出相应的运算结果。 |
设计
|
必做 |
6 |
1 |
|
|
6 |
实验六： JS 的高级应用（事件处理）
|
通过JavaScript实现限时秒杀效果的思路如下：
|
设计
|
必做 |
6 |
1 |
|
三、实验要求
1、要求按照教师的步骤，独立完成实验
2、实验中，注意细节问题，如：做网页之前，一定要建两文件夹，用于存储网页和图片的文件夹，同时建站点
3、实验后要对实验进行总结
四、实验主要仪器设备
微机+windows操作系统+Dreamweaver8.0
五、考核方式及成绩评定标准
1.实验考核内容：
（1）实验课出勤情况，必选实验课学生必须参加实验。
（2）积极主动认真做实验。
（3）实验方案过程结果要正确。
2.成绩评定标准：
优秀：实验中认真操作，实验报告独立完成，字迹工整，实验步骤清晰，数据处理及计算正确，有实验分析和总结（特别是总结出实验中出现的问题及解决的方法等）；对实验过程自己设计的 ，实验步骤自己编写的，只要无根本性错误。
良好：实验中认真操作，实验报告独立完成，字迹工整，实验步骤清晰，数据处理及计算无根本错误。
中等：实验中认真操作，实验报告独立完成，实验步骤清晰，数据处理及计算无根本错误。
及格：实验中基本能认真操作，实验报告按标准格式独立完成，数据处理及计算无根本错误。
不及格：实验中不认真操作，实验报告不完成，抄袭实验报告，字迹潦草，数据处理及计算错误等。
六、实验教材与主要参考资料
1、储久良主编.WEB前端开发技术. 清华大学出版社，2020年出版。