本书以“项目导向、任务驱动”的编写模式组织教学内容。在整本书中，设计了“蓝梦音乐网”和“时空电影网”两个项目，其中“蓝梦音乐网”项目用于教师引导训练，设计了初识网页，使用网页标签，使用表格、表单，使用CSS美化网页，使用DIV+CSS进行页面设计，使用网页定位与JavaScript特效，移动端网页制作和使用框架8个单元，每个单元设计若干个引导训练，把课程的知识点和技能点都融在引导训练的实现中；“时空电影网”项目用于学生独立训练，让学生巩固所学知识和技能。
本书结构新颖，层次分明，内容丰富，按照知识逻辑和认知规律合理安排教学单元，充分考虑了高职高专学生的特点，问题牵引，讲练结合，让读者在轻松的氛围中掌握网站前端开发的知识、技巧和方法。
本书适合作为高职高专院校学生学习HTML5网页制作的教材，也可作为HTML5网页制作自学人员的参考书。

HTML 5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言，它被认为是互联网的核心技术之一。所以，目前HTML５的应用飞速发展，使用十分广泛，是开发Web前端的基础。
本书围绕Web开发职业岗位能力进行设计，按照岗位要求罗列知识点和技能点。按照“项目导向、任务驱动”模式组织内容，依据学生认知规律将每个项目分解成若干任务，每个任务为一个网页，把学生需要掌握的知识点和技能点融合在任务的实现中。
本书具有如下特点：
1.面向应用，贴近实际。本书在整体设计上，按照商业网站的需求选取教学项目，设计教学任务；在网页设计开发技术上，选择DIV+CSS技术进行页面设计，实现结构和表现分离，按照网页设计主流模式进行设计；在网页运行设备上，既介绍了PC端网页制作，又介绍了移动端网页制作。
2. 项目导向，任务驱动。学习本书的目的是引导学生独立开发一个静态的商业网站。为达到该目的，编者设计了一个引导训练项目——蓝梦音乐网，围绕该项目，设计了一系列任务，将所需的知识点和技能点融合在任务中。设计了一个独立训练项目——时空电影网，在学完引导训练任务的基础上，独立完成一个类似任务，巩固课堂所学。
3.层层递进，增量编码。在整本书的设计上，按照知识逻辑和认知规律设计了8个单元，每个单元都设计了一至两个任务，完成一至两个网页。在学生最初的学习中，设计出来的网页布局有点混乱、界面有点粗糙，随着知识技能的积累，设计出来的网页布局越来越整洁，界面越来越美观。在每个任务的实现上，按照网页开发逻辑，设计了若干步骤，每一步都要完成一定数量的代码，随着步骤的推进，代码不断增加，直至完成整个任务。随着任务的推进，项目中页面的数目不断增加，直至完成整个项目。
 4．编码规范，习惯良好。编者在任务设计中，注重命名和编码规范，注重学生学习习惯的培养，为学生成为一个合格的网页制作者打下坚实的基础。
5.立体呈现，多措并举。利用云课堂智慧职教平台，发布本书配套教学课件、微课和学习任务，学生利用这些资源可以自学，也可以预习；利用开发的题库，学生在线测试，可以检测自己的学习效果；利用项目的基础资源和页面效果图，学生独立制作网页，检验自己制作网页的能力。
本书由湖南铁路科技职业技术学院和湖南厚溥科技有限公司合作编写。湖南铁路科技职业技术学院周庞荣、湖南厚溥科技有限公司顾挺任主编，全书由湖南厚溥科技有限公司刘军主审。参与本书编写的人员还有湖南厚溥科技有限公司高子童，长沙商贸旅游职业技术学院肖玉朝，三亚航空旅游职业学院刘夏，张家界航空职业技术学院谢厚亮、曾永和，湖南软件职业学院刘琼，湖南机电职业技术学院李平、宋阳，常德职业技术学院何亚、胡常乐。
由于编者水平有限，加之时间仓促，书中难免有疏漏和不足之处，敬请读者批评指正。

编者
2020年6月

单元1初识网页 1
引导训练制作“蓝梦音乐网”欢迎页面 1
独立训练制作“时空电影网”欢迎页面 8
单元练习 10
单元2使用网页标签 11
引导训练2-1制作“蓝梦音乐网”音乐节网页 11
独立训练2-1制作“时空电影网”电影节页面 20
引导训练2-2美化“蓝梦音乐网”音乐节页面 23
独立训练2-2美化“时空电影网”电影节页面 35
单元练习 37
单元3使用表格、表单 38
引导训练3-1制作“蓝梦音乐网”歌手网页 38
独立训练3-1制作“时空电影网”中国电影网页 47
引导训练3-2制作“蓝梦音乐网”注册页面 49
独立训练3-2制作“时空电影网”注册页面 65
强化训练 67
单元练习 68
单元4使用CSS美化网页 69
引导训练4-1使用CSS美化“蓝梦音乐网”音乐节网页 69
独立训练4-1美化“时空电影网”电影节网页 81
引导训练4-2美化“蓝梦音乐网”注册页面 83
独立训练4-2美化“时空电影网”注册页面 91
强化训练 94
单元练习 94

单元5使用DIV+CSS进行页面设计 95
引导训练5-1设计“蓝梦音乐网” 首页布局 95
独立训练5-1制作“时空电影网”首页网页布局 112
引导训练5-2制作“蓝梦音乐网”首页 114
独立训练5-2制作“时空电影网”首页页面 129
强化训练 131
单元练习 132
单元6使用网页定位与JavaScript特效 133
引导训练制作“蓝梦音乐网”滑动轮播特效 133
独立训练美化“时空电影网”首页轮播特效 142
强化训练 144
单元练习 145
单元7移动端网页制作 146
引导训练制作移动端“蓝梦音乐网”首页 146
独立训练制作移动端“时空电影网”主页网面 165
单元练习 168
单元8使用框架 169
引导训练制作“蓝梦音乐网”后台管理系统框架 169
独立训练制作“时空电影网”后台管理系统框架 180
单元练习 182
参考文献 182

周庞荣 湖南铁路科技职业技术学院 顾挺 湖南厚溥教育科技有限公司

本教材 按照“理论学习—知识总结—上机操作—课后习题”这一思路进行授课。通过案例要达到的学习目的与涉及的相关知识点，使学习目标更加明确。
根据目前国内网页UI前端设计的发展趋势和我院物联网应用技术专业的教学计划，本课程采用案例详尽分析与设计方法来完成本课程的教学任务。