前言

网站开发技术更新非常快，特别是HTML5技术推出之后，网站开发技术从电脑端开始转向移动端，“移动优先”的理念开始深入人心。在技术更新大潮下，很多学校开设的网站开发技术课程却停滞不前。如何紧跟时代步伐，将新技术和企业标准快速引入课堂，并适用于职业教育，是我们急需解决的问题。

本人在毕业后一直从事网站开发技术的教学工作，2014年开始负责我校世界技能大赛网站设计项目的相关工作并持续至今，虽然没有取得斐然的成绩，但通过大赛的锤炼，却让我对网站设计的课程有了更多的想法。

在2015年，本人作为我校“HTML5+CSS3网页布局”课程改革项目的负责人，承担起这门课程的改革工作，并斗胆编撰成书，与大家分享，以期起到抛砖引玉之功效，让更多的同行编写出更加优秀的教材以服务于职教学子。

本书从前端工程师岗位出发，以项目引领全书，以任务驱动知识和技能，聚焦HTML5+CSS3网页布局技术，Axure、PS和JavaScript技术不在本书中涉及。

本书具有以下特点：

1.立足基础、企业标准、接轨世界

本书以“立足基础、企业标准、接轨世界”为目标，采用学习领域课程开发方法，通过分析确定前端工程师岗位设计、布局和交互制作的工作能力转化为学习领域，本教材将其中的“网页布局能力”（学习领域）转化为本书的“学习内容”，同时结合世界技能大赛题目所要求的知识、标准和技术等进行整合，完成代表性工作任务列表。

世界技能大赛的题目要求必须来自企业的实际工作任务，紧贴企业需求和最新技术标准。把世界技能大赛标准引入课堂，既符合我们工学结合一体化和工作过程系统化课程改革要求，又为我们的教材快速达到企业行业标准并接轨世界提供了捷径。

2.“一往情深”的项目教材

教材通过一个项目工作情景统领全书，通过各项目需求将所有的工作任务进行串联。

项目和情景设计为：随着高考平行志愿的执行，华南工业大学信息工程系招生就业办公室希望能够制作一个网页，通过扫码的方式来宣传其系专业学科及招生情况，以期能够吸引更多优秀的毕业生报考。项目1和项目2要求为手机端而设计，项目3要求变更为响应式设计，项目4要求使用Bootstrap框架提高开发效率。

3.项目引领、任务驱动

在知识和技能编排上，项目1、2为HTML5和CSS3基础性知识，包括开发环境的配置、HTML5和CSS3知识、CSS2和CSS3中浏览器普遍兼容的知识及常规的网页布局知识；项目3是对基础知识的提升，包括栅格系统、媒体查询、网页响应式布局和优化、浏览器兼容相关知识，要求能够达到企业行业标准和世界技能大赛试题中的基础要求；项目4是应用型知识，包含Bootstrap开源框架、Font Awesome开源图标型字体等开源资源的应用知识，适用于企业快速迭代的高效率开发需求。在各项目中还加入了商用还不是很成熟的新知识新技术（书本中带*的任务），包含CSS3中现阶段应用较少、浏览器兼容不完善，但在技术长远发展中将被应用的新技术、新知识，目的是对接世界技能大赛网站设计试题的高级技术要求，同时为学生的终身学习打下基础。

本书为每个项目设置了项目简介、项目情景、项目分析、能力目标作为项目的引入，在每个任务中设置学习目标、任务描述、知识学习（知识探究学习+学习工作页）与课堂练习、任务实施、任务回顾、任务拓展6个环节。

4.授人以渔

在专业能力上，我们寄希望于立足技术基础，同时按企业行业标准要求学生，在充分考虑学生实际情况的同时考虑学生的发展和技术的更新进程，将世界技能大赛网站设计项目对技术和能力要求与课程知识进行对接。

在社会和方法能力上，我们期望通过以“项目引领、任务驱动、工学结合、赛学互促”的方式让学生在课堂中以“行动导向”方式解决实际的项目问题，同时在任务中通过设置“知识学习与课后练习”提高学生的知识自主学习能力，强化基础，通过设置“任务拓展”提高知识的迁移应用能力等。

通过这样的设计，我们期望大部分学生都能够掌握网页布局基础技术，并运用开源框架开发出能达到企业标准的网页，部分学习能力强的学生能够在学习最新的技术后达到世界技能大赛网站设计项目对布局能力的要求，并为其后继的终身技术学习打下基础。

本书由谢冠怀、林晓仪任主编，武龙、林程华任副主编。具体分工如下：谢冠怀负责全书的框架制定、统稿和项目4全部、项目3任务3.5的编写工作，林晓仪参与全书框架制定并负责项目1和项目3（任务3.1和3.4）的编写工作，武龙负责项目2和项目3（任务3.2和任务3.3）的编写工作，林程华与王令、但金燃参与各任务的教学实验编写工作。

由于编者水平有限，加之时间仓促，书中难免存在疏漏和不足之处，恳请各位读者批评指正（编者邮箱：xieguanhuai@qq.com）。本书资源丰富，课件、素材、教案可在http://www.tdpress.com/51eds/下载。

谢冠怀

2017年于广州