HTML5+CSS3网页设计与制作案例课堂-(第2版)

目 录 第I篇 HTML 5网页设计 第1章 新一代Web前端技术 3 1.1 HTML的基本概念 4 1.1.1 HTML的发展历程 4 1.1.2 什么是HTML 4 1.1.3 HTML 5文件的基本结构 5 1.2 HTML 5的优势 5 1.2.1 解决了跨浏览器的问题 5 1.2.2 增加了多个新特性 5 1.2.3 用户优先的原则 6 1.2.4 化繁为简的优势 7 1.3 HTML 5网页的开发环境 7 1.3.1 使用记事本手工编写HTML 5 7 1.3.2 使用Dreamweaver CC编写 HTML文件 8 1.4 使用浏览器查看HTML 5文件 12 1.4.1 查看页面效果 12 1.4.2 查看源文件 13 1.5 疑难解惑 14 第2章 HTML 5网页的文档结构 15 2.1 HTML 5文件的基本结构 16 2.1.1 HTML 5页面的整体结构 16 2.1.2 HTML 5新增的结构标记 16 2.2 HTML 5基本标记详解 17 2.2.1 文档类型说明 17 2.2.2 HTML标记 17 2.2.3 头标记 18 2.2.4 网页的主体标记 20 2.2.5 页面注释标记 21 2.3 HTML 5语法的变化 22 2.3.1 标签不再区分大小写 22 2.3.2 允许属性值不使用引号 22 2.3.3 允许部分属性的属性值省略 23 2.4 综合案例——符合W3C标准的 HTML 5网页 23 2.5 跟我学上机——简单的HTML 5网页 25 2.6 疑难解惑 26 第3章 HTML 5网页中的文本、超链接 和图像 27 3.1 在网页中添加文本 28 3.1.1 普通文本的添加 28 3.1.2 特殊字符文本的添加 28 3.1.3 使用HTML 5标记添加特殊 文本 30 3.2 文本排版 32 3.2.1 换行标记 32 3.2.2 段落标记 32 3.2.3 标题标记 33 3.3 文字列表 34 3.3.1 建立无序列表 34 3.3.2 建立有序列表 36 3.3.3 建立不同类型的无序列表 36 3.3.4 建立不同类型的有序列表 37 3.3.5 建立嵌套列表 38 3.3.6 自定义列表 39 3.4 超链接标记 40 3.4.1 设置文本和图片的超链接 40 3.4.2 创建指向不同目标类型的 超链接 40 3.4.3 设置以新窗口显示超链接页面 42 3.4.4 链接到同一页面的不同位置 43 3.5 创建热点区域 44 3.6 网页中的图片 45 3.6.1 在网页中插入图像 45 3.6.2 设置图像的宽度和高度 47 3.6.3 设置图像的提示文字 48 3.6.4 将图片设置为网页背景 49 3.6.5 排列图像 50 3.7 综合案例——图文并茂的房屋装饰 装修网页 50 3.8 跟我学上机——在线购物网站的产品 展示效果 52 3.9 疑难解惑 53 第4章 使用HTML 5创建表格 55 4.1 表格的基本结构 56 4.2 创建表格 57 4.2.1 创建普通表格 57 4.2.2 创建一个带有标题的表格 58 4.3 编辑表格 59 4.3.1 定义表格的边框类型 59 4.3.2 定义表格的表头 59 4.3.3 设置表格背景 60 4.3.4 设置单元格的背景 61 4.3.5 合并单元格 62 4.3.6 排列单元格中的内容 65 4.3.7 设置单元格的行高与列宽 66 4.4 完整的表格标记 67 4.5 综合案例——制作计算机报价表 68 4.6 跟我学上机——制作学生成绩表 70 4.7 疑难解惑 74 第5章 使用HTML 5创建表单 75 5.1 表单概述 76 5.2 表单基本元素的使用 76 5.2.1 单行文本输入框 77 5.2.2 多行文本输入框 77 5.2.3 密码输入框 78 5.2.4 单选按钮 78 5.2.5 复选框 79 5.2.6 列表框 80 5.2.7 普通按钮 81 5.2.8 提交按钮 81 5.2.9 重置按钮 82 5.3 表单高级元素的使用 83 5.3.1 url属性的使用 83 5.3.2 email属性的使用 83 5.3.3 date属性和time属性的使用 84 5.3.4 number属性的使用 85 5.3.5 range属性的使用 86 5.3.6 required属性的使用 86 5.4 综合案例——创建用户反馈表单 87 5.5 跟我学上机——制作用户注册表单 88 5.6 疑难解惑 90 第6章 HTML 5中的音频和视频 91 6.1 audio标签 92 6.1.1 audio标签概述 92 6.1.2 audio标签的属性 93 6.1.3 浏览器对audio标签的支持 情况 93 6.2 在网页中添加音频文件 94 6.2.1 添加自动播放的音频文件 94 6.2.2 添加带有控件的音频文件 94 6.2.3 添加循环播放的音频文件 95 6.2.4 添加预播放的音频文件 95 6.3 video标签 96 6.3.1 video标签概述 96 6.3.2 video标签的属性 97 6.3.3 浏览器对video标签的支持 情况 98 6.4 在网页中添加视频文件 98 6.4.1 添加自动播放的视频文件 98 6.4.2 添加带有控件的视频文件 99 6.4.3 添加循环播放的视频文件 99 6.5 综合案例——设置视频文件的高度 与宽度 100 6.6 跟我学上机——添加预播放的视频 文件 101 6.7 疑难解惑 101 第7章 使用HTML 5绘制图形 103 7.1 添加canvas的步骤 104 7.2 绘制基本形状 104 7.2.1 绘制矩形 105 7.2.2 绘制圆形 105 7.2.3 使用moveTo与lineTo绘制 直线 107 7.2.4 使用bezierCurveTo绘制 贝塞尔曲线 108 7.3 绘制渐变图形 109 7.3.1 绘制线性渐变 109 7.3.2 绘制径向渐变 111 7.4 绘制变形图形 112 7.4.1 绘制平移效果的图形 112 7.4.2 绘制缩放效果的图形 113 7.4.3 绘制旋转效果的图形 114 7.4.4 绘制组合效果的图形 115 7.4.5 绘制带阴影的图形 117 7.5 使用图像 118 7.5.1 绘制图像 118 7.5.2 平铺图像 119 7.5.3 裁剪图像 121 7.5.4 图像的像素化处理 122 7.6 绘制文字 124 7.7 图形的保存与恢复 126 7.7.1 保存与恢复状态 126 7.7.2 保存文件 127 7.8 综合案例——绘制火柴棒人物 128 7.9 跟我学上机——绘制商标 132 7.10 疑难解惑 134 第II篇 CSS 3美化网页 第8章 CSS 3概述与基本语法 137 8.1 CSS 3概述 138 8.1.1 CSS 3的功能 138 8.1.2 浏览器与CSS 3 138 8.1.3 CSS 3的基础语法 139 8.1.4 CSS 3的常用单位 139 8.2 编辑和浏览CSS 3 144 8.2.1 手工编写CSS 3 144 8.2.2 用Dreamweaver编写CSS 145 8.3 在HTML 5中使用CSS 3的方法 147 8.3.1 行内样式 147 8.3.2 内嵌样式 148 8.3.3 链接样式 149 8.3.4 导入样式 150 8.3.5 优先级问题 151 8.4 CSS 3的常用选择器 154 8.4.1 标签选择器 154 8.4.2 类选择器 155 8.4.3 ID选择器 155 8.4.4 全局选择器 156 8.4.5 组合选择器 157 8.4.6 继承选择器 158 8.4.7 伪类选择器 159 8.5 选择器声明 160 8.5.1 集体声明 160 8.5.2 多重嵌套声明 161 8.6 综合案例——制作炫彩网站Logo 161 8.7 跟我学上机——制作学生信息 统计表 164 8.8 疑难解惑 166 第9章 使用CSS 3美化网页字体 与段落 167 9.1 美化网页文字 168 9.1.1 设置文字的字体 168 9.1.2 设置文字的字号 169 9.1.3 设置字体风格 170 9.1.4 设置加粗字体 171 9.1.5 将小写字母转为大写字母 171 9.1.6 设置字体的复合属性 172 9.1.7 设置字体颜色 173 9.2 设置文本的高级样式 174 9.2.1 设置文本阴影效果 174 9.2.2 设置文本的溢出效果 176 9.2.3 设置文本的控制换行 177 9.2.4 保持字体尺寸不变 177 9.3 美化网页中的段落 178 9.3.1 设置单词之间的间隔 179 9.3.2 设置字符之间的间隔 179 9.3.3 设置文字的修饰效果 180 9.3.4 设置垂直对齐方式 181 9.3.5 转换文本的大小写 183 9.3.6 设置文本的水平对齐方式 183 9.3.7 设置文本的缩进效果 185 9.3.8 设置文本的行高 186 9.3.9 文本的空白处理 187 9.3.10 文本的反排 188 9.4 综合案例——设置网页标题 189 9.5 跟我学上机——制作新闻页面 191 9.6 疑难解惑 192 第10章 使用CSS 3美化网页图片 193 10.1 图片缩放 194 10.1.1 通过描述标记width和height 缩放图片 194 10.1.2 使用CSS 3中的max-width 和max-height缩放图片 194 10.1.3 使用CSS 3中的width 和height缩放图片 195 10.2 设置图片的对齐方式 196 10.2.1 设置图片的横向对齐 196 10.2.2 设置图片的纵向对齐 197 10.3 图文混排 199 10.3.1 设置文字环绕效果 199 10.3.2 设置图片与文字的间距 201 10.4 综合案例——制作学校宣传单 202 10.5 跟我学上机——制作简单的图文 混排网页 204 10.6 疑难解惑 206 第11章 使用CSS 3美化网页背景 与边框 207 11.1 使用CSS 3美化背景 208 11.1.1 设置背景颜色 208 11.1.2 设置背景图片 209 11.1.3 背景图片重复 210 11.1.4 背景图片显示 212 11.1.5 背景图片的位置 213 11.1.6 背景图片的大小 215 11.1.7 背景的显示区域 216 11.1.8 背景图像的裁剪区域 217 11.1.9 背景复合属性 218 11.2 使用CSS 3美化边框 219 11.2.1 设置边框的样式 220 11.2.2 设置边框的颜色 221 11.2.3 设置边框的线宽 222 11.2.4 设置边框的复合属性 224 11.3 设置边框的圆角效果 225 11.3.1 设置圆角边框 225 11.3.2 指定两个圆角半径 226 11.3.3 绘制四个不同角的圆角边框 227 11.3.4 绘制不同种类的边框 229 11.4 综合案例——制作简单的公司主页 231 11.5 跟我学上机——制作简单的生活资讯 主页 234 11.6 疑难解惑 235 第12章 使用CSS 3美化超级链接 和鼠标 237 12.1 使用CSS 3来美化超链接 238 12.1.1 改变超级链接的基本样式 238 12.1.2 设置带有提示信息的超级 链接 239 12.1.3 设置超级链接的背景图 240 12.1.4 设置超级链接的按钮效果 241 12.2 使用CSS 3美化鼠标特效 242 12.2.1 使用CSS 3控制鼠标箭头 242 12.2.2 设置鼠标变幻式超链接 244 12.2.3 设置网页页面滚动条 244 12.3 综合案例1——图片版本的超级 链接 246 12.4 综合案例2——关于鼠标特效 248 12.5 跟我学上机——制作一个简单的 导航栏 250 12.6 疑难解惑 252 第13章 使用CSS 3美化表格和表单 的样式 253 13.1 美化表格的样式 254 13.1.1 设置表格边框的样式 254 13.1.2 设置表格边框的宽度 256 13.1.3 设置表格边框的颜色 257 13.2 美化表单样式 258 13.2.1 美化表单中的元素 258 13.2.2 美化提交按钮 261 13.2.3 美化下拉菜单 262 13.3 综合案例——制作用户登录页面 263 13.4 跟我学上机——制作用户注册页面 265 13.5 疑难解惑 268 第14章 使用CSS 3美化网页菜单 269 14.1 使用CSS 3美化项目列表 270 14.1.1 美化无序列表 270 14.1.2 美化有序列表 271 14.1.3 美化自定义列表 273 14.1.4 制作图片列表 274 14.1.5 缩进图片列表 276 14.1.6 列表的复合属性 277 14.2 使用CSS 3制作网页菜单 278 14.2.1 制作无须表格的菜单 278 14.2.2 制作水平和垂直菜单 280 14.3 综合案例——模拟SOSO导航栏 282 14.4 跟我学上机——将段落转变成列表 285 14.5 疑难解惑 287 第15章 使用滤镜美化网页元素 289 15.1 滤镜概述 290 15.2 设置基本滤镜效果 291 15.2.1 高斯模糊(blur)滤镜 291 15.2.2 明暗度(brightness)滤镜 292 15.2.3 对比度(contrast)滤镜 293 15.2.4 阴影(drop-shadow)滤镜 294 15.2.5 灰度(grayscale)滤镜 295 15.2.6 反相(invert)滤镜 296 15.2.7 透明度(opacity)滤镜 297 15.2.8 饱和度(saturate)滤镜 298 15.2.9 深褐色(sepia)滤镜 299 15.3 综合案例1——使用复合滤镜效果 300 15.4 综合案例2——使用滤镜制作动画 效果 301 15.5 跟我学上机——制作色相旋转 (hue-rotate)滤镜 303 15.6 疑难解惑 304 第III篇 高级提升技能 第16章 CSS 3中的动画效果 307 16.1 了解过渡效果 308 16.2 添加过渡效果 308 16.3 了解动画效果 310 16.4 添加动画效果 311 16.5 了解2D转换效果 312 16.6 添加2D转换效果 313 16.6.1 添加移动效果 313 16.6.2 添加旋转效果 314 16.6.3 添加缩放效果 315 16.6.4 添加倾斜效果 316 16.7 添加3D转换效果 318 16.8 综合案例——添加综合过渡效果 320 16.9 跟我学上机——添加综合变幻效果 321 16.10 疑难解惑 322 第17章 HTML 5中的文件与拖放 323 17.1　选择文件 324 17.1.1　选择单个文件 324 17.1.2　选择多个文件 324 17.2　使用FileReader接口读取文件 325 17.2.1　检测浏览器是否支持 FileReader接口 325 17.2.2　 FileReader接口的方法 326 17.2.3　使用readAsDataURL方法预览 图片 326 17.2.4　使用readAsText方法读取文本 文件 328 17.3　使用HTML 5实现文件的拖放 329 17.3.1　认识文件拖放的过程 330 17.3.2　浏览器支持情况 330 17.3.3　在网页中拖放图片 331 17.4　综合案例——在网页中来回拖放 图片 332 17.5 跟我学上机——在网页中拖放文字 333 17.6 疑难解惑 335 第18章 定位地理位置技术 337 18.1　Geolocation API获取地理位置 338 18.1.1　地理定位的原理 338 18.1.2　获取定位信息的方法 338 18.1.3　常用地理定位方法 338 18.1.4　判断浏览器是否支持HTML 5 获取地理位置信息 339 18.1.5　指定纬度和经度坐标 340 18.1.6　获取当前位置的经度与纬度 341 18.1.7　处理错误和拒绝 343 18.2　目前浏览器对地理定位的支持情况 343 18.3　综合案例——在网页中调用Google 地图 344 18.4　跟我学上机——持续获取用户移动后 的位置 346 18.5　疑难解惑 348 第19章 Web存储和通信技术 349 19.1　认识Web存储 350 19.1.1　本地存储和Cookies的区别 350 19.1.2　Web存储方法 350 19.2　使用HTML 5 Web Storage API 350 19.2.1　测试浏览器的支持情况 351 19.2.2　使用sessionStorage方法创建 对象 352 19.2.3　使用localStorage方法创建 对象 353 19.2.4　Web Storage API的其他操作 355 19.2.5　使用JSON对象存取数据 355 19.3　在本地建立数据库 358 19.3.1 本地数据库概述 358 19.3.2　用executeSql来执行查询 358 19.3.3　使用transaction方法处理 事件 359 19.4　目前浏览器对Web存储的支持 情况 359 19.5 跨文档消息传输 359 19.5.1 跨文档消息传输的基本知识 359 19.5.2 案例1——跨文档通信应用 测试 360 19.6 WebSocket API 362 19.6.1 什么是WebSocket API 362 19.6.2 WebSocket通信基础 362 19.6.3 案例2——服务器端使用 Web Socket API 364 19.6.4 案例3——客户机端使用 WebSocket API 367 19.7 综合案例——制作简单Web 留言本 367 19.8 跟我学上机——编写简单的 WebSocket服务器 370 19.9　疑难解惑 374 第20章 处理线程和服务器发送事件 375 20.1　Web Worker 376 20.1.1　Web Worker概述 376 20.1.2　线程中常用的变量、函数 与类 376 20.1.3　案例1——前台与后台线程 进行数据的交互 377 20.2　线程嵌套 379 20.2.1　案例2——单线程嵌套 379 20.2.2　案例3——多个子线程中的 数据交互 381 20.3　服务器发送事件概述 383 20.4　服务器发送事件的实现过程 383 20.4.1　检测浏览器是否支持 Server-Sent Event 383 20.4.2　使用EventSource对象 384 20.4.3　编写服务器端代码 384 20.5　综合案例——创建Web Worker 计数器 385 20.6 跟我学上机——服务器发送事件实战 应用 386 20.7 疑难解惑 388 第21章 CSS 3定位与DIV布局核心 技术 389 21.1 了解块级元素和行内级元素 390 21.1.1 块级元素和行内级元素的 应用 390 21.1.2 div标记和span标记的区别 392 21.2 盒子模型 392 21.2.1 盒子模型的概念 393 21.2.2 定义网页的border区域 393 21.2.3 定义网页的padding区域 394 21.2.4 定义网页的margin区域 395 21.3 CSS 3新增的弹性盒模型 399 21.3.1 定义盒子的布局取向 (box-orient) 399 21.3.2 定义盒子的布局顺序 (box-direction) 400 21.3.3 定义盒子布局的位置 (box-ordinal-group) 402 21.3.4 定义盒子的弹性空间 (box-flex) 403 21.3.5 管理盒子空间(box-pack 和box-align) 405 21.3.6 盒子空间的溢出管理 (box-lines) 407 21.4 综合案例——图文排版效果 408 21.5 跟我学上机——淘宝导购菜单 411 21.6 疑难解惑 414 第IV篇 综合案例实战 第22章 网页布局剖析与制作 417 22.1 固定宽度网页剖析与布局 418 22.1.1 网页单列布局模式 418 22.1.2 网页1-2-1型布局模式 421 22.1.3 网页1-3-1型布局模式 425 22.2 自动缩放网页1-2-1型布局模式 428 22.2.1 “1-2-1”等比例变宽布局 428 22.2.2 “1-2-1”单列变宽布局 429 22.3 自动缩放网页1-3-1型布局模式 430 22.3.1 “1-3-1”三列宽度等比例 布局 430 22.3.2 “1-3-1”单侧列宽度固定的 变宽布局 430 22.3.3 “1-3-1”中间列宽度固定的 变宽布局 434 22.3.4 “1-3-1”双侧列宽度固定的 变宽布局 437 22.4 分列布局背景色的使用 440 22.4.1 设置固定宽度布局的列 背景色 440 22.4.2 设置特殊宽度变化布局的列 背景色 441 22.4.3 设置单列宽度变化布局的列 背景色 443 22.5 综合案例——设置多列等比例宽度 变化布局的列背景 445 22.6 跟我学上机——“1-3-1”中列和 左侧列宽度固定的变宽布局 447 22.7 疑难解惑 450 第23章 设计企业门户类网页 451 23.1 构思布局 452 23.1.1 设计分析 452 23.1.2 排版架构 452 23.2 模块分割 453 23.2.1 Logo与导航菜单 453 23.2.2 左侧的文本介绍 455 23.2.3 右侧的导航链接 457 23.2.4 版权信息 458 23.3 整体调整 459 23.4 疑难解惑 460 第24章 设计在线购物类网页 461 24.1 整体布局 462 24.1.1 设计分析 462 24.1.2 排版架构 462 24.2 模块分割 463 24.2.1 Logo与导航区 463 24.2.2 Banner与资讯区 465 24.2.3 产品类别区域 466 24.2.4 页脚区域 468 24.3 设置链接 468 24.4 疑难解惑 468