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

目    錄

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