HTML5與CSS網頁設計基礎(第6版 知識點+案例+習題+視頻) Basics of Web Design: HTML5 & CSS
[美]特麗·安·菲爾克-莫裡斯 (Terry Ann Felke-Morris)著 周靖 譯
相關主題
商品描述
《HTML5與CSS網頁設計基礎(第6版 知識點+案例+習題+視頻)》針對HTML5和CSS的**標準進行及時的更新和修訂,主題涉及如何創建HTML5網頁、如何用CSS配置顏色和文本、如何用CSS配置頁面佈局、如何配置圖像和多媒體、如何應用網頁設計**實踐、如何設計可訪問和可用的網頁、如何為搜索引擎優化而設計、如何選擇域名及如何發布網站。 《HTML5與CSS網頁設計基礎(第6版 知識點+案例+習題+視頻)》適合對網頁設計感興趣的讀者閱讀,是一本較為理想的網頁設計教程。
目錄大綱
簡明目錄
第1 章 互聯網和萬維網基礎 1
第2 章 HTML 基礎 29
第3 章 網頁設計基礎 75
第4 章 CSS 基礎 117
第5 章 圖形和文本樣式基礎 151
第6 章 CSS 進階 191
第7 章 頁面佈局基礎 231
第8 章 靈活響應佈局基礎 279
第9 章 表格基礎 341
第10 章 表單基礎 363
第11 章 媒體和交互性基礎 413
第12 章 Web 發布基礎 447
詳細目錄
第1 章 互聯網和萬維網基礎 1
1.1 互聯網和萬維網 2
互聯網 2
互聯網的誕生 2
互聯網的發展 2
萬維網的誕生 2
第一個圖形化瀏覽器 3
各種技術的融合 3
1.2 網頁標準和無障礙訪問 4
W3C 推薦標準 4
網頁標準和無障礙訪問 4
無障礙訪問和法律 4
網頁通用設計 5
網絡概述 5
客戶端/ 服務器模型 6
客戶端 7
服務器 7
1.3 Internet 協議 8
電子郵件協議 8
超文本傳輸協議 8
文件傳輸協議 8
傳輸控制協議/Internet 協議 8
IP 地址 9
1.4 統一資源標識符(URI)
和域名 10
URI 和URL 10
域名 10
頂級域名 11
通用頂級域名 11
國家代碼頂級域名 12
域名系統DNS 13
1.5 網上的信息 14
網上的信息可靠嗎? 14
網上的信息是最新的嗎? 14
有沒有指向額外資源的鏈接? 14
是維基百科嗎? 15
使用網上信息時的道德規範 15
1.6 HTML 概述 16
什麽是HTML 16
什麽是XML 17
什麽是XHTML 17
HTML 的最新版本HTML5 17
1.7 網頁幕後揭秘 18
文檔類型定義(DTD) 18
網頁模板 18
html 元素 19
頁頭區域 19
主體區域 19
1.8 第一個網頁 20
新建文件夾 20
保存文件 21
測試網頁 23
復習和練習 24
第2 章 HTML 基礎 29
2.1 標題元素 30
無障礙訪問和標題 31
HTML5 更多的標題選項 31
2.2 段落元素 32
對齊 33
2.3 換行和水平標尺 34
換行元素 34
水平標尺元素 35
2.4 塊引用元素 36
2.5 短語元素 38
2.6 有序列表 40
type 屬性、start 屬性和reversed屬性 40
2.7 無序列表 42
2.8 描述列表 44
2.9 特殊實體字符 46
2.10 HTML 語法校驗 48
2.11 結構元素 50
div 元素 50
header 元素 50
nav 元素 50
main 元素 50
footer 元素 50
2.12 練習使用結構元素 52
2.13 更多結構元素 54
section 元素 54
article 元素 54
aside 元素 54
time 元素 54
2.14 錨元素 56
鏈接目標 57
絕對鏈接 57
相對鏈接 57
將整個塊作為錨 57
無障礙訪問和超鏈接 57
2.15 練習使用鏈接 58
站點地圖 58
2.16 電子郵件鏈接 62
復習和練習 64
第3 章 網頁設計基礎 75
3.1 為目標受眾設計 76
瀏覽器 77
屏幕分辨率 77
3.2 網站組織 78
分級式組織 78
線性組織 79
隨機組織 79
3.3 視覺設計原則 80
重復:在整個設計中重復視覺元素 80
對比:添加視覺刺激和吸引註意力 81
近似:分組相關項目 81
對齊:對齊元素實現視覺上的統一 81
3.4 提供無障礙訪問 82
通用設計和增強無障礙訪問的受益者 82
無障礙設計有助於提高在搜索引擎中的排名 82
法律規定 83
無障礙設計的熱潮 83
3.5 文本的使用 84
文本設計的註意事項 84
3.6 調色板 86
十六進制顏色值 86
網頁安全色 87
無障礙設計和顏色 87
3.7 針對目標受眾進行設計 88
面向所有人 88
面向老年人 88
面向兒童 89
面向年輕人 89
3.8 選擇顏色方案 90
以一張圖片為基礎的方案 90
色輪 90
變深、變淺和變灰 91
單色 91
相似色 92
互補色 92
分散互補色 92
三色 93
四色 93
實現顏色方案 93
3.9 使用圖片和多媒體 94
文件大小和圖片尺寸 94
抗鋸齒/ 鋸齒化文本的問題 94
只使用必要的多媒體 95
提供替代文本 95
3.10 更多設計考慮 96
移動設備 96
適當留白 96
視差滾動 97
目前的扁平化網頁設計趨勢 97
3.11 導航設計 98
網站要易於導航 98
導航欄 98
麵包屑導航 98
圖片導航 99
動態導航 99
站點地圖 99
站點搜索功能 99
3.12 線框和頁面佈局 100
3.13 固定和流動佈局 102
固定佈局 102
流動佈局 102
3.14 為移動網絡設計 104
移動設備設計考慮 104
為移動優化佈局 104
為移動優化導航 105
為移動優化圖片 105
為移動優化文本 105
3.15 靈活響應的網頁設計 106
3.16 網頁設計最佳實踐 108
復習和練習 110
第4 章 CSS 基礎 117
4.1 CSS 概述 118
層疊樣式表的優點 118
配置CSS 的方法 119
層疊樣式表的“層疊” 119
4.2 CSS 選擇符和聲明 120
CSS 語法基礎 120
background-color 屬性 120
color 屬性 121
配置背景色和文本色 121
4.3 CSS 顏色值語法 122
4.4 配置內聯CSS 124
style 屬性 124
4.5 配置嵌入CSS 126
style 元素 126
4.6 配置外部CSS 128
link 元素 128
4.7 CSS 的class、id 和
後代選擇符 130
class 選擇符 130
id 選擇符 130
後代選擇符 130
4.8 span 元素 132
span 元素 132
第一部分 132
第二部分 133
4.9 練習使用CSS 134
4.10 層疊 136
4.11 練習使用層疊 138
4.12 CSS 語法校驗 140
復習和練習 142
第5 章 圖形和文本樣式基礎 151
5.1 圖片 152
GIF 圖片 152
JPEG 圖片 153
PNG 圖片 153
WebP 圖片格式 154
流行圖形處理軟件 155
5.2 img 元素 156
用alt 屬性提供無障礙訪問 157
5.3 圖片鏈接 158
無障礙訪問和圖片鏈接 159
5.4 配置背景圖片 160
background-image 屬性 160
同時使用背景顏色和背景圖片 160
瀏覽器如何顯示背景圖片 160
background-attachment 屬性 161
5.5 定位背景圖片 162
background-repeat 屬性 162
定位背景圖片 162
5.6 配置多張背景圖片 164
5.7 用CSS 配置字體 166
font-family 屬性 166
5.8 CSS 文本屬性 168
font-size 屬性 168
font-weight 屬性 168
font-style 屬性 169
line-height 屬性 169
text-align 屬性 169
text-decoration 屬性 169
text-indent 屬性 169
text-transform 屬性 169
letter-spacing 屬性 169
5.9 練習配置圖形和文本 170
5.10 用CSS 配置列表符號 172
圖片作為列表符號 173
5.11 收藏圖標 174
配置收藏圖標 174
5.12 圖像映射 176
map 元素 176
area 元素 176
探索矩形圖像映射 176
5.13 figure 元素和figcaption 元素 178
figure 元素 178
figcaption 元素 178
復習和練習 180
第6 章 CSS 進階 191
6.1 寬度和高度 192
width 屬性 192
min-width 屬性 192
max-width 屬性 193
height 屬性 193
6.2 框模型 194
內容 194
填充 194
邊框 195
邊距 195
框模型實例 195
6.3 邊距和填充 196
margin 屬性 196
padding 屬性 196
6.4 邊框 198
6.5 CSS 圓角 200
6.6 頁面內容居中 202
6.7 CSS 邊框陰影和文本陰影 204
CSS box-shadow 屬性 204
CSS text-shadow 屬性 205
6.8 CSS 屬性background-clip
和background-origin 206
CSS 屬性background-clip 206
CSS 屬性background-origin 207
6.9 background-size 屬性 208
6.10 練習使用CSS 的屬性 210
6.11 CSS 的opacity 屬性 212
6.12 CSS RGBA 顏色 214
6.13 CSS HSLA 顏色 216
色調、飽和度、亮度和alpha 216
HSLA 顏色示例 216
6.14 CSS 漸變 218
線性漸變語法 218
輻射漸變語法 218
CSS 的漸變和漸進式增強 218
復習和練習 220
第7 章 頁面佈局基礎 231
7.1 正常流動 232
CSS 佈局屬性 233
7.2 浮動 234
float 屬性 234
7.3 清除浮動 236
7.4 溢出 238
overflow 屬性 238
用overflow 屬性清除浮動 238
對比clear 屬性與overflow 屬性 238
用overflow 屬性配置滾動條 239
7.5 CSS 的屬性box-sizing 240
7.6 基本雙欄佈局 242
雙欄佈局的例子 245
7.7 用無序列表 246
用CSS 的配置無序列表 246
用CSS text-decoration 屬性消除
下劃線 246
7.8 用無序列表實現水平導航 248
CSS 的display 屬性 248
用CSS 配置 248
7.9 用偽類實現CSS 交互性 250
7.10 練習CSS 雙欄佈局 252
7.11 用CSS 控制打印 254
打印樣式最佳實踐 254
7.12 CSS 精靈 256
7.13 用CSS 進行定位 258
static 定位 258
fixed 定位 258
相對定位 258
粘性定位 259
絕對定位 260
z-index 屬性 260
7.14 固定位置的導航欄 262
7.15 區段標識符 264
區段標識符和FAQ 264
區段標識符和無障礙訪問 265
使用區段標識符 265
7.16 單頁網站 266
復習和練習 268
第8 章 靈活響應佈局基礎 279
8.1 CSS 靈活框佈局 280
配置靈活容器 280
display 屬性 280
flex-wrap 屬性 281
flex-direction 屬性 281
8.2 靈活容器的更多知識 282
流向 282
justify-content 屬性 282
align-items 屬性 283
flex-flow 屬性 283
靈活框和gap 屬性 283
8.3 靈活框圖片庫 284
8.4 配置靈活項 286
比例靈活項 286
order 屬性 287
8.5 練習靈活框技術 288
8.6 CSS 網格佈局 290
配置網格容器 290
display 屬性 290
設計網格 290
配置網格列和網格行 291
8.7 網格列、行和間隙 292
網絡佈局和gap 屬性 292
order 屬性 292
8.8 雙欄網格頁面佈局 294
配置網格列和行 294
配置網格項 295
網格行編號 295
8.9 使用網格區域的佈局 298
grid-area 屬性 298
grid-template-areas 屬性 298
配置帶空白區域的網格 299
grid-template 屬性 301
8.10 漸進式增強網格 302
CSS 特性查詢 302
8.11 用靈活框和網格來居中 304
8.12 viewport meta 標記 306
8.13 CSS 媒體查詢 308
什麽是媒體查詢 308
使用link 元素的媒體查詢例子 308
使用@media 規則的媒體查詢示例 309
移動優先 309
8.14 用媒體查詢實現靈活響應的佈局 310
8.15 用媒體查詢實現靈活響應的網格
佈局 316
8.16 用CSS 實現靈活圖像 320
8.17 picture 元素 322
source 元素 322
8.18 靈活img 元素屬性 324
sizes 屬性 324
srcset 屬性 324
loading 屬性 325
8.19 測試移動顯示 326
用桌面瀏覽器測試 326
靈活測試工具 326
瀏覽器內置工具 327
更多移動測試工具 327
復習和練習 328
第9 章 表格基礎 341
9.1 表格概述 342
table 元素 342
border 屬性 342
表題 343
9.2 表行、單元格和表頭 344
9.3 跨行和跨列 346
9.4 配置無障礙訪問表格 348
headers 屬性和id 屬性 349
scope 屬性 349
9.5 用CSS 配置表格樣式 350
9.6 CSS 結構性偽類 352
配置首字母 353
9.7 配置表格區域 354
復習和練習 356
第10 章 表單基礎 363
10.1 表單概述 364
form 元素 364
表單控件 365
10.2 input 元素和文本框 366
文本框 366
10.3 提交按鈕和重置按鈕 368
提交按鈕 368
重置按鈕 368
示例表單 368
10.4 復選框和單選鈕 370
復選框 370
單選鈕 371
10.5 textarea 元素 372
10.6 select 元素和option 元素 374
select 元素 374
option 元素 374
10.7 label 元素 376
10.8 fieldset 和legend 元素 378
fieldset 元素 378
legend 元素 378
無障礙訪問和表單 379
10.9 用CSS 配置表單樣式 380
屬性選擇符 381
10.10 CSS 網格佈局表單 382
10.11 服務器端處理 384
隱私和表單 385
10.12 表單練習 386
10.13 密碼、隱藏和文件上傳控件 388
密碼框 388
隱藏輸入控件 388
文件上傳控件 388
10.14 更多文本表單控件 390
E-mail 地址輸入表單控件 390
URL 表單輸入控件 390
電話號碼表單輸入控件 391
搜索詞輸入表單控件 391
10.15 datalist 元素 392
10.16 表單輸入控件 394
slider 表單輸入控件 394
spinner 表單輸入控件 394
漸進式增強 395
10.17 日歷和顏色池控件 396
日期和時間表單控件 396
顏色池表單控件 397
10.18 更多表單練習 398
復習和練習 400
第11 章 媒體和交互性基礎 413
11.1 音頻和視頻入門 414
多媒體和瀏覽器兼容問題 414
容器和codec 414
11.2 audio 和source 416
audio 元素 416
source 元素 416
音頻和無障礙訪問 417
11.3 video 和source 418
video 元素 418
source 元素 418
視頻和無障礙訪問 419
11.4 練習視頻 420
我可以使用網上找到的任何
東西嗎? 421
11.5 iframe 元素 422
iframe 元素 422
11.6 CSS 屬性transform 424
CSS 旋轉變換 424
CSS 的伸縮變換 424
11.7 CSS 屬性transition 426
11.8 練習使用過渡 428
11.9 練習使用CSS 下拉菜單 430
11.10 details 和summary 432
details 元素 432
summary 元素 432
11.11 JavaScript 和jQuery 434
JavaScript 434
jQuery 435
11.12 HTML5 的API 436
地理位置 436
Web 存儲 436
漸進式Web 應用程序 436
用canvas 元素繪圖 437
復習和練習 438
第12 章 Web 發布基礎 447
12.1 文件組織 448
相對鏈接的例子 448
12.2 註冊域名 450
選擇域名 450
註冊域名 451
12.3 選擇Web 主機 452
選擇虛擬主機 452
12.4 安全套接字層(SSL) 454
數字證書 455
12.5 用FTP 發布 456
FTP 應用程序 456
用FTP 連接 456
使用FTP 456
啟動和登錄 456
文件上傳、下載和刪除 457
進一步探索 457
12.6 提交到搜索引擎 458
搜索引擎的組成 458
機器人 458
數據庫 458
搜索表單 458
在搜索引擎中列出自己的網站 459
12.7 搜索引擎優化 460
關鍵字 460
網頁標題 460
標題標記 460
描述 460
meta 標記 460
鏈接 461
文件名 461
HTTPS 協議 461
圖片和多媒體 461
有效代碼 461
有價值的內容 461
12.8 無障礙訪問測試 462
通用設計和無障礙訪問 462
Web 無障礙訪問標準 462
Section 508 條款 462
WCAG 462
測試無障礙設計相容性 463
自動無障礙設計測試 463
手動無障礙測試 463
12.9 可用性測試 464
進行可用性測試 464
復習和練習 466
附錄 473
附錄A HTML5 速查表 474
附錄B CSS 速查表 478
附錄C WCAG 2.1 快速參考 484
附錄D ARIA 地標角色 486
附錄E Web 安全調色板 488