Web前端开发案例教程 HTML5+CSS3微课版

第 1章

Web前端开发概述 1

1.1 认识Web前端开发 1

1.2 Web相关概念 1

1.3 HTML5概述 3

1.4 常用的浏览器 3

1.5 创建第 一个HTML5页面 4

1.5.1 Dreamweaver工具简介 4

1.5.2 案例：创建第 一个HTML5

网页 4

本章小结 6

实训1 6

第 2章

HTML5基础 8

2.1 案例：简单学院网站 8

2.2 知识准备 9

2.2.1 HTML5文档的基本结构 9

2.2.2 HTML标记及其属性 10

2.2.3 HTML文本标记 11

2.2.4 HTML列表标记 16

2.2.5 HTML超链接标记 20

2.2.6 HTML图像标记 23

2.3 案例实现 25

2.3.1 创建站点 25

2.3.2 创建首页 27

2.3.3 创建学院简介页面 28

2.3.4 创建学院新闻页面 28

2.3.5 创建专业介绍页面 29

本章小结 30

实训2 30

第3章

HTML5新增页面元素 32

3.1 案例：旅游部落网页 32

3.2 知识准备 33

3.2.1 HTML5结构元素 33

3.2.2 HTML5分组元素 37

3.2.3 HTML5页面交互元素 38

3.2.4 HTML5文本语义元素 40

3.3 案例实现 42

3.3.1 创建站点 42

3.3.2 页面分析 43

本章小结 45

实训3 45



第4章

CSS3基础 47

4.1 案例：学院新闻详情页面 47

4.2 知识准备 48

4.2.1 初识CSS 48

4.2.2 CSS发展历史 48

4.2.3 引入CSS样式 48

4.2.4 CSS基础选择器 52

4.2.5 CSS常用文本属性 57

4.2.6 CSS的高级特性 62

4.3 案例实现 63

4.3.1 创建新闻详情页面 63

4.3.2 定义CSS样式 64

本章小结 65

实训4 65



第5章

CSS3高级选择器 66

5.1 案例：景点介绍页面 66

5.2 知识准备 66

5.2.1 属性选择器 67

5.2.2 关系选择器 68

5.2.3 结构化伪类选择器 69

5.2.4 伪元素选择器 74

5.3 案例实现 75

本章小结 78

实训5 78



第6章

CSS3盒子模型 79

6.1 案例：学院简介页面 79

6.2 知识准备 80

6.2.1 盒子模型的概念 80

6.2.2 盒子模型的相关属性 81

6.2.3 CSS设置背景 90

6.2.4 元素的类型与转换 98

6.2.5 块元素间的外边距 100

6.3 案例实现 101

6.3.1 制作页面结构 101

6.3.2 添加CSS样式 103

本章小结 103

实训6 104



第7章

列表与超链接 105

7.1 案例：通知公告块与学院网站

导航条 105

7.2 知识准备 106

7.2.1 列表样式设置 106

7.2.2 超链接样式设置 108

7.3 案例实现 109

7.3.1 制作通知公告块 109

7.3.2 制作学院网站导航条 112

本章小结 113

实训7 114



第8章

表格与表单 115

8.1 表格案例：学生信息表 115

8.2 表格相关知识 116

8.2.1 表格标记 116

8.2.2 合并单元格 117

8.2.3 使用CSS设置表格样式 118

8.3 表格案例实现 120

8.3.1 学生信息表的页面结构 120

8.3.2 添加CSS样式 122

8.4 表单案例：用户注册表单 122

8.5 表单相关知识 123

8.5.1 认识表单 123

8.5.2 表单标记 123

8.5.3 表单控件 124

8.5.4 使用CSS设置表单样式 126

8.6 表单案例实现 129

8.6.1 用户注册表单的页面结构 129

8.6.2 添加CSS样式 131

本章小结 132

实训8 132



第9章

HTML5 CSS3布局

网页 134

9.1 案例：学院网站主页布局 134

9.2 知识准备 135

9.2.1 元素的浮动 135

9.2.2 元素的定位 140

9.2.3 元素的overflow属性 145

9.2.4 HTML5 CSS3布局 147

9.3 案例实现 153

9.3.1 制作页面结构 153

9.3.2 添加CSS样式 154

本章小结 157

实训9 157



第 10章

CSS3动画 159

10.1 过渡属性 159

10.2 变形属性 159

10.3 动画属性 160

10.4 案例 162

10.4.1 图片遮罩效果 162

10.4.2 图片翻转效果 163

10.4.3 照片墙效果 164

10.4.4 魔方效果 166

本章小结 168

实训10 168



第 11章

完整案例：学院网站设计与

制作 170

11.1 信息学院网站描述 170

11.2 网站规划 171



11.3 效果图设计 172

11.3.1 效果图设计原则 172

11.3.2 效果图设计步骤 173

11.3.3 效果图切片导出网页 178

11.4 网站主页设计 178

11.5 新闻列表页设计 194

11.6 制作新闻详情页面 200

11.7 制作视频宣传页面 202

11.8 添加网站中的JavaScript

或jQuery脚本 203

本章小结 205



第 12章

完整案例：化妆品公司网站设计与制作 206

12.1 化妆品公司网站描述 206

12.2 网站规划 208

12.2.1 网站需求分析 208

12.2.2 网站的风格定位 208

12.2.3 规划草图 208

12.2.4 素材准备 209

12.3 网站主页设计 209

12.4 网站其他页设计 223

本章小结 223

参考文献 224