Web前端开发技术实验与实践

上篇 实验（课内练习）

第一部分 HTML基础

实训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

第二部分 页面布局技术

实训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应用

实训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

下篇 实践（课程设计）

第四部分 网站设计

“Web前端开发技术”课程设计 163

一、设计目的 163

二、设计要求 163

三、设计案例 163

任务1 高校网站设计——北京理工大学网站 164

任务2 企业网站设计——同方股份有限公司网站 183

附录 课外拓展训练程序清单 198

参考文献 225

本书第2版是作者在从事多年Web前端开发技术教学研究的基础上，结合多年来几十所高等院校使用反馈的意见与建议改编而成的，同时本书作为“第四届中国大学出版社图书奖（优秀教材二等奖）”获奖教材《Web前端开发技术——HTML、CSS、JavaScript》第2版的配套实验与实践教材。本书分为上、下两篇。上篇为实验（课内练习），包括HTML基础（Web前端开发环境配置与HTML基础、格式化文本、段落与列表、超链接与多媒体文件应用）、页面布局技术（DIV+CSS综合应用、DIV+CSS布局规划、表格布局、框架布局、表单页面设计）、JavaScript应用（JavaScript基础应用、高级应用、事件分析、DOM与BOM应用案例），内含12次实训33个实训项目。下篇为实践（课程设计），包括高校网站、IT企业网站设计与开发两个典型案例。本书内容分布结构合理，实训项目设计由浅入深、循序渐进，实验过程详细、指导深入，实训项目切合实际，真实性强。本书可作为高等学校计算机科学与技术、软件工程、信息管理与信息系统、网络工程、物联网工程、信息科学技术、数字媒体技术及其他文理科相关专业或计算机公共基础的“网页设计与开发”“网页制作”“Web客户端编程”“Web前端开发技术”等课程实验与实践教材，同时也可作为从事Web开发相关工作的工程技术人员的参考书。

结合国内流行的Web前端开发工程师岗位需求，将岗位技能培养和专业知识学习融入到实验项目中去，实现在实践项目掌握与灵活运用。全书根据Web前端开发工程师所必备知识与能力要求统筹规划了12次实验，精心设计了33个实验项目。实验与实践教材在改版中始终坚持“项目化设计、案例式驱动、过程式指导、探究式实践”的原则，合理编排实验内容，循序渐进，并将CSS技术贯穿所有实验项目中，实现HTML、CSS、DIV、JavaScript、DOM完好地融合。通过真实案例深入剖析网页布局的思路和方法，启发式引导学生自主地去完成实验项目。