编辑推荐
本书第3版是作者在从事多年Web前端开发技术教学研究的基础上，结合多年来几十所高等院校使用反馈的意见与建议改编而成的，同时本书作为“第四届中国大学出版社图书奖（优秀教材二等奖）”获奖教材《Web前端开发技术——HTML、CSS、JavaScript》第3版的配套实验与实践教材。
目录
目录
上篇实训（课内同步实验）
第一部分HTML基础
实训1Web前端开发环境配置与HTML基础
项目1Web前端开发环境配置
项目2新生简易主页设计
项目3用EditPlus自定义HTML模板
项目4meta标记、body标记属性使用
项目5HTML、CSS、JavaScript综合编程
课外拓展训练1
实训2格式化文本、段落与列表
项目6文本与段落标记的应用
项目7高校资讯新闻条目设计
项目8设计制度宣传展板
项目9设计饭店菜单价目表
课外拓展训练2
实训3超链接与多媒体文件应用
项目10设计简易灯箱画廊
项目11设计支持音频、视频播放的网页
项目12设计简易导航网站
项目13设计专业课程导航
课外拓展训练3
第二部分页面布局技术
实训4DIV+CSS综合运用
项目14设计《中国教育网络》杂志简介
项目15设计京 东商品导购页面
课外拓展训练4
实训5DIV+CSS布局规划
项目16DIV+CSS页面布局设计
项目17设计2015年CERNET华东北地区年会网站
课外拓展训练5
实训6表格与表格页面布局
项目18设计网络主题研讨会日程表
项目19设计简化版江苏教育电子政务网站
课外拓展训练6
实训7表单页面设计
项目20设计科技工作者建言页面
项目21设计大学生暑期社会实践调查问卷页面
课外拓展训练7
第三部分HTML5基础与CSS3应用
实训8HTML5基础与CSS3应用
项目22当 当网企业用户注册页面设计
项目23HTML5结构元素页面布局设计
项目24H3C 新华三集团行业案例CSS3特效页面设计
项目25纯CSS3偏光图像画廊
课外拓展训练8
第四部分JavaScript应用
实训9JavaScript基础应用
项目26改变新闻网页中的字号
项目27计算任意区间内连续自然数的累加和
项目28消息对话框综合应用
课外拓展训练9
实训10JavaScript高级应用
项目29成绩百分制转换为五级制
项目30计算∑N！
项目31系统常用函数的使用
课外拓展训练10
实训11JavaScript事件分析
项目32设计校园办公系统认证页面
项目33鼠标动作捕获与响应
课外拓展训练11
实训12DOM与BOM应用案例
项目34设计简易福彩投注程序
项目35设计江苏福彩投注站彩票投注助手
课外拓展训练12
实训13HTML5高级应用案例
项目36用Web Storage开发当 当网图书评论页面
项目37用HTML5 Canvas开发一个小游戏
项目38用HTML5拖曳开发购物车
项目39使用Web Worker做后台数值(算法)计算
课外拓展训练13
下篇实践（课程设计）
第五部分网 站 设 计
“Web前端开发技术”课程设计
任务1高校网站设计——北京理工大学网站
任务2企业网站设计——同方股份有限公司网站
任务3社会团体网站设计——成都市互联网协会网站
附录A课外拓展训练程序清单
课外拓展训练1
课外拓展训练2
课外拓展训练3
课外拓展训练4
课外拓展训练5
课外拓展训练6
课外拓展训练7
课外拓展训练8
课外拓展训练9
课外拓展训练10
课外拓展训练11
课外拓展训练12
课外拓展训练13
参考文献
序言
前言
本书第3版是作者在从事多年Web前端开发技术教学研究的基础上，结合多年来100多所高等院校使用反馈的意见，适时增加了HTML5和CSS3方面的实训项目，重新整合与创新而成，同时本书作为“第四届中国大学出版社图书奖优秀教材二等奖”获奖教材《Web前端开发技术——HTML5、CSS3、JavaScript》第3版的配套实验与实践教材。
随着高校转型发展的需要，应用技术型大学(学院)需要培养更多与行业对接的应用技术型人才，更加注重毕业生的实践动手能力、工程项目能力及创新能力的培养，所以加强实践环节建设，强化应用技术型高校实践教材建设工作尤为重要。结合IT行业发展的需要和各类高等院校实际教学反馈，编者在保持第2版教材原有特色和编写风格的基础上，根据《Web前端开发技术——HTML5、CSS3、JavaScript》第3版教材知识体系结构，对实验与实践教材的体系结构重新进行适应性修订，增加HTML5及CSS3等方面的实训项目，并对所有的实训项目进行优化，更新部分课外拓展训练项目，以期满足专业教学和实践技能培养的需要。
1. 本书特点
本书结合国内流行的Web前端开发工程师岗位需求，将岗位技能培养和专业知识学习融入实验项目中去，实现在实践项目中掌握与灵活运用。全书根据Web前端开发工程师所必备知识与能力要求统筹规划了13次实训，精心设计了39个经典实训项目。实验与实践教材在改版中始终坚持“项目化设计、案例式驱动、过程式指导、探究式实践”的原则，合理编排实验内容，循序渐进，并将CSS技术贯穿到所有实训项目中，实现HTML5、CSS3、DIV、JavaScript、DOM完美的融合。通过真实案例深入剖析网页布局的思路和方法，启发式引导学生自主地去完成实训项目。
2. 本次修订内容
第3版修订教材共规划了五个部分。第一部分为HTML基础，第二部分为页面布局技术，第三部分为HTML5基础与CSS3应用、第四部分为JavaScript应用，第五部为分网站设计。上篇中13次实训，分别为实训1Web前端开发环境配置与HTML基础； 实训2格式化文本、段落与列表； 实训3超链接与多媒体文件应用； 实训4DIV+CSS综合运用； 实训5DIV+CSS布局规划； 实训6表格与表格页面布局； 实训7表单页面设计； 实训8HTML基础与CSS3应用； 实训9JavaScript基础应用； 实训10JavaScript高级应用； 实训11JavaScript事件分析； 实训12DOM与BOM应用案例； 实训13HTML5高级应用案例。下篇中规划了3个课程设计案例，主要运用HTML5、DIV、CSS3、JavaScript等技术构建网站。
本次修订删除了第2版教材中的实训7“框架结构布局规划”，将第2版中实训8“表单页面设计”改为第3版的实训7“表单页面设计”。增加新实训8“HTML5基础与CSS3应用”和实训13“HTML5高级应用案例”。
3. 主要内容
第一部分HTML基础
通过实训项目讲解Web前端开发环境的配置、HTML基础语法、标记语法； 介绍文本标记、段落与排版标记、列表及多媒体文件加载标记的应用。通过实验项目让学生掌握运用HTML标记如何设计出具有文字、图片、音乐、视频等多种媒体的网站。
第二部分页面布局技术
通过实训项目讲解DIV+CSS在实际工程项目中的应用，让学生学会对商业网站布局进行分析，并能借助DIV+CSS结构实现商业网站的仿真构建； 将表格、表单等传统的页面布局技术与DIV+CSS页面布局技术组合在一起，让学生充分了解页面布局技术的发展过程，理解DIV+CSS布局技术在快速网站构建与网站重构中所起的作用，设计出具有结构、表现相分离的优秀网站。
第三部分HTML5基础与CSS3应用
通过实训项目让学生掌握HTML5和CSS3的新特性。借助于HTML5和CSS3新特性解决Web网站中用户互动页面的设计需要和改善用户体验，结合实训项目的讲解，培养学生用HTML5和CSS3解决实际网站设计中的一些新问题的能力，设计出用户体验更好的优秀网站。
第四部分JavaScript应用
通过实训项目让学生掌握JavaScript基本语法、组成结构、程序结构、函数编程方式； 熟练地运用JavaScript的DOM与BOM技术解决Web网站设计中用户互动页面的设计方法； 学会运用HTML5中的Canvas、Web Storage、Web拖曳和Web Worker等新特性解决实际工程问题中遇到的新问题； 结合Internet上真实商业网站的实例讲解，培养学生分析与解决问题的能力，设计出具有结构与行为相分离的优秀网站。
第五部分网站设计
以高等学校、IT企业和社会团体网站为典型案例，详细介绍每类网站的功能概况、网站页面布局分析、页面布局结构设计、导航菜单设计技术以及网站各页面开发基本要素和设计步骤。
4. 教学资源
(1) 提供实训中项目所需的图像、文字、音视频素材资源。
(2) 提供一套完整的所有实训项目源代码。
(3) 提供3个完整网站设计案例的全套代码。
(4) 提供13次课外拓展训练中的26个项目的源代码和素材资源。
全书再版修订由储久良独立策划、编著、审校。贾波、叶庆生、姜枫、高燕、陈虹、肖振久、陈劲新、刘立军、花丽、赵艳辉、张劳模、于曦、王巍、边玲、胡英等老师对教材的再版工作提出了很多宝贵意见，另外，袁宝华、朱长水、宦臣、沈群等教师参加了本书的编写工作。值此再版之际，对各位老师再次表示感谢！
本书的修订与再版得到清华大学出版社相关人员的大力支持与合作，在此谨表示衷心感谢。本书在修订的过程中，编者参阅了大量的商业网站开发、Web前端开发和JavaScript应用等方面的书籍与网络资源，在此对这些书籍与资源的作者表示感谢。由于移动互联网技术发展迅速，加上编者水平有限，书中的疏漏和不足在所难免，恳请各位专家和读者批评指正。
编者
2018年5月于苏州方圆·云山诗意
文摘
实训3
超链接与多媒体文件应用
【实训目标】
（1） 掌握超链接的标记语法、属性语法，学会为网页添加各种超链接。
（2） 掌握书签链接定义与语法，学会使用书签链接设计Web页面。
（3） 掌握img和marquee标记语法与属性的设置方法。
（4） 掌握embed标记语法与属性的设置方法，为页面添加多媒体文件。
【实训内容】
（1） 使用超链接制作网站导航条。
（2） 使用无序列表制作网站导航条。
（3） 使用书签设计新生课程简介。
（4） 使用embed标记制作带有音乐、视频、动画的网页。
【实训项目】
（1） 设计简易灯箱画廊。
（2） 设计支持音频、视频播放的网页。
（3） 设计简易导航网站。
（4） 设计专业课程导航。
项目10设计简易灯箱画廊
1. 实训要求
(1) 利用超链接和图像标记设计简易灯箱画廊。
(2) 给简易灯箱画廊增加背景音乐效果。
2. 实训内容
(1) 超链接的应用。
(2) 无序列表的使用。
(3) 图像标记的应用。
(4) 背景音乐的应用。
(5) 样式表定义与使用。……
5. 实训过程与指导
编程实现简易灯箱画廊，用鼠标单击任一图像超链接，在底部浮动框架中显示大图像，效果如图131所示，具体步骤如下：
图131简易灯箱画廊
(1) 启动程序，创建HTML文档。启动EditPlus或HBuilder等软件，新建HTML网页，在首行插入注释语句，注明程序名称为prj_3_1.html。……
本书第3版是作者在从事多年Web前端开发技术教学研究的基础上，结合多年来几十所高等院校使用反馈的意见与建议改编而成的，同时本书作为“第四届中国大学出版社图书奖（优秀教材二等奖）”获奖教材《Web前端开发技术——HTML、CSS、JavaScript》第3版的配套实验与实践教材。
目录
目录
上篇实训（课内同步实验）
第一部分HTML基础
实训1Web前端开发环境配置与HTML基础
项目1Web前端开发环境配置
项目2新生简易主页设计
项目3用EditPlus自定义HTML模板
项目4meta标记、body标记属性使用
项目5HTML、CSS、JavaScript综合编程
课外拓展训练1
实训2格式化文本、段落与列表
项目6文本与段落标记的应用
项目7高校资讯新闻条目设计
项目8设计制度宣传展板
项目9设计饭店菜单价目表
课外拓展训练2
实训3超链接与多媒体文件应用
项目10设计简易灯箱画廊
项目11设计支持音频、视频播放的网页
项目12设计简易导航网站
项目13设计专业课程导航
课外拓展训练3
第二部分页面布局技术
实训4DIV+CSS综合运用
项目14设计《中国教育网络》杂志简介
项目15设计京 东商品导购页面
课外拓展训练4
实训5DIV+CSS布局规划
项目16DIV+CSS页面布局设计
项目17设计2015年CERNET华东北地区年会网站
课外拓展训练5
实训6表格与表格页面布局
项目18设计网络主题研讨会日程表
项目19设计简化版江苏教育电子政务网站
课外拓展训练6
实训7表单页面设计
项目20设计科技工作者建言页面
项目21设计大学生暑期社会实践调查问卷页面
课外拓展训练7
第三部分HTML5基础与CSS3应用
实训8HTML5基础与CSS3应用
项目22当 当网企业用户注册页面设计
项目23HTML5结构元素页面布局设计
项目24H3C 新华三集团行业案例CSS3特效页面设计
项目25纯CSS3偏光图像画廊
课外拓展训练8
第四部分JavaScript应用
实训9JavaScript基础应用
项目26改变新闻网页中的字号
项目27计算任意区间内连续自然数的累加和
项目28消息对话框综合应用
课外拓展训练9
实训10JavaScript高级应用
项目29成绩百分制转换为五级制
项目30计算∑N！
项目31系统常用函数的使用
课外拓展训练10
实训11JavaScript事件分析
项目32设计校园办公系统认证页面
项目33鼠标动作捕获与响应
课外拓展训练11
实训12DOM与BOM应用案例
项目34设计简易福彩投注程序
项目35设计江苏福彩投注站彩票投注助手
课外拓展训练12
实训13HTML5高级应用案例
项目36用Web Storage开发当 当网图书评论页面
项目37用HTML5 Canvas开发一个小游戏
项目38用HTML5拖曳开发购物车
项目39使用Web Worker做后台数值(算法)计算
课外拓展训练13
下篇实践（课程设计）
第五部分网 站 设 计
“Web前端开发技术”课程设计
任务1高校网站设计——北京理工大学网站
任务2企业网站设计——同方股份有限公司网站
任务3社会团体网站设计——成都市互联网协会网站
附录A课外拓展训练程序清单
课外拓展训练1
课外拓展训练2
课外拓展训练3
课外拓展训练4
课外拓展训练5
课外拓展训练6
课外拓展训练7
课外拓展训练8
课外拓展训练9
课外拓展训练10
课外拓展训练11
课外拓展训练12
课外拓展训练13
参考文献
序言
前言
本书第3版是作者在从事多年Web前端开发技术教学研究的基础上，结合多年来100多所高等院校使用反馈的意见，适时增加了HTML5和CSS3方面的实训项目，重新整合与创新而成，同时本书作为“第四届中国大学出版社图书奖优秀教材二等奖”获奖教材《Web前端开发技术——HTML5、CSS3、JavaScript》第3版的配套实验与实践教材。
随着高校转型发展的需要，应用技术型大学(学院)需要培养更多与行业对接的应用技术型人才，更加注重毕业生的实践动手能力、工程项目能力及创新能力的培养，所以加强实践环节建设，强化应用技术型高校实践教材建设工作尤为重要。结合IT行业发展的需要和各类高等院校实际教学反馈，编者在保持第2版教材原有特色和编写风格的基础上，根据《Web前端开发技术——HTML5、CSS3、JavaScript》第3版教材知识体系结构，对实验与实践教材的体系结构重新进行适应性修订，增加HTML5及CSS3等方面的实训项目，并对所有的实训项目进行优化，更新部分课外拓展训练项目，以期满足专业教学和实践技能培养的需要。
1. 本书特点
本书结合国内流行的Web前端开发工程师岗位需求，将岗位技能培养和专业知识学习融入实验项目中去，实现在实践项目中掌握与灵活运用。全书根据Web前端开发工程师所必备知识与能力要求统筹规划了13次实训，精心设计了39个经典实训项目。实验与实践教材在改版中始终坚持“项目化设计、案例式驱动、过程式指导、探究式实践”的原则，合理编排实验内容，循序渐进，并将CSS技术贯穿到所有实训项目中，实现HTML5、CSS3、DIV、JavaScript、DOM完美的融合。通过真实案例深入剖析网页布局的思路和方法，启发式引导学生自主地去完成实训项目。
2. 本次修订内容
第3版修订教材共规划了五个部分。第一部分为HTML基础，第二部分为页面布局技术，第三部分为HTML5基础与CSS3应用、第四部分为JavaScript应用，第五部为分网站设计。上篇中13次实训，分别为实训1Web前端开发环境配置与HTML基础； 实训2格式化文本、段落与列表； 实训3超链接与多媒体文件应用； 实训4DIV+CSS综合运用； 实训5DIV+CSS布局规划； 实训6表格与表格页面布局； 实训7表单页面设计； 实训8HTML基础与CSS3应用； 实训9JavaScript基础应用； 实训10JavaScript高级应用； 实训11JavaScript事件分析； 实训12DOM与BOM应用案例； 实训13HTML5高级应用案例。下篇中规划了3个课程设计案例，主要运用HTML5、DIV、CSS3、JavaScript等技术构建网站。
本次修订删除了第2版教材中的实训7“框架结构布局规划”，将第2版中实训8“表单页面设计”改为第3版的实训7“表单页面设计”。增加新实训8“HTML5基础与CSS3应用”和实训13“HTML5高级应用案例”。
3. 主要内容
第一部分HTML基础
通过实训项目讲解Web前端开发环境的配置、HTML基础语法、标记语法； 介绍文本标记、段落与排版标记、列表及多媒体文件加载标记的应用。通过实验项目让学生掌握运用HTML标记如何设计出具有文字、图片、音乐、视频等多种媒体的网站。
第二部分页面布局技术
通过实训项目讲解DIV+CSS在实际工程项目中的应用，让学生学会对商业网站布局进行分析，并能借助DIV+CSS结构实现商业网站的仿真构建； 将表格、表单等传统的页面布局技术与DIV+CSS页面布局技术组合在一起，让学生充分了解页面布局技术的发展过程，理解DIV+CSS布局技术在快速网站构建与网站重构中所起的作用，设计出具有结构、表现相分离的优秀网站。
第三部分HTML5基础与CSS3应用
通过实训项目让学生掌握HTML5和CSS3的新特性。借助于HTML5和CSS3新特性解决Web网站中用户互动页面的设计需要和改善用户体验，结合实训项目的讲解，培养学生用HTML5和CSS3解决实际网站设计中的一些新问题的能力，设计出用户体验更好的优秀网站。
第四部分JavaScript应用
通过实训项目让学生掌握JavaScript基本语法、组成结构、程序结构、函数编程方式； 熟练地运用JavaScript的DOM与BOM技术解决Web网站设计中用户互动页面的设计方法； 学会运用HTML5中的Canvas、Web Storage、Web拖曳和Web Worker等新特性解决实际工程问题中遇到的新问题； 结合Internet上真实商业网站的实例讲解，培养学生分析与解决问题的能力，设计出具有结构与行为相分离的优秀网站。
第五部分网站设计
以高等学校、IT企业和社会团体网站为典型案例，详细介绍每类网站的功能概况、网站页面布局分析、页面布局结构设计、导航菜单设计技术以及网站各页面开发基本要素和设计步骤。
4. 教学资源
(1) 提供实训中项目所需的图像、文字、音视频素材资源。
(2) 提供一套完整的所有实训项目源代码。
(3) 提供3个完整网站设计案例的全套代码。
(4) 提供13次课外拓展训练中的26个项目的源代码和素材资源。
全书再版修订由储久良独立策划、编著、审校。贾波、叶庆生、姜枫、高燕、陈虹、肖振久、陈劲新、刘立军、花丽、赵艳辉、张劳模、于曦、王巍、边玲、胡英等老师对教材的再版工作提出了很多宝贵意见，另外，袁宝华、朱长水、宦臣、沈群等教师参加了本书的编写工作。值此再版之际，对各位老师再次表示感谢！
本书的修订与再版得到清华大学出版社相关人员的大力支持与合作，在此谨表示衷心感谢。本书在修订的过程中，编者参阅了大量的商业网站开发、Web前端开发和JavaScript应用等方面的书籍与网络资源，在此对这些书籍与资源的作者表示感谢。由于移动互联网技术发展迅速，加上编者水平有限，书中的疏漏和不足在所难免，恳请各位专家和读者批评指正。
编者
2018年5月于苏州方圆·云山诗意
文摘
实训3
超链接与多媒体文件应用
【实训目标】
（1） 掌握超链接的标记语法、属性语法，学会为网页添加各种超链接。
（2） 掌握书签链接定义与语法，学会使用书签链接设计Web页面。
（3） 掌握img和marquee标记语法与属性的设置方法。
（4） 掌握embed标记语法与属性的设置方法，为页面添加多媒体文件。
【实训内容】
（1） 使用超链接制作网站导航条。
（2） 使用无序列表制作网站导航条。
（3） 使用书签设计新生课程简介。
（4） 使用embed标记制作带有音乐、视频、动画的网页。
【实训项目】
（1） 设计简易灯箱画廊。
（2） 设计支持音频、视频播放的网页。
（3） 设计简易导航网站。
（4） 设计专业课程导航。
项目10设计简易灯箱画廊
1. 实训要求
(1) 利用超链接和图像标记设计简易灯箱画廊。
(2) 给简易灯箱画廊增加背景音乐效果。
2. 实训内容
(1) 超链接的应用。
(2) 无序列表的使用。
(3) 图像标记的应用。
(4) 背景音乐的应用。
(5) 样式表定义与使用。……
5. 实训过程与指导
编程实现简易灯箱画廊，用鼠标单击任一图像超链接，在底部浮动框架中显示大图像，效果如图131所示，具体步骤如下：
图131简易灯箱画廊
(1) 启动程序，创建HTML文档。启动EditPlus或HBuilder等软件，新建HTML网页，在首行插入注释语句，注明程序名称为prj_3_1.html。……
| ISBN | 7302501742,9787302501749 |
|---|---|
| 出版社 | 清华大学出版社 |
| 作者 | 储久良 |
| 尺寸 | 16 |