《回響式Web設計 : HTML5和CSS3實戰》是2013年人民郵電出版社出版的圖書，作者是Ben Frain 。本書將當前Web設計中熱門的回響式設計技術與HTML5和CSS3結合起來，全面深入地講解了針對各種螢幕大小設計和開發現代網站的各種技術。
基本介紹
- 書名：回響式Web設計 : HTML5和CSS3實戰
- 作者： Ben Frain
- 譯者：王永強
- 出版社：人民郵電出版社
出版信息,內容簡介,作者簡介,目錄,
出版信息
副標題: HTML5和CSS3實戰
原作名: Responsive Web Design with HTML5 and CSS3
作者: Ben Frain
譯者: 王永強
出版社: 人民郵電出版社
出版年: 2013-1
頁數: 231
定價: 49.00元
裝幀: 平裝
ISBN: 9787115299222
原作名: Responsive Web Design with HTML5 and CSS3
作者: Ben Frain
譯者: 王永強
出版社: 人民郵電出版社
出版年: 2013-1
頁數: 231
定價: 49.00元
裝幀: 平裝
ISBN: 9787115299222
內容簡介
移動網際網路時代到來了。不僅討論了媒體查詢、流式布局、相對字型、回響式媒體，更將HTML5和CSS3的相關知識點一併講解，是學習最新Web設計技術不可多得的佳作。
作者簡介
Ben Frain是一名具有十多年經驗的網頁設計師和前端工程師，直接與世界各地的客戶和設計機構並肩工作。同時他還是一名技術記者，定期為一些關注Mac平台、前沿科技、網頁設計和航空技術的刊物撰稿。
在此之前，他曾是一名懷才不遇的（而且謙虛謹慎的）電視演員，畢業於索爾福德大學的媒體與表演專業。他寫了四部（自認為）同樣被低估的劇本，而且始終心懷能賣出一部的信念（儘管不像最初那么強烈了）。
工作之餘，在身體（和妻子）允許的情況下，他喜歡玩室內足球。
目錄
第1章 HTML5、CSS3及回響式設計入門 1
1.1 為什麼智慧型手機很重要（而老版的IE不再重要） 2
1.2 回響式設計一定是最佳選擇嗎 3
1.3 回響式網頁設計的定義 3
1.4 為什麼要在回響式設計上停滯不前 4
1.5 回響式網頁設計示例 4
1.5.1 下載視口調試工具 4
1.5.2 線上創意源泉 11
1.6 為什麼HTML5很優秀 12
1.6.1 省時省力 12
1.6.2 新增了語義化標籤元素 13
1.7 CSS3為回響式設計和更多創新奠定了基礎 13
1.7.1 底線：CSS3不破壞任何東西 14
1.7.2 CSS3如何解決日常設計問題 14
1.8 看吶，不用圖片 17
1.9 HTML5和CSS3現在就能用嗎 20
1.10 回響式網頁設計不是靈丹妙藥 20
1.11 引導客戶：網站不必在所有瀏覽器中表現一致 21
1.12 小結 22
第2章 媒體查詢：支持不同的視口 23
2.1 現在就能使用媒體查詢 23
2.2 為什麼回響式設計需要媒體查詢 24
2.2.1 媒體查詢語法 24
2.2.2 媒體查詢能檢測那些特性 26
2.2.3 用媒體查詢改造我們的設計 27
2.2.4 載入媒體查詢的最佳方法 27
2.3 我們的第一個回響式設計 27
2.3.1 我們的設計是固定寬度的，不要驚訝 28
2.3.2 回響式設計中要保證圖片儘可能精簡 32
2.3.3 小視口下的內容剪下 33
2.4 阻止移動瀏覽器自動調整頁面大小 34
2.5 針對不同視口寬度修正設計 37
2.6 回響式設計中內容始終優先 38
2.7 媒體查詢只是必要條件之一 42
2.8 小結 42
第3章 擁抱流式布局 43
3.1 固定布局經不起未來考驗 43
3.2 為什麼回響式設計需要百分比布局 44
3.3 將網頁從固定布局修改為百分比布局 44
3.3.1 需要牢記的公式 45
3.3.2 設定百分比元素的上下文 47
3.3.3 必須時刻牢記上下文 52
3.4 用em替換px 54
3.5 彈性圖片 56
3.5.1 讓圖片隨視口縮放 56
3.5.2 為特定圖片指定特定規則 58
3.5.3 給彈性圖片設定閾值 59
3.5.4 超級全能的max-width屬性 61
3.6 為不同的螢幕尺寸提供不同的圖片 61
3.7 流動格線布局和媒體查詢的默契配合 66
3.8 CSS格線系統 66
3.9 小結 72
第4章 回響式設計中的HTML5 73
4.1 HTML5的哪些部分現在就能用 73
4.1.1 大多數網站可以用HTML5編寫 74
4.1.2 膩子腳本和Modernizr 74
4.2 如何編寫HTML5網頁 75
4.2.1 HTML5的精簡之道 76
4.2.2 HTML5標籤的合理寫法 76
4.2.3 偉大的<a>標籤萬歲 77
4.2.4 HTML的廢棄零件 77
4.3 HTML5的全新語義化元素 78
4.3.1 <section> 78
4.3.2 <nav> 79
4.3.3 <article> 79
4.3.4 <aside> 79
4.3.5 <hgroup> 79
4.3.6 <header> 81
4.3.7 <footer> 81
4.3.8 <address> 81
4.4 HTML5結構元素的實際用法 81
4.5 HTML5的文本級語義元素 87
4.5.1 <b> 88
4.5.2 <em> 88
4.5.3 <i> 88
4.5.4 在頁面中套用文本層語義元素 88
4.6 遵循WAI-ARIA實現無障礙站點 90
4.7 在HTML5中嵌入媒體 93
4.8 用HTML5的方法為頁面添加視頻或音頻 93
4.8.1 提供備用的媒體源檔案 95
4.8.2 針對老版本瀏覽器的備用方案 95
4.8.3 和標籤的用法基本一致 96
4.9 回響式視頻 96
4.10 離線Web套用 99
4.10.1 離線Web套用概述 99
4.10.2 讓網頁可離線使用 99
4.10.3 理解manifest檔案 100
4.10.4 頁面被自動載入到離線快取 101
4.10.5 版本注釋的用途 101
4.10.6 離線訪問網站 101
4.10.7 離線Web套用的故障診斷 102
4.11 小結 103
第5章 CSS3：選擇器、字型和顏色模式 104
5.1 CSS3給前端開發人員帶來了什麼 104
5.1.1 Internet Explorer 6到8對CSS3的支持 105
5.1.2 使用CSS3設計和開發頁面 105
5.2 CSS規則解析 105
5.3 私有前綴及其用法 106
5.4 快速而有效的CSS技巧 108
5.4.1 CSS3多欄布局 108
5.4.2 文字換行 110
5.5 CSS3的新增選擇器及其用法 111
5.5.1 CSS3屬性選擇器 111
5.5.2 CSS3結構偽類 113
5.5.3 對偽元素的修正 122
5.6 自定義網頁字型 123
5.6.1 @font-face規則 124
5.6.2 使用@font-face嵌入網頁字型 124
5.7 幫幫我，標題模糊怎么辦 127
5.8 新的CSS3顏色格式和透明度 129
5.8.1 RGB顏色 130
5.8.2 HSL顏色 131
5.8.3 針對IE6、IE7和IE8提供備用顏色值 132
5.8.4 透明通道 132
5.9 小結 134
第6章 用CSS3創造令人驚艷的美 135
6.1 文字陰影 136
6.1.1 HEX、HSL或RGB顏色都可以 136
6.1.2 px、em或rem都行 136
6.1.3 取消文字陰影 138
6.1.4 製作浮雕文字陰影效果 139
6.1.5 多重文字陰影 140
6.2 盒陰影 140
6.2.1 內陰影 141
6.2.2 多重陰影 142
6.3 背景漸變 143
6.3.1 線性背景漸變 144
6.3.2 徑向背景漸變 147
6.3.3 重複漸變 149
6.4 背景漸變圖案 151
6.5 CSS3的回響性 153
6.6 組合使用CSS3屬性 155
6.7 多重背景圖片 159
6.7.1 背景圖片大小 161
6.7.2 背景圖片位置 161
6.7.3 背景屬性的縮寫語法 161
6.8 更多CSS特性 162
6.9 可縮放圖示：回響式設計中的完美選擇 162
6.10 小結 163
第7章 CSS3過渡、變形和動畫 164
7.1 什麼是CSS3過渡以及如何使用它 164
7.1.1 過渡相關的屬性 166
7.1.2 回響式網站中的有趣過渡 168
7.2 CSS3的2D變形 169
7.3 嘗試CSS3的3D變形 174
7.3.1 分析3D變形效果 176
7.3.2 3D變形尚未成熟 178
7.4 CSS3動畫效果 179
7.5 小結 185
第8章 用HTML5和CSS3征服表單 186
8.1 HTML5表單 186
8.1.1 理解HTML5表單中的元素 188
8.1.2 placeholder 189
8.1.3 required 189
8.1.4 autofocus 190
8.1.5 autocomplete 191
8.1.6 list（及對應的datalist元素） 191
8.1.7 HTML5的新輸入類型 192
8.1.8 日期和時間輸入類型 198
8.2 如何給不支持新特性的瀏覽器打補丁 203
8.3 使用CSS3美化HTML5表單 204
8.4 小結 210
第9章 解決跨瀏覽器問題 211
9.1 漸進增強與優雅降級 215
9.2 該不該修復老版本IE 216
9.2.1 統計數據（再看看世界的變化） 216
9.2.2 個人選擇 216
9.3 前端的瑞士軍刀：Modernizr 217
9.3.1 使用Modernizr輔助修正樣式問題 219
9.3.2 使用Modernizr讓老版本IE支持HTML5元素 221
9.3.3 給IE6、7、8追加min/max媒體查詢功能 222
9.3.4 使用Modernizr按需載入資源 223
9.4 必要時將導航連結轉換為下拉選單 225
9.5 高解析度設備（未來趨勢） 228
9.6 小結 231
1.1 為什麼智慧型手機很重要（而老版的IE不再重要） 2
1.2 回響式設計一定是最佳選擇嗎 3
1.3 回響式網頁設計的定義 3
1.4 為什麼要在回響式設計上停滯不前 4
1.5 回響式網頁設計示例 4
1.5.1 下載視口調試工具 4
1.5.2 線上創意源泉 11
1.6 為什麼HTML5很優秀 12
1.6.1 省時省力 12
1.6.2 新增了語義化標籤元素 13
1.7 CSS3為回響式設計和更多創新奠定了基礎 13
1.7.1 底線：CSS3不破壞任何東西 14
1.7.2 CSS3如何解決日常設計問題 14
1.8 看吶，不用圖片 17
1.9 HTML5和CSS3現在就能用嗎 20
1.10 回響式網頁設計不是靈丹妙藥 20
1.11 引導客戶：網站不必在所有瀏覽器中表現一致 21
1.12 小結 22
第2章 媒體查詢：支持不同的視口 23
2.1 現在就能使用媒體查詢 23
2.2 為什麼回響式設計需要媒體查詢 24
2.2.1 媒體查詢語法 24
2.2.2 媒體查詢能檢測那些特性 26
2.2.3 用媒體查詢改造我們的設計 27
2.2.4 載入媒體查詢的最佳方法 27
2.3 我們的第一個回響式設計 27
2.3.1 我們的設計是固定寬度的，不要驚訝 28
2.3.2 回響式設計中要保證圖片儘可能精簡 32
2.3.3 小視口下的內容剪下 33
2.4 阻止移動瀏覽器自動調整頁面大小 34
2.5 針對不同視口寬度修正設計 37
2.6 回響式設計中內容始終優先 38
2.7 媒體查詢只是必要條件之一 42
2.8 小結 42
第3章 擁抱流式布局 43
3.1 固定布局經不起未來考驗 43
3.2 為什麼回響式設計需要百分比布局 44
3.3 將網頁從固定布局修改為百分比布局 44
3.3.1 需要牢記的公式 45
3.3.2 設定百分比元素的上下文 47
3.3.3 必須時刻牢記上下文 52
3.4 用em替換px 54
3.5 彈性圖片 56
3.5.1 讓圖片隨視口縮放 56
3.5.2 為特定圖片指定特定規則 58
3.5.3 給彈性圖片設定閾值 59
3.5.4 超級全能的max-width屬性 61
3.6 為不同的螢幕尺寸提供不同的圖片 61
3.7 流動格線布局和媒體查詢的默契配合 66
3.8 CSS格線系統 66
3.9 小結 72
第4章 回響式設計中的HTML5 73
4.1 HTML5的哪些部分現在就能用 73
4.1.1 大多數網站可以用HTML5編寫 74
4.1.2 膩子腳本和Modernizr 74
4.2 如何編寫HTML5網頁 75
4.2.1 HTML5的精簡之道 76
4.2.2 HTML5標籤的合理寫法 76
4.2.3 偉大的<a>標籤萬歲 77
4.2.4 HTML的廢棄零件 77
4.3 HTML5的全新語義化元素 78
4.3.1 <section> 78
4.3.2 <nav> 79
4.3.3 <article> 79
4.3.4 <aside> 79
4.3.5 <hgroup> 79
4.3.6 <header> 81
4.3.7 <footer> 81
4.3.8 <address> 81
4.4 HTML5結構元素的實際用法 81
4.5 HTML5的文本級語義元素 87
4.5.1 <b> 88
4.5.2 <em> 88
4.5.3 <i> 88
4.5.4 在頁面中套用文本層語義元素 88
4.6 遵循WAI-ARIA實現無障礙站點 90
4.7 在HTML5中嵌入媒體 93
4.8 用HTML5的方法為頁面添加視頻或音頻 93
4.8.1 提供備用的媒體源檔案 95
4.8.2 針對老版本瀏覽器的備用方案 95
4.8.3 和標籤的用法基本一致 96
4.9 回響式視頻 96
4.10 離線Web套用 99
4.10.1 離線Web套用概述 99
4.10.2 讓網頁可離線使用 99
4.10.3 理解manifest檔案 100
4.10.4 頁面被自動載入到離線快取 101
4.10.5 版本注釋的用途 101
4.10.6 離線訪問網站 101
4.10.7 離線Web套用的故障診斷 102
4.11 小結 103
第5章 CSS3：選擇器、字型和顏色模式 104
5.1 CSS3給前端開發人員帶來了什麼 104
5.1.1 Internet Explorer 6到8對CSS3的支持 105
5.1.2 使用CSS3設計和開發頁面 105
5.2 CSS規則解析 105
5.3 私有前綴及其用法 106
5.4 快速而有效的CSS技巧 108
5.4.1 CSS3多欄布局 108
5.4.2 文字換行 110
5.5 CSS3的新增選擇器及其用法 111
5.5.1 CSS3屬性選擇器 111
5.5.2 CSS3結構偽類 113
5.5.3 對偽元素的修正 122
5.6 自定義網頁字型 123
5.6.1 @font-face規則 124
5.6.2 使用@font-face嵌入網頁字型 124
5.7 幫幫我，標題模糊怎么辦 127
5.8 新的CSS3顏色格式和透明度 129
5.8.1 RGB顏色 130
5.8.2 HSL顏色 131
5.8.3 針對IE6、IE7和IE8提供備用顏色值 132
5.8.4 透明通道 132
5.9 小結 134
第6章 用CSS3創造令人驚艷的美 135
6.1 文字陰影 136
6.1.1 HEX、HSL或RGB顏色都可以 136
6.1.2 px、em或rem都行 136
6.1.3 取消文字陰影 138
6.1.4 製作浮雕文字陰影效果 139
6.1.5 多重文字陰影 140
6.2 盒陰影 140
6.2.1 內陰影 141
6.2.2 多重陰影 142
6.3 背景漸變 143
6.3.1 線性背景漸變 144
6.3.2 徑向背景漸變 147
6.3.3 重複漸變 149
6.4 背景漸變圖案 151
6.5 CSS3的回響性 153
6.6 組合使用CSS3屬性 155
6.7 多重背景圖片 159
6.7.1 背景圖片大小 161
6.7.2 背景圖片位置 161
6.7.3 背景屬性的縮寫語法 161
6.8 更多CSS特性 162
6.9 可縮放圖示：回響式設計中的完美選擇 162
6.10 小結 163
第7章 CSS3過渡、變形和動畫 164
7.1 什麼是CSS3過渡以及如何使用它 164
7.1.1 過渡相關的屬性 166
7.1.2 回響式網站中的有趣過渡 168
7.2 CSS3的2D變形 169
7.3 嘗試CSS3的3D變形 174
7.3.1 分析3D變形效果 176
7.3.2 3D變形尚未成熟 178
7.4 CSS3動畫效果 179
7.5 小結 185
第8章 用HTML5和CSS3征服表單 186
8.1 HTML5表單 186
8.1.1 理解HTML5表單中的元素 188
8.1.2 placeholder 189
8.1.3 required 189
8.1.4 autofocus 190
8.1.5 autocomplete 191
8.1.6 list（及對應的datalist元素） 191
8.1.7 HTML5的新輸入類型 192
8.1.8 日期和時間輸入類型 198
8.2 如何給不支持新特性的瀏覽器打補丁 203
8.3 使用CSS3美化HTML5表單 204
8.4 小結 210
第9章 解決跨瀏覽器問題 211
9.1 漸進增強與優雅降級 215
9.2 該不該修復老版本IE 216
9.2.1 統計數據（再看看世界的變化） 216
9.2.2 個人選擇 216
9.3 前端的瑞士軍刀：Modernizr 217
9.3.1 使用Modernizr輔助修正樣式問題 219
9.3.2 使用Modernizr讓老版本IE支持HTML5元素 221
9.3.3 給IE6、7、8追加min/max媒體查詢功能 222
9.3.4 使用Modernizr按需載入資源 223
9.4 必要時將導航連結轉換為下拉選單 225
9.5 高解析度設備（未來趨勢） 228
9.6 小結 231
譯者序
蒂姆伯納斯仰在1991年製作並發布了第一個網站，如今剛剛過去21個年頭。在這21年裡，計算機和網際網路快速發展，這個世界的面貌也日新月異。在這個過程中，網頁設計從無到有，從簡單漸至專業，從可有可無變為廣受關注。網頁設計方法也在跟隨時代不斷創新，從最初簡單的文字排版，到表格布局，再到DIV+CSS，直到現在廣為流行的格線布局、流式布局等，設計師和開發者們一直致力於為全球網民提供更好的設計觀感和使用體驗。
