HTML5+CSS3網頁設計與製作案例課堂（第3版）
劉春茂
商品描述
目錄大綱
目 錄
第1章 新一代Web前端技術 1
1.1 HTML的基本概念 2
1.1.1 HTML的發展歷程 2
1.1.2 什麽是HTML 2
1.2 HTML 5的優勢 3
1.2.1 解決了跨瀏覽器問題 3
1.2.2 新增了多個新特性 3
1.2.3 用戶優先的原則 3
1.2.4 化繁為簡的優勢 4
1.3 HTML 5網頁的開發環境 5
1.3.1 使用記事本手工編寫HTML 5 5
1.3.2 使用WebStorm編寫HTML文件 5
1.4 使用瀏覽器查看HTML 5文件 8
1.4.1 查看頁面效果 8
1.4.2 查看源代碼 8
1.5 疑難解惑 9
1.6 跟我學上機 9
第2章 HTML 5網頁的文檔結構 11
2.1 HTML 5文件的基本結構 12
2.1.1 HTML 5頁面的整體結構 12
2.1.2 HTML 5新增的結構標記 12
2.2 HTML 5基本標記詳解 13
2.2.1 文檔類型說明 13
2.2.2 HTML標記 13
2.2.3 頭標記 13
2.2.4 主體標記 16
2.2.5 頁面註釋標記 17
2.3 HTML 5語法的變化 17
2.3.1 標記不再區分大小寫 17
2.3.2 允許屬性值不使用引號 18
2.3.3 允許部分屬性的值省略 18
2.4 疑難解惑 19
2.5 跟我學上機 19
第3章 HTML 5網頁中的文本、超鏈接和圖像 21
3.1 標題 22
3.1.1 標題標記 22
3.1.2 標題的對齊方式 23
3.2 設置文字格式 24
3.2.1 文字的字體、字號和顏色 24
3.2.2 文字的粗體、斜體和下劃線 26
3.2.3 文字的上標和下標 27
3.3 設置段落格式 28
3.3.1 段落標記 28
3.3.2 段落的換行標記 28
3.3.3 段落的原格式標記 29
3.4 文字列表 30
3.4.1 無序列表 30
3.4.2 有序列表 31
3.4.3 建立不同類型的無序列表 31
3.4.4 建立不同類型的有序列表 32
3.4.5 自定義列表 33
3.4.6 建立嵌套列表 34
3.5 超鏈接標記 35
3.5.1 設置文本和圖片的超鏈接 35
3.5.2 創建指向不同目標類型的超鏈接 36
3.5.3 設置以新窗口顯示超鏈接頁面 37
3.5.4 鏈接到同一頁面的不同位置 38
3.6 圖像熱點鏈接 38
3.7 在網頁中插入圖像 40
3.8 編輯網頁中的圖像 41
3.8.1 設置圖像的大小和邊框 41
3.8.2 設置圖像的間距和對齊方式 43
3.8.3 設置圖像的替換文字和提示文字 44
3.9 疑難解惑 45
3.10 跟我學上機 46
第4章 使用HTML 5創建表格 47
4.1 表格的基本結構 48
4.2 創建表格 49
4.2.1 創建普通表格 49
4.2.2 創建一個帶有標題的表格 50
4.3 編輯表格 50
4.3.1 定義表格的邊框類型 51
4.3.2 定義表格的表頭 51
4.3.3 設置表格背景 52
4.3.4 設置單元格的背景 53
4.3.5 合並單元格 54
4.3.6 表格的分組 57
4.3.7 設置單元格的行高與列寬 58
4.4 完整的表格標記 59
4.5 設置懸浮變色的表格 60
4.6 疑難解惑 63
4.7 跟我學上機 63
第5章 使用HTML 5創建表單 65
5.1 表單概述 66
5.2 表單基本元素的使用 66
5.2.1 單行文本輸入框 66
5.2.2 多行文本輸入框 67
5.2.3 密碼域 68
5.2.4 單選按鈕 68
5.2.5 復選框 69
5.2.6 列表框 70
5.2.7 普通按鈕 71
5.2.8 提交按鈕 72
5.2.9 重置按鈕 73
5.3 表單高級元素的使用 74
5.3.1 url屬性的使用 74
5.3.2 email屬性的使用 74
5.3.3 日期和時間屬性的使用 75
5.3.4 number屬性的使用 76
5.3.5 range屬性的使用 77
5.3.6 required屬性的使用 77
5.4 疑難解惑 78
5.5 跟我學上機 78
第6章 HTML 5中的多媒體 81
6.1 audio標記 82
6.1.1 audio標記概述 82
6.1.2 audio標記的屬性 83
6.1.3 瀏覽器支持audio標記的情況 83
6.2 在網頁中添加音頻文件 83
6.3 video標記 85
6.3.1 video標記概述 85
6.3.2 video標記的屬性 86
6.3.3 瀏覽器對video標記的支持情況 86
6.4 在網頁中添加視頻文件 87
6.5 疑難解惑 88
6.6 跟我學上機 89
第7章 使用HTML 5繪制圖形 91
7.1 添加canvas的步驟 92
7.2 繪制基本形狀 92
7.2.1 繪制矩形 92
7.2.2 繪制圓形 93
7.2.3 使用moveTo與lineTo繪制直線 94
7.2.4 使用bezierCurveTo繪制貝濟埃曲線 96
7.3 繪制漸變圖形 97
7.3.1 繪制線性漸變 97
7.3.2 繪制徑向漸變 98
7.4 繪制變形圖形 99
7.4.1 繪制平移效果的圖形 100
7.4.2 繪制縮放效果的圖形 100
7.4.3 繪制旋轉效果的圖形 101
7.4.4 繪制組合效果的圖形 103
7.4.5 繪制帶陰影的圖形 104
7.5 使用圖像 105
7.5.1 繪制圖像 105
7.5.2 平鋪圖像 106
7.5.3 裁剪圖像 108
7.5.4 圖像的像素化處理 109
7.6 繪制文字 111
7.7 疑難解惑 113
7.8 跟我學上機 113
第8章 CSS 3概述與基本語法 115
8.1 CSS 3概述 116
8.1.1 CSS 3的功能 116
8.1.2 瀏覽器與CSS 3 116
8.1.3 CSS 3的基礎語法 117
8.1.4 CSS 3的常用單位 117
8.2 在HTML 5中使用CSS 3的方法 122
8.2.1 行內樣式 122
8.2.2 內嵌樣式 123
8.2.3 鏈接樣式 124
8.2.4 導入樣式 125
8.2.5 優先級問題 126
8.3 CSS 3的常用選擇器 128
8.3.1 標記選擇器 128
8.3.2 類選擇器 129
8.3.3 ID選擇器 130
8.3.4 全局選擇器 131
8.3.5 組合選擇器 132
8.3.6 選擇器繼承 132
8.3.7 偽類選擇器 133
8.4 選擇器聲明 134
8.4.1 集體聲明 134
8.4.2 多重嵌套聲明 135
8.5 疑難解惑 136
8.6 跟我學上機 136
第9章 使用CSS 3美化網頁字體與段落 139
9.1 美化網頁文字 140
9.1.1 設置文字的字體 140
9.1.2 設置文字的字號 141
9.1.3 設置字體風格 142
9.1.4 設置加粗字體 143
9.1.5 將小寫字母轉換為大寫字母 144
9.1.6 設置字體的復合屬性 144
9.1.7 設置字體顏色 145
9.2 設置文本的高級樣式 146
9.2.1 設置文本陰影效果 146
9.2.2 設置文本的溢出效果 147
9.2.3 設置文本的控制換行 148
9.2.4 保持字體尺寸不變 149
9.3 美化網頁中的段落 150
9.3.1 設置單詞之間的間隔 150
9.3.2 設置字符之間的間隔 151
9.3.3 設置文字的修飾效果 152
9.3.4 設置垂直對齊方式 153
9.3.5 轉換文本的大小寫 154
9.3.6 設置文本的水平對齊方式 155
9.3.7 設置文本的縮進效果 157
9.3.8 設置文本的行高 157
9.3.9 文本的空白處理 158
9.3.10 文本的反排 160
9.4 疑難解惑 161
9.5 跟我學上機 161
第10章 使用CSS 3美化網頁圖片 163
10.1 圖片縮放 164
10.1.1 通過描述標記width和height縮放圖片 164
10.1.2 使用CSS 3中的max-width和max-height縮放圖片 164
10.1.3 使用CSS 3中的width和height縮放圖片 165
10.2 設置圖片的對齊方式 166
10.2.1 設置圖片的橫向對齊 166
10.2.2 設置圖片的縱向對齊 167
10.3 圖文混排 169
10.3.1 設置文字環繞效果 169
10.3.2 設置圖片與文字的間距 170
10.4 疑難解惑 171
10.5 跟我學上機 172
第11章 使用CSS 3美化網頁背景與邊框 173
11.1 使用CSS 3美化背景 174
11.1.1 設置背景顏色 174
11.1.2 設置背景圖片 175
11.1.3 背景圖片重復 176
11.1.4 背景圖片顯示 177
11.1.5 背景圖片的位置 179
11.1.6 背景圖片的大小 180
11.1.7 背景的顯示區域 181
11.1.8 背景圖像的裁剪區域 182
11.1.9 背景復合屬性 183
11.2 使用CSS 3美化邊框 184
11.2.1 設置邊框的樣式 185
11.2.2 設置邊框的顏色 186
11.2.3 設置邊框的線寬 187
11.2.4 設置邊框的復合屬性 189
11.3 設置邊框的圓角效果 189
11.3.1 設置圓角邊框 190
11.3.2 指定兩個圓角半徑 190
11.3.3 繪制四個不同角的圓角邊框 191
11.3.4 繪制不同種類的邊框 193
11.4 疑難解惑 194
11.5 跟我學上機 195
第12章 使用CSS 3美化超級鏈接和光標 197
12.1 使用CSS 3來美化超級鏈接 198
12.1.1 改變超級鏈接的基本樣式 198
12.1.2 設置帶有提示信息的超級鏈接 199
12.1.3 設置超級鏈接的背景圖 200
12.1.4 設置超級鏈接的按鈕效果 201
12.2 使用CSS 3美化光標特效 202
12.2.1 使用CSS 3控制光標箭頭 202
12.2.2 設置光標變幻式超鏈接 204
12.3 設計一個簡單的導航欄 205
12.4 疑難解惑 206
12.5 跟我學上機 207
第13章 使用CSS 3美化表格和表單 209
13.1 美化表格的樣式 210
13.1.1 設置表格邊框的樣式 210
13.1.2 設置表格邊框的寬度 212
13.1.3 設置表格邊框的顏色 213
13.2 美化表單樣式 214
13.2.1 美化表單中的元素 214
13.2.2 美化提交按鈕 216
13.2.3 美化下拉菜單 217
13.3 疑難解惑 219
13.4 跟我學上機 219
第14章 使用CSS 3美化網頁菜單 221
14.1 使用CSS 3美化項目列表 222
14.1.1 美化無序列表 222
14.1.2 美化有序列表 223
14.1.3 美化自定義列表 225
14.1.4 製作圖片列表 226
14.1.5 縮進圖片列表 227
14.1.6 列表的復合屬性 228
14.2 使用CSS 3製作網頁菜單 230
14.2.1 製作無須表格的菜單 230
14.2.2 製作水平和垂直菜單 232
14.3 疑難解惑 234
14.4 跟我學上機 234
第15章 使用濾鏡美化網頁元素 237
15.1 濾鏡概述 238
15.2 設置基本濾鏡效果 239
15.2.1 高斯模糊濾鏡 239
15.2.2 明暗度濾鏡 240
15.2.3 對比度濾鏡 241
15.2.4 陰影濾鏡 242
15.2.5 灰度濾鏡 243
15.2.6 反相濾鏡 244
15.2.7 透明度濾鏡 244
15.2.8 飽和度濾鏡 245
15.3 使用濾鏡製作動畫效果 246
15.4 疑難解惑 247
15.5 跟我學上機 248
第16章 CSS 3中的動畫效果 249
16.1 瞭解過渡效果 250
16.2 添加過渡效果 250
16.3 瞭解動畫效果 252
16.4 添加動畫效果 253
16.5 瞭解2D轉換效果 254
16.6 添加2D轉換效果 255
16.6.1 添加移動效果 255
16.6.2 添加旋轉效果 256
16.6.3 添加縮放效果 257
16.6.4 添加傾斜效果 258
16.7 添加3D轉換效果 259
16.8 疑難解惑 261
16.9 跟我學上機 262
第17章 HTML 5中的文件與拖放 263
17.1 選擇文件 264
17.1.1 選擇單個文件 264
17.1.2 選擇多個文件 264
17.2 使用FileReader接口讀取文件 265
17.2.1 檢測瀏覽器是否支持FileReader接口 265
17.2.2 FileReader接口的方法 265
17.3 使用HTML 5實現文件的拖放效果 269
17.3.1 認識文件拖放的過程 269
17.3.2 瀏覽器支持情況 270
17.3.3 在網頁中拖放圖片 270
17.4 在網頁中來回拖放圖片 271
17.5 在網頁中拖放文字 272
17.6 疑難解惑 274
17.7 跟我學上機 275
第18章 定位地理位置技術 277
18.1 Geolocation API獲取地理位置 278
18.1.1 地理定位的原理 278
18.1.2 獲取定位信息的方法 278
18.1.3 常用地理定位方法 278
18.1.4 判斷瀏覽器是否支持HTML 5獲取地理位置信息 279
18.1.5 指定緯度和經度坐標 280
18.1.6 獲取當前位置的經度與緯度 281
18.1.7 處理錯誤和拒絕 282
18.2 目前瀏覽器對地理定位的支持情況 283
18.3 在網頁中調用Google地圖 283
18.4 疑難解惑 286
18.5 跟我學上機 286
第19章 數據存儲和通信技術 287
19.1 認識Web存儲 288
19.1.1 本地存儲和Cookie的區別 288
19.1.2 Web存儲方法 288
19.2 使用HTML 5 Web Storage API 288
19.2.1 測試瀏覽器的支持情況 289
19.2.2 使用sessionStorage方法創建對象 289
19.2.3 使用localStorage方法創建對象 291
19.2.4 Web Storage API的其他操作 292
19.2.5 使用JSON對象存取數據 293
19.3 常見瀏覽器對Web存儲的支持情況 295
19.4 跨文檔消息傳輸 295
19.4.1 跨文檔消息傳輸的基本知識 295
19.4.2 跨文檔通信應用測試 296
19.5 WebSocket API 298
19.5.1 什麽是WebSocket API 298
19.5.2 WebSocket通信基礎 298
19.5.3 服務器端使用WebSocket API 299
19.5.4 客戶機端使用WebSocket API 302
19.6 製作簡單Web留言本 303
19.7 編寫簡單的WebSocket服務器 305
19.8 疑難解惑 309
19.9 跟我學上機 309
第20章 處理線程和服務器發送事件 311
20.1 Web Worker 312
20.1.1 Web Worker概述 312
20.1.2 線程中常用的變量、函數與類 312
20.1.3 與線程進行數據的交互 313
20.2 線程嵌套 315
20.2.1 單層線程嵌套 315
20.2.2 多個子線程中的數據交互 317
20.3 服務器發送事件概述 318
20.4 服務器發送事件的實現過程 319
20.4.1 檢測瀏覽器是否支持Server-Sent事件 319
20.4.2 使用EventSource 對象 319
20.4.3 編寫服務器端代碼 320
20.5 創建Web Worker計數器 321
20.6 服務器發送事件實戰 322
20.7 疑難解惑 323
20.8 跟我學上機 324
第21章 CSS 3定位與DIV佈局核心技術 325
21.1 瞭解塊元素和行內元素 326
21.1.1 塊元素和行內元素的應用 326
21.1.2 div元素和span元素的區別 328
21.2 盒子模型 329
21.2.1 盒子模型的概念 329
21.2.2 定義網頁的border區域 329
21.2.3 定義網頁的padding區域 331
21.2.4 定義網頁的margin區域 332
21.3 CSS 3新增的彈性盒模型 335
21.3.1 定義盒子的佈局方向(box-orient) 336
21.3.2 定義盒子元素的排列順序(box-direction) 337
21.3.3 定義盒子元素的位置(box-ordinal-group) 338
21.3.4 定義盒子的彈性空間(box-flex) 340
21.3.5 管理盒子空間(box-pack和box-align) 342
21.3.6 盒子空間的溢出管理(box-lines) 343
21.4 設計淘寶導購菜單 345
21.5 疑難解惑 348
21.6 跟我學上機 348
第22章 項目實訓1——設計在線購物網站 351
22.1 整體佈局 352
22.1.1 設計分析 352
22.1.2 排版架構 352
22.2 模塊分割 353
22.2.1 Logo與導航區 353
22.2.2 Banner與資訊區 355
22.2.3 產品類別區域 356
22.2.4 頁腳區域 358
22.3 設置鏈接 358
第23章 項目實訓2——設計商業門戶網站 359
23.1 整體設計 360
23.1.1 顏色應用分析 360
23.1.2 架構佈局分析 360
23.2 主要模塊設計 361
23.2.1 網頁整體樣式 362
23.2.2 網頁局部樣式 363
23.2.3 頂部模塊代碼 365
23.2.4 中間主體代碼 366
23.2.5 底部模塊代碼 369
23.3 網站調整 369
23.3.1 部分內容調整 369
23.3.2 模塊調整 369
23.3.3 調整後預覽 371
