《網站開發案例課堂：HTML5+CSS3+JavaScript網頁設計案例課堂》是2015年清華大學出版社出版的圖書，作者是劉玉紅。
基本介紹
- 中文名：網站開發案例課堂：HTML5+CSS3+JavaScript網頁設計案例課堂
- 作者：劉玉紅
- 出版社：清華大學出版社
- 出版時間：2015年1月
- 定價：68 元
- 開本：16 開
- 裝幀：平裝
- ISBN：9787302387138
內容簡介,圖書目錄,
內容簡介
《網站開發案例課堂：HTML5 CSS3 JavaScript網頁設計案例課堂》作者根據在長期教學中積累的網頁設計教學經驗，完整、詳盡地介紹HTML 5 CSS 3 JavaScript網頁設計技術。
《網站開發案例課堂：HTML5 CSS3 JavaScript網頁設計案例課堂》共分24章，分別介紹HTML 5概述、HTML 5網頁文檔結構、HTML 5網頁中的文本和圖像、HTML 5建立超連結、HTML 5建立表格、HTML 5建立表單、HTML 5繪製圖形、HTML 5中的音頻和視頻、CSS 3概述和基本語法、美化網頁字型和段落樣式、美化圖片樣式、美化背景和框線樣式、美化超級連結和滑鼠、美化網頁選單、使用CSS 3濾鏡美化網頁元素、JavaScript編程基礎知識、JavaScript程式控制結構和語法、函式、內置對象、HTML 5 CSS 3 JavaScript的搭配使用。最後以兩個綜合網站的設計為例進行講解，使讀者進一步鞏固所學的知識，提高綜合實戰能力。
《網站開發案例課堂：HTML5 CSS3 JavaScript網頁設計案例課堂》內容全面、圖文並茂、步驟清晰、通俗易懂、專業性強，使讀者能理解HTML 5 CSS 3 JavaScript網頁樣式與布局的技術，並能解決實際工作中的問題，真正做到“知其然，更知其所以然”。
《網站開發案例課堂：HTML5 CSS3 JavaScript網頁設計案例課堂》涉及面廣泛，幾乎涵蓋了HTML 5 CSS 3 JavaScript網頁樣式與布局的所有重要知識，適合網頁設計初學者快速入門，同時也適合想全面了解HTML 5 CSS 3 JavaScript網頁設計的專業人員閱讀。
圖書目錄
第1章 初識HTML 5 1
1.1 HTML 5的基本概念 2
1.1.1 HTML的發展歷程 2
1.1.2 什麼是HTML 5 2
1.1.3 HTML 5檔案的基本結構 3
1.2 HTML 5的優勢 3
1.2.1 解決了跨瀏覽器問題 3
1.2.2 新增了多個新特性 3
1.2.3 用戶優先的原則 4
1.2.4 化繁為簡的優勢 5
1.3 HTML 5檔案的編寫方法 5
1.3.1 使用記事本手工編寫HTML 5 5
1.3.2 使用Dreamweaver CS6編寫HTML檔案 6
1.4 使用瀏覽器查看HTML 5檔案 11
1.4.1 查看頁面效果 11
1.4.2 查看源檔案 11
1.5 疑難解惑 12
第2章 HTML 5網頁的文檔結構 13
2.1 HTML 5檔案的基本結構 14
2.1.1 HTML 5頁面的整體結構 14
2.1.2 HTML 5新增的結構標記 14
2.2 HTML 5基本標記詳解 15
2.2.1 文檔類型說明 15
2.2.2 HTML標記 15
2.2.3 頭標記head 16
2.2.4 網頁的主體標記body 18
2.2.5 頁面注釋標記 19
2.3 HTML 5語法的變化 20
2.3.1 標籤不再區分大小寫 20
2.3.2 允許屬性值不使用引號 20
2.3.3 允許部分屬性值的屬性省略 21
2.4 綜合示例――符合W3C標準的HTML 5網頁 21
2.5 上機練習――簡單的HTML 5網頁 23
2.6 疑難解惑 23
第3章 HTML 5網頁中的文本和圖像 25
3.1 在網頁中添加文本 26
3.1.1 普通文本的添加 26
3.1.2 特殊字元文本的添加 26
3.1.3 使用HTML 5標記添加特殊文本 28
3.2 文本排版 30
3.2.1 換行標記
3.0
3.2.2 段落標記
3.1
3.2.3 標題標記
3.1
3.3 文字列表 32
3.3.1 建立無序列表
32
3.3.2 建立有序列表
3.4
3.3.3 建立不同類型的無序列表 35
3.3.4 建立不同類型的有序列表 36
3.3.5 建立嵌套列表 36
3.3.6 自定義列表 37
3.4 網頁中的圖像 38
3.4.1 在網頁中插入圖像 38
3.4.2 設定圖像的寬度和高度 40
3.4.3 設定圖像的提示文字 41
3.4.4 將圖片設定為網頁背景 42
3.4.5 排列圖像 42
3.5 綜合示例――圖文並茂的房屋裝飾裝修網頁 43
3.6 上機練習――線上購物網站的產品展示效果 44
3.7 疑難解惑 45
第4章 用HTML 5建立超連結 47
4.1 URL的概念 48
4.1.1 URL的格式 48
4.1.2 URL的類型 48
4.2 超連結標記 49
4.2.1 設定文本和圖片的超連結 49
4.2.2 創建指向不同目標類型的超連結 50
4.2.3 設定以新視窗顯示超連結頁面 52
4.2.4 連結到同一頁面的不同位置 53
4.3 創建熱點區域 54
4.4 創建浮動框架 56
4.5 綜合示例――用Dreamweaver精確定位熱點區域 57
4.6 上機練習――創建熱點區域 59
4.7 疑難解惑 60
第5章 用HTML 5創建表格 61
5.1 表格的基本結構 62
5.2 創建表格 63
5.2.1 創建普通表格 63
5.2.2 創建一個帶有標題的表格 64
5.3 編輯表格 65
5.3.1 定義表格的框線類型 65
5.3.2 定義表格的表頭 66
5.3.3 設定表格背景 67
5.3.4 設定單元格的背景 69
5.3.5 合併單元格 70
5.3.6 排列單元格中的內容 74
5.3.7 設定單元格的行高與列寬 75
5.4 完整的表格標記 76
5.5 綜合示例――製作計算機報價表 77
5.6 上機練習――製作學生成績表 79
5.7 疑難解惑 82
第6章 使用HTML 5創建表單 85
6.1 表單概述 86
6.2 表單基本元素的使用 86
6.2.1 單行文本輸入框text 87
6.2.2 多行文本輸入框textarea 87
6.2.3 密碼域password 88
6.2.4 單選按鈕radio 89
6.2.5 複選框checkbox 90
6.2.6 列表框select 91
6.2.7 普通按鈕button 91
6.2.8 提交按鈕submit 92
6.2.9 重置按鈕reset 93
6.3 表單高級元素的使用 94
6.3.1 url屬性的使用 94
6.3.2 email屬性的使用 95
6.3.3 date和time屬性的使用 96
6.3.4 number屬性的使用 97
6.3.5 range屬性的使用 97
6.3.6 required屬性的使用 98
6.4 綜合示例――創建用戶反饋表單 99
6.5 上機練習――製作用戶註冊表單 100
6.6 疑難解惑 101
第7章 使用HTML 5繪製圖形 103
7.1 添加canvas的步驟 104
7.2 繪製基本形狀 104
7.2.1 繪製矩形 105
7.2.2 繪製圓形 106
7.2.3 使用moveTo與lineTo繪製直線 107
7.2.4 使用bezierCurveTo繪製貝濟埃曲線 108
7.3 繪製漸變圖形 109
7.3.1 繪製線性漸變 109
7.3.2 繪製徑向漸變 111
7.4 繪製變形圖形 112
7.4.1 繪製平移效果的圖形 112
7.4.2 繪製縮放效果的圖形 113
7.4.3 繪製旋轉效果的圖形 114
7.4.4 繪製組合效果的圖形 115
7.4.5 繪製帶陰影的圖形 117
7.5 使用圖像 118
7.5.1 繪製圖像 118
7.5.2 平鋪圖像 120
7.5.3 裁剪圖像 121
7.5.4 圖像的像素化處理 123
7.6 繪製文字 125
7.7 圖形的保存與恢復 126
7.7.1 保存與恢復狀態 126
7.7.2 保存檔案 128
7.8 綜合示例――繪製火柴棒人物 129
7.9 上機練習――繪製商標 132
7.10 疑難解惑 133
第8章 HTML 5中的音頻和視頻 135
8.1 audio標籤概述 136
8.1.1 audio標籤概述 136
8.1.2 audio標籤的屬性 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.3 video標籤概述 140
8.3.1 video標籤概述 140
8.3.2 video標籤的屬性 141
8.3.3 瀏覽器對video標籤的支持情況 142
8.4 在網頁中添加視頻檔案 142
8.4.1 添加自動播放的視頻檔案 142
8.4.2 添加帶有控制項的視頻檔案 143
8.4.3 添加循環播放的視頻檔案 143
8.4.4 添加預播放的視頻檔案 144
8.4.5 設定視頻檔案的高度與寬度 145
8.5 疑難解惑 146
第9章 CSS 3概述與基本語法 147
9.1 CSS 3概述 148
9.1.1 CSS 3的功能 148
9.1.2 瀏覽器與CSS 3 148
9.1.3 CSS 3的基礎語法 149
9.1.4 CSS 3的常用單位 149
9.2 編輯和瀏覽CSS 3 154
9.2.1 手工編寫CSS 3 154
9.2.2 用Dreamweaver編寫CSS 155
9.3 在HTML 5中使用CSS 3的方法 156
9.3.1 行內樣式 156
9.3.2 內嵌樣式 157
9.3.3 連結樣式 159
9.3.4 導入樣式 160
9.3.5 優先權問題 161
9.4 CSS 3的常用選擇器 163
9.4.1 標籤選擇器 164
9.4.2 類選擇器 164
9.4.3 ID選擇器 165
9.4.4 全局選擇器 166
9.4.5 組合選擇器 167
9.4.6 選擇器繼承 168
9.4.7 偽類選擇器 169
9.5 選擇器聲明 170
9.5.1 集體聲明 170
9.5.2 多重嵌套聲明 171
9.6 綜合示例――製作炫彩網站Logo 172
9.7 上機練習――製作學生信息統計表 175
9.8 疑難解惑 176
第10章 使用CSS 3美化網頁字型與段落 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 設定文本的溢出效果 188
10.2.3 設定文本的控制換行 189
10.2.4 保持字型尺寸不變 190
10.3 美化網頁中的段落 191
10.3.1 設定單詞之間的間隔 191
10.3.2 設定字元之間的間隔 192
10.3.3 設定文字的修飾效果 193
10.3.4 設定垂直對齊方式 194
10.3.5 轉換文本的大小寫 196
10.3.6 設定文本的水平對齊方式 197
10.3.7 設定文本的縮進效果 198
10.3.8 設定文本的行高 199
10.3.9 文本的空白處理 200
10.3.10 文本的反排 201
10.4 綜合示例――設定網頁標題 203
10.5 上機練習――製作新聞頁面 204
10.6 疑難解惑 205
第11章 使用CSS 3美化網頁圖片 207
11.1 圖片縮放 208
11.1.1 通過描述標記width和height縮放圖片 208
11.1.2 使用CSS 3中的max-width和max-height縮放圖片 208
11.1.3 使用CSS 3中的width和height縮放圖片 209
11.2 設定圖片的對齊方式 210
11.2.1 設定圖片的橫向對齊 210
11.2.2 設定圖片縱向對齊 211
11.3 圖文混排 213
11.3.1 設定文字環繞效果 213
11.3.2 設定圖片與文字的間距 214
11.4 綜合示例――製作學校宣傳單 216
11.5 上機練習――製作簡單的圖文混排網頁 218
11.6 疑難解惑 219
第12章 使用CSS 3美化網頁背景與框線 221
12.1 使用CSS 3美化背景 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 背景圖像的裁剪區域 232
12.1.9 背景複合屬性 233
12.2 使用CSS 3美化框線 234
12.2.1 設定框線的樣式 234
12.2.2 設定框線的顏色 236
12.2.3 設定框線的線寬 237
12.2.4 設定框線的複合屬性 238
12.3 設定框線的圓角效果 239
12.3.1 設定圓角框線 239
12.3.2 指定兩個圓角半徑 240
12.3.3 繪製四個不同角的圓角框線 241
12.3.4 繪製不同種類的框線 243
12.4 綜合示例――製作簡單的公司主頁 245
12.5 上機練習――製作簡單的生活資訊主頁 248
12.6 疑難解惑 249
第13章 使用CSS 3美化超級連結和滑鼠 251
13.1 使用CSS 3來美化超連結 252
13.1.1 改變超級連結的基本樣式 252
13.1.2 設定帶有提示信息的超級連結 253
13.1.3 設定超級連結的背景圖 254
13.1.4 設定超級連結的按鈕效果 255
13.2 使用CSS 3美化滑鼠特效 256
13.2.1 使用CSS 3控制滑鼠箭頭 256
13.2.2 設定滑鼠變幻式超連結 258
13.2.3 設定網頁頁面滾動條 259
13.3 綜合示例1――圖片版本的超級連結 261
13.4 綜合示例2――關於滑鼠特效 262
13.5 上機練習――製作一個簡單的導航欄 264
13.6 疑難解惑 266
第14章 使用CSS 3美化表格和表單的樣式 267
14.1 美化表格的樣式 268
14.1.1 設定表格框線的樣式 268
14.1.2 設定表格框線的寬度 270
14.1.3 設定表格框線的顏色 271
14.2 美化表單樣式 272
14.2.1 美化表單中的元素 272
14.2.2 美化提交按鈕 274
14.2.3 美化下拉選單 276
14.3 綜合示例――製作用戶登錄頁面 277
14.4 上機練習――製作用戶註冊頁面 279
14.5 疑難解惑 281
第15章 使用CSS 3美化網頁選單 283
15.1 使用CSS 3美化項目列表 284
15.1.1 美化無序列表 284
15.1.2 美化有序列表 285
15.1.3 美化自定義列表 287
15.1.4 製作圖片列表 288
15.1.5 縮進圖片列表 289
15.1.6 列表的複合屬性 291
15.2 使用CSS 3製作網頁選單 292
15.2.1 製作無需表格的選單 292
15.2.2 製作水平和垂直選單 294
15.3 綜合示例――模擬soso導航欄 297
15.4 上機練習――將段落轉變成列表 299
15.5 疑難解惑 301
第16章 使用CSS 3濾鏡美化網頁元素 303
16.1 濾鏡概述 304
16.2 基本濾鏡 304
16.2.1 通道(Alpha)濾鏡 305
16.2.2 模糊(Blur)濾鏡 307
16.2.3 色彩(Chroma)濾鏡 308
16.2.4 投影(DropShadow)濾鏡 309
16.2.5 水平翻轉(FlipH)濾鏡 311
16.2.6 垂直翻轉(FlipV)濾鏡 311
16.2.7 光暈(Glow)濾鏡 312
16.2.8 灰度(Gray)濾鏡 313
16.2.9 反相(Invert)濾鏡 314
16.2.10 遮罩(Mask)濾鏡 315
16.2.11 波浪(Wave)濾鏡 315
16.2.12 陰影(Shadow)濾鏡 317
16.2.13 X-ray濾鏡 318
16.3 高級濾鏡 318
16.3.1 光照(Light)濾鏡 319
16.3.2 漸隱(BlendTrans)濾鏡 320
16.3.3 切換(RevealTrans)濾鏡 322
16.4 疑難解惑 324
第17章 JavaScript編程基本知識 325
17.1 認識JavaScript 326
17.1.1 什麼是JavaScript 326
17.1.2 JavaScript的特點 326
17.1.3 JavaScript與Java的區別 327
17.1.4 JavaScript的版本 328
17.2 JavaScript基本語法的套用 329
17.2.1 注釋的套用 329
17.2.2 語句的套用 331
17.2.3 語句塊的套用 332
17.3 JavaScript的數據結構 333
17.3.1 認識標識符 333
17.3.2 認識關鍵字 333
17.3.3 認識常量 334
17.3.4 認識變數及其套用 334
17.4 JavaScript數據類型的使用 336
17.4.1 typeof運算符的使用 336
17.4.2 類型的使用 338
17.4.3 null類型的使用 338
17.4.4 Boolean類型的使用 339
17.4.5 Number類型的使用 340
17.4.6 String類型的使用 341
17.4.7 Object類型的使用 342
17.5 JavaScript運算符的使用 342
17.5.1 算術運算符 342
17.5.2 比較運算符 344
17.5.3 位運算符 345
17.5.4 邏輯運算符 346
17.5.5 條件運算符 347
17.5.6 賦值運算符 348
17.5.7 運算符的優先權 350
17.6 綜合示例――一個簡單的JavaScript程式 351
17.7 疑難解惑 352
第18章 JavaScript的程式控制結構與語句 353
18.1 賦值語句 354
18.2 條件判斷語句 354
18.2.1 if語句 354
18.2.2 if-else語句 355
18.2.3 if ... else if語句 356
18.2.4 if語句的嵌套 357
18.2.5 switch語句 359
18.3 循環控制語句 360
18.3.1 while語句 360
18.3.2 do-while語句 361
18.3.3 for語句 363
18.4 跳轉語句 364
18.4.1 break語句 364
18.4.2 continue語句 365
18.5 綜合示例――在頁面中顯示距離2015年元旦的天數 366
18.6 上機練習――製作一個簡易乘法表 367
18.7 疑難解惑 368
第19章 JavaScript中的函式 369
19.1 函式的簡介 370
19.2 調用函式 370
19.2.1 函式的簡單調用 370
19.2.2 在表達式中調用 371
19.2.3 在事件回響中調用函式 372
19.2.4 通過連結調用函式 373
19.3 JavaScript中常用的函式 374
19.3.1 嵌套函式 374
19.3.2 遞歸函式 375
19.3.3 內置函式 376
19.4 綜合示例――購物簡易計算器 384
19.5 上機練習――製作閃爍圖片 386
19.6 疑難解惑 387
第20章 JavaScript的內置對象 389
20.1 字元串對象 390
20.1.1 創建字元串對象的方法 390
20.1.2 字元串對象常用屬性的套用 390
20.1.3 字元串對象常用方法的套用 391
20.2 數學對象 394
20.2.1 創建Math對象的方法 394
20.2.2 數學對象屬性的套用 394
20.2.3 數學對象方法的使用 395
20.3 日期對象 397
20.3.1 創建日期對象 397
20.3.2 日期對象常用方法的套用 398
20.3.3 日期間的運算 401
20.4 數組對象 402
20.4.1 創建數組對象 402
20.4.2 數組對象屬性的套用 402
20.4.3 數組對象常用方法的套用 405
20.5 綜合示例――製作網頁隨機驗證碼 409
20.6 上機練習――動態顯示當前時間 410
20.7 疑難解惑 412
第21章 JavaScript對象編程 415
21.1 文檔對象模型(DOM) 416
21.1.1 文檔對象模型(DOM)介紹 416
21.1.2 在DOM模型中獲得對象 416
21.1.3 事件驅動的套用 417
21.2 視窗(window)對象 419
21.2.1 創建視窗(window) 419
21.2.2 創建對話框 421
21.2.3 視窗的相關操作 423
21.3 文檔(document)對象 424
21.3.1 文檔屬性的套用 424
21.3.2 文檔中圖片的使用 426
21.3.3 顯示文檔中的所有超連結 427
21.4 表單對象 429
21.4.1 創建form對象 429
21.4.2 form對象屬性與方法的套用 430
21.4.3 單選按鈕與複選框的使用 431
21.4.4 下拉選單的使用 432
21.5 綜合示例――表單註冊與表單驗證 433
21.6 上機練習――省市聯動效果 438
21.7 疑難解惑 441
第22章 HTML 5、CSS 3和JavaScript的搭配使用 443
22.1 常見的JavaScript編寫工具 444
22.1.1 記事本 444
22.1.2 Dreamweaver 445
22.2 JavaScript在HTML中的使用 446
22.2.1 在HTML網頁頭中嵌入JavaScript代碼 446
22.2.2 在HTML網頁中嵌入JavaScript代碼 447
22.2.3 在HTML網頁的元素事件中嵌入JavaScript代碼 448
22.2.4 在HTML中調用已經存在的JavaScript檔案 449
22.2.5 通過JavaScript偽URL引入JavaScript腳本代碼 450
22.3 JavaScript與CSS 3的結合使用 451
22.3.1 動態添加樣式 451
22.3.2 動態改變樣式 452
22.3.3 動態定位網頁元素 453
22.3.4 設定網頁元素的顯示與隱藏 456
22.4 HTML 5、CSS 3和JavaScript的搭配套用 457
22.4.1 設定左右移動的圖片 457
22.4.2 製作顏色選擇器 460
22.4.3 製作跑馬燈效果 462
22.5 綜合示例――製作樹形導航選單 464
22.6 上機練習――製作滾動的選單 468
22.7 疑難解惑 470
第23章 製作企業門戶類網頁 473
23.1 構思布局 474
23.1.1 設計分析 474
23.1.2 排版架構 474
23.2 內容設計 475
23.2.1 使用JavaScript技術實現Logo與導航選單 475
23.2.2 Banner區 476
23.2.3 資訊區 477
23.2.4 版權資訊 479
23.3 設定連結 480
23.4 疑難解惑 480
第24章 製作線上購物類網頁 481
24.1 整體布局 482
24.1.1 設計分析 482
24.1.2 排版架構 482
24.2 模組分割 483
24.2.1 Logo與導航區 483
24.2.2 Banner與資訊區 485
24.2.3 產品類別區域 486
24.2.4 頁腳區域 488
24.3 設定連結 488
24.4 疑難解惑 488
