HTML 5+CSS 3网站布局应用教程-(配1张CD光盘)

第1章 下一代Web开发标准——HTML 5 1.1 为什么使用HTML 5 2 1.2 HTML 5大势所趋 5 1.2.1 HTML 5的诞生 5 1.2.2 关于HTML 5的组织 6 1.2.3 HTML 5的目标 6 1.2.4 HTML 5的浏览器支持情况 8 1.3 HTML 5新特性与技巧 9 1.4 Flash、Silverlight与HTML 5对比 12 1.5 动手操作：安装支持HTML 5的浏览器 13 1.6 动手操作：运行HTML 5测试页面 14 1.7 本章小结 15 1.8 课后练习 16 第2章 从零开始构建HTML 5 Web页面 2.1 HTML 5新语法 18 2.1.1 基本语法 18 2.1.2 页面标记的语法 19 2.1.3 **个HTML 5页面 20 2.2 HTML 5的页面结构 21 2.2.1 新增结构元素 22 2.2.2 新增页面元素 27 2.2.3 新增表单元素 29 2.2.4 新增属性 31 2.3 设计页面的基本结构 32 2.4 改善为符合HTML 5的结构 33 2.5 动手操作：设计一个文章评论列表 40 2.6 本章小结 41 2.7 课后练习 42 第3章 使用HTML 5结构元素构建网站 3.1 html根元素 44 3.2 文档头部元素 45 3.3 页面交互 49 3.3.1 details元素 49 3.3.2 summary元素 50 3.3.3 menu元素 50 3.3.4 command元素 51 3.3.5 progress元素 51 3.3.6 meter元素 52 3.4 页面节点 53 3.4.1 section元素 53 3.4.2 nav元素 53 3.4.3 hgroup元素 55 3.4.4 address元素 56 3.5 列表元素 56 3.5.1 ul元素 57 3.5.2 ol元素 58 3.5.3 dl元素 59 3.6 文本层次语义 59 3.6.1 time元素 60 3.6.2 mark元素 60 3.6.3 cite元素 61 3.7 公共属性 61 3.7.1 draggable属性 61 3.7.2 hidden属性 61 3.7.3 spellcheck属性 62 3.7.4 contenteditable属性 63 3.8 动手操作：构建一个企业网站首页 63 3.9 动手操作：构建一个博客网站首页 68 3.10 本章小结 73 3.11 课后练习 74 第4章 基于HTML 5的表单 4.1 HTML 5新表单属性 76 4.1.1 required属性 76 4.1.2 placeholder属性 77 4.1.3 pattern属性 79 4.1.4 disabled属性 80 4.1.5 readonly属性 82 4.1.6 multiple属性 84 4.1.7 form属性 84 4.1.8 autocomplete属性 85 4.1.9 datalist元素和list属性 86 4.1.10 autofocus属性 88 4.2 HTML 5新表单输入类型 88 4.2.1 search类型 89 4.2.2 email类型 90 4.2.3 url类型 91 4.2.4 number类型 92 4.2.5 tel类型 92 4.2.6 range类型 93 4.2.7 color类型 94 4.2.8 date日期类型 95 4.3 动手操作：实现用户注册功能 96 4.4 HTML 5其他新表单元素 98 4.4.1 output元素 98 4.4.2 keygen元素 99 4.4.3 optgroup元素 100 4.5 表单验证 101 4.5.1 自动验证方式 101 4.5.2 手动验证方式 102 4.5.3 自定义验证提示 103 4.5.4 取消验证 104 4.6 本章小结 105 4.7 课后练习 105 第5章 HTML 5的绘图技术 5.1 创建画布 108 5.1.1 添加canvas元素 108 5.1.2 canvas元素的基本用法 108 5.2 绘制基础 109 5.2.1 绘制带边框矩形 109 5.2.2 绘制渐变图形 110 5.2.3 绘制圆形 113 5.2.4 绘制直线 114 5.2.5 绘制文字 115 5.3 对画布中图形的操作 116 5.3.1 组合多个图形 116 5.3.2 为图形添加阴影 118 5.3.3 变换坐标 119 5.3.4 变换矩阵 120 5.4 在画布中使用图像 121 5.4.1 绘制图像 121 5.4.2 平铺图像 123 5.4.3 裁剪图像 124 5.5 其他操作 125 5.5.1 保存和恢复图形 125 5.5.2 输出图形 127 5.6 动手操作：将彩色图像转换成黑白图像 129 5.7 动手操作：绘制指针式动画时钟 130 5.8 动手操作：绘制弹球动画 133 5.9 本章小结 137 5.10 课后练习 137 第6章 HTML 5处理视频和音频 6.1 HTML 5中音频和视频概述 139 6.1.1 视频容器 139 6.1.2 音频和视频编解码器 139 6.1.3 音频和视频的限制 140 6.1.4 audio元素和video元素的浏览器支持情况 140 6.2 使用video元素显示视频 140 6.2.1 video元素的属性 140 6.2.2 video元素的事件 142 6.3 使用audio元素显示音频 145 6.3.1 audio元素的属性 145 6.3.2 audio元素的事件 146 6.4 动手操作：制作属于自己的网页视频播放器 147 6.5 本章小结 152 6.6 课后练习 152 第7章 HTML 5与文件 7.1 选择文件 155 7.1.1 选择一个文件 155 7.1.2 选择多个文件 156 7.1.3 对文件类型进行限制 157 7.2 动手操作：实现文件上传 159 7.3 读取文件 161 7.3.1 FileReader接口简介 161 7.3.2 读取文本文件内容 162 7.3.3 读取二进制文件内容 163 7.3.4 读取图像文件内容 164 7.3.5 监听读取事件 166 7.3.6 错误处理方案 168 7.4 动手操作：通过拖放实现文件上传 168 7.5 本章小结 173 7.6 课后练习 174 第8章 HTML 5中的数据处理 8.1 数据存储对象简介 176 8.1.1 Web存储和Cookie存储 176 8.1.2 localStorage对象 176 8.1.3 sessionStorage对象 178 8.2 数据操作 179 8.2.1 写入数据 179 8.2.2 读取数据 180 8.2.3 清空数据 181 8.2.4 使用JSON读取数据 181 8.3 动手操作：实现一个日志查看器 183 8.4 使用HTML 5数据库 185 8.4.1 HTML 5数据库简介 185 8.4.2 创建与打开数据库 186 8.4.3 执行SQL语句 187 8.4.4 数据管理 190 8.5 动手操作：实现基于数据库的日志管理 194 8.6 本章小结 200 8.7 课后练习 200 第9章 HTML 5高级功能 9.1 Web离线应用 203 9.1.1 manifest文件简介 203 9.1.2 applicationCache对象简介 204 9.1.3 检测本地缓存状态 205 9.1.4 检测离线与在线状态 206 9.1.5 本地缓存更新 207 9.2 通信应用 208 9.2.1 跨文档之间消息的通信 208 9.2.2 使用sockets进行网络间通信 210 9.3 Worker对象处理线程 211 9.4 获取地理位置信息 214 9.5 HTML 5中处理拖放元素 216 9.6 动手操作：显示所在地的地图 218 9.7 动手操作：数据库的增删改查 221 9.8 本章小结 230 9.9 课后练习 230 第10章 CSS 3样式入门 10.1 CSS背景知识 232 10.1.1 CSS简介 232 10.1.2 CSS历史 232 10.1.3 CSS特点 233 10.1.4 使用CSS的优势 233 10.2 CSS 3简介 234 10.3 CSS 3兼容情况 236 10.4 CSS 3新增功能 237 10.5 CSS 3新增颜色 240 10.5.1 RGBA 240 10.5.2 HSL和HSLA 241 10.5.3 opacity属性 243 10.6 动手操作：设计网页色调 244 10.7 CSS 3文本与字体样式 246 10.7.1 text-shadow属性 246 10.7.2 text-overflow属性 249 10.7.3 word-wrap属性 249 10.7.4 @font-face属性 250 10.8 动手操作：制作个性的图书列表 252 10.9 本章小结 255 10.10 课后练习 255 第11章 使用CSS 3选择器 11.1 CSS 3新增加的选择器 258 11.1.1 属性选择器 258 11.1.2 结构化伪类选择器 260 11.1.3 伪元素选择器 268 11.1.4 UI元素状态伪类选择器 269 11.1.5 通用兄弟元素选择器 272 11.2 使用选择器来插入文字 272 11.2.1 使用选择器来插入内容 273 11.2.2 指定个别元素不进行插入 274 11.3 插入图像文件 276 11.3.1 在标题前插入图像文件 276 11.3.2 插入图像文件的好处 276 11.3.3 将alt属性的值作为图像的标题来显示 277 11.4 使用content属性插入项目编号 278 11.4.1 在多个标题前加上连续编号 278 11.4.2 在项目编号中追加文字 279 11.4.3 指定编号的样式 280 11.4.4 指定编号的种类 280 11.4.5 编号嵌套 281 11.4.6 中编号中嵌入大编号 282 11.4.7 在字符串两边添加嵌套文字符号 283 11.5 动手操作：设计窗内网网站首页 284 11.6 本章小结 290 11.7 课后练习 290 第12章 CSS 3边框和背景样式 12.1 边框样式 292 12.1.1 border-image属性 292 12.1.2 border-radius属性 295 12.1.3 box-shadow属性 297 12.1.4 border-color属性 298 12.2 动手操作：中央图像的自动拉伸 300 12.3 动手操作：绘制不同半径四个角的圆角边框 301 12.4 背景样式 303 12.4.1 background-clip属性 303 12.4.2 background-origin属性 305 12.4.3 background-size属性 307 12.4.4 background-break属性 308 12.5 动手操作：在一个元素中显示多个背景图像 310 12.6 渐变 311 12.6.1 线性渐变 311 12.6.2 径向渐变 314 12.6.3 重复渐变 317 12.7 动手操作：为元素或模块设计背景图像 318 12.8 本章小结 319 12.9 课后练习 319 第13章 CSS 3新增变形和过渡特效 13.1 变形效果 322 13.1.1 平移 322 13.1.2 缩放 323 13.1.3 旋转 325 13.1.4 倾斜 327 13.1.5 更改变形的原点 328 13.2 动手操作：打造立体场景的网页 329 13.3 过渡效果 333 13.3.1 transition-property属性 333 13.3.2 transition-duration属性 334 13.3.3 transition-timing-function属性 334 13.3.4 transition-delay属性 335 13.3.5 transition属性 336 13.4 动画效果 338 13.4.1 关键帧 339 13.4.2 动画属性 340 13.5 动手操作：实现图片墙3D翻转效果 342 13.6 本章小结 345 13.7 课后练习 345 第14章 CSS 3布局样式 14.1 单个盒子样式 348 14.1.1 盒子模型简介 348 14.1.2 overflow属性 349 14.1.3 overflow-x和overflow-y属性 350 14.1.4 box-sizing属性 351 14.2 多列类布局 353 14.2.1 column-count属性 353 14.2.2 column-gap属性 354 14.2.3 column-width属性 355 14.2.4 column-rule属性 357 14.2.5 column-span属性 359 14.2.6 column-fill属性 360 14.2.7 columns属性 361 14.3 outline属性 362 14.4 动手操作：创建相册图片列表页面 363 14.5 本章小结 365 14.6 课后练习 365 第15章 制作个人博客网站 15.1 博客简介 367 15.2 设计博客首页模块 368 15.2.1 结构分析 368 15.2.2 设计顶部模块 369 15.2.3 设计底部模块 372 15.2.4 设计中间内容模块 373 15.3 设计博客相册模块 378 15.3.1 结构分析 378 15.3.2 设计相册内容 379 15.4 设计博客文章目录模块 381 15.4.1 文章列表 382 15.4.2 文章详细信息 383 15.4.3 文章评论 385 15.5 设计博客登录模块 388 15.6 本章小结 389 第16章 制作博客后台管理 16.1 需求分析 391 16.2 博客后台系统分析 391 16.3 数据库分析 392 16.4 登录模块 392 16.5 首页模块 395 16.6 文章管理模块 396 16.6.1 添加文章信息 396 16.6.2 查看文章信息 398 16.6.3 删除文章记录 401 16.7 相册管理模块 404 16.8 本章小结 406 习题答案