（一）教材简介

本教材以培养能从事Web前端开发工作的技术技能型人才为目标进行编写。将“Web前端开发岗位技能要求、职业标准、工作过程和项目”作为教材主体内容，以职业场景、职业技能、知识能力为主要框架结构，以解决实际项目的思路和操作为主线，分网站开发入门、HTML结构化语言、CSS表现技术、JavaScript交互技术、综合实训5个单元全面详细的介绍了前端开发技术。

（二）教材特色及创新点

       1、校企“双元”合作

      本教材的项目由企业工程师遵守项目实施情况提供原型，在校教师按高职学生认知特点重构项目教学过程，校企双方专家共同审定。在使用过程中，校企保持联系，实时调整、更新教材内容。

      2、任务驱动，项目教学，兼具知识的系统性和完整性

      采用“任务驱动，项目教学”编写思路，以一个完整网站项目为主线，围绕企业关键岗位设计了12个任务，按照“任务情景”→“任务分析”→“知识准备”→“任务实现”的梯次组织与安排教学内容，兼顾知识的系统性和完整性，实现“知识-能力”的双向循环，提高学生以知识解决问题的实践动手能力。

      3、行业特色鲜明，及时将新技术纳入教材内容

      以工业和信息化部颁布的Web前端开发职业技能标准为导向，及时将行业新技术纳入教材内容，融合了Web页面制作基础、HTML5+CSS3­­开发基础与应用、JavaScript程序设计等课程部分内容。

      4、适合“1+X”技能等级证书的培训使用

      本教材编写内容覆盖“Web前端开发”技能等级证书中的“静态网站搭建”工作领域考试内容，与Web前端开发“1+X”证书制度对人才培养要求相契合，可以作为该证书的培训教材使用。

（三）配套资源

1.突破难点的微课

对书中难度较大的理论知识点制作了微课进行介绍，并嵌入教材。

2.出版社网站平台提供基本资源

包括：课程标准、教学设计、PPT课件、教学案例源码、教学项目源码等。

　

单元一　网站前端开发基础
项目一　网站开发入门　3
任务一　学习网站开发基础　4
任务二　了解前端开发技术　8
任务三　在HBuilder中创建站点　11
任务四　使用常用浏览器调试网页　15
单元二　HTML结构化语言
项目二　HTML应用———“学校概况”结构页设计　25
任务一　学习HTML5基础　26
任务二　在网页中添加文本　29
任务三　制作图文混排效果　35
任务四　使用HTML5创建超链接　39
单元三　CSS表现技术
项目三　CSS表现技术基础知识　47
任务一　了解CSS3基本语法及应用　48
任务二　使用CSS3选择器　52
任务三　了解CSS3层叠性、继承性与优先级　62
项目四　CSS3应用———“学校概况”页面样式设计　67
任务一　使用CSS3设计背景　68
任务二　使用CSS3设计文字效果　74
任务三　使用CSS3设置列表样式　85
项目五　HTML5布局———新城实验小学“首页”设计　92
任务一　设计首页整体布局　93
任务二　设计主体内容部分布局　103
任务三　制作头部和版权部分页面　112
任务四　制作主体内容部分页面　128
项目六　HTML5表格与表单———“用户注册”页面设计　138
任务一　设计表格布局　139
任务二　设计与美化表单　145
单元四　JavaScript交互技术
项目七　JavaScript交互技术基础知识　161
任务一　学习JavaScript基础　162
任务二　利用JavaScript进行用户注册信息验证　175
项目八　JavaScript应用实例1　194
任务设　计“校园风采”模块焦点图轮播特效　195
项目九　JavaScript应用实例2　208
任务设计　“新闻动态/通知公告”Tab面板　209
单元五　综合实训———企业网站设计
实训一　策划网站　223
实训二　设计网站首页　224
实训三　设计新闻列表页　248
实训四　设计新闻内容页　255
参考文献　258