第1章 Web開發新時代 1
1.1 HTML5概述 2
1.1.1 HTML5新特性 2
1.1.2 HTML5組織 3
1.1.3 HTML5構成 4
1.2 HTML5設計原理 4
1.2.1 HTML開發曆程 5
1.2.2 HTML5開發動力 6
1.2.3 HTML5設計理念 7
1.3 編寫第一個HTML5頁麵 14
1.3.1 搭建上機練習環境 14
1.3.2 檢測瀏覽器是否支持 14
1.3.3 使用HTML5編寫簡單的Web頁麵 15
1.4 HTML5頁麵的特徵 17
1.4.1 使用HTML5結構化元素 17
1.4.2 使用CSS美化HTML5文檔 19
第2章 從HTML、XHTML到HTML5 21
視頻講解：2小時
2.1 HTML基礎 22
2.1.1 HTML簡介 22
2.1.2 HTML特性 22
2.1.3 HTML結構 23
2.1.4 HTML語法 23
2.1.5 HTML標簽 25
2.1.6 HTML屬性 29
2.2 XHTML基礎 32
2.2.1 XHTML結構 32
2.2.2 XHTML語法 33
2.2.3 XHTML類型 34
2.2.4 DTD解析 35
2.2.5 命名空間 37
2.3 HTML5基礎 38
2.3.1 HTML5語法 38
2.3.2 HTML5元素 40
2.3.3 HTML5增加及廢除的屬性 46
2.3.4 HTML5全局屬性 48
2.3.5 HTML5其他功能 50
第3章 創建HTML5文檔 54
視頻講解：1小時13分鍾
3.1 認識HTML5文檔結構 55
3.2 HTML5元素分類 58
3.3 構建主體內容 59
3.3.1 標識文章 59
3.3.2 給內容分段 61
3.3.3 設計導航信息 64
3.3.4 設計輔助信息 66
3.3.5 設計微格式 67
3.3.6 添加發布日期 68
3.4 添加語義模塊 69
3.4.1 添加標題塊 69
3.4.2 給標題分組 70
3.4.3 添加腳注塊 70
3.4.4 添加聯係信息 71
3.5 綜閤實戰：使用HTML5設計博客主頁 72
3.5.1 設計大綱 73
3.5.2 設計樣式 76
第4章 實戰HTML5錶單 79
視頻講解：1小時08分鍾
4.1 新增的input輸入類型 80
4.1.1 email類型的應用 80
4.1.2 url類型的應用 82
4.1.3 number類型的應用 83
4.1.4 range類型的應用 84
4.1.5 日期檢齣器類型的應用 85
4.1.6 search類型的應用 90
4.1.7 tel類型的應用 91
4.1.8 color類型的應用 92
4.2 新增的input屬性 93
4.2.1 新增的autocomplete屬性 93
4.2.2 新增的autofocus屬性 95
4.2.3 新增的form屬性 96
4.2.4 新增的錶單重寫屬性 97
4.2.5 新增的height與width屬性 98
4.2.6 新增的list屬性 98
4.2.7 新增的min、max和step屬性 99
4.2.8 新增的multiple屬性 100
4.2.9 新增的pattern屬性 101
4.2.10 新增的placeholder屬性 101
4.2.11 新增的required屬性 102
4.3 新增的form元素 103
4.3.1 新增的datalist元素 103
4.3.2 新增的keygen元素 103
4.3.3 新增的output元素 104
4.4 新增的form屬性 105
4.4.1 新增的autocomplete屬性 105
4.4.2 新增的novalidate屬性 105
第5章 實戰HTML5畫布 106
視頻講解：2小時
5.1 認識HTML5 canvas元素 107
5.1.1 在頁麵中添加canvas元素 107
5.1.2 Canvas如何繪製圖形 108
5.1.3 認識Canvas坐標 109
5.1.4 何時不用Canvas 109
5.1.5 如果瀏覽器不支持Canvas 110
5.1.6 檢測瀏覽器支持 110
5.2 繪製簡單圖形 111
5.2.1 繪製直綫 111
5.2.2 繪製矩形 112
5.2.3 繪製圓形 113
5.2.4 繪製三角形 115
5.2.5 清空畫布 116
5.3 繪製貝塞爾麯綫 117
5.3.1 繪製二次方貝塞爾麯綫 118
5.3.2 繪製三次方貝塞爾麯綫 119
5.4 圖形的變換 120
5.4.1 保存與恢復Canvas狀態 120
5.4.2 移動坐標空間 121
5.4.3 鏇轉坐標空間 123
5.4.4 縮放圖形 125
5.4.5 矩陣變換 126
5.5 圖形的組閤與裁切 129
5.5.1 圖形的組閤 129
5.5.2 裁切路徑 132
5.6 更多的顔色和樣式選項 133
5.6.1 應用不同的綫型 133
5.6.2 繪製綫性漸變 138
5.6.3 繪製徑嚮漸變 139
5.6.4 繪製圖案 140
5.6.5 設置圖形的透明度 141
5.6.6 創建陰影 142
5.7 繪製文字 144
5.7.1 繪製填充文字 144
5.7.2 文字相關屬性 145
5.7.3 繪製輪廓文字 145
5.7.4 測量文字寬度 146
5.8 操作與使用圖像 147
5.8.1 嚮Canvas中引入圖像 147
5.8.2 改變圖像大小 149
5.8.3 創建圖像切片 150
第6章 HTML5音頻與視頻 152
視頻講解：50分鍾
6.1 HTML5多媒體技術概述 153
6.1.1 關於編解碼器 153
6.1.2 音頻編解碼器 153
6.1.3 視頻編解碼器 154
6.2 瀏覽器支持概述 156
6.2.1 用JavaScript檢測音頻格式支持情況 157
6.2.2 用JavaScript檢測視頻格式支持情況 158
6.3 在HTML5中播放音頻 159
6.3.1 認識audio元素 159
6.3.2 播放音頻 160
6.4 在HTML5中播放視頻 161
6.4.1 認識video元素 161
6.4.2 播放視頻 162
6.5 音頻與視頻相關屬性、方法與事件 164
6.5.1 音頻與視頻相關屬性 164
6.5.2 音頻與視頻相關方法 167
6.5.3 音頻與視頻相關事件 168
6.6 綜閤實戰 169
6.6.1 用腳本控製音樂播放 169
6.6.2 查看視頻幀畫麵 170
第7章 Web存儲 175
視頻講解：1小時20分鍾
7.1 認識Web Storage 176
7.1.1 Cookie存儲機製的優缺點 176
7.1.2 為什麼要用Web Storage 176
7.1.3 Web Storage的優缺點 177
7.1.4 瀏覽器支持概述 177
7.2 使用Web Storage 178
7.2.1 檢查瀏覽器的支持性 178
7.2.2 設置和獲取數據 180
7.2.3 防止數據泄露 181
7.2.4 Web Storage的其他用法 181
7.2.5 Web Storage事件監測 182
7.2.6 實例1：設計網頁皮膚 183
7.2.7 實例2：跟蹤localStorage數據 184
7.2.8 實例3：設計計數器 186
7.2.9 綜閤應用：Web應用項目實時跟蹤 187
7.3 Web SQL數據庫 192
7.3.1 Web SQL數據庫概述 192
7.3.2 使用Web SQL數據庫 193
7.3.3 實例1：創建簡單的本地數據庫 195
7.3.4 實例2：批量存儲本地數據 198
7.3.5 綜閤應用：Web Storage和
Web SQL混閤開發 199
第8章 離綫應用 207
視頻講解：23分鍾
8.1 HTML5離綫應用概述 208
8.1.1 為什麼要學習HTML5離綫應用 208
8.1.2 瀏覽器支持概述 209
8.2 HTML5離綫應用詳解 210
8.2.1 解析manifest文件 210
8.2.2 搭建離綫應用程序 213
8.2.3 檢查瀏覽器是否支持 213
8.2.4 離綫緩存更新實現 213
8.2.5 JavaScript接口實現 214
8.2.6 離綫存儲事件監聽 217
8.3 實戰1：緩存首頁 218
8.4 實戰2：離綫編輯內容 221
8.5 實戰3：離綫跟蹤 225
第9章 Workers多綫程處理 231
視頻講解：1小時01分鍾
9.1 認識Web Workers 232
9.1.1 Web Workers概述 232
9.1.2 瀏覽器支持概述 233
9.1.3 熟悉Web Workers成員 233
9.2 使用Web Workers 234
9.2.1 檢查瀏覽器支持性 234
9.2.2 創建Web Workers 234
9.2.3 與Web Workers通信 235
9.2.4 使用Web Workers上機練習 237
9.3 案例實戰 240
9.3.1 使用多綫程實現後颱運算 240
9.3.2 在後颱過濾值 242
9.3.3 多任務並發處理 243
9.3.4 在多綫程之間通信 246
9.3.5 使用綫程技術計算Fibonacci數列 248
9.3.6 使用多綫程繪圖 249
9.4 綜閤應用：模擬退火算法 253
9.4.1 認識模擬退火算法 253
9.4.2 編寫應用主頁麵 254
9.4.3 編寫worker.js 256
9.4.4 與Web Workers通信 257
第10章 Geolocation地理位置 261
10.1 位置信息概述 262
10.1.1 為什麼要學習Geolocation 262
10.1.2 位置信息錶示方式 262
10.1.3 位置信息來源 262
10.1.4 IP定位 263
10.1.5 GPS定位 263
10.1.6 Wi-Fi定位 263
10.1.7 手機定位 264
10.1.8 自定義定位 264
10.2 使用Geolocation API 264
10.2.1 檢查瀏覽器支持性 264
10.2.2 獲取當前地理位置 265
10.2.3 監視位置信息 267
10.2.4 停止獲取位置信息 267
10.2.5 隱私保護 267
10.2.6 處理位置信息 267
10.2.7 使用position對象 268
10.3 案例實戰 269
10.3.1 使用Google地圖 269
10.3.2 跟蹤行走速度 271
第11章 CSS3概述 277
視頻講解：1小時01分鍾
11.1 迴顧CSS 278
11.1.1 CSS發展簡史 278
11.1.2 CSS 1.0和CSS 2.0概述 278
11.1.3 CSS與DIV標記之緣 285
11.1.4 CSS編碼規範 288
11.2 瞭解CSS3新增特性 289
11.2.1 屬性選擇器 289
11.2.2 RBGA 透明度 291
11.2.3 多欄布局 292
11.2.4 多背景圖片 294
11.2.5 字符串溢齣 295
11.2.6 塊陰影與圓角陰影 296
11.2.7 圓角 297
11.2.8 邊框圖片 298
11.2.9 形變 299
11.3 CSS3前景展望 301
11.3.1 CSS3的應用範圍 302
11.3.2 當前支持CSS3的瀏覽器 303
11.4 案例實戰：設計漂亮的錶單 305
第12章 CSS選擇器 310
視頻講解：34分鍾
12.1 屬性選擇器 311
12.1.1 認識屬性選擇器 311
12.1.2 案例實戰 312
12.2 結構僞類選擇器 314
12.2.1 認識結構僞類選擇器 314
12.2.2 案例實戰 315
12.3 UI僞類選擇器 321
12.3.1 認識常用UI僞類選擇器 321
12.3.2 案例實戰 322
12.4 其他選擇器 324
第13章 文本、字體與顔色 330
視頻講解：49分鍾
13.1 設計文本陰影 331
13.1.1 定義text-shadow屬性 331
13.1.2 應用陰影效果 333
13.1.3 綜閤實戰：設計黑客網站首頁 339
13.2 定義文本樣式 341
13.2.1 文本樣式簡介 341
13.2.2 溢齣文本 345
13.2.3 文本換行 347
13.3 設計顔色樣式 353
13.3.1 使用RGBA顔色值 353
13.3.2 使用HSL顔色值 355
13.3.3 使用HSLA顔色值 359
13.3.4 定義opacity屬性 360
13.3.5 定義transparent顔色值 363
第14章 背景和邊框 365
視頻講解：1小時09分鍾
14.1 設計多色邊框 366
14.1.1 用法詳解 366
14.1.2 案例實戰 368
14.2 設計邊框背景 368
14.2.1 用法詳解 369
14.2.2 案例實戰 372
14.3 設計圓角 375
14.3.1 用法詳解 376
14.3.2 案例實戰：設計橢圓圖形 379
14.4 設計陰影 380
14.4.1 用法詳解 380
14.4.2 案例實戰：設計Windows7界麵效果 385
14.5 設計背景 390
14.5.1 定義背景坐標 390
14.5.2 定義背景裁剪區域 392
14.5.3 定義背景圖像大小 395
14.5.4 定義背景圖像循環方式 396
14.5.5 定義多背景圖像 398
第15章 2D變形 400
視頻講解：31分鍾
15.1 認識transform 401
15.2 2D變形 402
15.2.1 鏇轉動畫 403
15.2.2 縮放動畫 404
15.2.3 移動動畫 406
15.2.4 傾斜動畫 408
15.2.5 變形動畫 410
15.2.6 案例實戰：設計塗鴉牆 412
15.3 自定義變形 414
15.4 定義復雜變形 416
第16章 設計動畫 420
視頻講解：1小時20分鍾
16.1 平滑過渡 421
16.1.1 定義過渡屬性 421
16.1.2 定義過渡時間 422
16.1.3 定義過渡延遲時間 423
16.1.4 定義過渡效果 424
16.1.5 案例實戰：設計Mac OS導航器 426
16.2 3D動畫 428
16.2.1 定義動畫名稱 429
16.2.2 定義動畫時間 429
16.2.3 定義動畫播放方式 429
16.2.4 定義動畫延遲時間 429
16.2.5 定義動畫播放次數 430
16.2.6 定義動畫播放方嚮 430
16.2.7 案例實戰：設計圖片翻轉特效 430
16.3 漸變效果 431
16.3.1 設計Webkit漸變 432
16.3.2 Webkit案例實戰 437
16.3.3 設計Gecko漸變 440
16.3.4 Gecko案例實戰 446
16.3.5 設計IE漸變 447
16.3.6 設計W3C漸變 449
16.4 案例綜閤實戰 449
16.4.1 設計禮品盒 450
16.4.2 設計摺疊麵闆 452
16.4.3 設計易拉罐 454
16.4.4 設計光盤滑動動畫 457
16.4.5 設計下拉菜單 461
16.4.6 設計精緻按鈕 465
第17章 網頁布局 468
視頻講解：40分鍾
17.1 設計多列布局 469
17.2 設置多列顯示樣式 471
17.2.1 定義列寬 471
17.2.2 定義列數 472
17.2.3 定義列間距 473
17.2.4 定義列邊框樣式 475
17.2.5 定義跨列顯示 476
17.2.6 定義列高度 478
17.2.7 定義打印列 480
17.3 設計盒布局 481
17.4 設置盒布局格式 485
17.4.1 定義自適應寬度 485
17.4.2 定義列顯示順序 487
17.4.3 定義列排列方嚮 489
17.4.4 定義模塊大小自適應 491
17.4.5 消除空白 493
17.4.6 定義對齊方式 497
17.5 綜閤實戰：設計多列網頁 498
第18章 用戶界麵 506
視頻講解：35分鍾
18.1 改變盒模型組成方式 507
18.2 調節元素尺寸 507
18.3 設計輪廓 509
18.3.1 定義輪廓綫 509
18.3.2 定義輪廓綫寬度 512
18.3.3 定義輪廓綫樣式 512
18.3.4 定義輪廓綫顔色 513
18.3.5 定義輪廓綫位移 513
18.4 設計導航 516
18.4.1 定義導航順序 516
18.4.2 定義方嚮鍵控製順序 519
18.5 添加顯示內容 521
18.6 恢復默認樣式 522
18.6.1 取消元素樣式 522
18.6.2 慎用initial的情況 524
第19章 CSS3其他新特性 527
視頻講解：40分鍾
19.1 溢齣處理 528
19.2 自定義字體類型 530
19.2.1 使用@font-face規則 530
19.2.2 開放字體 532
19.3 定義設備類型 532
19.3.1 認識Media Queries模塊 532
19.3.2 認識@media規則 533
19.3.3 使用@media規則 535
19.3.4 在網站中應用@media規則 537
19.4 添加語音功能 543
19.5 設計倒影 545
· · · · · · (收起)