前言
第一篇 基礎知識篇
第1章 網頁設計技術基礎 1
1.1 認識網頁和網站 1
1.1.1 網頁 1
1.1.2 網站 2
1.1.3 網站制作流程 3
1.1.4 網頁設計流程 3
1.1.5 發布站點 4
1.2 Web標準布局介紹 4
1.2.1 當前的Web開發標準 4
1.2.2 為什么使用Web標準 5
1.2.3 CSS布局標準 6
1.3 常用的網頁制作工具 7
1.3.1 Dreamweaver簡介 7
1.3.2 安裝Dreamweaver 9
1.4 HTML 5的新功能 13
1.5 初次體驗HTML 5的魅力 13
第二篇 核心技術篇
第2章 HTML 5的整體架構 15
2.1 設置網頁頭部元素 15
2.1.1 設置文檔類型 15
2.1.2 設置所有鏈接規定默認地址或默認目標 17
2.1.3 鏈接標簽 17
2.1.4 設置有關頁面的元信息 19
2.1.5 定義客戶端腳本 20
2.1.6 定義HTML文檔的樣式信息 21
2.1.7 設置頁面標題 22
2.2 設置頁面正文 23
2.3 注釋是一種說明 25
2.4 和頁面結構相關的新元素 25
2.4.1 定義區段的標簽 26
2.4.2 定義獨立內容的標簽 26
2.4.3 定義導航鏈接標簽 27
2.4.4 定義其所處內容之外的內容 27
2.4.5 定義頁腳內容的標簽 28
第3章 體驗基本元素 29
3.1 在頁面中輸出一段文字 29
3.2 對頁面進行分欄設計 30
3.3 使用
標記元素實現交互 32 3.3.1 常用屬性 33 3.3.2 實現下拉彈出效果 34 3.4 使用標記元素實現交互 36 3.5 使用標記元素 37 3.5.1 屬性介紹 37 3.5.2 實現右鍵菜單功能 39 3.6 使用標記元素 41 3.7 使用 progress 標記元素 44 3.8 使用標記元素 46 3.9 使用樹節點標記元素 49 3.9.1 元素 49 3.9.2 元素 49 3.9.3 元素 49 3.10 使用分組標記元素 51 3.10.1 元素 51 3.10.2 元素 52 3.11 使用文本層次語義標記 53 3.11.1 元素 53 3.11.2 元素 54 3.11.3 元素 54 3.12 使用圖片標記元素 55 3.13 使用框架標記元素 57 3.14 使用標記元素 58 第4章 使用表單元素 60 4.1 表單元素的類型 60 4.1.1 email類型 60 4.1.2 url類型 62 4.1.3 number類型 64 4.1.4 range類型 65 4.1.5 Date Pickers(數據檢出器) 68 4.1.6 search類型 70 4.2 表單元素中的屬性 72 4.2.1 記住表單中的數據 72 4.2.2 驗證表單中輸入的數據是否合法 74 4.2.3 在文本框中顯示提示信息 75 4.2.4 驗證文本框中的內容是否為空 77 4.2.5 開啟表單的自動完成功能 78 4.2.6 重寫表單中的某些屬性 79 4.2.7 自動設置表單中傳遞數字 81 4.2.8 在表單中選擇多個上傳文件 82 4.3 新的表單元素 83 4.3.1 在表單中自動提示輸入文本 83 4.3.2 一個簡單的乘法計算器 85 4.3.3 在網頁中生成一個密鑰 86 第5章 音頻和視頻應用詳解 88 5.1 處理視頻 88 5.1.1 使用標記 88 5.1.2 標記的屬性 89 5.2 處理音頻 93 5.2.1 標記 93 5.2.2 標記的屬性 94 5.3 高級應用 97 5.3.1 為播放的視頻準備一幅素材圖片 97 5.3.2 顯示加載視頻的狀態 100 5.3.3 出錯時在播放屏幕中顯示出錯信息 101 5.3.4 檢測瀏覽器是否支持這個媒體類型 103 5.3.5 顯示視頻的播放狀態 105 5.3.6 顯示播放視頻的時間信息 107 第6章 繪圖應用詳解 110 6.1 使用標記 110 6.2 HTML DOM Canvas對象 111 6.3 HTML 5繪圖實踐 113 6.3.1 在指定位置繪制指定角度的相交線 113 6.3.2 繪制一個圓 114 6.3.3 在畫布中顯示一幅指定的圖片 115 6.3.4 繪制一個指定大小的正方形 116 6.3.5 繪制一個帶邊框的矩形 118 6.3.6 繪制一個漸變圖形 119 6.3.7 繪制不同的圓形 121 6.3.8 繪制一個漸變圓形 125 6.3.9 移動、縮放和旋轉網頁中的正方形 127 6.3.10 使用組合的方式顯示圖形 129 6.3.11 使用不同的方式平鋪指定的圖像 131 6.3.12 切割指定的圖像 133 6.3.13 繪制文字 135 6.3.14 制作一個簡單的動畫 137 第三篇 技術提高篇 第7章 數據存儲應用詳解 140 7.1 Web存儲 140 7.1.1 什么是Web存儲 140 7.1.2 Web存儲的影響 140 7.2 HTML 5中的兩種存儲方法 141 7.2.1 使用localStorage方法 141 7.2.2 使用sessionStorage方法 142 7.3 數據存儲對象 143 7.3.1 使用sessionStorage對象 143 7.3.2 使用localStorage對象 148 7.3.3 使用localStorage對象中的clear()方法 151 7.3.4 使用localStorage對象中的屬性 153 7.4 WebDB存儲方式 156 7.4.1 WebDB存儲基礎 156 7.4.2 執行事務操作 158 7.4.3 調用執行SQL語句 159 7.5 實現一個日記式事務提醒系統 162 7.6 使用sessionStorage來實現客戶端的session功能 166 第8章 使用Web Sockets API 180 8.1 安裝jWebSocket服務器 180 8.2 實現跨文檔傳輸數據 181 8.3 使用WebSocket傳送數據 185 8.3.1 使用Web Sockets API的方法 185 8.3.2 實戰演練 186 8.4 處理JSON對象 188 8.5 jWebSocket框架 191 8.5.1 使用jWebSocketTest框架進行通信 192 8.5.2 使用jWebSocketTest開發一個聊天系統 196 第9章 使用Geolocation API 204 9.1 Geolocation API介紹 204 9.1.1 對瀏覽器的支持情況 204 9.1.2 使用API 205 9.2 獲取當前地理位置 206 9.3 使用getCurrentPosition()方法 209 9.4 在網頁中使用地圖 211 9.4.1 在網頁中調用地圖 212 9.4.2 在地圖中顯示當前的位置 214 9.4.3 在網頁中居中顯示定位地圖 216 9.4.4 利用百度地圖實現定位處理 219 9.5 在彈出框中顯示定位信息 221 第10章 使用Web Workers API 224 10.1 Web Workers API基礎 224 10.1.1 使用HTML5 Web Workers API 224 10.1.2 需要使用.js文件 225 10.1.3 與Web Worker進行雙向通信 225 10.2 Worker線程處理 227 10.2.1 使用Worker處理線程 228 10.2.2 使用線程傳遞JSON對象 231 10.2.3 使用線程嵌套交互數據 233 10.2.4 通過JSON發送消息 236 10.3 執行大計算量任務 238 10.4 在后臺運行耗時較長的運算 245 第11章 在Android手機中使用HTML 5 249 11.1 搭建開發環境 249 11.1.1 搭建Android開發環境 249 11.1.2 搭建網頁運行環境 251 11.2 先看一段代碼 254 11.2.1 實現主頁 254 11.2.2 編寫CSS文件 255 11.2.3 實現頁面自動縮放 258 11.3 添加Android的CSS 258 11.3.1 編寫基本的樣式 258 11.3.2 添加視覺效果 260 11.4 添加JavaScript 261 11.4.1 jQuery框架介紹 261 11.4.2 具體實踐 263 11.5 使用Ajax 265 11.5.1 編寫HTML文件 266 11.5.2 編寫JavaScript文件 269 11.5.3 最后的修飾 270 11.6 讓網頁動起來 271 11.6.1 一個開源框架——jQTouch 272 11.6.2 一個簡單應用 272 第四篇 實戰演練篇 第12章 游戲實戰 280 12.1 開發一個躲避小游戲 280 12.2 開發一個迷宮游戲 285 12.3 開發一個網頁版的貪吃蛇游戲 290 12.4 開發一個網頁版的俄羅斯方塊游戲 294 12.5 開發一個網頁版的抽獎游戲 305 第13章 統計圖實戰 310 13.1 使用插件RGraph制作柱狀圖 310 13.2 改變選中柱狀圖的顏色 311 13.3 在網頁中繪制分組柱狀圖 314 13.4 將柱狀圖的同一根柱子設置為不同的顏色 316 13.5 在網頁中繪制一個折線圖 317 13.6 在網頁中實現一個顯示提示的折線圖 319 13.7 在網頁中繪制多根折線 322 13.8 繪制范圍折線圖 324 13.9 在一個折線圖中使用左右兩根不同單位的垂直坐標軸 325 13.10 在一個統計圖中同時繪制柱狀圖與折線圖 327 13.11 在HTML 5網頁中繪制動態折線圖 329 13.12 在HTML 5網頁中繪制一個餅圖 332 13.13 點擊餅塊后呈現白色半透明效果 333 13.14 在HTML 5網頁中繪制橫向柱狀圖 335 13.15 在網頁中繪制分組橫向柱狀圖 337 第14章 特效實戰 339 14.1 實現星級評論功能 339 14.2 實現無刷新驗證 342 14.3 使用jQuery實現的表單特效 345 14.4 在網頁中動態操作表格 348 14.5 在文本框中實現層效果 351 14.6 實現五彩連珠網頁特效 354 14.7 讓網頁中的圖片div豎向滑動 368 14.8 實現滑動門特效 371 14.9 實現上下可拖動效果 374 14.10 在網頁中實現粒子特效效果 377 第15章 Web設計中的典型模塊 384 15.1 一個項目引發的問題 384 15.2 JavaScript特效的應用 385 15.3 文字處理 387 15.3.1 實例概述 387 15.3.2 定義文本顏色 388 15.3.3 指定文本內容 388 15.3.4 文本增亮處理 388 15.3.5 文本減亮處理 389 15.3.6 定義變換頻率 389 15.4 時間處理模塊 390 15.5 圖像處理模塊 392 15.5.1 實例概述 392 15.5.2 設置圖像屬性 393 15.5.3 亮度增加處理 393 15.5.4 亮度減小處理 394 15.6 背景處理 396 15.7 鼠標處理 397 15.7.1 實例概述 397 15.7.2 指定跟隨文本 397 15.7.3 文本效果處理 398 15.7.4 頁面顯示 399 15.8 菜單處理 399 15.8.1 實例概述 400 15.8.2 設置菜單元素內容 400 15.8.3 設置滾動區域屬性 400 第16章 文件操作實戰 402 16.1 選擇一個上傳文件 402 16.2 選擇多個上傳文件 405 16.3 獲取文件的類型和大小 406 16.4 過濾出非圖片格式的文件 409 16.5 過濾上傳文件的類型 410 16.6 預覽上傳的圖片 412 16.7 讀取某個文本文件的內容 414 16.8 監聽事件 416 16.9 使用拖拽的方式上傳圖片 419 16.10 拖拽上傳圖片到表單并顯示預覽 421 16.11 IE瀏覽器支持的上傳圖片預覽程序 424 16.12 使用拖拽的方式在相簿中對照片進行排序 426 第五篇 綜合實戰篇 第17章 使用HTML 5+CSS 3開發商業站點實例 430 17.1 CSS 3基礎 430 17.1.1 CSS概述 430 17.1.2 基本語法 431 17.1.3 選擇符的使用 432 17.1.4 CSS屬性的簡介 435 17.1.5 幾個常用值 436 17.1.6 網頁中的CSS應用 440 17.1.7 CSS的編碼規范 443 17.1.8 CSS調試 445 17.2 開發一個商業站點 447 17.2.1 網站規劃 447 17.2.2 站點需求分析 447 17.2.3 預期效果分析 448 17.2.4 站點結構規劃 450 17.2.5 設計系統首頁文件 450 17.2.6 設計產品展示頁面 453 17.2.7 設計關于我們頁面 455 17.2.8 設計CSS 3樣式文件 457
HTML 5是HTML技術的新版本,和以前的版本相比,HTML 5的功能更加強大,并且支持移動Web應用。本書分為5篇,共計17章,包括:基礎知識篇、核心技術篇、技術提高篇、實戰演練篇和綜合實戰篇五大部分內容。在講解每一個知識點時,都遵循了“理論結合實踐”的教學模式,通過具體實例講解了每一個知識點的具體用法。
本書適合網頁設計人員、Web設計師、網站開發人員、網絡維護人員的學習和參考,也可作為相關培訓學校和大專院校相關專業的教學用書。