本教材秉承“项目导向、任务驱动”的编写模式，为此，我们设计了“蓝梦音乐网”和“时空电影网”两个项目，一个项目用于教师引导训练，课程的知识点和技能点都融在项目的实现中，讲练结合；一个项目用于学生独立训练，巩固所学知识和技能。本教材包含的主要知识点：网站的基础知识、网页的基本标签和常用的HTML5标签、网页表格和表单、CSS、DIV、网页框架和移动端网页。本教材按照“理论学习—知识总结—上机操作—课后习题”这一思路进行授课。通过案例要达到的学习目的与涉及的相关知识点，使学习目标更加明确。根据目前国内网页UI前端设计的发展趋势和我院物联网应用技术专业的教学计划，本课程采用案例详尽分析与设计方法来完成本课程的教学任务。

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

周庞荣，湘潭大学计算机技术领域工程硕士，副教授，信息系统项目管理师。长期从软件技术专业教育教学工作，主要讲授讲授《AsP.Net网站设计》、《C#程序设计》、《HTML商业网站设计与制作》、《Java编程基础》。在国家级及省级刊物上发表《高职软件技术专业实践教学体系构建》、《“梯进式软件工厂”教学模式初探》、《区域共享型软件技术实训基地建设思考》、《“软件工厂”综合实训模式》《基于“项目导向”课程设计》、《基于SSH框架的钢铁交易平台的设计与实现》等多篇专业论文，主持并已结题“十二五”湖南省教育厅规划课题《校路共建高职铁路特有专业生产性实训基地的研究》、2017年湖南省教学成果奖二等奖《基于校企合作共同体的轨道交通通信信号专业群建设模式创新与实践》，排名第二。顾挺，1987年出生，湖南湘潭人，现为湖南厚溥教育科技有限公司株洲区学术经理，湖南铁路科技职业技术学院软件技术专业校企合作项目负责人，湖南厚溥教育科技有限公司质量中心专业研究员，曾就职于北京中软集团担任项目经理，参与开发深圳地质灾害预警预报系统、北京电网OA办公自动化系统、南京军区心理工作平台等多个软件开发项目。目前主要从事计算机软件技术、物联网应用技术的教学与研究工作。

本教材既要注重理解基本知识，也要注重培养软件设计的基本技能。实践环节是巩固所学理论知识、使理论与实际相结合、提高程序设计能力和计算机操作能力的重要环节。上机实验和课程设计等都是加强程序设计训练所必需的。