WEB前端开发案例教程(HTML5+CSS3)(项目式微课版)

任务1　创建**个HTML5网页　1

1.1　任务描述　2

1.2　知识准备　2

1.2.1　认识Web前端开发　2

1.2.2　Web相关概念　2

1.2.3　HTML5概述　5

1.2.4　常用的浏览器　5

1.2.5　网页编辑软件　6

1.3　任务实现　6

任务小结　8

习题1　9

实训1　10

扩展阅读　10

任务2　搭建简单学院网站　12

2.1　任务描述　13

2.2　知识准备　13

2.2.1　HTML5文档的基本结构　14

2.2.2　HTML标记及其属性　15

2.2.3　HTML文本标记　16

2.2.4　HTML列表标记　22

2.2.5　HTML超链接标记　26

2.2.6　HTML图像标记　29

2.3　任务实现　32

2.3.1　创建网站目录　32

2.3.2　创建网站首页　32

2.3.3　创建学院简介页面　33

2.3.4　创建学院新闻页面　33

2.3.5　创建新闻详情页面　34

任务小结　35

习题2　36

实训2　37

扩展阅读　38

任务3　美化简单学院网站　40

3.1　任务描述　41

3.2　知识准备　41

3.2.1　什么是CSS　41

3.2.2　引入CSS样式　42

3.2.3　CSS常用选择器　46

3.2.4　CSS常用文本属性　52

3.2.5　CSS的高级特性　55

3.3　任务实现　58

3.3.1　美化网站首页　58

3.3.2　美化学院简介页面　59

3.3.3　美化学院新闻页面　60

3.3.4　美化新闻详情页面　61

任务小结　62

习题3　63

实训3　64

扩展阅读　65

任务4　制作学院介绍页面　66

4.1　任务描述　67

4.2　知识准备　67

4.2.1　盒子模型的概念　67

4.2.2　盒子模型的相关属性　69

4.2.3　背景属性　74

4.2.4　不透明度属性　80

4.3　任务实现　81

4.3.1　搭建学院介绍页面结构　81

4.3.2　定义学院介绍页面CSS样式　82

任务小结　82

习题4　83

实训4　85

扩展阅读　85

任务5　制作学院网站导航条　87

5.1　任务描述　88

5.2　知识准备　88

5.2.1　无序列表样式设置　88

5.2.2　超链接样式设置　89

5.2.3　元素的类型与转换　91

5.3　任务实现　94

5.3.1　搭建学院网站导航条结构　94

5.3.2　定义学院网站导航条CSS样式　95

任务小结　96

习题5　96

实训5　97

扩展阅读　98

任务6　制作学院新闻块　99

6.1　任务描述　100

6.2　知识准备　100

6.2.1　元素的浮动　100

6.2.2　块元素间的外边距　104

6.3　任务实现　109

6.3.1　搭建学院新闻块页面结构　109

6.3.2　定义学院新闻块CSS样式　110

任务小结　111

习题6　112

实训6　112

扩展阅读　113

任务7　制作学生信息表　115

7.1　任务描述　116

7.2　知识准备　116

7.2.1　表格标记　116

7.2.2　合并单元格　118

7.2.3　使用CSS定义表格样式　119

7.3　任务实现　121

7.3.1　搭建学生信息表结构　121

7.3.2　定义学生信息表CSS样式　123

任务小结　124

习题7　125

实训7　125

扩展阅读　126

任务8　制作学生问卷调查表单　127

8.1　任务描述　128

8.2　知识准备　128

8.2.1　认识表单　128

8.2.2　表单标记　129

8.2.3　表单控件　129

8.2.4　使用CSS定义表单样式　133

8.3　任务实现　135

8.3.1　搭建学生问卷调查表单页面结构　135

8.3.2　使用CSS定义学生问卷调查表单页面样式　137

任务小结　138

习题8　138

实训8　140

扩展阅读　140

任务9　制作学院风景墙页面　141

9.1　任务描述　142

9.2　知识准备　142

9.2.1　过渡属性　142

9.2.2　变形属性　148

9.3　任务实现　151

9.3.1　搭建学院风景墙页面结构　151

9.3.2　定义学院风景墙页面CSS样式　152

任务小结　153

习题9　154

实训9　155

扩展阅读　156

任务10　布局学院网站主页　157

10.1　任务描述　158

10.2　知识准备　158

10.2.1　单列布局　158

10.2.2　二列布局　160

10.2.3　三列布局　162

10.2.4　通栏布局　164

10.3　任务实现　164

10.3.1　搭建布局块结构　164

10.3.2　定义布局块CSS样式　165

任务小结　168

习题10　169

实训10　169

扩展阅读　170

任务11　完整项目：制作学院网站　171

11.1　任务描述　172

11.2　网站规划　172

11.3　效果图设计　173

11.3.1　效果图设计原则　173

11.3.2　效果图设计步骤　173

11.3.3　效果图切片导出素材　178

11.4　制作网站主页　178

11.5　制作新闻列表页　194

11.6　制作新闻详情页　199

11.7　制作视频宣传页　200

任务小结　202

实训11　202

扩展阅读　203

参考文献　204