《HTML5基礎知識、核心技術與前沿案例 》是一本引導初、中級學習者深入了解并有效掌握HTML5核心技巧的技術實戰(zhàn)書籍,全書采用“基礎知識+案例驅動”的雙軌模式,精心安排了大量經典的HTML5設計實戰(zhàn)案例,包括頁面元素與布局、動畫與動效、圖形與圖像、交互操作、頁面組件、音頻與視頻、響應式設計等,并精選了微信小游戲、創(chuàng)意網站等綜合性的前沿交互應用。實例基本涵蓋了初、中級學習者在實戰(zhàn)中幾乎可能遇到的所有問題,展示了各種流行的互動設計理念,讓讀者能夠輕松地學習基礎知識,有效掌握各種核心技巧,快速上手前沿應用開發(fā),并通過HTML5發(fā)現交互設計的樂趣。
劉歡,交互設計師,前端工程師,HTML5技術愛好者,現居上海。曾設計開發(fā)了國內首ge高校響應式設計網站,當前興趣主要聚焦于移動Web前端開發(fā)。交互作品曾獲紐約廣告節(jié)銅獎、中國4A創(chuàng)意金印獎、第五屆中國網絡廣告大賽銀獎等,作品“Watch Shanghai bloom”曾參展第七屆上海雙年展。曾出版《Flash ActionScript 3.0 全站互動設計》、《Flash ActionScript 3.0交互設計200例》等交互類著作。
第一部分 HTML5基礎
第1章 初探HTML5:制作一份邀請函 010
1.1 開發(fā)前的準備工作 010
1.1.1 制定首個學習目標 010
1.1.2 準備開發(fā)環(huán)境 011
1.2 制作HTML頁面 012
1.2.1 創(chuàng)建首個HTML5頁面 012
1.2.2 增加必要的頁面元素 014
1.2.3 頁面中那些看不見的代碼 015
1.3 頁面的美化 015
1.3.1 制作邀請函的頁面背景 015
1.3.2 調整邀請函的內容區(qū)域位置 018
1.3.3 調整邀請函的文字字體與字號 020
1.3.4 制作邀請函的按鈕 021
1.3.5 創(chuàng)建一個外部CSS文件 022
1.4 為頁面創(chuàng)建交互 024
1.4.1 創(chuàng)建按鈕的JavaScript交互 024
1.4.2 制作還未結束:頁面的移動化 026
第2章 HTML5新手詳解 028
2.1 HTML代碼基礎 028
2.1.1 HTML基礎語法 028
2.1.2 頁面根元素 029
2.1.3 文檔元數據 031
2.1.4 區(qū)塊元素 034
2.1.5 分組內容元素 039
2.2 HTML常用元素 042
2.2.1 文本 042
2.2.2 表單 043
2.2.3 表格 047
2.2.4 WAI-ARIA 050
第3章 CSS3新手詳解 052
3.1 CSS代碼基礎 052
3.1.1 CSS基礎語法 052
3.1.2 繼承 054
3.1.3 選擇器 057
3.2 CSS3常用屬性 059
3.2.1 文本和字體 059
3.2.2 邊框與背景 062
3.2.3元素定位 065
3.2.4 框模型 068
3.2.5 列表 071
3.3 CSS3常用效果與技巧 075
3.3.1 陰影效果 075
3.3.2 2D與3D效果 077
3.3.3 優(yōu)先級 078
第4章 JavaScript新手詳解 080
4.1 JavaScript代碼基礎 080
4.1.1 如何調試JavaScript? 080
4.1.2 為代碼添加注釋 081
4.1.3 創(chuàng)建一個簡單的變量 082
4.1.4 幾種常用的JavaScript運算符 083
4.1.5 JavaScript中的條件語句 085
4.1.6 JavaScript中的循環(huán)語句 087
4.2 JavaScript編程進階 089
4.2.1 數組及其操作 089
4.2.2 日期和時間 091
4.2.3 初涉函數 092
4.2.4 函數的變量作用域 094
4.2.5 Object簡介 095
4.2.6 JavaScript的DOM操作 097
4.2.7 DOM事件處理 100
4.2.8 利用JavaScript實現HTML5拖放 101
第5章 移動端HTML5開發(fā)詳解 103
5.1 桌面端開發(fā)概述 103
5.1.1 桌面端和移動端有何不同? 103
5.1.2 響應式設計還是移動版網站? 104
5.2 移動端開發(fā)技巧 105
5.2.1 Viewport設置 105
5.2.2 百分比布局 106
5.2.3 Flexbox:輕松實現彈性布局 111
5.2.4 Media Query 114
5.2.5 雪碧圖 116
5.2.6 圖標字體 119
5.2.7 移動端交互 121
5.2.8 移動端調試 122
5.2.9 移動端其他技巧 124
第6章 事半功倍:運用流行開源類庫 126
6.1 開源類庫jQuery介紹 126
6.1.1 強大的jQuery 126
6.1.2 jQuery選擇器 128
6.1.3 jQuery的屬性和DOM操作 130
6.1.4 jQuery動態(tài)效果 132
6.1.5 jQuery事件 134
6.1.6 jQuery的優(yōu)缺點 136
6.2 其他開源類庫介紹 136
6.2.1 使用jQuery Mobile開發(fā)移動站點 136
6.2.2 Zepto——移動端的jQuery 137
6.2.3 前端開發(fā)框架BootStrap 138
6.2.4 設計工具包Flat UI 139
6.2.5 瀏覽器檢測工具Modernizr 140
6.2.6 數據可視化工具D3 141
6.2.7 使用Hammer輕松控制觸摸手勢 141
6.2.8 前端在線編輯工具 142
第7章 HTML5與周邊編程語言、軟件 143
7.1 HTML5與Flash 143
7.1.1 HTML5與Flash的結合 143
7.1.2 使用Google Swiffy進行Flash轉換 145
7.2 HTML5與其他周邊語言和軟件 146
7.2.1 HTML5與應用開發(fā) 146
7.2.2 HTML5與Illustrator的結合 148
7.2.3 HTML5與Photoshop的結合 149
7.2.4 HTML5開發(fā)桌面端應用 151
第二部分?HTML5前沿經典應用篇
第8章 HTML5頁面元素與布局 153
8.1 頁面元素與布局核心技巧 153
8.2 HTML5布局基礎 153
8.2.1 圖文混排與題圖文字布局 154
8.2.2 Hero Unit圖標題文混排 156
8.2.3 兩列均分布局 159
8.2.4 格子布局 164
8.2.5 多列等高布局 168
8.3 HTML5布局進階 170
8.3.1 兩列自適應布局 171
8.3.2 三列自適應布局 175
8.3.3 瀑布流布局 179
第9章 HTML5動畫與動效 182
9.1 動畫與動效核心技巧 182
9.2 CSS3動畫與動效 182
9.2.1 按鈕元素動畫效果 183
9.2.2 圖標元素動畫效果 186
9.2.3 頁面切換動畫效果 192
9.2.4 加載動畫效果 198
9.2.5 逐幀動畫效果 204
9.2.6 3D翻頁動畫效果 208
9.3 JavaScript動畫與動效 211
9.3.1 Canvas粒子動畫效果 211
9.3.2 GSAP類庫動畫效果 214
第10章 HTML5圖形與圖像 217
10.1 圖形與圖像核心技巧 217
10.2 CSS3圖形與圖像繪制 218
10.2.1 關閉按鈕繪制 218
10.2.2 菜單圖標繪制 219
10.2.3 三角圖標繪制 221
10.2.4 漸變色繪制 225
10.2.5 Pattern圖案繪制 227
10.2.6 鋸齒圖形繪制 229
10.3 Canvas圖形與圖像繪制 231
10.3.1 Canvas圖形繪制 231
10.3.2 Canvas像素控制 235
10.4 SVG圖形與圖像繪制 237
10.4.1 SVG圖形繪制 237
10.4.2 SVG圖像遮罩 242
第11章 HTML5交互操作 244
11.1 交互操作核心技巧 244
11.2 滾動類交互 244
11.2.1 頁面固定背景 244
11.2.2 選區(qū)控制 246
11.2.3 局部滾動 248
11.2.4 滾動監(jiān)聽 252
11.2.5 視差滾動 256
11.2.6 滾動觸發(fā)動畫 261
11.3 鍵盤和鼠標類交互 267
11.3.1 滑塊拖動 267
11.3.2 Canvas鍵盤操作 271
11.4 移動端交互 274
11.4.1 觸摸操作 274
11.4.2 運動與重力感應 276
11.5 其他交互操作 279
11.5.1 本地數據文件加載 279
11.5.2 本地文件操作 281
11.5.3 Geolocation操作 284
11.5.4 localStorage操作 287
第12章 HTML5頁面組件 290
12.1 頁面組件開發(fā)核心技巧 290
12.2 圖層類頁面組件 290
12.2.1 懸浮圖層 290
12.2.2 彈出圖層 293
12.3 區(qū)域類頁面組件 297
12.3.1 Tab切換 297
12.3.2 折疊區(qū)域 300
12.4 導航類頁面組件 303
12.4.1 下拉菜單 303
12.4.2 頂部固定菜單 306
12.4.3 滑動導航 308
12.5 其他頁面組件 311
12.5.1 時間軸 311
12.5.2 圖像輪播 313
12.5.3 日歷組件 317
第13章 HTML5音頻與視頻 322
13.1 音頻、視頻核心開發(fā)技巧 322
13.2 音頻類開發(fā) 322
13.2.1 音頻播放 322
13.2.2 麥克風操作 327
13.3 視頻類開發(fā) 330
13.3.1 視頻播放 330
13.3.2 視頻背景 331
13.3.3 攝像頭操作 333
第14章 HTML5響應式設計 336
14.1 響應式設計核心技巧 336
14.2 響應式設計案例 338
14.2.1 響應式列表 338
14.2.2 響應式內容圖片 341
14.2.3 響應式背景 343
14.2.4 響應式圖像輪播 346
14.2.5 響應式菜單 347
第三部分?HTML5綜合案例篇
第15章 HTML5微信游戲 354
15.1 制作思路 354
15.1.1 微信游戲開發(fā)基礎知識 354
15.1.2 微信“520”小游戲策劃 355
15.2 基礎頁面的開發(fā) 356
15.2.1 游戲界面設計 356
15.2.2 創(chuàng)建HTML頁面 357
15.2.3 創(chuàng)建CSS樣式 359
15.3 交互界面的開發(fā) 364
15.3.1 制作loading界面交互 364
15.3.2 制作初始界面交互 364
15.3.3 制作音樂控制器 366
15.3.4 獲取點陣坐標 367
15.3.5 制作交互界面 368
15.3.6 制作結果界面 371
15.4 尾聲 371
第16章 HTML5創(chuàng)意網站 379
16.1 制作思路與基礎頁面開發(fā) 379
16.1.1 站點規(guī)劃與設計 379
16.1.2 創(chuàng)建站點DOM結構 380
16.2 頁面的美化和交互功能創(chuàng)建 382
16.2.1 創(chuàng)建首頁樣式 382
16.2.2 創(chuàng)建次級頁面樣式 385
16.2.3 頁面切換效果 389
16.3 頁面細節(jié)處理 391
16.3.1 制作作品集內容頁面 391
16.3.2 兼容性提示 394
16.4 小結 395
后記:Web設計變遷及經驗談 403