內容簡介
《HTML 5+CSS 3網頁設計與製作案例課堂(第2版)》以零基礎講解為宗旨，用實例引導讀者深入學習，採取“HTML 5網頁設計→CSS 3美化網頁→高級提升技能→綜合案例實戰”的講解模式，深入淺出地講解HTML 5+CSS 3的各項技術及實戰技能。
圖書目錄
第I篇HTML5網頁設計
第1章新一代Web前端技術 3
1.1HTML的基本概念 4
1.1.1HTML的發展歷程 4
1.1.2什麼是HTML 4
1.1.3HTML5檔案的基本結構 5
1.2HTML5的優勢 5
1.2.1解決了跨瀏覽器的問題 5
1.2.2增加了多個新特性 5
1.2.3用戶優先的原則 6
1.2.4化繁為簡的優勢 7
1.3HTML5網頁的開發環境 7
1.3.1使用記事本手工編寫HTML5 7
1.3.2使用DreamweaverCC編寫
HTML檔案 8
1.4使用瀏覽器查看HTML5檔案 12
1.4.1查看頁面效果 12
1.4.2查看源檔案 13
1.5疑難解惑 14
第2章HTML5網頁的文檔結構 15
2.1HTML5檔案的基本結構 16
2.1.1HTML5頁面的整體結構 16
2.1.2HTML5新增的結構標記 16
2.2HTML5基本標記詳解 17
2.2.1文檔類型說明 17
2.2.2HTML標記 17
2.2.3頭標記 18
2.2.4網頁的主體標記 20
2.2.5頁面注釋標記 21
2.3HTML5語法的變化 22
2.3.1標籤不再區分大小寫 22
2.3.2允許屬性值不使用引號 22
2.3.3允許部分屬性的屬性值省略 23
2.4綜合案例——符合W3C標準的
HTML5網頁 23
2.5跟我學上機——簡單的HTML5網頁 25
2.6疑難解惑 26
第3章HTML5網頁中的文本、超連結
和圖像 27
3.1在網頁中添加文本 28
3.1.1普通文本的添加 28
3.1.2特殊字元文本的添加 28
3.1.3使用HTML5標記添加特殊
文本 30
3.2文本排版 32
3.2.1換行標記 32
3.2.2段落標記 32
3.2.3標題標記 33
3.3文字列表 34
3.3.1建立無序列表 34
3.3.2建立有序列表 36
3.3.3建立不同類型的無序列表 36
3.3.4建立不同類型的有序列表 37
3.3.5建立嵌套列表 38
3.3.6自定義列表 39
3.4超連結標記 40
3.4.1設定文本和圖片的超連結 40
3.4.2創建指向不同目標類型的
超連結 40
3.4.3設定以新視窗顯示超連結頁面 42
3.4.4連結到同一頁面的不同位置 43
3.5創建熱點區域 44
3.6網頁中的圖片 45
3.6.1在網頁中插入圖像 45
3.6.2設定圖像的寬度和高度 47
3.6.3設定圖像的提示文字 48
3.6.4將圖片設定為網頁背景 49
3.6.5排列圖像 50
3.7綜合案例——圖文並茂的房屋裝飾
裝修網頁 50
3.8跟我學上機——線上購物網站的產品
展示效果 52
3.9疑難解惑 53
第4章使用HTML5創建表格 55
4.1表格的基本結構 56
4.2創建表格 57
4.2.1創建普通表格 57
4.2.2創建一個帶有標題的表格 58
4.3編輯表格 59
4.3.1定義表格的框線類型 59
4.3.2定義表格的表頭 59
4.3.3設定表格背景 60
4.3.4設定單元格的背景 61
4.3.5合併單元格 62
4.3.6排列單元格中的內容 65
4.3.7設定單元格的行高與列寬 66
4.4完整的表格標記 67
4.5綜合案例——製作計算機報價表 68
4.6跟我學上機——製作學生成績表 70
4.7疑難解惑 74
第5章使用HTML5創建表單 75
5.1表單概述 76
5.2表單基本元素的使用 76
5.2.1單行文本輸入框 77
5.2.2多行文本輸入框 77
5.2.3密碼輸入框 78
5.2.4單選按鈕 78
5.2.5複選框 79
5.2.6列表框 80
5.2.7普通按鈕 81
5.2.8提交按鈕 81
5.2.9重置按鈕 82
5.3表單高級元素的使用 83
5.3.1url屬性的使用 83
5.3.2email屬性的使用 83
5.3.3date屬性和time屬性的使用 84
5.3.4number屬性的使用 85
5.3.5range屬性的使用 86
5.3.6required屬性的使用 86
5.4綜合案例——創建用戶反饋表單 87
5.5跟我學上機——製作用戶註冊表單 88
5.6疑難解惑 90
第6章HTML5中的音頻和視頻 91
6.1audio標籤 92
6.1.1audio標籤概述 92
6.1.2audio標籤的屬性 93
6.1.3瀏覽器對audio標籤的支持
情況 93
6.2在網頁中添加音頻檔案 94
6.2.1添加自動播放的音頻檔案 94
6.2.2添加帶有控制項的音頻檔案 94
6.2.3添加循環播放的音頻檔案 95
6.2.4添加預播放的音頻檔案 95
6.3video標籤 96
6.3.1video標籤概述 96
6.3.2video標籤的屬性 97
6.3.3瀏覽器對video標籤的支持
情況 98
6.4在網頁中添加視頻檔案 98
6.4.1添加自動播放的視頻檔案 98
6.4.2添加帶有控制項的視頻檔案 99
6.4.3添加循環播放的視頻檔案 99
6.5綜合案例——設定視頻檔案的高度
與寬度 100
6.6跟我學上機——添加預播放的視頻
檔案 101
6.7疑難解惑 101
第7章使用HTML5繪製圖形 103
7.1添加canvas的步驟 104
7.2繪製基本形狀 104
7.2.1繪製矩形 105
7.2.2繪製圓形 105
7.2.3使用moveTo與lineTo繪製
直線 107
7.2.4使用bezierCurveTo繪製
貝塞爾曲線 108
7.3繪製漸變圖形 109
7.3.1繪製線性漸變 109
7.3.2繪製徑向漸變 111
7.4繪製變形圖形 112
7.4.1繪製平移效果的圖形 112
7.4.2繪製縮放效果的圖形 113
7.4.3繪製旋轉效果的圖形 114
7.4.4繪製組合效果的圖形 115
7.4.5繪製帶陰影的圖形 117
7.5使用圖像 118
7.5.1繪製圖像 118
7.5.2平鋪圖像 119
7.5.3裁剪圖像 121
7.5.4圖像的像素化處理 122
7.6繪製文字 124
7.7圖形的保存與恢復 126
7.7.1保存與恢復狀態 126
7.7.2保存檔案 127
7.8綜合案例——繪製火柴棒人物 128
7.9跟我學上機——繪製商標 132
7.10疑難解惑 134
第II篇CSS3美化網頁
第8章CSS3概述與基本語法 137
8.1CSS3概述 138
8.1.1CSS3的功能 138
8.1.2瀏覽器與CSS3 138
8.1.3CSS3的基礎語法 139
8.1.4CSS3的常用單位 139
8.2編輯和瀏覽CSS3 144
8.2.1手工編寫CSS3 144
8.2.2用Dreamweaver編寫CSS 145
8.3在HTML5中使用CSS3的方法 147
8.3.1行內樣式 147
8.3.2內嵌樣式 148
8.3.3連結樣式 149
8.3.4導入樣式 150
8.3.5優先權問題 151
8.4CSS3的常用選擇器 154
8.4.1標籤選擇器 154
8.4.2類選擇器 155
8.4.3ID選擇器 155
8.4.4全局選擇器 156
8.4.5組合選擇器 157
8.4.6繼承選擇器 158
8.4.7偽類選擇器 159
8.5選擇器聲明 160
8.5.1集體聲明 160
8.5.2多重嵌套聲明 161
8.6綜合案例——製作炫彩網站Logo 161
8.7跟我學上機——製作學生信息
統計表 164
8.8疑難解惑 166
第9章使用CSS3美化網頁字型
與段落 167
9.1美化網頁文字 168
9.1.1設定文字的字型 168
9.1.2設定文字的字號 169
9.1.3設定字型風格 170
9.1.4設定加粗字型 171
9.1.5將小寫字母轉為大寫字母 171
9.1.6設定字型的複合屬性 172
9.1.7設定字型顏色 173
9.2設定文本的高級樣式 174
9.2.1設定文本陰影效果 174
9.2.2設定文本的溢出效果 176
9.2.3設定文本的控制換行 177
9.2.4保持字型尺寸不變 177
9.3美化網頁中的段落 178
9.3.1設定單詞之間的間隔 179
9.3.2設定字元之間的間隔 179
9.3.3設定文字的修飾效果 180
9.3.4設定垂直對齊方式 181
9.3.5轉換文本的大小寫 183
9.3.6設定文本的水平對齊方式 183
9.3.7設定文本的縮進效果 185
9.3.8設定文本的行高 186
9.3.9文本的空白處理 187
9.3.10文本的反排 188
9.4綜合案例——設定網頁標題 189
9.5跟我學上機——製作新聞頁面 191
9.6疑難解惑 192
第10章使用CSS3美化網頁圖片 193
10.1圖片縮放 194
10.1.1通過描述標記width和height
縮放圖片 194
10.1.2使用CSS3中的max-width
和max-height縮放圖片 194
10.1.3使用CSS3中的width
和height縮放圖片 195
10.2設定圖片的對齊方式 196
10.2.1設定圖片的橫向對齊 196
10.2.2設定圖片的縱向對齊 197
10.3圖文混排 199
10.3.1設定文字環繞效果 199
10.3.2設定圖片與文字的間距 201
10.4綜合案例——製作學校宣傳單 202
10.5跟我學上機——製作簡單的圖文
混排網頁 204
10.6疑難解惑 206
第11章使用CSS3美化網頁背景
與框線 207
11.1使用CSS3美化背景 208
11.1.1設定背景顏色 208
11.1.2設定背景圖片 209
11.1.3背景圖片重複 210
11.1.4背景圖片顯示 212
11.1.5背景圖片的位置 213
11.1.6背景圖片的大小 215
11.1.7背景的顯示區域 216
11.1.8背景圖像的裁剪區域 217
11.1.9背景複合屬性 218
11.2使用CSS3美化框線 219
11.2.1設定框線的樣式 220
11.2.2設定框線的顏色 221
11.2.3設定框線的線寬 222
11.2.4設定框線的複合屬性 224
11.3設定框線的圓角效果 225
11.3.1設定圓角框線 225
11.3.2指定兩個圓角半徑 226
11.3.3繪製四個不同角的圓角框線 227
11.3.4繪製不同種類的框線 229
11.4綜合案例——製作簡單的公司主頁 231
11.5跟我學上機——製作簡單的生活資訊
主頁 234
11.6疑難解惑 235
第12章使用CSS3美化超級連結
和滑鼠 237
12.1使用CSS3來美化超連結 238
12.1.1改變超級連結的基本樣式 238
12.1.2設定帶有提示信息的超級
連結 239
12.1.3設定超級連結的背景圖 240
12.1.4設定超級連結的按鈕效果 241
12.2使用CSS3美化滑鼠特效 242
12.2.1使用CSS3控制滑鼠箭頭 242
12.2.2設定滑鼠變幻式超連結 244
12.2.3設定網頁頁面滾動條 244
12.3綜合案例1——圖片版本的超級
連結 246
12.4綜合案例2——關於滑鼠特效 248
12.5跟我學上機——製作一個簡單的
導航欄 250
12.6疑難解惑 252
第13章使用CSS3美化表格和表單
的樣式 253
13.1美化表格的樣式 254
13.1.1設定表格框線的樣式 254
13.1.2設定表格框線的寬度 256
13.1.3設定表格框線的顏色 257
13.2美化表單樣式 258
13.2.1美化表單中的元素 258
13.2.2美化提交按鈕 261
13.2.3美化下拉選單 262
13.3綜合案例——製作用戶登錄頁面 263
13.4跟我學上機——製作用戶註冊頁面 265
13.5疑難解惑 268
第14章使用CSS3美化網頁選單 269
14.1使用CSS3美化項目列表 270
14.1.1美化無序列表 270
14.1.2美化有序列表 271
14.1.3美化自定義列表 273
14.1.4製作圖片列表 274
14.1.5縮進圖片列表 276
14.1.6列表的複合屬性 277
14.2使用CSS3製作網頁選單 278
14.2.1製作無須表格的選單 278
14.2.2製作水平和垂直選單 280
14.3綜合案例——模擬SOSO導航欄 282
14.4跟我學上機——將段落轉變成列表 285
14.5疑難解惑 287
第15章使用濾鏡美化網頁元素 289
15.1濾鏡概述 290
15.2設定基本濾鏡效果 291
15.2.1高斯模糊(blur)濾鏡 291
15.2.2明暗度(brightness)濾鏡 292
15.2.3對比度(contrast)濾鏡 293
15.2.4陰影(drop-shadow)濾鏡 294
15.2.5灰度(grayscale)濾鏡 295
15.2.6反相(invert)濾鏡 296
15.2.7透明度(opacity)濾鏡 297
15.2.8飽和度(saturate)濾鏡 298
15.2.9深褐色(sepia)濾鏡 299
15.3綜合案例1——使用複合濾鏡效果 300
15.4綜合案例2——使用濾鏡製作動畫
效果 301
15.5跟我學上機——製作色相旋轉
(hue-rotate)濾鏡 303
15.6疑難解惑 304
第III篇高級提升技能
第16章CSS3中的動畫效果 307
16.1了解過渡效果 308
16.2添加過渡效果 308
16.3了解動畫效果 310
16.4添加動畫效果 311
16.5了解2D轉換效果 312
16.6添加2D轉換效果 313
16.6.1添加移動效果 313
16.6.2添加旋轉效果 314
16.6.3添加縮放效果 315
16.6.4添加傾斜效果 316
16.7添加3D轉換效果 318
16.8綜合案例——添加綜合過渡效果 320
16.9跟我學上機——添加綜合變幻效果 321
16.10疑難解惑 322
第17章HTML5中的檔案與拖放 323
17.1 選擇檔案 324
17.1.1 選擇單個檔案 324
17.1.2 選擇多個檔案 324
17.2 使用FileReader接口讀取檔案 325
17.2.1 檢測瀏覽器是否支持
FileReader接口 325
17.2.2 FileReader接口的方法 326
17.2.3 使用readAsDataURL方法預覽
圖片 326
17.2.4 使用readAsText方法讀取文本
檔案 328
17.3 使用HTML5實現檔案的拖放 329
17.3.1 認識檔案拖放的過程 330
17.3.2 瀏覽器支持情況 330
17.3.3 在網頁中拖放圖片 331
17.4 綜合案例——在網頁中來回拖放
圖片 332
17.5跟我學上機——在網頁中拖放文字 333
17.6疑難解惑 335
第18章定位地理位置技術 337
18.1 GeolocationAPI獲取地理位置 338
18.1.1 地理定位的原理 338
18.1.2 獲取定位信息的方法 338
18.1.3 常用地理定位方法 338
18.1.4 判斷瀏覽器是否支持HTML5
獲取地理位置信息 339
18.1.5 指定緯度和經度坐標 340
18.1.6 獲取當前位置的經度與緯度 341
18.1.7 處理錯誤和拒絕 343
18.2 目前瀏覽器對地理定位的支持情況 343
18.3 綜合案例——在網頁中調用Google
地圖 344
18.4 跟我學上機——持續獲取用戶移動後
的位置 346
18.5 疑難解惑 348
第19章Web存儲和通信技術 349
19.1 認識Web存儲 350
19.1.1 本地存儲和Cookies的區別 350
19.1.2 Web存儲方法 350
19.2 使用HTML5WebStorageAPI 350
19.2.1 測試瀏覽器的支持情況 351
19.2.2 使用sessionStorage方法創建
對象 352
19.2.3 使用localStorage方法創建
對象 353
19.2.4 WebStorageAPI的其他操作 355
19.2.5 使用JSON對象存取數據 355
19.3 在本地建立資料庫 358
19.3.1本地資料庫概述 358
19.3.2 用executeSql來執行查詢 358
19.3.3 使用transaction方法處理
事件 359
19.4 目前瀏覽器對Web存儲的支持
情況 359
19.5跨文檔訊息傳輸 359
19.5.1跨文檔訊息傳輸的基本知識 359
19.5.2案例1——跨文檔通信套用
測試 360
19.6WebSocketAPI 362
19.6.1什麼是WebSocketAPI 362
19.6.2WebSocket通信基礎 362
19.6.3案例2——伺服器端使用
WebSocketAPI 364
19.6.4案例3——客戶機端使用
WebSocketAPI 367
19.7綜合案例——製作簡單Web
留言本 367
19.8跟我學上機——編寫簡單的
WebSocket伺服器 370
19.9 疑難解惑 374
第20章處理執行緒和伺服器傳送事件 375
20.1 WebWorker 376
20.1.1 WebWorker概述 376
20.1.2 執行緒中常用的變數、函式
與類 376
20.1.3 案例1——前台與後台執行緒
進行數據的互動 377
20.2 執行緒嵌套 379
20.2.1 案例2——單執行緒嵌套 379
20.2.2 案例3——多個子執行緒中的
數據互動 381
20.3 伺服器傳送事件概述 383
20.4 伺服器傳送事件的實現過程 383
20.4.1 檢測瀏覽器是否支持
Server-SentEvent 383
20.4.2 使用EventSource對象 384
20.4.3 編寫伺服器端代碼 384
20.5 綜合案例——創建WebWorker
計數器 385
20.6跟我學上機——伺服器傳送事件實戰
套用 386
20.7疑難解惑 388
第21章CSS3定位與DIV布局核心
技術 389
21.1了解塊級元素和行內級元素 390
21.1.1塊級元素和行內級元素的
套用 390
21.1.2div標記和span標記的區別 392
21.2盒子模型 392
21.2.1盒子模型的概念 393
21.2.2定義網頁的border區域 393
21.2.3定義網頁的padding區域 394
21.2.4定義網頁的margin區域 395
21.3CSS3新增的彈性盒模型 399
21.3.1定義盒子的布局取向
(box-orient) 399
21.3.2定義盒子的布局順序
(box-direction) 400
21.3.3定義盒子布局的位置
(box-ordinal-group) 402
21.3.4定義盒子的彈性空間
(box-flex) 403
21.3.5管理盒子空間(box-pack
和box-align) 405
21.3.6盒子空間的溢出管理
(box-lines) 407
21.4綜合案例——圖文排版效果 408
21.5跟我學上機——淘寶導購選單 411
21.6疑難解惑 414
第IV篇綜合案例實戰
第22章網頁布局剖析與製作 417
22.1固定寬度網頁剖析與布局 418
22.1.1網頁單列布局模式 418
22.1.2網頁1-2-1型布局模式 421
22.1.3網頁1-3-1型布局模式 425
22.2自動縮放網頁1-2-1型布局模式 428
22.2.1“1-2-1”等比例變寬布局 428
22.2.2“1-2-1”單列變寬布局 429
22.3自動縮放網頁1-3-1型布局模式 430
22.3.1“1-3-1”三列寬度等比例
布局 430
22.3.2“1-3-1”單側列寬度固定的
變寬布局 430
22.3.3“1-3-1”中間列寬度固定的
變寬布局 434
22.3.4“1-3-1”雙側列寬度固定的
變寬布局 437
22.4分列布局背景色的使用 440
22.4.1設定固定寬度布局的列
背景色 440
22.4.2設定特殊寬度變化布局的列
背景色 441
22.4.3設定單列寬度變化布局的列
背景色 443
22.5綜合案例——設定多列等比例寬度
變化布局的列背景 445
22.6跟我學上機——“1-3-1”中列和
左側列寬度固定的變寬布局 447
22.7疑難解惑 450
第23章設計企業門戶類網頁 451
23.1構思布局 452
23.1.1設計分析 452
23.1.2排版架構 452
23.2模組分割 453
23.2.1Logo與導航選單 453
23.2.2左側的文本介紹 455
23.2.3右側的導航連結 457
23.2.4版權資訊 458
23.3整體調整 459
23.4疑難解惑 460
第24章設計線上購物類網頁 461
24.1整體布局 462
24.1.1設計分析 462
24.1.2排版架構 462
24.2模組分割 463
24.2.1Logo與導航區 463
24.2.2Banner與資訊區 465
24.2.3產品類別區域 466
24.2.4頁腳區域 468
24.3設定連結 468
24.4疑難解惑 468
