基本介紹
- 書名：HTML5+CSS3+JavaScript網頁設計案例課堂（第2版）
- 作者：劉春茂
- ISBN：9787302486732
- 類別：web前端
- 定價：75元
- 出版社：清華大學出版社
- 出版時間：2018.01.01
- 印次：2-1
出版信息,內容簡介,目錄,
出版信息
HTML5+CSS3+JavaScript網頁設計案例課堂（第2版）
作者：劉春茂
定價：75元
印次：2-1
ISBN：9787302486732
出版日期：2018.01.01
印刷日期：2017.12.04
印次：2-1
ISBN：9787302486732
出版日期：2018.01.01
印刷日期：2017.12.04
內容簡介
《HTML 5+CSS 3+JavaScript網頁設計案例課堂(第2版)》以零基礎講解為宗旨，用實例引導讀者深入學習，採取【HTML 5網頁設計→CSS 3美化網頁→JavaScript動態特效→綜合案例實戰】的講解模式，深入淺出地講解CSS+DIV的各項技術及實戰技能。
目錄
第I篇HTML5網頁設計
第1章初識HTML5 3
1.1HTML5的基本概念 4
1.1.1HTML的發展歷程 4
1.1.2什麼是HTML5 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疑難解惑 13
第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頭標記head 18
2.2.4網頁的主體標記body 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換行標記<br> 32
3.2.2段落標記<p> 32
3.2.3標題標記<h1>~<h6> 33
3.3文字列表 34
3.3.1建立無序列表<ul> 34
3.3.2建立有序列表<ol> 36
3.3.3建立不同類型的無序列表 37
3.3.4建立不同類型的有序列表 38
3.3.5建立嵌套列表 38
3.3.6自定義列表 39
3.4網頁中的圖像<img> 40
3.4.1在網頁中插入圖像 40
3.4.2設定圖像的寬度和高度 42
3.4.3設定圖像的提示文字 43
3.4.4將圖片設定為網頁背景 44
3.4.5排列圖像 45
3.5綜合案例——圖文並茂的房屋裝飾裝修
網頁 45
3.6跟我學上機——線上購物網站的產品
展示效果 47
3.7疑難解惑 48
第4章用HTML5建立超連結 49
4.1URL的概念 50
4.1.1URL的格式 50
4.1.2URL的類型 50
4.2超連結標記<a> 51
4.2.1設定文本和圖片的超連結 51
4.2.2創建指向不同目標類型的
超連結 52
4.2.3設定以新視窗顯示超連結
頁面 54
4.2.4連結到同一頁面的不同位置 55
4.3創建熱點區域 56
4.4創建浮動框架 58
4.5綜合案例——用Dreamweaver精確
定位熱點區域 59
4.6跟我學上機——創建熱點區域 61
4.7疑難解惑 62
第5章用HTML5創建表格 63
5.1表格的基本結構 64
5.2創建表格 65
5.2.1創建普通表格 65
5.2.2創建一個帶有標題的表格 66
5.3編輯表格 67
5.3.1定義表格的框線類型 67
5.3.2定義表格的表頭 68
5.3.3設定表格背景 69
5.3.4設定單元格的背景 71
5.3.5合併單元格 72
5.3.6排列單元格中的內容 76
5.3.7設定單元格的行高與列寬 77
5.4完整的表格標記 78
5.5綜合案例——製作計算機報價表 79
5.6跟我學上機——製作學生成績表 82
5.7疑難解惑 85
第6章用HTML5創建表單 87
6.1表單概述 88
6.2表單基本元素的使用 88
6.2.1單行文本輸入框 89
6.2.2多行文本輸入框 89
6.2.3密碼輸入框 90
6.2.4單選按鈕 91
6.2.5複選框 92
6.2.6列表框 92
6.2.7普通按鈕 93
6.2.8提交按鈕 94
6.2.9重置按鈕 95
6.3表單高級元素的使用 96
6.3.1url屬性的使用 96
6.3.2email屬性的使用 97
6.3.3date和time屬性的使用 97
6.3.4number屬性的使用 98
6.3.5range屬性的使用 99
6.3.6required屬性的使用 100
6.4綜合案例——創建用戶反饋表單 101
6.5跟我學上機——製作用戶註冊表單 102
6.6疑難解惑 103
第7章用HTML5繪製圖形 105
7.1添加canvas的步驟 106
7.2繪製基本形狀 106
7.2.1繪製矩形 107
7.2.2繪製圓形 108
7.2.3使用moveTo與lineTo繪製
直線 108
7.2.4使用bezierCurveTo繪製貝塞爾
曲線 109
7.3繪製漸變圖形 111
7.3.1繪製線性漸變 111
7.3.2繪製徑向漸變 112
7.4繪製變形圖形 114
7.4.1繪製平移效果的圖形 114
7.4.2繪製縮放效果的圖形 115
7.4.3繪製旋轉效果的圖形 116
7.4.4繪製組合圖形 117
7.4.5繪製帶陰影的圖形 119
7.5使用圖像 120
7.5.1繪製圖像 120
7.5.2平鋪圖像 121
7.5.3裁剪圖像 122
7.5.4圖像的像素化處理 124
7.6繪製文字 126
7.7圖形的保存與恢復 127
7.7.1保存與恢復狀態 127
7.7.2保存圖形 129
7.8綜合案例——繪製火柴棒人物 130
7.9跟我學上機——繪製商標 132
7.10疑難解惑 134
第8章HTML5中的音頻和視頻 135
8.1audio標籤概述 136
8.1.1audio標籤概述 136
8.1.2audio標籤的屬性 137
8.1.3瀏覽器對audio標籤的支持
情況 137
8.2在網頁中添加音頻檔案 138
8.2.1添加自動播放的音頻檔案 138
8.2.2添加帶有控制項的音頻檔案 138
8.2.3添加循環播放的音頻檔案 139
8.2.4添加預播放的音頻檔案 139
8.3video標籤概述 140
8.3.1video標籤概述 140
8.3.2video標籤的屬性 141
8.3.3瀏覽器對video標籤的支持
情況 142
8.4在網頁中添加視頻檔案 142
8.4.1添加自動播放的視頻檔案 142
8.4.2添加帶有控制項的視頻檔案 143
8.4.3添加循環播放的視頻檔案 144
8.5綜合案例——設定視頻檔案的高度
與寬度 144
8.6跟我學上機——添加預播放的視頻
檔案 145
8.5疑難解惑 146
第II篇CSS3美化網頁
第9章CSS3概述與基本語法 149
9.1CSS3概述 150
9.1.1CSS3的功能 150
9.1.2瀏覽器與CSS3 150
9.1.3CSS3的基礎語法 151
9.1.4CSS3的常用單位 151
9.2編輯和瀏覽CSS3 156
9.2.1手工編寫CSS3 156
9.2.2用Dreamweaver編寫CSS 157
9.3在HTML5中使用CSS3的方法 158
9.3.1行內樣式 158
9.3.2內嵌樣式 159
9.3.3連結樣式 161
9.3.4導入樣式 162
9.3.5優先權問題 163
9.4CSS3的常用選擇器 165
9.4.1標籤選擇器 165
9.4.2類選擇器 166
9.4.3ID選擇器 167
9.4.4全局選擇器 168
9.4.5組合選擇器 169
9.4.6繼承選擇器 170
9.4.7偽類選擇器 171
9.5選擇器聲明 172
9.5.1集體聲明 172
9.5.2多重嵌套聲明 173
9.6綜合案例——製作炫彩網站Logo 174
9.7跟我學上機——製作學生信息
統計表 176
9.8疑難解惑 178
第10章用CSS3美化網頁字型
與段落 179
10.1美化網頁文字 180
10.1.1設定文字的字型 180
10.1.2設定文字的字號 181
10.1.3設定字型風格 182
10.1.4設定加粗字型 183
10.1.5將小寫字母轉為大寫字母 184
10.1.6設定字型的複合屬性 185
10.1.7設定字型顏色 186
10.2設定文本的高級樣式 187
10.2.1設定文本陰影效果 187
10.2.2設定文本的溢出效果 189
10.2.3設定文本的控制換行 190
10.2.4保持字型尺寸不變 191
10.3美化網頁中的段落 192
10.3.1設定單詞之間的間隔 192
10.3.2設定字元之間的間隔 193
10.3.3設定文字的修飾效果 194
10.3.4設定垂直對齊方式 195
10.3.5轉換文本的大小寫 196
10.3.6設定文本的水平對齊方式 197
10.3.7設定文本的縮進效果 199
10.3.8設定文本的行高 199
10.3.9文本的空白處理 200
10.3.10文本的反排 202
10.4綜合案例——設定網頁標題 203
10.5跟我學上機——製作新聞頁面 204
10.6疑難解惑 206
第11章用CSS3美化網頁圖片 207
11.1圖片縮放 208
11.1.1通過描述標記width和height
縮放圖片 208
11.1.2用CSS3中的max-width和
max-height縮放圖片 208
11.1.3用CSS3中的width和height
縮放圖片 209
11.2設定圖片的對齊方式 210
11.2.1設定圖片的橫向對齊 210
11.2.2設定圖片的縱向對齊 211
11.3圖文混排 213
11.3.1設定文字環繞效果 213
11.3.2設定圖片與文字的間距 215
11.4綜合案例——製作學校宣傳單 216
11.5跟我學上機——製作簡單的圖文
混排網頁 219
11.6疑難解惑 220
第12章用CSS3美化網頁背景
與框線 221
12.1用CSS3美化背景 222
12.1.1設定背景顏色 222
12.1.2設定背景圖片 223
12.1.3背景圖片重複 224
12.1.4背景圖片顯示 226
12.1.5背景圖片的位置 227
12.1.6背景圖片的大小 229
12.1.7背景的顯示區域 230
12.1.8背景圖像的裁剪區域 231
12.1.9背景複合屬性 232
12.2用CSS3美化框線 234
12.2.1設定框線的樣式 234
12.2.2設定框線的顏色 235
12.2.3設定框線的線寬 237
12.2.4設定框線的複合屬性 238
12.3設定框線的圓角效果 239
12.3.1設定圓角框線 239
12.3.2指定兩個圓角半徑 240
12.3.3繪製4個不同角的圓角
框線 241
12.3.4繪製不同種類的框線 243
12.4綜合案例——製作簡單的公司
主頁 244
12.5跟我學上機——製作簡單的生活資訊
主頁 248
12.6疑難解惑 249
第13章用CSS3美化超級連結
和滑鼠 251
13.1用CSS3來美化超連結 252
13.1.1改變超級連結的基本樣式 252
13.1.2設定帶有提示信息的超級
連結 253
13.1.3設定超級連結的背景圖 254
13.1.4設定超級連結的按鈕效果 255
13.2用CSS3美化滑鼠特效 256
13.2.1用CSS3控制滑鼠箭頭 256
13.2.2設定滑鼠變幻式超連結 258
13.2.3設定網頁頁面滾動條 259
13.3綜合案例1——圖片版本的超級
連結 261
13.4綜合案例2——關於滑鼠特效 263
13.5跟我學上機——製作一個簡單的
導航欄 265
13.6疑難解惑 268
第14章用CSS3美化表格和表單的
樣式 269
14.1美化表格的樣式 270
14.1.1設定表格框線的樣式 270
14.1.2設定表格框線的寬度 272
14.1.3設定表格框線的顏色 273
14.2美化表單樣式 274
14.2.1美化表單中的元素 275
14.2.2美化提交按鈕 277
14.2.3美化下拉選單 278
14.3綜合案例——製作用戶登錄頁面 279
14.4跟我學上機——製作用戶註冊頁面 281
14.5疑難解惑 284
第15章用CSS3美化網頁選單 285
15.1用CSS3美化項目列表 286
15.1.1美化無序列表 286
15.1.2美化有序列表 287
15.1.3美化自定義列表 289
15.1.4製作圖片列表 290
15.1.5縮進圖片列表 292
15.1.6列表的複合屬性 293
15.2用CSS3製作網頁選單 294
15.2.1製作無須表格的選單 294
15.2.2製作水平和垂直選單 296
15.3綜合案例——模擬soso導航欄 298
15.4跟我學上機——將段落轉變成列表 301
15.5疑難解惑 303
第16章用濾鏡美化網頁元素 305
16.1濾鏡概述 306
16.2設定基本濾鏡效果 307
16.2.1高斯模糊(blur)濾鏡 307
16.2.2明暗度(brightness)濾鏡 308
16.2.3對比度(contrast)濾鏡 309
16.2.4陰影(drop-shadow)濾鏡 310
16.2.5灰度(grayscale)濾鏡 311
16.2.6反相(invert)濾鏡 312
16.2.7透明度(opacity)濾鏡 313
16.2.8飽和度(saturate)濾鏡 314
16.2.9深褐色(sepia)濾鏡 315
16.3綜合案例1——使用複合濾鏡效果 316
16.4綜合案例2——使用濾鏡製作動畫
效果 317
16.5跟我學上機——製作色相旋轉
(hue-rotate)濾鏡 319
16.6疑難解惑 320
第17章CSS3中的動畫效果 321
17.1了解過渡效果 322
17.2添加過渡效果 322
17.3了解動畫效果 324
17.4添加動畫效果 325
17.5了解2D轉換效果 327
17.6添加2D轉換效果 327
17.6.1添加移動效果 327
17.6.2添加旋轉效果 328
17.6.3添加縮放效果 329
17.6.4添加傾斜效果 331
17.7添加3D轉換效果 332
17.8綜合案例——添加綜合過渡效果 334
17.9跟我學上機——添加綜合變幻效果 335
17.10疑難解惑 336
第III篇JavaScript動態特效
第18章JavaScript編程基本知識 341
18.1認識JavaScript 342
18.1.1什麼是JavaScript 342
18.1.2JavaScript的特點 342
18.1.3JavaScript與Java的區別 343
18.1.4JavaScript的版本 344
18.2JavaScript基本語法的套用 345
18.2.1注釋的套用 345
18.2.2語句的套用 347
18.2.3語句塊的套用 347
18.3JavaScript的數據結構 348
18.3.1認識標識符 349
18.3.2認識關鍵字 349
18.3.3認識常量 349
18.3.4認識變數及其套用 350
18.4JavaScript數據類型的使用 352
18.4.1typeof運算符的使用 352
18.4.2undefined類型的使用 353
18.4.3null類型的使用 354
18.4.4Boolean類型的使用 354
18.4.5Number類型的使用 355
18.4.6String類型的使用 356
18.4.7Object類型的使用 357
18.5JavaScript運算符的使用 357
18.5.1算術運算符 358
18.5.2比較運算符 359
18.5.3位運算符 360
18.5.4邏輯運算符 361
18.5.5條件運算符 362
18.5.6賦值運算符 364
18.5.7運算符的優先權 365
18.6綜合案例——一個簡單的JavaScript
程式 366
18.7疑難解惑 367
第19章JavaScript的程式控制結構
與語句 369
19.1賦值語句 370
19.2條件判斷語句 370
19.2.1if語句 370
19.2.2if-else語句 371
19.2.3if...elseif語句 372
19.2.4if語句的嵌套 373
19.2.5switch語句 374
19.3循環控制語句 376
19.3.1while語句 376
19.3.2do-while語句 377
19.3.3for語句 378
19.4跳轉語句 379
19.4.1break語句 379
19.4.2continue語句 380
19.5綜合案例——在頁面中顯示距離
2018年元旦的天數 381
19.6跟我學上機——製作一個簡易
乘法表 383
19.7疑難解惑 384
第20章JavaScript中的函式 385
20.1函式的簡介 386
20.2調用函式 386
20.2.1函式的簡單調用 386
20.2.2在表達式中調用函式 387
20.2.3在事件回響中調用函式 388
20.2.4通過連結調用函式 389
20.3JavaScript中常用的函式 390
20.3.1嵌套函式 390
20.3.2遞歸函式 390
20.3.3內置函式 392
20.4綜合案例——購物簡易計算器 399
20.5跟我學上機——製作閃爍圖片 401
20.6疑難解惑 402
第21章JavaScript對象編程 403
21.1文檔對象模型(DOM) 404
21.1.1文檔對象模型(DOM)介紹 404
21.1.2在DOM模型中獲得對象 404
21.1.3事件驅動的套用 405
21.2視窗(window)對象 407
21.2.1創建視窗(window) 407
21.2.2創建對話框 409
21.2.3視窗的相關操作 411
21.3文檔(document)對象 412
21.3.1文檔屬性的套用 412
21.3.2文檔中圖片的使用 414
21.3.3顯示文檔中的所有超連結 415
21.4表單對象 417
21.4.1創建form對象 417
21.4.2form對象屬性與方法的
套用 417
21.4.3單選按鈕與複選框的使用 419
21.4.4下拉選單的使用 420
21.5綜合案例——表單註冊與表單
驗證 421
21.6跟我學上機——省市聯動效果 425
21.7疑難解惑 428
第22章JavaScript的內置對象 429
22.1字元串對象 430
22.1.1創建字元串對象的方法 430
22.1.2字元串對象常用屬性的
套用 430
22.1.3字元串對象常用方法的
套用 431
22.2數學對象 433
22.2.1創建Math對象的方法 433
22.2.2數學對象屬性的套用 434
22.2.3數學對象方法的使用 435
22.3日期對象 437
22.3.1創建日期對象 437
22.3.2日期對象常用方法的套用 438
22.3.3日期間的運算 440
22.4數組對象 441
22.4.1創建數組對象 441
22.4.2數組對象屬性的套用 442
22.4.3數組對象常用方法的套用 444
22.5綜合案例——製作網頁隨機
驗證碼 448
22.6跟我學上機——動態顯示當前
時間 450
22.7疑難解惑 452
第23章HTML5、CSS3和JavaScript
的綜合套用 453
23.1JavaScript在HTML中的使用 454
23.1.1在HTML網頁頭中嵌入
JavaScript代碼 454
23.1.2在HTML網頁中嵌入
JavaScript代碼 455
23.1.3在HTML網頁的元素事件中
嵌入JavaScript代碼 456
23.1.4在HTML中調用已經存在的
JavaScript檔案 457
23.1.5通過JavaScript偽URL引入
JavaScript腳本代碼 458
23.2JavaScript與CSS3的結合使用 459
23.2.1動態添加樣式 459
23.2.2動態改變樣式 460
23.2.3動態定位網頁元素 462
23.2.4設定網頁元素的顯示
與隱藏 464
23.3HTML5、CSS3和JavaScript的搭配
套用 465
23.3.1設定左右移動的圖片 465
23.3.2製作顏色選擇器 468
23.3.3製作跑馬燈效果 470
23.4綜合案例——製作樹形導航選單 472
23.5跟我學上機——製作滾動的選單 477
23.6疑難解惑 479
第IV篇綜合案例實戰
第24章製作企業門戶類網頁 483
24.1構思布局 484
24.1.1設計分析 484
24.1.2排版架構 484
24.2內容設計 485
24.2.1使用JavaScript技術實現Logo
與導航選單 485
24.2.2Banner區 486
24.2.3資訊區 487
24.2.4版權資訊 489
24.3設定連結 490
24.4疑難解惑 490
第25章製作線上購物類網頁 491
25.1整體布局 492
25.1.1設計分析 492
25.1.2排版架構 492
25.2模組分割 493
25.2.1Logo與導航區 493
25.2.2Banner與資訊區 495
25.2.3產品類別區域 496
25.2.4頁腳區域 498
25.3設定連結 498
25.4疑難解惑 498
第26章移動設備類型網站開發 499
26.1網站設計分析 500
26.2網站結構分析 500
26.3網站主頁面的製作 501
26.4網站成品預覽 503
26.5疑難解惑 508
