《Web前端开发技术》（又名“Web客户端编程”）课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体、物联网工程等专业的一门专业课程，也是其他计算机相关专业的普及型课程，通过对Web前端三大主流开发技术学习和研究，让学生理解和掌握HTML5、CSS3、JavaScript等脚本语言的相关知识，通过项目实践培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。
二、基本理论与实验技术知识
1．在实验操作进行前，应掌握网页设计的实验环境，具有一定的网络知识；
2．掌握网页的设计与制作技术、网站的创建技术以及网站的管理维护；
3．掌握HTML5、CSS3、JavaScript等脚本语言的相关知识
4．每次实验操作前，应精心准备实验操作方案和实验内容，并拟出相应的实验操作步骤，明确实验目的和要求；
5．在实验过程中，服从实验指导教师安排，遵守实验室的各项规章制度，爱护实验仪器设备；
6．实验操作完成后，认真书写实验报告，总结实验经验，分析实验过程中出现的问题。
三、实验方法、特点与基本要求
（1）实验内容的安排由简入深，从基本动画理论和基本动画出发，培养学生的学习兴趣，调动积极性。
（2）强调学生实验前的准备工作，教师在实验课的上一周向学生布置下周实验的内容，让学生有充分的时间准备实验课内容。
（3）课前对实验中的难点进行演示，实验中对学生进行指导，启发学生的手脑并用，培养学生通过实验独立获取知识和操作技能的能力，注重随堂考查，点评学生实验作品和实验报告，不断强化学生的动手能力。
3、指导学生利用各种途径学习查阅资料，综合利用所学知识和技能，正确设计动画作品；勇于探索和实践，发扬团队精神，创造条件完成动画设计与制作全过程，培养学生的创新意识。
4、采用现代教育技术辅助教学，提高教学质量、水平和效率。
四、实验主要仪器设备
微机：
操作系统：WINDOWS 98/2000/XP
CPU：Penutium III以上的处理器
内存：64M以上
硬盘：建议40G以上
显存：16M以上
输入输出设备：键盘、鼠标
主要软件：Adobe Photoshop CS4
五、实验项目的设置与内容提要
|
序 号 |
实验项目 |
主要内容 |
实验性质 |
实验类型 |
学时分配 |
每组人数 |
备注 |
|
1 |
实验1 网页的基础代码练习 |
学会使用文字与段落标记，通过不同样式的列表设计新闻条目、制度宣传展板和饭店菜单价目表。 运用超链接、图像、音视视频、背景音乐等标记设计简易灯箱画廊、媒体播放、简易网站导航、新生课表简介 |
设计 |
必做 |
6 |
|
|
|
2 |
实验2 DIV+CSS综合运用 |
运用CSS样式属性和样式定义设计《中国教育网络》杂志和《京东商品导购》页面。 通过CSS Box的margin、border、padding、content这4个属性，设计常规页面布局和《2015年CERNET华东北地区年会》网站 |
设计 |
必做 |
4 |
|
|
|
3 |
实验3 表格与表单页面设计 |
利用表格对网页进行合理布局，设计《网络主题研讨会》日程表和简化版《江苏教育电子政务网》。 学会使用框架和浮动框架标记设计《中软卓成》产品介绍页面和改版的《大众创业 万众创新》网。 |
设计 |
必做 |
4 |
|
|
|
4 |
实验4 JavaScript应用 |
掌握JavaScript基础、标识符、变量、运算符与表达式的定义，熟练使用消息对话框和自定义函数（如sum(n1,n2)）编写简易JavaScript程序。 。学会使用系统内部函数。 利用事件编程实现校园办公系统认证页面、鼠标动作捕获与响应，学会绑定事件处理程序。 |
设计 |
必做 |
4 |
|
|
|
5 |
实验5 DOM与BOM应用案例 |
利用DOM技术编程实现简易福利彩票投注程序和江苏福彩投注站彩票投注助手。 |
设计 |
选做 |
2 |
|
|
|
6 |
实验6 HTML5高级应用案例 |
根据实训需要选择其中之二进行实训。项目分别为：Web Storage开发当当网图书评论页面、用HTML5 Canvas开发一个小游戏、用HTML5 Canvas开发一个小游戏、使用Web Worker做后台数值(算法)计算。 |
设计 |
选做 |
12 |
|
|
六、实验报告要求
1．实验报告格式
实验报告的格式和内容包括以下几个方面：
实验名称：实验日期：
实验组别： 班级：
实验者：学号：
①实验目的。
②实验设备。包括实验仪器仪表及元器件。
③实验原理。包括原理说明、电路原理图和实验接线图。
④实验内容及步骤。实验者可按实验指导书上的步骤编写，也可根据实验原理由实验者自行编写，但一定要按实际操作步骤详细如实地写出来。
⑤实验数据及处理。根据实验原始记录和实验数据处理要求，画出数据表格，整理实验数据。表中各项数据如是直接测得，要注意有效数字表示；如是计算所得，必须列出所用公式，并以一组数据为例进行计算，其他可直接填入表格。如需绘制曲线图，要按图示法的要求选择合适的坐标和刻度绘图。另外，实验原始数据要附在实验报告后。
⑥实验结果分析、总结、收获体会、意见和建议。
⑦回答思考问题。
2．实验报告要求
实验报告要求：简明扼要，文理通顺，字迹端正，图表清晰，结论正确，分析合理，讨论力求深入。
实验报告书写用纸力求格式正规化、标准化，绘制曲线的坐标纸切忌大小不一。
为便于保存，最好用蓝黑墨水钢笔书写，避免用圆珠笔书写造成油污或数据字迹模糊。
曲线必须注明坐标、量纲、比例。教据计算必须用国际标准单位。
七、考核方式及成绩评定标准
1.实验考核内容：
（1）实验课出勤情况，必选实验课学生必须参加实验。
（2）积极主动认真做实验。
（3）实验方案过程结果要正确。
2.成绩评定标准：
优秀：实验中认真操作，实验报告独立完成，字迹工整，实验步骤清晰，设计思路能较好体现实验目的，有实验分析和总结（特别是总结出实验中出现的问题及解决的方法等）；对实验过程自己设计的 ，实验步骤自己编写的，只要无根本性错误。
良好：实验中认真操作，实验报告独立完成，字迹工整，实验步骤清晰，设计过程无根本错误。
中等：实验中认真操作，实验报告独立完成，实验步骤清晰，设计过程无根本错误。
及格：实验中基本能认真操作，实验报告按标准格式独立完成，设计过程无根本错误。
不及格：实验中不认真操作，实验报告不完成，抄袭实验报告，字迹潦草，设计过程误等。
八、推荐教材和教学参考书目与文献
推荐教材：1、储久良主编.Web前端开发技术实验与实践——HTML5、CSS3、JavaScript（第3版）.清华大学出版社,2018-07
参考教材：2、郑丽萍主编.Javascript与jQuery案例教程.高等教育出版社,2018-05
3、聂常红主编.HTML+CSS+JavaScript Web前端开发技术.人民邮电出版社,2017年09月
大纲撰写人：关南宝
大纲审阅人：
教学院长（主任）：
制订日期：2021年 9月 5 日