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

图书标准信息

• 作者 李志云； 董文华
• 出版社 人民邮电出版社
• 出版时间 2019-11
• 版次 1
• ISBN 9787115524966
• 定价 49.80元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸
• 页数 224页
• 字数 408千字

【内容简介】

本书以真实案例组织内容，介绍如何利用网页制作技术HTML5和CSS3等制作网站。全书共12章，前10章将学院网站制作过程中的知识点进行分解，每章以小案例引导，介绍Web开发设计中的关键知识点，第11章完成学院网站的完整制作，第12章介绍当前流行的电商网站的制作，充分运用HTML5的新增结构元素构建网页内容，利用CSS3的过渡、变形和动画等属性实现图片的变换和旋转。 本书可以作为高职高专院校计算机相关专业“Web前端开发”课程的教材，也可以作为Web前端开发爱好者学习Web前端程序设计的参考书。

【作者简介】

李志云，副教授，山东信息职业技术学院教师，主编《数据库开发实用教程—基于Visual Basic》《Visual c#2005数据库开发案例教程》《网页设计与制作案例教程（HTML CSS DIV JavaScript）》等教材，发表论文20余篇。

【目录】

第 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