《HTML5+CSS3+JavaScript網頁設計案例課堂（第3版）》是2023年6月1日清華大學出版社出版的圖書，作者：劉春茂。
基本介紹
- 中文名：HTML5+CSS3+JavaScript網頁設計案例課堂（第3版）
- 作者：劉春茂
- 出版時間：2023年6月1日
- 出版社：清華大學出版社
- ISBN：9787302636090
- 定價：98 元
- 印次：3-1
- 印刷日期：2023.06.05
內容簡介,圖書目錄,
內容簡介
《HTML5+CSS3+JavaScript網頁設計案例課堂（第3版）》是針對零基礎讀者編寫的網頁設計入門教材。本書側重案例實訓，書中配有微課，讀者可以打開微課視頻，更為直觀地學習當前的熱點案例。
《HTML5+CSS3+JavaScript網頁設計案例課堂（第3版）》分為25章，內容包括新一代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中的檔案與拖放，JavaScript編程基本知識，JavaScript程式控制語句，JavaScript中的函式，JavaScript對象的套用，JavaScript對象編程。最後通過兩個熱點綜合項目，進一步鞏固讀者的項目開發經驗。
《HTML5+CSS3+JavaScript網頁設計案例課堂（第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網頁的開發環境 4
1.3.1 使用記事本手工編寫HTML 5檔案 5
1.3.2 使用WebStorm編寫HTML 5檔案 5
1.4 使用瀏覽器查看HTML 5檔案 8
1.4.1 查看頁面效果 8
1.4.2 查看源檔案 9
1.5 疑難解惑 9
1.6 跟我學上機 10
第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 頭標記head 14
2.2.4 網頁的主體標記 16
2.2.5 頁面注釋標記<!-- --> 17
2.3 HTML 5語法的變化 17
2.3.1 標籤不再區分大小寫 18
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 段落的換行標籤 29
3.3.3 段落的原格式標籤 30
3.4 文字列表 30
3.4.1 建立無序列表<ul> 30
3.4.2 建立有序列表<ol> 31
3.4.3 建立不同類型的無序列表 32
3.4.4 建立不同類型的有序列表 33
3.4.5 自定義列表 34
3.4.6 建立嵌套列表 36
3.5 超連結標記 37
3.5.1 設定文本和圖片的超連結 37
3.5.2 創建指向不同類型目標的超連結 37
3.5.3 設定以新視窗顯示超連結頁面 39
3.5.4 連結到同一頁面的不同位置 40
3.6 圖像熱點連結 41
3.7 在網頁中插入圖像 42
3.8 編輯網頁中的圖像 44
3.8.1 設定圖像的大小和框線 44
3.8.2 設定圖像的間距和對齊方式 45
3.8.3 設定圖像的替換文字和提示文字 46
3.9 疑難解惑 47
3.10 跟我學上機 48
第4章 使用HTML 5創建表格 49
4.1 表格的基本結構 50
4.2 創建表格 51
4.2.1 創建普通表格 51
4.2.2 創建一個帶有標題的表格 52
4.3 編輯表格 53
4.3.1 定義表格的框線類型 53
4.3.2 定義表格的表頭 54
4.3.3 設定表格背景 55
4.3.4 設定單元格的背景 57
4.3.5 合併單元格 57
4.3.6 表格的分組 59
4.3.7 設定單元格的行高與列寬 61
4.4 完整的表格標記 62
4.5 設定懸浮變色的表格 63
4.6 疑難解惑 67
4.7 跟我學上機 67
第5章 使用HTML 5創建表單 69
5.1 表單概述 70
5.2 表單基本元素的使用 70
5.2.1 單行文本輸入框 71
5.2.2 多行文本輸入框 71
5.2.3 密碼輸入框 72
5.2.4 單選按鈕 72
5.2.5 複選框 73
5.2.6 列表框 74
5.2.7 普通按鈕 75
5.2.8 提交按鈕 76
5.2.9 重置按鈕 77
5.3 表單高級元素的使用 78
5.3.1 url屬性的使用 78
5.3.2 email屬性的使用 79
5.3.3 日期和時間屬性的使用 79
5.3.4 number屬性的使用 80
5.3.5 range屬性的使用 81
5.3.6 required屬性的使用 81
5.4 疑難解惑 82
5.5 跟我學上機 82
第6章 HTML 5中的多媒體 85
6.1 audio標記 86
6.1.1 audio標記概述 86
6.1.2 audio標記的屬性 87
6.1.3 瀏覽器對audio標記的支持情況 87
6.2 在網頁中添加音頻檔案 88
6.3 video標記 89
6.3.1 video標記概述 89
6.3.2 video標記的屬性 90
6.3.3 瀏覽器對video標記的支持情況 91
6.4 在網頁中添加視頻檔案 91
6.5 疑難解惑 93
6.6 跟我學上機 94
第7章 使用HTML 5繪製圖形 95
7.1 添加canvas的步驟 96
7.2 繪製基本形狀 96
7.2.1 繪製矩形 96
7.2.2 繪製圓形 97
7.2.3 使用moveTo( )與lineTo( )繪製直線 98
7.2.4 使用bezierCurveTo( )繪製貝塞爾曲線 100
7.3 繪製漸變圖形 101
7.3.1 繪製線性漸變 101
7.3.2 繪製徑向漸變 102
7.4 繪製變形圖形 104
7.4.1 繪製平移效果的圖形 104
7.4.2 繪製縮放效果的圖形 105
7.4.3 繪製旋轉效果的圖形 106
7.4.4 繪製組合效果的圖形 107
7.4.5 繪製帶陰影的圖形 109
7.5 使用圖像 110
7.5.1 繪製圖像 110
7.5.2 平鋪圖像 111
7.5.3 裁剪圖像 112
7.5.4 圖像的像素化處理 114
7.6 繪製文字 116
7.7 疑難解惑 117
7.8 跟我學上機 118
第8章 CSS 3概述與基本語法 119
8.1 CSS 3概述 120
8.1.1 CSS 3的功能 120
8.1.2 瀏覽器與CSS 3 120
8.1.3 CSS 3的基礎語法 121
8.1.4 CSS 3的常用單位 121
8.2 在HTML 5中使用CSS 3的方法 125
8.2.1 行內樣式 125
8.2.2 內嵌樣式 126
8.2.3 連結樣式 128
8.2.4 導入樣式 129
8.2.5 優先權問題 130
8.3 CSS 3的常用選擇器 132
8.3.1 標籤選擇器 132
8.3.2 類選擇器 133
8.3.3 ID選擇器 134
8.3.4 全局選擇器 135
8.3.5 組合選擇器 136
8.3.6 繼承選擇器 137
8.3.7 偽類選擇器 138
8.4 選擇器聲明 139
8.4.1 集體聲明 139
8.4.2 多重嵌套聲明 140
8.5 疑難解惑 140
8.6 跟我學上機 141
第9章 使用CSS 3美化網頁字型與段落 143
9.1 美化網頁文字 144
9.1.1 設定文字的字型 144
9.1.2 設定文字的字號 145
9.1.3 設定字型風格 146
9.1.4 設定字型的粗細 146
9.1.5 將小寫字母轉換為大寫字母 147
9.1.6 設定字型的複合屬性 148
9.1.7 設定字型顏色 149
9.2 設定文本的高級樣式 150
9.2.1 設定文本陰影效果 150
9.2.2 設定文本的溢出效果 151
9.2.3 設定文本換行 152
9.2.4 保持字型尺寸不變 153
9.3 美化網頁中的段落 154
9.3.1 設定單詞之間的間隔 154
9.3.2 設定字元之間的間隔 155
9.3.3 設定文字的修飾效果 156
9.3.4 設定垂直對齊方式 157
9.3.5 轉換文本的大小寫 159
9.3.6 設定文本的水平對齊方式 160
9.3.7 設定文本的縮進效果 162
9.3.8 設定文本的行高 162
9.3.9 文本的空白處理 163
9.3.10 文本的反排 165
9.4 疑難解惑 166
9.5 跟我學上機 166
第10章 使用CSS 3美化網頁圖片 169
10.1 圖片縮放 170
10.1.1 通過描述標記width和height縮放圖片 170
10.1.2 使用CSS 3中的max-width 和max-height縮放圖片 170
10.1.3 使用CSS 3中的width 和height縮放圖片 171
10.2 設定圖片的對齊方式 172
10.2.1 設定圖片橫向對齊 172
10.2.2 設定圖片縱向對齊 173
10.3 圖文混排 175
10.3.1 設定文字環繞效果 175
10.3.2 設定圖片與文字的間距 176
10.4 疑難解惑 178
10.5 跟我學上機 178
第11章 使用CSS 3美化網頁背景與框線 181
11.1 使用CSS 3美化背景 182
11.1.1 設定背景顏色 182
11.1.2 設定背景圖片 183
11.1.3 設定背景圖片重複 184
11.1.4 設定背景圖片顯示 186
11.1.5 設定背景圖片的位置 187
11.1.6 設定背景圖片的大小 188
11.1.7 設定背景圖片的顯示區域 190
11.1.8 設定背景圖片的裁剪區域 191
11.1.9 設定背景圖片的複合屬性 193
11.2 使用CSS 3美化框線 194
11.2.1 設定框線的樣式 194
11.2.2 設定框線的顏色 195
11.2.3 設定框線的線寬 196
11.2.4 設定框線的複合屬性 198
11.3 設定框線的圓角效果 199
11.3.1 設定圓角框線 199
11.3.2 指定兩個圓角半徑 199
11.3.3 繪製四個不同角的圓角框線 200
11.3.4 繪製不同種類的框線 202
11.4 疑難解惑 204
11.5 跟我學上機 205
第12章 使用CSS 3美化超級連結和滑鼠 207
12.1 使用CSS 3美化超連結 208
12.1.1 改變超級連結的基本樣式 208
12.1.2 設定帶有提示信息的超級連結 209
12.1.3 設定超級連結的背景圖 210
12.1.4 設定超級連結的按鈕效果 211
12.2 使用CSS 3美化滑鼠特效 212
12.2.1 使用CSS 3控制滑鼠箭頭 212
12.2.2 設定滑鼠變換式超連結 213
12.3 設計一個簡單的導航欄 215
12.4 疑難解惑 216
12.5 跟我學上機 216
第13章 使用CSS 3美化表格和表單的樣式 219
13.1 美化表格的樣式 220
13.1.1 設定表格框線的樣式 220
13.1.2 設定表格框線的寬度 221
13.1.3 設定表格框線的顏色 223
13.2 美化表單樣式 224
13.2.1 美化表單中的元素 224
13.2.2 美化提交按鈕 226
13.2.3 美化下拉選單 227
13.3 疑難解惑 229
13.4 跟我學上機 229
第14章 使用CSS 3美化網頁選單 231
14.1 使用CSS 3美化項目列表 232
14.1.1 美化無序列表 232
14.1.2 美化有序列表 233
14.1.3 美化自定義列表 235
14.1.4 製作圖片列表 236
14.1.5 縮進圖片列表 237
14.1.6 設定列表的複合屬性 238
14.2 使用CSS 3製作網頁選單 239
14.2.1 製作無序表格的選單 239
14.2.2 製作水平和垂直選單 241
14.3 疑難解惑 243
14.4 跟我學上機 243
第15章 使用濾鏡美化網頁元素 245
15.1 濾鏡概述 246
15.2 設定基本濾鏡效果 247
15.2.1 高斯模糊(blur)濾鏡 247
15.2.2 明暗度(brightness)濾鏡 248
15.2.3 對比度(contrast)濾鏡 249
15.2.4 陰影(drop-shadow)濾鏡 250
15.2.5 灰度(grayscale)濾鏡 251
15.2.6 反相(invert)濾鏡 252
15.2.7 透明度(opacity)濾鏡 253
15.2.8 飽和度(saturate)濾鏡 254
15.3 使用濾鏡製作動畫效果 255
15.4 疑難解惑 256
15.5 跟我學上機 257
第16章 CSS 3中的動畫效果 259
16.1 了解過渡效果 260
16.2 添加過渡效果 260
16.3 了解動畫效果 262
16.4 添加動畫效果 263
16.5 了解2D轉換效果 264
16.6 添加2D轉換效果 265
16.6.1 添加移動效果 265
16.6.2 添加旋轉效果 266
16.6.3 添加縮放效果 267
16.6.4 添加傾斜效果 268
16.7 添加3D轉換效果 269
16.8 疑難解惑 271
16.9 跟我學上機 272
第17章 HTML 5中的檔案與拖放 273
17.1 選擇檔案 274
17.1.1 選擇單個檔案 274
17.1.2 選擇多個檔案 274
17.2 使用FileReader接口讀取檔案 275
17.2.1 檢測瀏覽器是否支持 FileReader接口 275
17.2.2 FileReader接口的方法 276
17.2.3 使用readAsDataURL方法預覽圖片 276
17.2.4 使用readAsText方法讀取文本檔案 278
17.3 使用HTML 5實現檔案的拖放 279
17.3.1 認識檔案拖放的過程 279
17.3.2 瀏覽器支持情況 280
17.3.3 在網頁中拖放圖片 280
17.4 在網頁中來回拖放圖片 281
17.5 在網頁中拖放文字 282
17.6 疑難解惑 284
17.7 跟我學上機 285
第18章 JavaScript編程基本知識 287
18.1 JavaScript入門 288
18.1.1 JavaScript能做什麼 288
18.1.2 在網頁中嵌入JavaScript代碼 290
18.1.3 調用外部JavaScript檔案 291
18.1.4 JavaScript的語法基礎 292
18.1.5 數據類型 293
18.2 JavaScript的常量和變數 294
18.3 運算符與表達式 296
18.3.1 運算符 296
18.3.2 表達式 299
18.4 疑難解惑 301
18.5 跟我學上機 301
第19章 JavaScript程式控制語句 303
19.1 條件判斷語句 304
19.1.1 簡單if語句 304
19.1.2 if...else語句 305
19.1.3 if...else if語句 306
19.1.4 if語句的嵌套 307
19.1.5 switch語句 308
19.2 循環語句 310
19.2.1 while語句 310
19.2.2 do…while語句 312
19.2.3 for語句 313
19.2.4 循環語句的嵌套 314
19.3 跳轉語句 317
19.3.1 break語句 317
19.3.2 continue語句 318
19.4 疑難解惑 320
19.5 跟我學上機 320
第20章 JavaScript中的函式 323
20.1 函式的定義 324
20.1.1 聲明式函式定義 324
20.1.2 函式表達式定義 325
20.1.3 函式構造器定義 326
20.2 函式的調用 326
20.2.1 函式的簡單調用 326
20.2.2 通過超連結調用函式 327
20.2.3 在事件回響中調用函式 328
20.3 函式的參數與返回值 329
20.3.1 函式的參數 329
20.3.2 函式的返回值 330
20.4 常用內置函式 331
20.5 特殊函式 333
20.5.1 嵌套函式 333
20.5.2 遞歸函式 335
20.5.3 內嵌函式 336
20.6 疑難解惑 337
20.7 跟我學上機 337
第21章 JavaScript對象的套用 339
21.1 了解對象 340
21.1.1 什麼是對象 340
21.1.2 對象的屬性和方法 340
21.2 創建自定義對象的方法 341
21.2.1 直接定義並創建自定義對象 341
21.2.2 使用Object對象創建自定義對象 342
21.2.3 使用自定義構造函式創建對象 343
21.3 對象訪問語句 348
21.3.1 for…in循環語句 349
21.3.2 with語句 350
21.4 數組對象 351
21.4.1 數組對象概述 351
21.4.2 定義數組 352
21.4.3 數組的屬性 353
21.4.4 運算元組元素 355
21.4.5 數組方法 356
21.5 String對象 359
21.5.1 創建String對象 359
21.5.2 String對象的屬性 360
21.5.3 String對象的方法 361
21.6 疑難解惑 365
21.7 跟我學上機 366
第22章 JavaScript對象編程 367
22.1 文檔對象模型(DOM) 368
22.1.1 文檔對象模型(DOM)介紹 368
22.1.2 在DOM模型中獲得對象 368
22.1.3 事件驅動的套用 369
22.2 視窗(window)對象 371
22.2.1 創建視窗(window) 371
22.2.2 創建對話框 373
22.2.3 視窗的相關操作 374
22.3 文檔(document)對象 376
22.3.1 文檔屬性的套用 376
22.3.2 文檔中圖片的使用 378
22.3.3 顯示文檔中的所有超連結 379
22.4 表單對象 380
22.4.1 創建form對象 380
22.4.2 form對象屬性與方法的套用 381
22.4.3 單選按鈕與複選框的使用 382
22.4.4 下拉選單的使用 383
22.5 疑難解惑 384
22.6 跟我學上機 385
第23章 綜合項目1——開發企業入口網站 387
23.1 構思布局 388
23.1.1 設計分析 388
23.1.2 排版架構 388
23.2 主要模組設計 389
23.2.1 Logo與導航選單 389
23.2.2 Banner區 390
23.2.3 資訊區 390
23.2.4 版權資訊 392
第24章 綜合項目2——設計線上購物網站 395
24.1 整體布局 396
24.1.1 設計分析 396
24.1.2 排版架構 396
24.2 模組分割 397
24.2.1 Logo與導航區 397
24.2.2 Banner與資訊區 399
24.2.3 產品類別區域 400
24.2.4 頁腳區域 402
24.3 設定連結 402
第25章 綜合項目3——開發商業回響式網站 403
25.1 網站概述 404
25.1.1 網站結構 404
25.1.2 設計效果 404
25.1.3 設計準備 405
25.2 設計首頁布局 406
25.3 設計可切換導航 407
25.4 主體內容 412
25.4.1 設計輪播廣告區 413
25.4.2 設計產品推薦區 414
25.4.3 設計登錄註冊和Logo 415
25.4.4 設計特色展示區 416
25.4.5 設計產品生產流程區 417
25.5 設計底部隱藏導航 420
