目    錄
 
第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.2FileReader接口的方法 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.2Web存儲方法 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.4Web 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.1Web 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 &nbs素素的應用 326
21.1.2  素和s素的區別 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

前    言
“網頁設計與制作案例課堂”繫列圖書是專門為網站開發初學者量身定做的一套學習用書。整套書具有以下特點。
前沿科技
精選的是較為前沿或者用戶群較大的領域，幫助大家認識和了解最新動態。
權威的作者團隊
組織國家重點實驗室和資深應用專家聯手編著該套圖書，融入了豐富的教學經驗與優秀的管理理念。
學習型案例設計
以技術的實際應用過程為主線，全程采用圖解和多媒體同步結合的教學方式，生動、直觀、全面地剖析使用過程中的各種應用技能，降低難度，提升學習效率。
掃碼看視頻
通過微信掃碼看視頻，可以隨時在移動端學習技能對應的視頻操作。
為什麼要寫這樣一本書
隨著用戶頁面體驗要求的提高，頁面前端技術日趨重要。HTML 5的技術成熟，在前端技術中凸顯優勢。隨著各大廠商瀏覽器提供支持，它會更加盛行，特別是響應式網頁的設計技術，可以自動適應電腦和移動端的設備，越來越受到廣大網頁設計師的喜愛，對最新HTML 5 CSS 3網頁設計的學習也成為網頁設計師的必修功課。目前，學習和關注網頁設計的人越來越多，對於初學者來說，實用性強和易於操作是最大的需求。本書內容針對想學習網頁設計的初學者，能快速讓初學者入門並提高實戰水平。通過本書的案例實訓，大學生可以快速上手流行的網頁樣式和布局方法，並提高職業能力，從而幫助解決公司與學生的雙向需求問題。
本書特色
零基礎、入門級的講解
無論您是否從事計算機相關行業，也無論您是否接觸過網頁樣式和布局，都能從本書找到最佳起點。
實用、專業的範例和項目
本書在編排上緊密結合深入學習網頁設計的過程，從HTML5基本概念開始，逐步帶領讀者學習網頁設計的各種應用技巧，側重實戰技能，使用簡單易懂的實際案例進行分析和操作指導，讓讀者學起來簡明輕松，操作起來有章可循。
全程同步教學錄像
涵蓋本書所有知識點，詳細講解每個實例和項目的制作過程及技術關鍵點，讓讀者能比看書更輕松地掌握書中的所有網頁制作和設計知識，而且擴展的講解部分能使讀者得到超出書中內容的收獲。
超多容量王牌資源
贈送大量王牌資源，包括實例源代碼、教學幻燈片、本書精品教學視頻、教學教案、88個實用類網頁模板、12部網頁開發參考手冊、HTML 5標記速查手冊、精選的JavaScript實例、CSS 3屬性速查表、JavaScript函數速查手冊、CSS DIV布局賞析案例、精彩網站配色方案賞析、網頁樣式與布局案例賞析、Web前端工程師常見面試題等。
讀者對像
本書是一本完整介紹網頁設計技術的教程，內容豐富、條理清晰、實用性強，適合以下讀者學習使用：
零基礎的網頁設計自學者。
希望快速、全面掌握HTML 5 CSS 3網頁設計的人員。
高等院校或培訓機構的老師和學生。
參加畢業設計的學生。
如何獲取本書配套資料和幫助
為幫助讀者高效、快捷地學習本書知識點，我們不但為讀者準備了與本書知識點有關的配套素材文件，而且還設計並制作了精品視頻教學課程，同時還為教師準備了PPT課件資源。購買本書的讀者，可以通過以下途徑獲取相關的配套學習資源。
讀者在學習本書的過程中，使用手機瀏覽器、QQ或者微信的“掃一掃”功能，掃描本書標題旁邊的二維碼，在打開的視頻播放頁面中可在線觀看視頻課程，也可以將課程下載並保存到手機中離線觀看。
本書由劉春茂編著。在編寫過程中，我們雖竭盡所能希望將最好的講解呈現給讀者，但難免有疏漏和不妥之處，敬請讀者不吝指正。

編  者