HTML5网页设计与制作案例教程/李兴莹

目　录

第1章　教育培训类网页——设计网页文本内容 1

视频讲解：4个

1.1　标题与文字格式 2

1.1.1　设置文字标题及字体样式 2

1.1.2　设置文字的属性 3

1.1.3　设置文字的颜色 4

1.1.4　设置文字的阴影 4

1.1.5　设置字体复合属性 5

1.1.6　控制换行 5

1.1.7　块元素及行元素 5

1.1.8　制作G-Team教育培训类

网页(一) 6

1.2　设置段落与网页水平线 9

1.2.1　段落标签 9

1.2.2　段落内容排版 10

1.2.3　使用标签添加水平线 13

1.2.4　使用CSS样式添加水平线 13

1.2.5　设置水平线样式 14

1.2.6　制作G-Team教育培训类

网页(二) 15

1.3　网页文字列表设计 18

1.3.1　无序列表 18

1.3.2　有序列表 18

1.3.3　建立不同的无序列表 19

1.3.4　建立不同的有序列表 19

1.3.5　嵌套列表 19

1.3.6　自定义列表 20

1.3.7　制作G-Team教育培训类

网页（三） 20

1.4　上机练习——制作G-Team简介网页 22

1.5　思考与练习 26

第2章　企业门户类网页—HTML 5网页中的图像 27

视频讲解：3个

2.1　在网页中插入图像 28

2.1.1　图像基础 28

2.1.2　标签简介 29

2.1.3　CSS引入方式 30

2.1.4　标签的适用范围 31

2.1.5　路径问题 31

2.1.6　制作房地产网页 32

2.2　将图片设置为网页背景 35

2.2.1 标签 35

2.2.2　制作装饰公司网页（一） 35

2.3　上机练习——制作装饰公司

网页（二） 37

2.4　思考与练习 41

第3章　孕婴类网页—使用HTML5创建超链接 42

视频讲解：3个

3.1　建立网页超链接 43

3.1.1　认识超链接 43

3.1.2　创建超链接 43

3.1.3　创建图片链接 44

3.1.4　图片热点链接 44

3.1.5　创建下载链接 46

3.1.6　创建锚点链接 46

3.1.7　相对路径和绝对路径 48

3.1.8　设置以新窗口显示超链接页面 48

3.1.9　设置电子邮件链接 49

3.1.10　制作母婴商城网页（一） 50

3.2　浮动框架iframe 53

3.2.1　浮动框架iframe的使用 53

3.2.2　width属性和height属性 54

3.2.3　align属性 54

3.2.4　frameborder属性 55

3.2.5　name属性 56

3.2.6　scrolling属性 56

3.2.7　marginwidth和marginheight

属性 56

3.2.8　制作母婴商城网页（二） 57

3.3　上机练习—制作育儿类网页 58

3.4　思考与练习 64

第4章　旅游交通类网页——使用HTML 5创建表单与 表格 65

视频讲解：4个

4.1　表单的使用 66

4.1.1　定义表单 66

4.1.2　文本框 66

4.1.3　文本区域 67

4.1.4　单选按钮 67

4.1.5　复选框 68

4.1.6　下拉列表框 68

4.1.7　按钮 68

4.1.8　新的input类型 69

4.1.9　旅游网站登录界面 71

4.2　创建表格 74

4.2.1　定义表格 74

4.2.2　带有标题的表格 75

4.2.3　制作旅游网页（一） 75

4.3　表格的设置 77

4.3.1　定义表格边框类型 77

4.3.2　定义表格的表头 78

4.3.3　定义表格的背景 79

4.3.4　设置单元格的背景 80

4.3.5　合并单元格 80

4.3.6　排列单元格中的内容 81

4.3.7　设置单元格的行高与列宽 82

4.3.8　制作旅游网页（二） 82

4.4　上机练习——制作爱旅游论坛网页 84

4.5　思考与练习 87

第5章　音视频类网页——HTML 5中的多媒体 88

视频讲解：3个

5.1　音视频的添加与设置 89

5.1.1　设置背景音乐 89

5.1.2　设置背景音乐循环播放 89

5.1.3　为网页添加视频文件 90

5.1.4　设置自动运行 90

5.1.5　设置视频文件的循环播放 91

5.1.6　设置视频文件窗口的高度与

宽度 91

5.1.7　Bootstrap4 网格系统 92

5.1.8　Bootstrap4 轮播图 92

5.1.9　Bootstrap4 卡片 93

5.1.10　Bootstrap4 弹性盒子 94

5.1.11　Bootstrap4 多媒体对象 95

5.1.12　CSS选择器 97

5.1.13　制作多媒体首页 99

5.2　网页中的滚动文字 107

5.2.1　滚动文字标签的使用 107

5.2.2　滚动方向属性的应用 107

5.2.3　滚动方式属性的应用 107

5.2.4　滚动速度属性的应用 108

5.2.5　滚动延迟属性的应用 108

5.2.6　滚动循环属性的应用 108

5.2.7　滚动范围属性的应用 108

5.2.8　滚动背景颜色属性的应用 108

5.2.9　滚动空间属性的应用 109

5.2.10　Bootstrap4颜色 109

5.2.11　制作视频播放网页 110

5.3　上机练习——制作音频播放网页 115

5.4　思考与练习 118

第６章　企业门户类网页——使用JavaScript完善网页 效果 119

视频讲解：2个

6.1　JavaScript基础 120

6.1.1　直接嵌入.js文件 120

6.1.2　外部引入.js文件 120

6.2　使用JavaScript 120

6.2.1　数据类型 120

6.2.2　变量 120

6.2.3　注释、表达式与运算符 121

6.2.4　常用语句 123

6.2.5　函数 125

6.2.6　面向对象程序设计 127

6.2.7　事件 132

6.2.8　育婴网首页 137

6.3　上机练习——G-Team培训网站首页 142

6.4　思考与练习 149

第7章　餐饮美食类网页——使用HTML 5绘制图形 150

视频讲解：3个

7.1　使用HTML 5绘制图形 151

7.1.1　 绘制基本形状 151

7.1.2　 绘制渐变形状 152

7.1.3　 绘制变形图形 153

7.1.4　 绘制其他样式的图形 155

7.1.5　 制作必胜客网页 159

7.2　图形的保存与恢复 164

7.2.1　 保存与恢复状态 164

7.2.2　 保存文件 166

7.2.3　 制作餐厅网页 167

7.3　上机练习——制作餐厅首页 172

7.4　思考与练习 176

第8章　电子商务类网页——HTML 5中的文件与拖放 177

视频讲解：3个

8.1　选择文件 178

8.1.1　 选择单个文件 178

8.1.2　 选择多个文件 178

8.1.3　 制作建站服务商城网页 178

8.2　使用HTML 5实现文件的拖放 183

8.2.1　 认识文件拖放的过程 183

8.2.2　 浏览器支持情况 183

8.2.3　 在网页中拖放图片 183

8.2.4　 在网页中拖放文字 186

8.2.5　 制作产品介绍界面 186

8.3　上机练习—制作销售后台

管理系统 191

8.4　思考与练习 197

附录.参考答案 198