産品特色

編輯推薦

　　通俗易懂，結構清晰，由淺入深闡述網頁設計師必知必會的基本技能和概念:

　　 互聯網與萬維網基礎

　　 用HTML5創建網頁

　　 用CSS配置顔色和文本

　　 用CSS配置頁麵布局

　　 配置圖像和多媒體

　　 探究CSS3新增屬性

　　 運用網頁設計*佳實踐

　　 網頁的無障礙訪問和使用性設計

　　 為搜索引擎優化而設計

　　 選擇域名

　　 上綫，發布到網上

　　本書第1版和第2版深受師生喜愛，第3版根據學習需要提前在第2章介紹瞭HTML5結構化元素，並在第5章重點介紹瞭網頁顔色的搭配。此外，第3版還增加瞭以下特色：

　　 更多動手實作練習

　　 案例學習有新增和修訂

　　 進一步深入介紹網頁布局設計

　　 進一步深入介紹移動網頁設計

　　 進一步深入介紹響應式網頁設計技術

　　 新增對CSS媒體查詢的介紹

內容簡介

　　本書針對HTML5和CSS3的*新標準進行及時的更新和修訂，包含的主題有：Internet和Web概念；創建HTML5網頁；用CSS配置顔色和文本；用CSS配置頁麵布局；配置圖像和多媒體；探索新增的CSS3特性；應用網頁設計*佳實踐；設計可訪問和可用的網頁；搜索引擎優化設計；選擇域名；發布網站。

　　本書適閤所有對網頁設計感興趣的讀者閱讀，是一本理想的入門參考。

作者簡介

　　美國哈珀學院榮休教授。她熟悉各種平颱和軟件開發語言，有二十多年的信息技術教學經驗，講授的課程有網頁開發、計算機信息係統、教學技術和數學，以及信息管理和數據庫研究生課程。

　　莫裏斯博士富有創新精神，先後榮獲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
頂級域名 11
通用頂級域名 11
國傢代碼頂級域名 12
域名係統DNS 13
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

精彩書摘

　　第2章HTML基礎

　　第1章使用HTML5創建瞭第一個網頁，並在瀏覽器中進行瞭測試。用DTD指定瞭要使用的HTML版本，並使用瞭，，

　　學習內容：

　　使用標題、段落、div、列錶和塊引用來配置網頁主體

　　配置特殊實體字符、換行符和水平標尺

　　使用短語元素來配置文本

　　校驗網頁語法

　　使用新的HTML5header，nav和footer元素配置網頁

　　使用錨元素鏈接網頁

　　配置絕對鏈接、相對鏈接和電子郵件鏈接

　　2.1標題元素

　　標題(heading)元素從h1到h6共六級。標題元素包含的文本被瀏覽器渲染為“塊”(block)。標題上下自動添加空白(whitespace)。

的字號最大，

最小。取決於所用字體(第6章將進一步講解字號)，

，

和

標記中的文本看起來可能比默認字號小一點。標題文本全都加粗。

　　為什麼不將標題放到頁頭區域？

　　經常有學生試圖將標題(heading)元素或者說h元素放到文檔的頁頭(head)而不是主體(body)區域，造成瀏覽器顯示的網頁看起來不理想。雖然head和heading聽起來差不多，但heading一定要放到body中。

　　圖2.1顯示瞭6級標題的效果。

　　圖2.1示例heading.html

　　動手實作2.1

　　為瞭創建如圖2.1所示的網頁，啓動記事本或其他文本編輯器。打開學生文件chapter1/template.html。修改title元素並在body區域添加標題。如以下加粗的代碼所示。

　　

HeadingLevel1

HeadingLevel2

HeadingLevel3

HeadingLevel4

HeadingLevel5

HeadingLevel6

　　將文件另存為heading2.html。打開網頁瀏覽器(如InternetExplorer或Firefox)測試網頁。它看起來應該和圖2.1顯示的頁麵相似。可將自己的文檔與學生文件chapter2/heading.html進行比較。

　　無障礙訪問和標題

　　標題使網頁更容易訪問和使用。一個好的編碼規範是使用標題創建網頁內容大綱。利用h1，h2和h3等元素來建立內容的層次結構。同時，將網頁內容包含在段落和列錶等塊顯示元素中。在圖2.2中，

標記在網頁頂部顯示網站名稱，

標記顯示網頁名稱，其他標題元素則用於標識更小的主題。

　　有視力障礙的用戶可配置自己的屏幕朗讀器顯示網頁上的標題。製作網頁時利用標題對網頁進行組織將使所有用戶獲益，其中包括那些有視力障礙的。

　　圖2.2利用標題創建網頁大綱

　　HTML5更多的標題選項

　　你或許聽說過HTML5新增的header元素。header提供瞭更多的標題配置選項，而且通常包含一個h1元素。本章稍後會討論header元素。

　　2.2段落元素

　　段落元素組織句子或文本。

和

　　圖2.3使用標題和段落的網頁

　　動手實作2.2

　　為瞭創建圖2.3的網頁，啓動記事本或其他文本編輯器，打開學生文件chapter2/heading.html。修改網頁標題(title)，在

和

之間添加一個段落。

　　

HeadingLevel1

Thisisasampleparagraph.Headingtagscanhelptomakeyourpagesmoreaccessibleandusable.Itisgoodcodingpracticetouseheadingtagstooutlinethestructureofyourwebpagecontent.

HeadingLevel2

HeadingLevel3

HeadingLevel4

HeadingLevel5

HeadingLevel6

　　將文檔另存為paragraph2.html。啓動瀏覽器測試網頁。它看起來應該和圖2.3相似。可將自己的文檔與學生文件chapter2/paragraph.html進行比較。注意瀏覽器窗口大小改變時段落文本將自動換行。

　　對齊

　　測試網頁時，會注意到標題和文本都是從左邊開始顯示的，這稱為左對齊，是網頁的默認對齊方式。在以前版本的HTML中，想讓段落或標題居中或右對齊可以使用align屬性。但這個屬性已在HTML5中廢棄。換言之，已經從W3CHTML5草案規範中刪除瞭。將在第6章、第7章和第8 HTML5與CSS3從入門到精通（第3版） 下載 mobi epub pdf txt 電子書