HTML5與CSS3從入門到精通(第3版) ( Basics of Web design: HTML5 and CSS3 ) HTML5与CSS3从入门到精通(第3版)

作者:(美)特麗·菲爾克-莫里斯譯者:周靖
特麗·菲爾克-莫里斯，美國哈珀學院榮休教授。她熟悉各種平台和軟件開發語言，有二十多年的信息技術教學經驗，講授的課程有網頁開發、計算機信息系統、教學技術和數學，以及信息管理和數據庫研究生課程。

莫里斯博士富有創新精神，先後榮獲2002—2003年度Glenn A. Reich紀念獎（嘉獎她在教育技術方面做出的努力）和2006年度Blackboard Greenhouse遠程教學模範獎（嘉獎她在課堂教學中率先使用互聯網），還作為2008年度遠程教育優秀教師入選美國教育技術委員會。

莫里斯博士的《 HTML5網頁設計入門經典》已經出版發行到第8版，另一本以動手實作和案例學習著稱的入門經典《HTML5與CSS3網頁設計基礎》系列版本也備受廣大師生青睞。

她一直保持旺盛的學習力，擁有教育學博士學位、信息系統碩士學位和遠程教學碩士學位，以及很多從業資格證書：CIW電子商務設計師、CIW設計師、CIW認證講師，WOW網絡管理員和Adobe認證Dreamweaver 8開發人員。

第1章互聯網和萬維網基礎1 

1.1互聯網和萬維網2 
互聯網2 
互聯網的誕生2 
互聯網的發展2 
萬維網的誕生2 
第一個圖形化瀏覽器3 
各種技術的聚合3 
1.2網頁標準和無障礙訪問4 
W3C推薦標準4 
網頁標準和無障礙訪問4 
無障礙訪問和法律4 
網頁通用設計5 
1.3瀏覽器和服務器6 
網絡概述6 
客戶端/服務器模型6 
1.4 Internet協議8 
電子郵件協議8 
超文本傳輸協議8 
文件傳輸協議8 
傳輸控制協議/Internet協議8 
IP地址9 
1.5統一資源標識符(URI)和域名10 
URI和URL 10 
域名10 
………… 
1.6網上的信息14 
網上的信息可靠嗎？14 
網上的信息是最新的嗎？15 
有沒有指向其他資源的外部鏈接？15 
1.7 HTML概述16 
什麼是HTML？16 
什麼是XML？17 
什麼是XHTML？17 
HTML的最新版本HTML5 17 
1.8網頁幕後揭秘18 
文檔類型定義(DTD) 18 
網頁模板18 
html元素18 
頁頭區域19 
主體區域19 
1.9第一個網頁20 
動手實作1.1 20 
新建文件夾20 
保存文件21 
測試網頁22 
複習和練習23 
複習題23 
動手練習23 
網上調研24 
聚焦網頁設計24 

第2章HTML基礎25 

2.1標題元素26 
動手實作2.1 26 
無障礙訪問和標題27 
HTML5更多的標題選項27 
2.2段落元素28 
動手實作2.2 28 
對齊29 
2.3換行和水平標尺30 
換行元素30 
動手實作2.3 30 
水平標尺元素31 
動手實作2.4 31 
2.4塊引用元素32 
動手實作2.5 33 
2.5短語元素34 
2.6有序列表36 
type屬性，start屬性和
reversed屬性36 
動手實作2.6 37 
2.7無序列表38 
動手實作2.7 39 
2.8描述列表40 
動手實作2.8 41 
2.9特殊字符42 
動手實作2.9 42 
2.10 HTML語法校驗44 
動手實作2.10 44 
2.11結構元素46 
div元素46 
header元素46 
nav元素46 
main元素46 
footer元素46 
動手實作2.11 47 
2.12練習使用結構元素48 
動手實作2.12 48 
2.13錨元素50 
動手實作2.13 50 
鏈接目標51 
絕對鏈接51 
相對鏈接51 
block anchor 51 
2.14練習使用鏈接52 
站點地圖52 
動手實作2.14 52 
2.15電子郵件鏈接56 
動手實作2.15 57 
複習和練習58 
複習題58 
動手練習59 
聚焦網頁設計59 
案例分析59 
Pacific Trails Resort案例分析60 
JavaJam Coffee House案例分析62 

第3章網頁設計基礎67 

3.1為目標受眾設計68 
瀏覽器69 
屏幕分辨率69 
3.2網站組織70 
分級式組織70 
線性組織71 
隨機組織71 
3.3視覺設計原則72 
重複：在整個設計中重複視覺元素72 
對比：添加視覺刺激和吸引註意力73 
近似：分組相關項目73 
對齊：對齊元素實現視覺上的統一73 
3.4提供無障礙訪問74 
通用設計和增強無障礙訪問的
受益者74 
無障礙設計有助於提高在搜索
引擎中的排名74 
法律規定75 
無障礙設計的熱潮75 
3.5文本的使用76 
文本設計的注意事項76 
3.6調色板78 
十六進制顏色值78 
網頁安全色78 
無障礙設計和顏色79 
3.7針對目標受眾進行設計80 
面向兒童80 
面向年輕人80 
面向所有人81 
面向老年人81 
3.8選擇顏色方案83 
以一張圖片為基礎的方案83 
色輪84 
變深、變淺和變灰84 
單色85 
相似色85 
互補色86 
分散互補色86 
三色86 
四色87 
實現顏色方案87 
3.9使用圖片和多媒體88 
文件大小和圖片尺寸88 
抗鋸齒/鋸齒化文本的問題88 
只使用必要的多媒體89 
提供替代文本89 
3.10更多設計考慮90 
感覺到的加載時間91 
第一屏91 
適當留白91 
水平滾動91 
3.11導航設計92 
網站要易於導航92 
導航欄92 
圖片導航93 
動態導航93 
站點地圖93 
站點搜索功能94 
3.12線框和頁面佈局95 
3.13固定和流動佈局98 
固定佈局98 
流動佈局99 
3.14為移動網絡設計100 
三種方式100 
移動設備設計考慮100 
桌面和移動網站的例子101 
移動設計小結101 
3.15靈活響應的網頁設計102 
3.16網頁設計最佳實踐104 
複習和練習106 
複習題106 
動手練習107 
聚焦網頁設計107 
網頁項目案例分 108 
項目里程碑108 

第4章CSS基礎111 

4.1 CSS概述112 
層疊樣式表的優點112 
配置CSS的方法113 
層疊樣式表的“層疊” 113 
4.2 CSS選擇符和聲明114 
CSS語法基礎114 
background-color屬性114 
color屬性114 
配置背景色和文本色115 
4.3 CSS顏色值語法116 
4.4配置內聯CSS 118 
style屬性118 
動手實作4.1 118 
4.5配置嵌入CSS 120 
style元素120 
動手實作4.2 121 
4.6配置外部CSS 123 
link元素123 
動手實作4.3 123 
4.7 CSS的class、ID和後代選擇符125 
class選擇符125 
id選擇符125 
後代選擇符125 
動手實作4.4 125 
4.8 span元素127 
span元素127 
動手實作4.5 127 
4.9練習使用CSS 129 
動手實作4.6 129 
將嵌入CSS轉換為外部CSS 129 
將網頁與外部CSS文件關聯129 
4.10層疊132 
4.11練習使用層疊134 
動手實作4.7 134 
4.12 CSS語法校驗136 
動手實作4.8 136 
複習和練習138 
複習題138 
動手練習139 
聚焦網頁設計139 
Pacific Trails Resort案例分析140 
JavaJam Coffee House案例分析143 

第5章圖形和文本 式基礎147 

5.1圖片148 
GIF圖片148 
JPEG圖片148 
PNG圖片149 
新的WebP圖像格式149 
5.2 img元素150 
動手實作5.1 150 
5.3圖片鏈接152 
動手實作5.2 152 
5.4配置背景圖片154 
background-image屬性154 
同時使用背景顏色和背景圖片154 
瀏覽器如何顯示背景圖片154 
background-attachment屬性155 
5.5定位背景圖片156 
background-repeat屬性156 
定位背景圖片156 
動手實作5.3 157 
5.6用CSS3配置多張背景圖片158 
漸進式增強158 
動手實作5.4 159 
5.7用CSS配置字體160 
font-family屬性160 
動手實作5.5 160 
5.8 CSS文本屬性162 
font-size屬性162 
font-weight屬性162 
font-style屬性162 
line-height屬性163 
text-align屬性163 
text-decoration屬性163 
text-indent屬性163 
text-transform屬性163 
letter-spacing屬性163 
5.9練習配置圖形和文本164 
動手實作5.6 164 
5.10用CSS配置列表符號166 
用圖片代替列表符號167 
動手實作5.7 167 
5.11收藏圖標168 
配置收藏圖標168 
動手實作5.8 168 
5.12圖像映射170 
map元素170 
area元素170 
探索矩形圖像映射170 
5.13複習和練習172 
複習題172 
動手練習173 
聚焦網頁設計174 
Pacific Trails Resort案例分析174 
JavaJam Coffee House案例分析178 

第6章CSS進階183 

6.1寬度和高度184 
width屬性184 
min-width屬性184 
max-width屬性184 
height屬性185 
動手實作6.1 185 
6.2框模型186 
內容186 
填充186 
邊框186 
邊距187 
框模型實例187 
6.3邊距和填充188 
margin屬性188 
padding屬性188 
6.4邊框190 
動手實作6.2 191 
6.5 CSS3圓角192 
動手實作6.3 193 
6.6居中頁面內容194 
動手實作6.4 194 
6.7 CSS3的邊框和文本陰影196 
CSS3的box-shadow屬性196 
CSS3的text-shadow屬性196 
動手實作6.5 197 
6.8 CSS3的background-clip和
background-origin屬性198 
CSS3 background-clip屬性198 
CSS3 background-origin屬性199 
6.9 CSS3背景大小和縮放200 
6.10練習使用CSS3屬性202 
動手實作6.6 202 
6.11 CSS3的opacity屬性204 
動手實作6.7 204 
6.12 CSS3 RGBA顏色206 
動手實作6.8 207 
6.13 CSS3 HSLA顏色208 
色 調、飽和度、亮度和alpha 208 
HSLA顏色示例208 
動手實作6.9 209 
6.14 CSS3的漸變210 
線性漸變語法210 
輻射漸變語法210 
CSS3漸變和漸進式增強211 
動手實作6.10 211 
複習和練習212 
複習題212 
動手練習213 
聚焦網頁設計213 
Pacific Trails Resort案例分析213 
JavaJam Coffee House案例分析216 

第7章頁面佈局基礎221 

7.1正常流動222 
動手實作7.1 222 
7.2浮動224 
float屬性224 
動手實作7.2 225 
浮動元素和正常流動225 
7.3清除浮動226 
clear屬性226 
7.4溢出228 
overflow屬性228 
7.5基本雙欄佈局230 
動手實作7.3 230 
雙欄佈局的例子234 
7.6用無序列表實現垂直導航236 
用CSS配置無序列表236 
用CSS text-decoration屬性消除
下劃線236 
動手實作7.4 237 
7.7用無序列表實現水平導航238 
CSS的display屬性238 
動手實作7.5 239 
7.8用偽類實現CSS交互性240 
動手實作7.6 240 
7.9練習CSS雙欄佈局242 
動手實作7.7 242 
7.10用CSS進行定位244 
static定位244 
fixed定位244 
相對定位2 44 
絕對定位245 
7.11練習定位246 
動手實作7.8 246 
7.12 CSS精靈248 
動手實作7.9 249 
複習和練習250 
複習題250 
動手練習251 
聚焦網頁設計251 
Pacific Trails Resort案例分析251 
JavaJam Coffee House案例分析252 

第8章鏈接、佈局和移動

開發進階255 
8.1相對鏈接的更多知識256 
相對鏈接的例子256 
動手實作8.1 256 
8.2區段標識符258 
動手實作8.2 259 
8.3 figure元素和figcaption元素260 
figure元素260 
figcaption元素260 
添加圖題260 
動手實作8.3 261 
8.4圖片浮動練習262 
動手實作8.4 262 
8.5更多HTML5元素264 
section元素264 
article元素264 
aside元素264 
time元素264 
動手實作8.5 264 
8.6 HTML5與舊瀏覽器的兼容性266 
配置CSS塊顯示266 
HTML5 Shim 266 
動手實作8.6 267 
8.7 CSS對打印的支持268 
打印樣式最佳實踐268 
動手實作8.7 269 
8.8移動網頁設計270 
移動網頁設計要考慮的問題270 
為移動使用優化佈局271 
優化移動導航271 
優化移動圖片272 
優化移動文本272 
為One Web 設計272 
8.9 viewport meta標記273 
8.10 CSS3媒體查詢275 
什麼是媒體查詢275 
使用link元素的媒體查詢例子275 
使用@media規則的媒體查詢示例276 
8.11練習媒體查詢277 
動手實作8.8 277 
8.12靈活圖像281 
動手實作8.9 281 
8.13測試移動顯示283 
用桌面瀏覽器測試284 
針對專業開發人員285 
複習和練習287 
複習題287 
動手練習288 
聚焦網頁設計288 
Pacific Trails Resort案例分析288 
JavaJam Coffee House案例分析292 

第9章表格基礎297 

9.1表格概述298 
table元素298 
border屬性299 
表格標題299 
9.2表行、單元格和表頭300 
動手實作9.1 301 
9.3跨行和跨列302 
動手實作9.2 302 
9.4配置無障礙訪問表格304 
9.5用CSS配置表格樣式306 
動手實作9.3 306 
9.6 CSS3結構性偽類308 
動手實作9.4 308 
配置首字母309 
9.7配置表格區域310 
複習和練習312 
複習題312 
動手練習313 
聚焦網頁設計313 
Pacific Trails Resort案例分析314 
JavaJam Coffee House案例分析315 

第10章表單基礎317 

10. 1概述318 
form元素318 
表單控件319 
10.2文本框320 
10.3提交按鈕和重置按鈕322 
提交按鈕322 
重置按鈕322 
示例表單322 
動手實作10.1 323 
10.4複選框和單選鈕324 
複選框324 
單選鈕325 
10.5隱藏字段和密碼框326 
隱藏字段326 
密碼框326 
10.6 textarea元素328 
動手實作10.2 329 
10.7 select和option元素330 
select元素330 
option元素330 
10.8 label元素332 
動手實作10.3 333 
10.9 fieldset元素和legend元素334 
fieldset元素334 
legend元素334 
用CSS配置fieldset分組樣式335 
10.10用CSS配置表單樣式336 
動手實作10.4 336 
屬性選擇符337 
10.11服務器端處理338 
隱私和表單339 
10.12表單練習340 
動手實作10.5 340 
10.13 HTML5文本表單控件342 
E-mail地址輸入表單控件342 
URL表單輸入控件342 
電話號碼表單輸入控件343 
搜索詞輸入表單控件343 
HTML5文本框表單控件的
有效屬性343 
10.14 HTML5的datalist元素344 
10.15 HTML5的slider控件和spinner 
控件346 
slider表單輸入控件346 
spinner 單輸入控件347 
HTML5和漸進式增強347 
10.16 HTML5日曆和顏色池控件348 
日曆輸入表單控件348 
顏色池表單控件349 
10.17 HTML5表單練習350 
動手實作10.6 350 
複習和練習352 
複習題352 
動手練習353 
聚焦網頁設計353 
Pacific Trails Resort案例分析353 
JavaJam Coffee House案例分析357 

第11章媒體和交互性基礎361 

11.1插件、容器和codec 362 
輔助應用程序和插件362 
11.2配置音頻和視頻364 
訪問音頻或視頻文件364 
動手實作11.1 364 
多媒體和瀏覽器兼容問題365 
11.3 Flash和HTML5 embed元素366 
embed元素366 
動手實作11.2 367 
11.4 HTML5 audio和source元素368 
audio元素368 
source元素368 
動手實作11.3 369 
11.5 HTML5 video和source元素370 
video元素370 
source元素370 
11.6練習HTML5視頻372 
動手實作11.4 372 
11.7 iframe元素374 
動手實作11.5 375 
11.8 CSS3的transform屬性376 
CSS3旋轉變換376 
CSS3伸縮變換377 
動手實作11.6 377 
11.9 CSS3 transition屬性378 
動手實作11.7 378 
11.10練習C SS過渡380 
動手實作11.8 380 
11.11 CSS下拉菜單382 
動手實作11.9 382 
11.12 JavaScript和jQuery 384 
JavaScript 384 
jQuery 385 
11.13 HTML5 API 386 
地理位置386 
Web存儲386 
離線Web應用程序386 
用canvas元素繪圖387 
複習和練習388 
複習題388 
動手練習388 
聚焦網頁設計389 
Pacific Trails Resort案例分析389 
JavaJam Coffee House案例分析391 

第12章Web發布基礎393 

12.1註冊域名394 
選擇域名394 
註冊域名395 
12.2選擇Web主機396 
Web主機的類型396 
選擇虛擬主機396 
12.3用FTP發布399 
FTP應用程序399 
用FTP連接399 
使用FTP 399 
12.4提交到搜索引擎401 
搜索引擎的組成401 
在搜索引擎中列出你的網站402 
12.5搜索引擎優化403 
鏈接404 
圖片和多媒體404 
有效代碼404 
有價值的內容404 
12.6無障礙訪問測試405 
通用設計和無障礙訪問405 
Web無障礙訪問標準405 
測試無障礙設計相容性406 
12.7可用性測試407 
進行可用性測試407 
動手實作12.1 408 
複習和練習409 
複習題409 
動手練習4 10 
聚焦網頁設計410 
Pacific Trails Resort案例分析411 
JavaJam Coffee House案例分析411 

附錄A複習和練習答案413 
附錄B HTML5速查表414 
附錄C CSS速查表418 
附錄D XHTML速查表422 
附錄E對比XHTML和HTML5 425 
附錄F WCAG 2.0快速參考433 
附錄G Web安全調色板435