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
