HTML5與CSS3網(wǎng)頁設(shè)計基礎(chǔ)（第2版）

目    錄

第1章  Internet和Web基礎(chǔ) 1
1.1  Internet和Web 2
Internet 2
Internet的誕生 2
Internet的發(fā)展 2
Web的誕生 3
第一個圖形化瀏覽器 3
各種技術(shù)的聚合 3
1.2  Web標準和無障礙訪問 4
W3C推薦標準 4
Web標準和無障礙訪問 4
無障礙訪問和法律 4
Web通用設(shè)計 5
1.3  網(wǎng)上的信息 6
信息和可靠性 6
有道德地使用網(wǎng)上信息的道德使用 7
1.4  瀏覽器和服務(wù)器 7
網(wǎng)絡(luò)概述 7
客戶端/服務(wù)器模型 8
1.5  Internet協(xié)議 9
電子郵件協(xié)議 9
超文本傳輸協(xié)議 9
文件傳輸協(xié)議 10
IP地址 10
1.6  統(tǒng)一資源標識符(URI)和域名 11
URI和URL 11
域名 12
1.7  HTML概述 13
什么是HTML 13
什么是XML 13
什么是XHTML 14
HTML5——HTML的最新版本 14
1.8  網(wǎng)頁幕后揭秘 14
文檔類型定義(DTD) 15
網(wǎng)頁模板 15
html元素 15
頁頭部分 15
主體部分 16
1.9  第一個網(wǎng)頁 16
動手實作1.1 16
創(chuàng)建文件夾 17
保存文件 18
測試網(wǎng)頁 18
復(fù)習和練習 19
復(fù)習題 19
動手練習 20
Web研究 20
聚焦Web設(shè)計 20
第2章  HTML基礎(chǔ) 23
2.1  標題元素 24
動手實作2.1 24
HTML5更多的標題選項 25
2.2  段落元素 25
動手實作2.2 26
對齊 26
2.3  換行和水平標尺 27
換行元素 27
動手實作2.3 27
水平標尺元素 28
動手實作2.4 28
2.4  塊引用元素 29
動手實作2.5 29
2.5  短語元素 30
2.6  有序列表 31
type，start和reversed屬性 32
動手實作2.6 32
2.7  無序列表 33
動手實作2.7 33
2.8  描述列表 34
動手實作2.8 35
2.9  特殊字符 36
動手實作2.9 36
2.10  HTML語法校驗 37
動手實作2.10 38
2.11  結(jié)構(gòu)性元素 39
div元素 39
HTML5結(jié)構(gòu)性元素 40
header元素 40
nav元素 40
footer元素 40
動手實作2.11 40
2.12  錨元素 42
動手實作2.12 42
鏈接目標 43
絕對鏈接 43
相對鏈接 43
block anchor 43
2.13  練習使用鏈接 44
站點地圖 44
動手實作2.13 44
2.14  電子郵件鏈接 47
動手實作2.14 48
復(fù)習和練習 48
復(fù)習題 48
動手練習 49
聚焦Web設(shè)計 50
案例學(xué)習：Pacific Trails Resort 50
案例學(xué)習：JavaJam Coffee House 53
第3章  網(wǎng)頁設(shè)計基礎(chǔ) 57
3.1  為目標受眾設(shè)計 58
瀏覽器友好性 59
屏幕分辨率 59
3.2  網(wǎng)站組織 59
分級式組織 60
線性組織 60
隨機組織 61
3.3  視覺設(shè)計原則 61
重復(fù)：在整個設(shè)計中重復(fù)視覺元素 62
對比：添加視覺刺激和吸引注意力 62
近似：分組相關(guān)項目 63
對齊：對齊元素實現(xiàn)視覺上的統(tǒng)一 63
3.4  提供無障礙訪問 63
無障礙設(shè)計的受益者 63
無障礙設(shè)計有助于提高在搜索
引擎中的排名 64
法律規(guī)定 64
無障礙設(shè)計的熱潮 64
3.5  文本的使用 65
文本設(shè)計的注意事項 65
3.6  Web調(diào)色板 66
十六進制顏色值 67
Web安全顏色 67
無障礙設(shè)計和顏色 67
3.7  顏色的運用 68
面向兒童 68
面向年輕人 69
面向所有人 69
面向老年人 70
3.8  使用圖形和多媒體 71
文件大小和圖片尺寸 71
抗鋸齒/鋸齒化文本的問題 71
只使用必要的多媒體 71
提供替代文本 72
3.9  更多設(shè)計上的考慮 73
感覺到的加載時間 73
第一屏 74
適當留白 74
水平滾動 74
3.10  導(dǎo)航設(shè)計 74
網(wǎng)站要易于導(dǎo)航 74
導(dǎo)航欄 74
面包屑導(dǎo)航 75
圖片導(dǎo)航 76
動態(tài)導(dǎo)航 76
站點地圖 76
站點搜索功能 76
3.11  線框和頁面布局 77
3.12  固定和流動布局 79
固定布局 79
流動布局 80
3.13  為移動網(wǎng)絡(luò)設(shè)計 81
三種方式 81
移動設(shè)備設(shè)計考慮 81
桌面和移動網(wǎng)站的例子 82
移動設(shè)計小結(jié) 83
3.14  響應(yīng)式網(wǎng)頁設(shè)計 83
3.15  Web設(shè)計最佳實踐 85
復(fù)習和練習 87
復(fù)習題 87
動手練習 88
聚焦Web設(shè)計 89
案例學(xué)習：Web項目 89
項目里程碑 89
第4章  CSS基礎(chǔ)知識(一) 93
4.1  CSS概述 94
層疊樣式表的優(yōu)點 94
配置CSS的方法 95
層疊樣式表的“層疊” 95
4.2  CSS選擇符和聲明 96
CSS語法基礎(chǔ) 96
background-color屬性 96
color屬性 96
配置背景色和文本色 96
4.3  CSS顏色值語法 97
4.4  配置內(nèi)聯(lián)CSS 99
style屬性 99
動手實作4.1 99
4.5  配置嵌入CSS 100
style元素 100
動手實作4.2 101
4.6  配置外部CSS 103
link元素 103
動手實作4.3 103
4.7  CSS的class、ID和上下文選擇符 104
class選擇符 104
id選擇符 105
后代選擇符 105
動手實作4.4 105
4.8  span元素 106
span元素 106
動手實作4.5 106
4.9  練習使用CSS 108
動手實作4.6 108
將嵌入CSS轉(zhuǎn)換為外部CSS 109
將網(wǎng)頁與外部CSS文件關(guān)聯(lián) 109
4.10  CSS語法校驗 111
動手實作4.7 111
復(fù)習和練習 113
復(fù)習題 113
動手練習 114
聚焦網(wǎng)頁設(shè)計 114
案例學(xué)習：Pacific Trails Resort 115
案例學(xué)習：JavaJam Coffee House 118
第5章  圖片樣式基礎(chǔ) 121
5.1  圖片 122
GIF圖 122
JPEG圖片 123
PNG圖片 124
新的WebP圖像格式 124
5.2  img元素 125
動手實作5.1 125
5.3  圖片鏈接 126
動手實作5.2 127
無障礙訪問和圖片鏈接 128
5.4  配置背景圖片 128
background-image屬性 128
同時使用背景顏色和背景圖片 128
瀏覽器如何顯示背景圖片 129
background-attachment屬性 129
5.5  定位背景圖片 130
background-repeat屬性 130
定位背景圖片 130
動手實作5.3 131
5.6  用CSS3配置多張背景圖片 132
漸進式增強 133
動手實作5.4 133
5.7  收藏圖標 134
配置收藏圖標 135
動手實作5.5 135
5.8  用CSS配置列表符號 136
用圖片代替列表符號 136
動手實作5.6 137
5.9  圖像映射 137
map元素 137
area元素 137
探究矩形圖像映射 138
復(fù)習和練習 139
復(fù)習題 139
動手練習 140
聚焦Web設(shè)計 141
案例學(xué)習：Pacific Trails Resort 141
案例學(xué)習：JavaJam Coffee House 143
第6章  CSS基礎(chǔ)知識(二) 147
6.1  字體 148
動手實作6.1 148
6.2  文本屬性 150
font-size屬性 150
font-weight屬性 151
font-style屬性 151
text-transform屬性 151
line-height屬性 151
動手實作6.2 151
6.3  對齊和縮進 152
text-align屬性 153
text-indent屬性 153
動手實作6.3 153
6.4  CSS的寬度和高度 154
width屬性 154
min-width屬性 155
max-width屬性 155
height屬性 155
動手實作6.4 156
6.5  CSS的框模型 156
框模型實例 157
6.6  CSS的邊距和填充 158
margin屬性 158
padding屬性 158
6.7  CSS的邊框 159
動手實作6.5 160
6.8  CSS3的圓角 161
動手實作6.6 162
6.9  CSS的頁面內(nèi)空居中設(shè)置居中
頁面內(nèi)容 163
動手實作6.7 164
6.10  CSS3的邊框陰影和文本陰影 165
CSS3的box-shadow屬性 165
CSS3的text-shadow屬性 166
動手實作6.8 166
6.11  CSS3的background-clip和
background-origin屬性 167
CSS3的background-clip屬性 167
CSS3 background-origin屬性 168
6.12  CSS3背景大小和縮放 168
6.13  CSS3的opacity屬性 170
動手實作6.9 170
6.14  CSS3 RGBA顏色 172
動手實作6.10 173
6.15  CSS3 HSLA顏色 173
色調(diào)、飽和度、亮度和alpha 173
HSLA顏色示例 174
動手實作6.11 175
6.16  CSS3的漸變 175
CSS3線性漸變語法 176
CSS3漸變和漸進式增強 176
配置CSS3漸變 176
復(fù)習和練習 177
復(fù)習題 177
動手練習 178
聚焦Web設(shè)計 179
案例學(xué)習：Pacific Trails Resort 179
案例學(xué)習：JavaJam Coffee House 181
第7章  頁面布局基礎(chǔ) 185
7.1  正常流動 186
動手實作7.1 186
7.2  浮動 188
float屬性 188
動手實作7.2 189
浮動元素和正常流動 189
7.3  清除浮動 190
clear屬性 190
7.4  溢出 191
overflow屬性 191
7.5  CSS的雙欄頁面布局 194
左側(cè)導(dǎo)航的雙欄布局 194
頂部logo左側(cè)導(dǎo)航的雙欄布局 195
還不算完美 195
7.6  用無序列表實現(xiàn)垂直導(dǎo)航 196
用CSS配置無序列表 196
用CSS text-decoration屬性消除
下劃線 196
動手實作7.3 197
7.7  用無序列表實現(xiàn)垂直導(dǎo)航 198
CSS display屬性 198
動手實作7.4 199
7.8  用偽類實現(xiàn)CSS交互性 200
動手實作7.5 201
7.9  CSS雙欄布局練習 202
動手實作7.6 202
7.10  用CSS進行定位 205
static定位 205
fixed定位 205
相對定位 206
絕對定位 207
7.11  定位練習 208
動手實作7.7 208
7.12  CSS精靈 210
動手實作7.8 211
復(fù)習和練習 212
復(fù)習題 212
動手練習 212
聚焦網(wǎng)頁設(shè)計 213
案例學(xué)習：Pacific Trails Resort 213
案例學(xué)習：JavaJam Coffee House 214
第8章  鏈接、布局和移動開發(fā)進階 217
8.1  深入了解相對鏈接 218
相對鏈接的例子 218
動手實作8.1 219
8.2  區(qū)段標識符 220
動手實作8.2 221
8.3  figure元素和figcaption元素 222
figure元素 222
figcaption元素 222
添加圖題 222
動手實作8.3 223
8.4  圖片浮動練習 224
動手實作8.4 224
8.5  更多HTML5元素 226
8.5  更多HTML5元素 227
hgroup元素 227
section元素 227
article元素 227
aside元素 227
time元素 227
動手實作8.5 227
8.6  HTML5與舊瀏覽器的兼容性 229
配置CSS塊顯示 229
HTML5 Shim 230
動手實作8.6 230
8.7  CSS對打印的支持 231
打印樣式最佳實踐 231
動手實作8.7 232
8.8  移動網(wǎng)頁設(shè)計 233
移動網(wǎng)頁設(shè)計要考慮的問題 234
為移動使用優(yōu)化布局 234
優(yōu)化移動導(dǎo)航 234
優(yōu)化移動圖片 235
優(yōu)化移動文本 235
為One Web而設(shè)計 235
8.9  viewport meta標記 235
8.10  CSS3媒體查詢 238
什么是媒體查詢 238
使用link元素的媒體查詢例子 238
使用@media規(guī)則的媒體查詢示例 239
8.11  媒體查詢練習 240
動手實作8.8 240
8.12  靈活的圖像 242
動手實作8.9 243
8.13  測試移動顯示 244
用桌面瀏覽器測試 245
針對專業(yè)開發(fā)人員 246
復(fù)習和練習 247
復(fù)習題 247
動手練習 248
聚焦網(wǎng)頁設(shè)計 248
案例學(xué)習：Pacific Trails Resort 249
案例學(xué)習：JavaJam Coffee House 252
第9章  表格基礎(chǔ) 257
9.1  表格概述 258
table元素 258
border屬性 259
表格標題 259
9.2  表行、單元格和表頭 260
動手實作9.1 261
9.3  跨行和跨列 261
動手實作9.2 262
9.4  配置無障礙訪問表格 263
9.5  用CSS配置表格樣式 265
動手實作?9.3 265
9.6  CSS3結(jié)構(gòu)性偽類 267
動手實作9.4 267
配置首字母 268
9.7  配置表格區(qū)域 268
復(fù)習和練習 270
復(fù)習題 270
動手練習 271
聚焦Web設(shè)計 271
案例學(xué)習：Pacific Trails Resort 272
案例學(xué)習：JavaJam Coffee House 273
第10章  表單基礎(chǔ) 275
10.1  概述 276
form元素 277
表單控件 277
10.2  文本框 278
10.3  提交按鈕和重置按鈕 279
提交按鈕 279
重置按鈕 279
示例表單 279
動手實作10.1 280
10.4  復(fù)選框和單選鈕 281
復(fù)選框 281
單選鈕 282
10.5  隱藏字段和密碼框 283
隱藏字段 283
密碼框 283
10.6  textarea元素 284
動手實作10.2 285
10.7  select和option元素 286
select元素 287
option元素 287
10.8  label元素 288
動手實作10.3 288
10.9  fieldset元素和legend元素 289
fieldset元素 289
legend元素 289
前瞻：用CSS配置fieldset分組
樣式 290
10.10  用CSS配置表單樣式 291
10.11  服務(wù)器端處理 292
隱私和表單 293
10.12  表單練習 294
動手實作10.4 294
10.13  HTML5文本表單控件 295
E-mail地址輸入表單控件 295
URL表單輸入控件 296
電話號碼表單輸入控件 296
搜索詞輸入表單控件 296
HTML5文本框表單控件的
有效屬性 296
10.14  HTML5的datalist元素 297
10.15  HTML5的slider控件和
spinner控件 298
slider表單輸入控件 298
spinner表單輸入控件 299
HTML5和漸進式增強 300
10.16  HTML5日歷和顏色池控件 300
日歷輸入表單控件 300
顏色池表單控件 301
10.17  HTML5表單練習 302
動手實作10.5 302
復(fù)習和練習 304
復(fù)習題 304
動手練習 305
聚焦Web設(shè)計 305
案例學(xué)習：Pacific Trails Resort 305
案例學(xué)習：JavaJam Coffee House 309
第11章  媒體和交互性基礎(chǔ) 313
11.1  插件、容器和codec 314
輔助應(yīng)用程序和插件 314
11.2  配置音頻和視頻 315
訪問音頻或視頻文件 315
動手實作11.1 316
多媒體和瀏覽器兼容問題 316
11.3  Flash和HTML5 embed元素 317
embed元素 317
動手實作11.2 318
11.4  HTML5的audio元素和source元素 318
audio元素 318
source元素 319
動手實作11.3 320
11.5  HTML5的video元素和
source元素 320
video元素 321
source元素 321
11.6  HTML5視頻練習 322
動手實作11.4 322
11.7  嵌入YouTube視頻 323
iframe元素 323
動手實作11.5 324
11.8  CSS3的transform屬性 325
CSS3旋轉(zhuǎn)變換 325
動手實作11.6 326
11.9  CSS3的transition屬性 327
動手實作11.7 328
11.10  CSS過渡練習 329
動手實作11.8 329
11.11  HTML5的canvas元素 331
復(fù)習和練習 333
復(fù)習題 333
動手練習 333
聚焦Web設(shè)計 334
案例學(xué)習：Pacific Trails Resort 334
案例學(xué)習：JavaJam Coffee House 336
第12章  上網(wǎng)發(fā)布 339
12.1  注冊域名 340
選擇域名 340
注冊域名 341
12.2  選擇主機 341
主機的類型 342
選擇虛擬主機 342
12.3  用FTP發(fā)布 344
FTP應(yīng)用程序 344
用FTP連接 344
使用FTP 344
12.4  提交到搜索引擎 345
搜索引擎的組成 346
在搜索引擎中列出你的網(wǎng)站 347
12.5  搜索引擎優(yōu)化 347
鏈接 349
圖片和多媒體 349
有效代碼 349
有價值的內(nèi)容 349
12.6  無障礙訪問測試 349
通用設(shè)計和無障礙訪問 349
網(wǎng)絡(luò)無障礙訪問標準 349
測試無障礙設(shè)計相容性 350
12.7  使用性測試 351
進行使用性測試 351
動手實作12.1 352
復(fù)習和練習 353
復(fù)習題 353
動手練習 354
聚焦Web設(shè)計 354
案例學(xué)習：Pacific Trails Resort 354
案例學(xué)習：JavaJam Coffee House 355
附錄A  復(fù)習和練習答案 357
附錄B  HTML5速查表 358
附錄C  CSS速查表 362
附錄D  XHTML速查表 366
附錄E  對比XHTML和HTML5 369
附錄F  WCAG 2.0快速參考 375