●目錄 部分 HTML5基礎 章 初探HTML5：制作一份邀請函 010 1.1 開發前的準備工作 010 1.1.1 制定首個學習目標 010 1.1.2 準備開發環境 011 1.2 制作HTML頁面 012 1.2.1 創建首個HTML5頁面 012 1.2.2 增加必要素 014 1.2.3 頁面中那些看不見的代碼 015 1.3 頁面的美化 015 1.3.1 制作邀請函的頁面背景 015 1.3.2 調整邀請函的內容區域位置 018 1.3.3 調整邀請函的文字字體與字號 020 1.3.4 制作邀請函的按鈕 021 1.3.5 創建一個外部CSS文件 022 1.4 為頁面創建交互 024 1.4.1 創建按鈕的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素 034 2.1.5 分素 039 2.2 HTM素 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.素定位 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 優先級 078 第4章 JavaScript新手詳解 080 4.1 JavaScript代碼基礎 080 4.1.1 如何調試JavaScript？ 080 4.1.2 為代碼添加注釋 081 4.1.3 創建一個簡單的變量 082 4.1.4 幾種常用的JavaScript運算符 083 4.1.5 JavaScript中的條件語句 085 4.1.6 JavaScript中的循環語句 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開發詳解 103 5.1 桌面端開發概述 103 5.1.1 桌面端和移動端有何不同？ 103 5.1.2 響應式設計還是移動版網站？ 104 5.2 移動端開發技巧 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動態效果 132 6.1.5 jQuery事件 134 6.1.6 jQuery的優缺點 136 6.2 其他開源類庫介紹 136 6.2.1 使用jQuery Mobile開發移動站點 136 6.2.2 Zepto——移動端的jQuery 137 6.2.3 前端開發框架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與應用開發 146 7.2.2 HTML5與Illustrator的結合 148 7.2.3 HTML5與Photoshop的結合 149 7.2.4 HTML5開發桌面端應用 151 第二部分?HTML5前沿經典應用篇 第8章 HTML素與布局 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 0章 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 1章 HTML5交互操作 244 11.1 交互操作核心技巧 244 11.2 滾動類交互 244 11.2.1 頁面固定背景 244 11.2.2 選區控制 246 11.2.3 局部滾動 248 11.2.4 滾動監聽 252 11.2.5 視差滾動 256 11.2.6 滾動觸發動畫 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 2章 HTML5頁面組件 290 12.1 頁面組件開發核心技巧 290 12.2 圖層類頁面組件 290 12.2.1 懸浮圖層 290 12.2.2 彈出圖層 293 12.3 區域類頁面組件 297 12.3.1 Tab切換 297 12.3.2 折疊區域 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 3章 HTML5音頻與視頻 322 13.1 音頻、視頻核心開發技巧 322 13.2 音頻類開發 322 13.2.1 音頻播放 322 13.2.2 麥克風操作 327 13.3 視頻類開發 330 13.3.1 視頻播放 330 13.3.2 視頻背景 331 13.3.3 攝像頭操作 333 4章 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綜合案例篇 5章 HTML5微信遊戲 354 15.1 制作思路 354 15.1.1 微信遊戲開發基礎知識 354 15.1.2 微信“520”小遊戲策劃 355 15.2 基礎頁面的開發 356 15.2.1 遊戲界面設計 356 15.2.2 創建HTML頁面 357 15.2.3 創建CSS樣式 359 15.3 交互界面的開發 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 6章 HTML5創意網站 379 16.1 制作思路與基礎頁面開發 379 16.1.1 站點規劃與設計 379 16.1.2 創建站點DOM結構 380 16.2 頁面的美化和交互功能創建 382 16.2.1 創建首頁樣式 382 16.2.2 創建次級頁面樣式 385 16.2.3 頁面切換效果 389 16.3 頁面細節處理 391 16.3.1 制作作品集內容頁面 391 16.3.2 兼容性提示 394 16.4 小結 395 後記：Web設計變遷及經驗談 403
內容簡介
本書是一本引導初、中級學習者深入了解並有效掌握HTML5核心技巧的技術實戰書籍，全書采用“基礎知識+案例驅動”的雙軌模式，精心安排了大量經典的HTML5設計實戰案例，包素與布局、動畫與動效、圖形與圖像、交互操作、頁面組件、音頻與視頻、響應式設計等，並精選了微信小遊戲、創意網站等綜合性的前沿交互應用。實例基本涵蓋了初、中級學習者在實戰中幾乎可能遇到的所有問題，展示了各種流行的互動設計理念，讓讀者能夠輕松地學習基礎知識，有效掌握各種核心技巧，快速上手前沿應用開發，並通過HTML5發現交互設計的樂趣。
