本书以培养网页设计与制作开发能力为目标，采用校企双元开发，以项目为载体贯穿知识点和技能点，借助企业一线最新任务案例，并融入“1+X”Web前端开发职业技能等级证书所考知识点，为考证提供支持。
按照工作系统化理念，梳理典型工作任务，结合“1+X”相应证书要求，梳理职业能力，并将职业能力模块化，构建五个项目。项目下包含该项目涉及的职业能力，并将职业能力用具体的任务体现，最后是该项目的实施步骤。
本书体现以学生为主体，提供每个项目实施关键代码，并设计项目任务实施记录单，鼓励学生记录、反思，进而激发学生的创新实践能力。同时针对关键技能点，插入视频二维码，实现手机随扫随学。
本书可作为高等职业学校“网页设计与制作”课程的教材，也可作为“1+X”Web前端开发职业技能等级证书的参考教材。

项目1 简单静态页面制作
1.1 项目目标
1.2 项目描述
1.3 相关知识
1.3.1 开发工具HBuilder的使用
1.3.2 文本、图像、超链接等标签的使用
1.3.3 列表标签的使用
1.3.4 表格标签的基本用法
1.3.5 表格标签的进阶用法
1.3.6 表单标签的使用
1.3.7 常见表单元素的使用
1.4 项目实施
1.4.1 需求分析
1.4.2 项目组织
1.4.3 项目流程
习题
项目2 使用CSS设计页面样式
2.1 项目目标
2.2 项目描述
2.3 相关知识
2.3.1 CSS样式理论
2.3.2 CSS样式基本选择器
2.3.3 CSS样式复合选择器
2.3.4 使用CSS设置文本
2.3.5 使用CSS设置图片效果
2.3.6 使用CSS美化表格
2.3.7 使用CSS美化表单
2.3.8 使用CSS美化列表
2.3.9 Hack原理在CSS样式中的应用
2.4 项目实施
2.4.1 需求分析
2.4.2 项目组织
2.4.3 项目流程
习题
项目3 盒子模型和元素定位
3.1 项目目标
3.2 项目描述
3.3 相关知识
3.3.1 盒子模型
3.3.2 标准文档流
3.3.3 元素定位
3.4 项目实施
3.4.1 需求分析
3.4.2 项目组织
3.4.3 项目流程
习题
项目4 网页布局
4.1 项目目标
4.2 项目描述
4.3 相关知识
4.3.1 了解DIV+CSS
4.3.2 DIV+CSS布局思路
4.3.3 常见布局
4.3.4 DIV+CSS布局的应用
4.3.5 使用iframe标签实现页面布局重构
4.4 项目实施
4.4.1 需求分析
4.4.2 项目组织
4.4.3 项目流程
习题
项目5 CSS3新特性灵动页面
5.1 项目目标
5.2 项目描述
5.3 相关知识
5.3.1 CSS3简介
5.3.2 CSS3新增选择器
5.3.3 CSS3新增背景属性
5.3.4 CSS3新增字体文本属性
5.3.5 CSS3新增盒子模型属性
5.3.6 CSS3动画
5.4 项目实施
5.4.1 需求分析
5.4.2 项目组织
5.4.3 项目流程
习题
项目四 Web前端开发职业技能等级证书模拟题库
“1+X”Web前端初级题目
参考文献