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

"《HTML 5网页设计与制作案例教程》从浅到深逐步讲解，通过语法、示例、案例的逐层递进方式阐释HTML 5 的新特性。通过精彩案例，综合应用多种HTML 5 技术，从而实现“知识是基础，能力是目标”。另外，《HTML 5网页设计与制作案例教程》提供了丰富的教学资源，包括案例的素材、场景、效果、PPT课件以及视频教学，方便教与学。 "

《HTML 5网页设计与制作案例教程》是为适应中等职业学校培养计算机应用及软件技术领域技能紧缺人才的需要而编写的。《HTML 5网页设计与制作案例教程》从浅到深逐步讲解，通过语法、示例、案例的逐层递进方式阐释HTML 5 的新特性。通过精彩案例，综合应用多种HTML 5 技术，从而实现“知识是基础，能力是目标”，且部分案例给出视频讲解。 《HTML 5网页设计与制作案例教程》适合所有想全面和深入学习HTML 5 开发技术的人员阅读；对于大中专院校相关专业的学生和培训机构的学员，本书也是一本的参考书。

李兴莹，武汉传媒学院电子商务专业副教授 ，硕士研究生，主讲课程：《网页设计与制作》、《网站建设与维护》、《数据库分析与设计》、《图形图像处理》等。

目  录 第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