本书是“十三五”“十四五”职业教育国家规划教材，是适切线上线下混合式教学而推出的新形态一体化教材。全书以企业开发的学校真实网站为载体，将学校网站项目拆分为10个任务，按照“任务描述→知识准备→任务实现→实训”序化教材内容，采用项目贯穿、任务驱动的方式组织学习，通过任务实现学习HTML5语言、CSS3层叠样式表、盒子模型、表格与表单、HTML5+CSS3布局等网站开发技术。在关键知识点、任务实现及实训中嵌入二维码，供学生课前或课后观看。
本书可以作为中职或高职院校计算机相关专业“Web前端开发”或“网页设计”课程的教材，也可以作为Web前端开发爱好者的学习参考书。

任务1 创建第一个HTML5网页
1.1 任务描述
1.2 知识准备
1.2.1 认识Web前端开发
1.2.2 Web相关概念
1.2.3 HTML5概述
1.2.4 常用的浏览器
1.2.5 网页编辑软件
1.3 任务实现
任务小结
习题
实训
扩展阅读
任务2 搭建简单学院网站
2.1 任务描述
2.2 知识准备
2.2.1 HTML5文档的基本结构
2.2.2 HTML标记及其属性
2.2.3 HTML文本标记
2.2.4 HTML列表标记
2.2.5 HTML超链接标记
2.2.6 HTML图像标记
2.3 任务实现
2.3.1 创建网站目录
2.3.2 创建网站首页
2.3.3 创建学院简介页面
2.3.4 创建学院新闻页面
2.3.5 创建新闻详情页面
任务小结
习题
实训
扩展阅读
任务3 美化简单学院网站
3.1 任务描述
3.2 知识准备
3.2.1 什么是CSS
3.2.2 引入CSS样式
3.2.3 CSS常用选择器
3.2.4 CSS常用文本属性
3.2.5 CSS的高级特性
3.3 任务实现
3.3.1 美化网站首页
3.3.2 美化学院简介页面
3.3.3 美化学院新闻页面
3.3.4 美化新闻详情页面
任务小结
习题
实训
扩展阅读
任务4 制作学院介绍页面
4.1 任务描述
4.2 知识准备
4.2.1 盒子模型的概念
4.2.2 盒子模型的相关属性
4.2.3 背景属性
4.2.4 不透明度属性
4.3 任务实现
4.3.1 搭建学院介绍页面结构
4.3.2 定义学院介绍页面CSS样式
任务小结
习题
实训
扩展阅读
任务5 制作学院网站导航条
5.1 任务描述
5.2 知识准备
5.2.1 无序列表样式设置
5.2.2 超链接样式设置
5.2.3 元素的类型与转换
5.3 任务实现
5.3.1 搭建学院网站导航条结构
5.3.2 定义学院网站导航条CSS样式
任务小结
习题
实训
扩展阅读
任务6 制作学院新闻块
6.1 任务描述
6.2 知识准备
6.2.1 元素的浮动
6.2.2 块元素间的外边距
6.3 任务实现
6.3.1 搭建学院新闻块页面结构
6.3.2 定义学院新闻块CSS样式
任务小结
习题
实训
扩展阅读
任务7 制作学生信息表
7.1 任务描述
7.2 知识准备
7.2.1 表格标记
7.2.2 合并单元格
7.2.3 使用CSS定义表格样式
7.3 任务实现
7.3.1 搭建学生信息表结构
7.3.2 定义学生信息表CSS样式
任务小结
习题
实训
扩展阅读
任务8 制作学生问卷调查表单
8.1 任务描述
8.2 知识准备
8.2.1 认识表单
8.2.2 表单标记
8.2.3 表单控件
8.2.4 使用CSS定义表单样式
8.3 任务实现
8.3.1 搭建学生问卷调查表单页面结构
8.3.2 使用CSS定义学生问卷调查表单页面样式
任务小结
习题
实训
扩展阅读
任务9 制作学院风景墙页面
9.1 任务描述
9.2 知识准备
9.2.1 过渡属性
9.2.2 变形属性
9.3 任务实现
9.3.1 搭建学院风景墙页面结构
9.3.2 定义学院风景墙页面CSS样式
任务小结
习题
实训
扩展阅读
任务10 布局学院网站主页
10.1 任务描述
10.2 知识准备
10.2.1 单列布局
10.2.2 二列布局
10.2.3 三列布局
10.2.4 通栏布局
10.3 任务实现
10.3.1 搭建布局块结构
10.3.2 定义布局块CSS样式
任务小结
习题
实训
扩展阅读
任务11 完整项目：制作学院网站
11.1 任务描述
11.2 网站规划
11.3 效果图设计
11.3.1 效果图设计原则
11.3.2 效果图设计步骤
11.3.3 效果图切片导出素材
11.4 制作网站主页
11.5 制作新闻列表页
11.6 制作新闻详情页
11.7 制作视频宣传页
任务小结
实训
扩展阅读
参考文献