上篇 实验（课内练习） 5
第一部分 HTML基础 5
实训1 Web前端开发环境配置与HTML基础 5
项目1 Web前端开发环境配置 5
项目2 学生简易主页设计 6
项目3 用EditPlus自定义HTML模板 8
项目4 meta标记、body标记属性使用 11
项目5 HTML、CSS、JavaScript综合编程 13
课外拓展训练1 15
实训2 格式化文本、段落与列表 16
项目1 文本与段落标记的应用 16
项目2 高校资讯新闻条目设计 20
项目3 设计制度宣传展板 23
项目4 制作饭店菜单价目表 26
课外拓展训练2 29
实训3 超链接与多媒体文件应用 32
项目1 设计简易灯箱画廊 32
项目2 设计支持音频、视频播放的网页 35
项目3 设计简易网站导航 37
项目4 设计新生课程简介 40
课外拓展训练3 42
第二部分 页面布局技术 47
实训4 DIV+CSS综合运用 47
项目1 设计《中国教育网络》杂志简介 47
项目2 设计《京东商品导购》页面 52
课外拓展训练4 54
实训5 DIV+CSS布局规划 57
项目1 DIV+CSS页面布局设计 57
项目2 设计《2015年CERNET华东北地区年会》网站 61
课外拓展训练5 70
实训6 表格与表格页面布局 73
项目1 设计《网络主题研讨会》日程表 73
项目2 设计简化版“江苏教育电子政务网” 77
课外拓展训练6 80
实训7 框架结构布局规划 82
项目1 设计“中软卓成”产品介绍页面 82
项目2 设计改版的《大众创业 万众创新》网 88
课外拓展训练7 96
实训8 表单页面设计 99
项目1 设计科技工作者建言页面 99
项目2 设计《大学生暑期社会实践调查问卷》 102
课外拓展训练8 106
第三部分 JavaScript应用 111
实训9 JavaScript基础应用 111
项目1 改变新闻网页中的字号 111
项目2 计算任意区间内连续自然数的累加和 115
项目3 消息对话框综合应用 119
课外拓展训练9 122
实训10 JavaScript高级应用 123
项目1 成绩百分制转换为五级制 123
项目2 计算∑N！ 127
项目3 系统常用函数的使用 130
课外拓展训练10 132
实训11 JavaScript事件分析 134
项目1 设计校园办公系统认证页面 134
项目2 鼠标动作捕获与响应 140
课外拓展训练11 143
实训12 DOM与BOM应用案例 145
项目1 设计简易福彩投注程序 145
项目2 设计江苏福彩投注站彩票投注助手 148
课外拓展训练12 155
下篇 实践（课程设计） 163
第四部分 网站设计 163
“Web前端开发技术”课程设计 163
一、设计目的 163
二、设计要求 163
三、设计案例 163
任务1 高校网站设计——北京理工大学网站 164
任务2 企业网站设计——同方股份有限公司网站 183
附录 课外拓展训练程序清单 198
参考文献 225