网页设计项目教程

本书集HTML5、CSS3、JavaScript技术于一体，基于Web标准，详细介绍了Web前端设计技术的基础知识，对Web体系结构、HTML5、CSS3、JavaScript和网站制作流程进行了详细的讲解；为了使广大的Web开发者真正了解与全面掌握HTML5、CSS3、JavaScript等技术，本书对HTML5和CSS3样式布局进行了深入的介绍，同时介绍了使用JavaScript脚本语言实现网页动态效果。书中引入了丰富的案例，对案例进行了细致的分析，便于学生理解所学知识，加强实操训练，提高实践能力。本书结构合理、内容紧凑，每个知识点都精心设计了案例。本书既适合作为高职院校计算机专业程序设计课程的教材，也适合Web前端和对HTML5及未来Web应用技术感兴趣的读者参考。

罗保山，教授，武汉软件工程职业学院计算机学院副院长，毕业于华中师范大学计算机软件专业，现任教于计算机学院物联网技术教研室。从事计算机教学20年，主讲《HTML与CSS程序设计》、《数据库技术》、《C#不错程序设计》等课程。主、参编教材11本，公开发表论文13篇，主持或参与市级以上科研课题20余项，取得软件著作权、专利7项。

章 HTML5概述 1 1.1 HTML简介 1 1.2 了解HTML5 2 1.3 搭建HTML5的开发环境 4 1.4 HTML5文件的编写方法 4 1.4.1  使用记事本手工编写HTML5文件 4 1.4.2  使用Dreamweaver CS编写HTML 文件 6 1.4.3  实例：编写个HTML5网页 文件 7 1.4.4 预览HTML5网页 8 本章小结 8 练习与实训 8 第2章 全新的HTML5 9 2.1  HTML5的适用范围 9 2.1.1 HTML5与各大浏览器的兼容性 9 2.1.2 运用＜video＞和＜audio＞标签进行 视频和音频制作 9 2.1.3 更炫酷的界面 10 2.1.4 更强大的表单功能 10 2.1.5 提升可访问性 10 2.2 语法变化 10 2.2.1 HTML5的语法变化 10 2.2.2 HTML5中的标记方法 11 2.2.3 HTML5与之前版本的兼容性 12 2.3 HTML5新增和废除的元素 13 2.3.1 新增的结构元素 13 2.3.2 新增的其他元素 14 2.3.3 废除的元素 15 2.4 新增的属性 16 2.5 全局属性 17 2.5.1 hidden属性 18 2.5.2 spellcheck属性 18 2.5.3 contenteditable属性 18 2.5.4 designmode属性 19 2.5.5 tabindex属性 19 本章小结 19 练习与实训 19 第3章 认识HTML5的文档结构 20 3.1 Web标准 20 3.1.1  Web标准概述 20 3.1.2  Web标准规定的内容 20 3.2 HTML5的基本结构 21 3.2.1 文档类型标记doctype 21 3.2.2  html标记 21 3.2.3  头标记head 21 3.2.4 主体标记body 22 3.2.5  标题标记title 22 3.2.6  元信息标记meta 22 3.2.7  页面注释标记 24 3.3  综合实例――符合W3C标准的HTML5 网页 24 3.3.1 HTML 26 3.3.2  CSS 27 3.3.3  JavaScript 27 3.4 HTML5页面构成 28 3.4.1 HTML5页面主要组成部分 28 3.4.2 综合实例――HTML5页面构成 29 本章小结 36 练习与实训 36 第4章 网页文本设计 37 4.1  添加文本 37 4.1.1 普通文本 37 4.1.2 特殊字符文本 37 4.1.3 文本特殊样式 38 4.2 文本排版 41 4.2.1 段落标记 41 4.2.2 标题标记 43 4.2.3 center标记 44 4.2.4 hr标记 45 4.2.5 span标记 46 4.2.6 特殊信息文本 47 4.3 网页文字列表设计 52 4.3.1  建立无序列表 52 4.3.2  建立有序列表 54 4.3.3  建立自定义列表 55 本章小结 56 练习与实训 56 第5章 美化网页――使用CSS3技术 57 5.1  CSS3概述 57 5.2  CSS3基本选择器 57 5.2.1  标记选择器 58 5.2.2  类选择器 58 5.2.3  ID选择器 59 5.3  在HTML5中使用CSS3的方法 60 5.3.1  行内样式 60 5.3.2  嵌入样式 60 5.3.3  链接样式 61 5.3.4  导入样式 62 5.3.5  样式的优先级 62 5.4  CSS3复合选择器 64 5.4.1  交集选择器 64 5.4.2  并集选择器 64 5.4.3  后代选择器 65 5.4.4  子选择器 66 5.4.5  相邻选择器 67 5.4.6 伪类选择器 67 5.4.7  伪对象选择器 68 5.5 CSS3常用效果与技巧 69 5.5.1 阴影效果 70 5.5.2 2D与3D效果 71 本章小结 75 练习与实训 75 第6章 文本格式的高级设置 76 6.1  文本样式 76 6.1.1  字体 76 6.1.2  字号 77 6.1.3  字体风格 78 6.1.4  加粗字体 78 6.1.5  小写字母转为大写字母 78 6.1.6  字体复合属性 79 6.1.7  字体颜色 79 6.1.8  溢出文本 80 6.1.9 控制换行 81 6.2 文本样式 81 6.2.1  单词间隔 81 6.2.2  字符间隔 82 6.2.3  文字修饰 82 6.2.4  垂直对齐方式 83 6.2.5  水平对齐方式 84 6.2.6  文本缩进 84 6.2.7  文本行高 85 6.2.8  处理空白 85 6.2.9  文本反排 86 6.3  CSS3设置文本样式 87 6.4  综合实例―― 用CSS3设计网站侧边导 航栏 88 本章小结 92 练习与实训 92 第7章 网页色彩和图片设计 93 7.1 网页色彩和图片的关系 93 7.2  网页图像的应用 94 7.2.1 网页图片格式的选择 94 7.2.2  路径表示法 96 7.2.3  图片的使用 97 7.3  用CSS3设置颜色与背景 98 7.3.1  用CSS3设置图像效果 100 7.3.2  图片缩放 101 本章小结 103 练习与实训 103 第8章 网页超链接设计 104 8.1  创建超文本与图片链接 104 8.2  创建下载链接 105 8.3  使用相对路径和绝对路径 106 8.4  设置链接目标打开窗口 107 8.5  超文本链接到一个E-mail地址 108 8.6  使用锚链接制作电子书阅读网页 110 8.7  创建热点区域 112 8.8  浮动框架 113 8.9 综合实例――图片热点区域制作 114 本章小结 118 练习与实训 118 第9章 用HTML5创建表格 119 9.1  创建表格 119 9.1.1 创建表格的基本语法――table 元素、tr元素、th元素、td元素 119 9.1.2 表格的描述――summary属性 121 9.2 表格的标题――caption元素 122 9.3 设置单元格――th元素、td元素 122 9.3.1 使用th元素和td元素定义单元格 122 9.3.2 跨多行、多列的单元格 124 9.4 表格的按行分组显示――thead元素、 tfoot元素、tbody元素 127 9.5 表格的按列分组显示――colgroup 元素、col元素 128 本章小结 130 练习与实训 130 0章 网页表单设计 131 10.1  熟悉表单属性 131 10.1.1 表单的用途 131 10.1.2 表单的属性设置 132 10.2 基本元素的应用 134 10.2.1 文本框 137 10.2.2 密码域 138 10.2.3 单选框 138 10.2.4 复选框 139 10.2.5 普通按钮 140 10.2.6 提交按钮 141 10.2.7 重置按钮 141 10.2.8 多行文本框textarea 141 10.2.9 label标签 142 10.2.10 下拉列表框 143 10.2.11 其他基本元素 144 10.3 表单高级元素的使用 145 10.3.1 url类型元素 145 10.3.2 email类型元素 146 10.3.3 number类型元素 146 10.3.4 range类型元素 147 10.3.5 search类型元素 148 10.3.6 color类型元素 149 10.3.7 日期和时间元素 149 10.3.8 datalist标签 150 10.3.9 input表单控件新增属性 151 10.4 综合实例――创建用户反馈表单 153 本章小结 160 练习与实训 160 1章 网页多媒体设计 162 11.1  HTML5 audio元素和video元素概述 162 11.1.1 视频容器 162 11.1.2 音频和视频编解码器 162 11.1.3 audio元素和video元素的src 属性和source属性 164 11.2  网页中的音频文件 165 11.2.1 audio元素的浏览器支持情况 165 11.2.2 添加自动播放音频文件（autoplay 属性） 165 11.2.3 添加带有控件的音频文件 （controls属性） 166 11.2.4 添加循环播放音频文件 （loop属性） 167 11.2.5 添加预播放的音频文件 （preload属性） 167 11.3  网页中的视频文件 168 11.3.1 video元素的浏览器支持情况 168 11.3.2 添加带有控件的视频文件 （controls属性） 169 11.3.3 添加自动播放的视频文件 （autoplay属性） 171 11.3.4 添加循环播放的视频文件（loop 属性） 172 11.3.5 添加预播放的视频文件（preload 属性） 173 11.3.6 设置视频文件的宽度和高度 （width与height属性） 174 11.3.7 设置视频文件的error属性 175 11.3.8 设置视频文件的networkState 属性（只读属性） 176 11.3.9 视频文件的readyState属性 176 11.4  多媒体元素常用方法和事件简述 176 11.5 综合实例 ―― 使用多媒体元素播放 文件 177 本章小结 178 练习与实训 178 2章 HTML5布局 179 12.1 布局简介 179 12.1.1 页面元素与布局核心技巧 179 12.1.2 元素显示方式 179 12.2 图文混排与题图文字布局 180 12.2.1 图文混排布局 180 12.2.2 题图文字布局 181 12.3 float多栏布局 182 12.3.1 float浮动 183 12.3.2 清除浮动clear 185 12.3.3 float两列均分布局 186 12.3.4 float多栏布局 191 12.4 盒布局与弹性盒布局 197 12.4.1 盒布局 197 12.4.2 弹性盒布局 199 12.5 position定位 205 12.5.1 position 205 12.5.2 z-index 207 12.5.3 clip 208 本章小结 209 练习与实训 209 3章 使用JavaScript脚本语言实现网页 动态效果 210 13.1  JavaScript简介 210 13.1.1  JavaScript的概念和特点 210 13.1.2  JavaScript与Java 211 13.1.3  个JavaScript程序 212 13.2  在html文档中使用脚本代码 215 13.2.1 内部引用JavaScript 216 13.2.2 外部引用JavaScript 216 13.2.3 内联引用JavaScript 217 13.3  JavaScript语言基础 218 13.3.1  JavaScript语法格式 218 13.3.2  JavaScript语句 218 13.3.3  JavaScript注释 219 13.3.4  数据类型 220 13.3.5  常量 220 13.3.6  变量 221 13.4  表达式与运算符 222 13.4.1  表达式 222 13.4.2  运算符 222 13.5  JavaScript控制结构与函数 224 13.5.1  JavaScript控制结构 224 13.5.2  函数 233 13.6 事件驱动及事件处理 237 13.7  对象编程 239 13.7.1 内置对象 239 13.7.2 文档对象编程 248 13.8  综合实例――实现即时验证效果 254 本章小结 259 练习与实训 259 4章 网页设计与开发综合范例 260 14.1  网页内容分析 260 14.2  综合实例――制作门户类网页 261 14.2.1 网页框架构建及素材的准备 261 14.2.2 建立本地站点 262 14.2.3 使用HTML创建页面结构 263 14.2.4 使用CSS布局并美化页面 265 本章小结 271 练习与实训 271 参考文献 272