HTML5網頁設計案例課堂

《HTML5網頁設計案例課堂》是一部出版的圖書，作者是劉玉紅、蒲娟。

基本介紹

• 中文名：HTML5網頁設計案例課堂
• 作者：劉玉紅、蒲娟
• 出版時間：2016年1月1日
• 出版社：清華大學出版社
• ISBN：9787302420781
• 定價：65 元
• 印次：1-1

目錄

第1篇基礎知識

第1章初識HTML5 3

1.1　HTML5簡介 4

1.1.1　HTML5簡介 4

1.1.2　HTML5檔案的基本結構 5

1.2　HTML5檔案的編寫方法 5

1.2.1　案例1——手工編寫HTML5 5

1.2.2　案例2——使用HTML編輯器 6

1.3　使用瀏覽器查看HTML5檔案 10

1.3.1　各大瀏覽器與HTML5

的兼容 11

1.3.2　案例3——查看頁面效果 11

1.3.3　案例4——查看源檔案 11

1.4　跟我練練手 12

1.4.1　練習目標 12

1.4.2　上機練習 12

1.5　高手甜點 12

第2章HTML5網頁文檔結構 15

2.1　Web標準 16

2.1.1　Web標準概述 16

2.1.2　Web標準規定的內容 16

2.2　HTML5文檔的基本結構 17

2.2.1　文檔類型說明 18

2.2.2　HTML5標記 19

2.2.3　頭標記 19

2.2.4　網頁的主體標記 22

2.2.5　頁面注釋標記 22

2.3　綜合案例——符合W3C標準的

HTML5網頁製作 23

2.4　跟我練練手 24

2.4.1　練習目標 24

2.4.2　上機練習 25

2.5　高手甜點 25

第3章HTML5與HTML4的區別 27

3.1　新增的主體結構元素 28

3.1.1　案例1——section元素的使用 28

3.1.2　案例2——article元素的使用 29

3.1.3　案例3——aside元素的使用 32

3.1.4　案例4——nav元素的使用 33

3.1.5　案例5——time元素的使用 36

3.2　新增的非主體結構元素 37

3.2.1　案例6——header元素的使用 37

3.2.2　案例7——hgroup元素的使用 38

3.2.3　案例8——footer元素的使用 40

3.2.4　案例9——figure元素的使用 42

3.2.5　案例10——address元素的

使用 45

3.3　新增其他常用元素 46

3.3.1　案例11——mark元素的使用 46

3.3.2　案例12——rp元素、rt元素

與ruby元素的使用 48

3.3.3　案例13——progress元素的

使用 49

3.3.4　案例14——command元素的

使用 50

3.3.5　案例15——embed元素的

使用 50

3.3.6　案例16——details元素與

summary元素的使用 51

3.3.7　案例17——datalist元素的

使用 52

3.4　新增全局屬性 53

3.4.1　案例18——contentEditable

屬性的使用 53

3.4.2　案例19——spellcheck屬性的

使用 54

3.4.3　案例20——tabIndex屬性的

使用 55

3.5　新增的其他屬性 56

3.5.1　案例21——表單相關屬性的

使用 56

3.5.2　案例22——連結相關屬性的

使用 64

3.5.3　案例23——其他屬性的使用 66

3.6　HTML5廢除的屬性 66

3.7　跟我練練手 68

3.7.1　練習目標 68

3.7.2　上機練習 68

3.8　高手甜點 68

第2篇核心技術

第4章設計網頁文本內容 73

4.1　標題文字的建立 74

4.1.1　案例1——標題文字標記 74

4.1.2　案例2——標題文字的對齊

方式 75

4.2　設定文字格式 75

4.2.1　案例3——設定文字字型 75

4.2.2　案例4——設定字號 77

4.2.3　案例5——設定文字顏色 78

4.2.4　案例6——設定粗體、斜體、

下劃線 79

4.2.5　案例7——設定上標與下標 81

4.2.6　案例8——設定字型風格 82

4.2.7　案例9——設定加粗字型 83

4.2.8　案例10——設定字型複合

屬性 84

4.2.9　案例11——設定陰影文本 85

4.2.10　案例12——控制換行 86

4.3　設定段落格式 88

4.3.1　案例13——設定段落標記 88

4.3.2　案例14——設定換行標記 89

4.4　設定網頁水平線 90

4.4.1　案例15——添加水平線 90

4.4.2　案例16——設定水平線的

寬度與高度 91

4.4.3　案例17——設定水平線的

顏色 92

4.4.4　案例18——設定水平線的

對齊方式 92

4.4.5　案例19——去掉水平線陰影 93

4.5　綜合案例——成才教育網文本設計 94

4.6　跟我練練手 95

4.6.1　練習目標 95

4.6.2　上機練習 95

4.7　高手甜點 95

第5章網頁列表與段落設計 97

5.1　網頁文字列表設計 98

5.1.1　案例1——建立無序列表

• 98
• 5.1.2　案例2——建立有序列表
• 99
• 5.1.3　案例3——建立不同類型的
• 無序列表 100
• 5.1.4　案例4——建立不同類型的
• 有序列表 101
• 5.1.5　案例5——嵌套列表 102
• 5.1.6　案例6——自定義列表
• 103
• 5.2　網頁段落格式的設計 104
• 5.2.1　案例7——設計單詞間隔
• word-spacing 104
• 5.2.2　案例8——設計字元間隔
• letter-spacing 105
• 5.2.3　案例9——設計文字修飾
• text-decoration 106
• 5.2.4　案例10——設計垂直對齊
• 方式vertical-align 107
• 5.2.5　案例11——設計文本轉換
• text-transform 109
• 5.2.6　案例12——設計水平對齊
• 方式text-align 110
• 5.2.7　案例13——設計文本縮進
• text-indent 112
• 5.2.8　案例14——設計文本行高
• line-height 113
• 5.2.9　案例15——處理空白
• white-space 114
• 5.2.10　案例16——文本反排
• unicode-bidi 115
• 5.3　綜合案例——製作圖文混排型
• 旅遊網頁 117
• 5.4　跟我練練手 118
• 5.4.1　練習目標 118
• 5.4.2　上機練習 118
• 5.5　高手甜點 118
• 第6章HTML5網頁中的圖像 121
• 6.1　網頁中的圖像 122
• 6.1.1　網頁中支持的圖片格式 122
• 6.1.2　圖像中的路徑 122
• 6.2　在網頁中插入圖像 124
• 6.2.1　案例1——插入圖像 124
• 6.2.2　案例2——從不同位置插入
• 圖像 125
• 6.3　編輯網頁中的圖像 126
• 6.3.1　案例3——設定圖像的寬度
• 和高度 126
• 6.3.2　案例4——設定圖像的提示
• 文字 127
• 6.3.3　案例5——將圖片設定為
• 網頁背景 128
• 6.3.4　案例6——排列圖像 129
• 6.4　實戰演練——圖文並茂房屋裝飾
• 裝修網頁 130
• 6.5　跟我練練手 131
• 6.5.1　練習目標 131
• 6.5.2　上機練習 131
• 6.6　高手甜點 131
• 第7章使用HTML5建立超連結 133
• 7.1　網頁超連結的概念 134
• 7.1.1　什麼是網頁超連結 134
• 7.1.2　超連結中的URL 134
• 7.1.3　超連結的URL類型 135
• 7.2　建立網頁超級連結 135
• 7.2.1　案例1——創建超文本連結 135
• 7.2.2　案例2——創建圖片連結 137
• 7.2.3　案例3——創建下載連結 138
• 7.2.4　案例4——使用相對路徑
• 和絕對路徑 139
• 7.2.5　案例5——設定以新視窗
• 顯示超連結頁面 140
• 7.2.6　案例6——設定電子郵件
• 連結 142
• 7.3　案例7——浮動框架iframe的使用 143
• 7.4　案例8——精確定位熱點區域 145
• 7.5　綜合案例——使用錨連結製作
• 電子書閱讀網頁 148
• 7.6　跟我練練手 151
• 7.6.1　練習目標 151
• 7.6.2　上機練習 151
• 7.7　高手甜點 151
• 第8章使用HTML5創建表單 153
• 8.1　案例1——認識表單 154
• 8.2　表單基本元素的使用 155
• 8.2.1　案例2——單行文本輸入框
• text的使用 155
• 8.2.2　案例3——多行文本輸入框
• textarea的使用 156
• 8.2.3　案例4——密碼域password
• 的使用 156
• 8.2.4　案例5——單選按鈕radio的
• 使用 157
• 8.2.5　案例6——複選框checkbox
• 的使用 158
• 8.2.6　案例7——下拉列表框select
• 的使用 159
• 8.2.7　案例8——普通按鈕button
• 的使用 160
• 8.2.8　案例9——提交按鈕submit
• 的使用 161
• 8.2.9　案例10——重置按鈕reset
• 的使用 162
• 8.3　表單高級元素的使用 163
• 8.3.1　案例11——url屬性的套用 163
• 8.3.2　案例12——email屬性的
• 套用 164
• 8.3.3　案例13——date屬性和
• times屬性的套用 165
• 8.3.4　案例14——number屬性的
• 套用 166
• 8.3.5　案例15——range屬性的
• 套用 167
• 8.3.6　案例16——required屬性
• 的套用 167
• 8.4　綜合案例——創建用戶反饋表單 168
• 8.5　跟我練練手 170
• 8.5.1　練習目標 170
• 8.5.2　上機練習 170
• 8.6　高手甜點 170
• 第9章使用HTML5創建表格 171
• 9.1　表格的基本結構 172
• 9.2　使用HTML5創建表格 173
• 9.2.1　案例1——創建普通表格 174
• 9.2.2　案例2——創建一個帶有
• 標題的表格 175
• 9.2.3　案例3——定義表格的框線
• 類型 176
• 9.2.4　案例4——定義表格的表頭 177
• 9.2.5　案例5——設定表格背景 178
• 9.2.6　案例6——設定單元格背景 180
• 9.2.7　案例7——合併單元格 181
• 9.2.8　案例8——排列單元格中的
• 內容 185
• 9.2.9　案例9——設定單元格的
• 行高與列寬 186
• 9.3　案例10——創建完整的表格 187
• 9.4　綜合案例——製作商品報價表 189
• 9.5　跟我練練手 191
• 9.5.1　練習目標 191
• 9.5.2　上機練習 191
• 9.6　高手甜點 191
• 第10章HTML5中的多媒體 193
• 10.1　網頁音頻標籤audio 194
• 10.1.1　audio標籤概述 194
• 10.1.2　audio標籤的屬性 194
• 10.1.3　音頻解碼器 195
• 10.1.4　audio標籤瀏覽器的支持
• 情況 195
• 10.2　網頁視頻標籤video 195
• 10.2.1　video標籤概述 195
• 10.2.2　video標籤的屬性 195
• 10.2.3　視頻解碼器 196
• 10.2.4　video標籤瀏覽器的支持
• 情況 196
• 10.3　添加網頁音頻檔案 197
• 10.3.1　案例1——設定背景音樂 197
• 10.3.2　案例2——設定音樂循環
• 播放 198
• 10.4　添加網頁視頻檔案 198
• 10.4.1　案例3——為網頁添加視頻
• 檔案 198
• 10.4.2　案例4——設定自動運行 199
• 10.4.3　案例5——設定視頻檔案
• 的循環播放 200
• 10.4.4　案例6——設定視頻視窗
• 的高度與寬度 201
• 10.5　添加網頁滾動文字 202
• 10.5.1　案例7——滾動文字標籤
• 的使用 202
• 10.5.2　案例8——滾動方向屬性
• 的套用 203
• 10.5.3　案例9——滾動方式屬性
• 的套用 204
• 10.5.4　案例10——滾動速度屬性
• 的套用 205
• 10.5.5　案例11——滾動延遲屬性
• 的套用 206
• 10.5.6　案例12——滾動循環屬性
• 的套用 206
• 10.5.7　案例13——滾動範圍屬性
• 的套用 207
• 10.5.8　案例14——滾動背景顏色
• 屬性的套用 208
• 10.5.9　案例15——滾動空間屬性
• 的套用 209
• 10.6　跟我練練手 210
• 10.6.1　練習目標 210
• 10.6.2　上機練習 210
• 10.7　高手甜點 210
• 第11章使用HTML5繪製圖形 213
• 11.1　什麼是canvas 214
• 11.2　繪製基本形狀 215
• 11.2.1　案例1——繪製矩形 215
• 11.2.2　案例2——繪製圓形 216
• 11.2.3　案例3——使用moveTo與
• lineTo繪製直線 217
• 11.2.4　案例4——使用bezierCurveTo
• 繪製貝濟埃曲線 219
• 11.3　繪製漸變圖形 221
• 11.3.1　案例5——繪製線性漸變 221
• 11.3.2　案例6——繪製徑向漸變 222
• 11.4　繪製變形圖形 223
• 11.4.1　案例7——變換原點坐標 223
• 11.4.2　案例8——圖形縮放 225
• 11.4.3　案例9——旋轉圖形 226
• 11.5　繪製其他樣式的圖形 227
• 11.5.1　案例10——圖形組合 227
• 11.5.2　案例11——繪製帶陰影的
• 圖形 229
• 11.5.3　案例12——繪製文字 230
• 11.6　使用圖像 232
• 11.6.1　案例13——繪製圖像 232
• 11.6.2　案例14——圖像平鋪 234
• 11.6.3　案例15——圖像裁剪 235
• 11.6.4　案例16——像素處理 237
• 11.7　圖形的保存與恢復 239
• 11.7.1　案例17——保存與恢復
• 狀態 239
• 11.7.2　案例18——保存檔案 240
• 11.8　實戰演練——繪製圖形商標 241
• 11.9　跟我練練手 243
• 11.9.1　練習目標 243
• 11.9.2　上機練習 243
• 11.10　高手甜點 244
• 第12章HTML5中的檔案與拖放 245
• 12.1　選擇檔案 246
• 12.1.1　案例1——選擇單個檔案 246
• 12.1.2　案例2——選擇多個檔案 246
• 12.2　使用FileReader接口讀取檔案 247
• 12.2.1　案例3——檢測瀏覽器
• 是否支持FileReader接口 247
• 12.2.2　案例4——FileReader接口
• 的方法 248
• 12.2.3　案例5——使用
• readAsDataURL方法預覽
• 圖片 248
• 12.2.4　案例6——使用readAsText
• 方法讀取文本檔案 250
• 12.3　使用HTML5實現檔案的拖放 252
• 12.3.1　案例7——認識檔案拖放
• 的過程 252
• 12.3.2　瀏覽器支持情況 253
• 12.3.3　案例8——在網頁中拖放
• 圖片 253
• 12.3.4　案例9——在網頁中拖放
• 文字 254
• 12.4　綜合案例——在網頁中來回拖放
• 圖片 256
• 12.5　跟我練練手 258
• 12.5.1　練習目標 258
• 12.5.2　上機練習 258
• 12.6　專家甜點 258
• 第3篇高級套用
• 第13章獲取地理位置 261
• 13.1　GeolocationAPI獲取地理位置 262
• 13.1.1　地理地位的原理 262
• 13.1.2　獲取定位信息的方法 262
• 13.1.3　常用地理定位方法 262
• 13.1.4　案例1——判斷瀏覽器是
• 否支持HTML5獲取地理
• 位置信息 263
• 13.1.5　案例2——指定緯度和經度
• 坐標 264
• 13.1.6　案例3——獲取當前位置的
• 經度與緯度 265
• 13.2　目前瀏覽器對地理定位的支持情況 267
• 13.3　綜合案例——在網頁中調用
• Google地圖 268
• 13.4　跟我練練手 271
• 13.4.1　練習目標 271
• 13.4.2　上機練習 271
• 13.5　高手甜點 271
• 第14章Web通信新技術 273
• 14.1跨文檔訊息傳輸 274
• 14.1.1跨文檔訊息傳輸的基本知識 274
• 14.1.2案例1——跨文檔通信套用
• 測試 274
• 14.2WebSocketsAPI 277
• 14.2.1什麼是WebSocketAPI 277
• 14.2.2WebSockets通信基礎 277
• 14.2.3案例2——伺服器端使用
• WebSocketsAPI 279
• 14.2.4案例3——客戶機端使用
• WebSocketsAPI 282
• 14.3綜合案例——編寫簡單的
• WebSocket伺服器 283
• 14.4跟我練練手 287
• 14.4.1練習目標 287
• 14.4.2上機練習 287
• 14.5高手甜點 287
• 第15章數據存儲技術 289
• 15.1　認識Web存儲 290
• 15.1.1　本地存儲和Cookies的區別 290
• 15.1.2　Web存儲方法 290
• 15.2　使用HTML5WebStorageAPI 290
• 15.2.1　案例1——測試瀏覽器的
• 支持情況 291
• 15.2.2　案例2——使用session
• Storage方法創建對象 291
• 15.2.3　案例3——使用localStorage
• 方法創建對象 293
• 15.2.4　案例4——WebStorageAPI
• 的其他操作 295
• 15.2.5　案例5——使用JSON對象
• 存取數據 296
• 15.3　在本地建立資料庫 299
• 15.3.1　本地資料庫概述 299
• 15.3.2　用executeSql來執行查詢 299
• 15.3.3　使用transaction方法處理
• 事件 300
• 15.4　目前瀏覽器對Web存儲的支持
• 情況 300
• 15.5　綜合案例——製作簡單Web
• 留言本 300
• 15.6　跟我練練手 303
• 15.6.1　練習目標 303
• 15.6.2　上機練習 304
• 15.7　高手甜點 304
• 第16章使用WebWorker處理執行緒 305
• 16.1　WebWorkers 306
• 16.1.1　WebWorkers概述 306
• 16.1.2　執行緒中常用的變數、函式
• 與類 307
• 16.1.3　案例1——與執行緒進行數據
• 的互動 307
• 16.2　執行緒嵌套 310
• 16.2.1　案例2——單執行緒嵌套 310
• 16.2.2　案例3——多個子執行緒中的
• 數據互動 312
• 16.3　綜合案例——創建WebWorker
• 計數器 314
• 16.4　跟我練練手 315
• 16.4.1　練習目標 315
• 16.4.2　上機練習 315
• 16.5　高手甜點 316
• 第17章HTML5伺服器傳送事件 317
• 17.1　伺服器傳送事件概述 318
• 17.2　伺服器傳送事件的實現過程 318
• 17.2.1　案例1——檢測瀏覽器是否
• 支持Server-Sent事件 318
• 17.2.2　案例2——使用EventSource
• 對象 319
• 17.2.3　案例3——編寫伺服器端
• 代碼 319
• 17.3　綜合案例——伺服器傳送事件實戰
• 套用 320
• 17.4　跟我練練手 321
• 17.4.1　練習目標 321
• 17.4.2　上機練習 321
• 17.5　高手甜點 322
• 第18章構建離線的Web套用 323
• 18.1　HTML5離線Web套用概述 324
• 18.2　實例1——使用HTML5離線Web
• 套用API 324
• 18.2.1　檢查瀏覽器的支持情況 324
• 18.2.2　搭建簡單的離線應用程式 325
• 18.2.3　支持離線行為 325
• 18.2.4　Manifest檔案 326
• 18.2.5　ApplicationCacheAPI 327
• 18.3　實例2——使用HTML5離線Web
• 套用構建套用 329
• 18.3.1　創建記錄資源的manifest
• 檔案 329
• 18.3.2　創建構成界面的HTML和
• CSS 329
• 18.3.3　創建離線的JavaScript 330
• 18.3.4　檢查applicationCache的
• 支持情況 331
• 18.3.5　為Update按鈕添加處理
• 函式 332
• 18.3.6　添加Storage功能代碼 332
• 18.3.7　添加離線事件處理程式 333
• 18.4　綜合案例——離線定位跟蹤 333
• 18.5　跟我練練手 338
• 18.5.1　練習目標 338
• 18.5.2　上機練習 338
• 18.6　高手甜點 338
• 第4篇項目案例實戰
• 第19章HTML5、CSS3和JavaScript
• 的搭配套用案例 341
• 19.1　案例1——打字效果的文字的製作 342
• 19.2　案例2——文字升降特效的製作 344
• 19.3　案例3——跑馬燈效果的製作 345
• 19.4　案例4——閃爍圖片的製作 347
• 19.5　案例5——左右移動的圖片的製作 349
• 19.6　案例6——向上滾動選單的製作 351
• 19.7　案例7——跟隨滑鼠移動的圖片
• 的製作 353
• 19.8　案例8——樹形選單的製作 355
• 19.9　案例9——時鐘特效的製作 360
• 19.10　案例10——顏色選擇器的製作 362
• 19.11　案例11——繪製火柴棒人物 364
• 19.12　跟我練練手 367
• 19.12.1　練習目標 367
• 19.12.2　上機練習 367
• 19.13　高手甜點 368
• 第20章製作電子商務類網頁 369
• 20.1　整體布局 370
• 20.1.1　設計分析 370
• 20.1.2　排版架構 370
• 20.2　模組組成 371
• 20.3　製作步驟 371
• 20.3.1　樣式表 371
• 20.3.2　網頁頭部 379
• 20.3.3　主體第一通欄 381
• 20.3.4　主體第二通欄 382
• 20.3.5　主體第三通欄 383
• 20.3.6　網頁底部 384
• 第21章製作休閒娛樂類網頁 387
• 21.1　整體布局 388
• 21.1.1　設計分析 388
• 21.1.2　排版架構 389
• 21.2　模組組成 389
• 21.3　製作步驟 390
• 21.3.1　製作樣式表 390
• 21.3.2　Logo與導航選單 398
• 21.3.3　搜尋條 399
• 21.3.4　左側視頻模組 399
• 21.3.5　評論模組 400
• 21.3.6　右側熱門推薦 402
• 21.3.7　底部模組 404
• 第22章製作企業門戶類網頁 407
• 22.1　整體布局 408
• 22.1.1　設計分析 408
• 22.1.2　排版架構 408
• 22.2　模組組成 409
• 22.3　製作步驟 409
• 22.3.1　樣式表 409
• 22.3.2　網頁頭部 411
• 22.3.3　導航選單欄 412
• 22.3.4　中間主體第一欄 412
• 22.3.5　中間主體第二欄 416
• 22.3.6　中間主體第三欄 419
• 22.3.7　中間主體第四欄 425
• 22.3.8　中間主體第五欄 430
• 22.3.9　網頁底部 435