《HTML5+CSS3網頁設計與製作案例課堂（第3版）》是2023年6月1日清華大學出版社出版的圖書，作者：劉春茂。
基本介紹
- 中文名：HTML5+CSS3網頁設計與製作案例課堂（第3版）
- 作者：劉春茂
- 出版時間：2023年6月1日
- 出版社：清華大學出版社
- ISBN：9787302636083
- 定價：86 元
- 印次：3-1
- 印刷日期：2023.06.05
內容簡介,圖書目錄,
內容簡介
《HTML5+CSS3網頁設計與製作案例課堂（第3版）》是針對零基礎讀者編寫的網頁設計入門教材，側重案例實訓，並提供微課來講解當前熱點的案例。
《HTML5+CSS3網頁設計與製作案例課堂（第3版）》分為23章，內容包括新一代Web前端技術、HTML 5網頁的文檔結構、HTML 5網頁中的文本、超連結和圖像、使用HTML 5創建表格、使用HTML 5創建表單、HTML 5中的多媒體、使用HTML 5繪製圖形、CSS 3概述與基本語法、使用CSS 3美化網頁字型與段落、使用CSS 3美化網頁圖片、使用CSS 3美化網頁背景與框線、使用CSS 3美化超級連結和游標、使用CSS 3美化表格和表單、使用CSS 3美化網頁選單、使用濾鏡美化網頁元素、CSS 3中的動畫效果、HTML 5中的檔案與拖放、定位地理位置技術、數據存儲和通信技術、處理執行緒和伺服器傳送事件、CSS 3定位與DIV布局核心技術。最後通過兩個熱點綜合項目，進一步鞏固讀者的項目開發經驗。
《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
