任务1　创建第一个HTML5网页　1
1.1 任务描述　1
1.2 知识准备　1
1.2.1 认识Web前端开发　1
1.2.2 Web相关概念　2
1.2.3 HTML5概述　4
1.2.4 常用的浏览器　4
1.2.5 网页编辑软件　5
1.3 任务实现　5
任务小结　8
习题1　8
实训1　9
扩展阅读　9
任务2　搭建简单学院网站　11
2.1 任务描述　11
2.2 知识准备　12
2.2.1 HTML5文档的基本结构　12
2.2.2 HTML标记及其属性　13
2.2.3 HTML文本标记　14
2.2.4 HTML列表标记　19
2.2.5 HTML超链接标记　24
2.2.6 HTML图像标记　27
2.3 任务实现　30
2.3.1 创建项目　30
2.3.2 创建网站首页　30
2.3.3 创建学院简介页面　31
2.3.4 创建学院新闻页面　32
2.3.5 创建新闻详情页面　33
任务小结　34
习题2　35
实训2　37
扩展阅读　38
任务3　美化简单学院网站　39
3.1 任务描述　39
3.2 知识准备　40
3.2.1 什么是CSS　40
3.2.2 引入CSS样式　40
3.2.3 CSS常用选择器　44
3.2.4 CSS常用文本属性　50
3.2.5 CSS的高级特性　55
3.3 任务实现　58
3.3.1 美化网站首页　58
3.3.2 美化学院简介页面　59
3.3.3 美化学院新闻页面　61
3.3.4 美化新闻详情页面　62
任务小结　64
习题3　65
实训3　66
扩展阅读　67
任务4　制作学院介绍页面　68
4.1 任务描述　68
4.2 知识准备　69
4.2.1 盒子模型的概念　69
4.2.2 盒子模型的相关属性　70
4.2.3 背景属性　77
4.3 任务实现　86
4.3.1 搭建学院介绍页面结构　86
4.3.2 定义学院介绍页面CSS样式　87
任务小结　88
习题4　89
实训4　90
扩展阅读　91
任务5　制作学院网站导航条　92
5.1 任务描述　92
5.2 知识准备　93
5.2.1 无序列表样式设置　93
5.2.2 超链接样式设置　94
5.2.3 元素的类型与转换　96
5.3 任务实现　99
5.3.1 搭建学院网站导航条结构　99
5.3.2 定义学院网站导航条CSS样式　101
任务小结　103
习题5　103
实训5　104
扩展阅读　105
任务6　制作学院新闻块　106
6.1 任务描述　106
6.2 知识准备　107
6.2.1 元素的浮动　107
6.2.2 元素的定位　110
6.2.3 块元素间的外边距　115
6.3 任务实现　122
6.3.1 搭建学院新闻块页面结构　122
6.3.2 定义学院新闻块CSS样式　124
任务小结　126
习题6　127
实训6　128
扩展阅读　129
任务7　制作学生信息表　130
7.1 任务描述　130
7.2 知识准备　130
7.2.1 表格标记　131
7.2.2 合并单元格　132
7.2.3 使用CSS定义表格样式　134
7.3 任务实现　136
7.3.1 搭建学生信息表结构　136
7.3.2 定义学生信息表CSS样式　138
任务小结　139
习题7　140
实训7　140
扩展阅读　141
任务8
制作学生信息注册表单　142
8.1 任务描述　142
8.2 知识准备　143
8.2.1 认识表单　143
8.2.2 表单标记　143
8.2.3 表单控件　144
8.2.4 使用CSS定义表单样式　150
8.3 任务实现　152
8.3.1 搭建学生信息注册表单页面结构　152
8.3.2 使用CSS定义学生信息注册表单页面样式　155
任务小结　156
习题8　158
实训8　159
扩展阅读　160
任务9　布局学院网站主页　161
9.1 任务描述　161
9.2 知识准备　161
9.2.1 HTML5新增结构标记　162
9.2.2 HTML5+CSS3布局　167
9.3 任务实现　174
9.3.1 搭建布局块结构　174
9.3.2 定义布局块CSS样式　176
任务小结　179
习题9　179
实训9　180
扩展阅读　180
任务10　使用CSS3实现动画效果　182
10.1 任务描述　182
10.2 知识准备　183
10.2.1 过渡属性　183
10.2.2 变形属性　188
10.2.3 动画属性　198
10.3 任务实现　203
10.3.1 搭建照片墙页面结构　203
10.3.2 定义照片墙页面CSS样式　204
任务小结　206
习题10　206
实训10　207
扩展阅读　209
任务11　完整项目：制作学院网站　210
11.1 任务描述　210
11.2 网站规划　211
11.3 效果图设计　212
11.3.1 效果图设计原则　212
11.3.2 效果图设计步骤　213
11.3.3 效果图切片导出网页　218
11.4 制作网站主页　218
11.5 制作新闻列表页　237
11.6 制作新闻详情页　243
11.7 制作视频宣传页　245
11.8 添加网页动态效果　246
任务小结　247
扩展阅读　247
任务12　完整项目：制作化妆品网站　249
12.1 任务描述　249
12.2 网站规划　250
12.2.1 网站需求分析　250
12.2.2 网站的风格定位　251
12.2.3 规划草图　251
12.2.4 素材准备　251
12.3 制作网站主页　252
12.4 制作网站登录页面　267
12.5 制作网站注册页面　270
任务小结　273
扩展阅读　273
参考文献　276