響應式 Web 响应式Web

馬修·卡弗 (Matthew Carver)

  • 出版商: 電子工業
  • 出版日期: 2016-01-01
  • 定價: $390
  • 售價: 8.5$332
  • 語言: 簡體中文
  • 頁數: 177
  • 裝訂: 平裝
  • ISBN: 7121274442
  • ISBN-13: 9787121274442

已絕版

買這商品的人也買了...

相關主題

商品描述

<內容簡介>

 

《響應式Web》全面介紹了響應式設計的概念以及技術技巧,由淺入深地講解了其中原理性的知識。第1部分從開發者和設計師的角度介紹了響應式設計的基本概念。第2部分從開發者與設計師協作的角度介紹瞭如何進行響應式設計。第3部分對編碼技巧和實戰優化進行了介紹。

響應式設計是一種新的設計理念,需要你不斷地學習、探索、實踐。它會讓你的網頁內容在不同設備上展現得更加精彩。

 

<作者簡介>

 

Matthew Carver,是一名技術專家、演講者、作者和提倡設計和技術相融合的顧問。他是響應式Web設計早期的擁護者,曾參與過American Airlines、Dallas MomoingNews、Chobani、Home Depot和Google等公司的給生活帶來革新的項目。Matthew最初在德克薩斯州達拉斯市的Richards Group工作,現在與他的夥伴一同在紐約市成立了一家數字公司,他們會把一些想法發佈到線上。他的個人主頁為Matthew-Carver.com,Twitter賬號是@matthew_carver。

 

王鶴,系統架構設計師,吉他手。從事過JavaEE的企業應用的研發和架構工作,一直關註HTML5技術的發展,2011年至今一直維護開源圖表項目ichartjs。目前就職於美團網,任職前端技術專家,秉承的信念是“技術這條路上雖然崎嶇,但值得堅持”。

 

羅創傑,美團網研發工程師,專註於前端領域,喜歡從容不迫地寫代碼——很優雅的那種。

 

<目錄>

 

第1部分響應式之道

1 開啟響應式之路 3

1.1 初探響應式Web . 5

1.1.1 什麼是響應式Web 5

1.1.2 關鍵特性 8

1.2 構建第一個響應式網站10

1.2.1 創建網站原型11

1.3 響應式佈局基礎18

1.3.1 移動優先標籤19

1.3.2 在CSS中使用百分比. 24

1.3.3 添加文本和圖像28

1.3.4 強大易變的em 30

1.3.5 設置第一個斷點33

1.4 總結34

1.5 討論的觀點35

2 移動優先的設計37

2.1 為何選擇移動優先設計38

2.1.1 移動優先設計的優點39

2.1.2 移動優先設計的挑戰40

2.2 為小屏幕設計頭部42

2.2.1 創建頭部42

2.3 設計觸屏界面交互44

2.3.1 簡約的小屏幕網格45

2.4 為小屏幕設計內容47

2.4.1 在佈局中使用Web字體. 48

2.5 總結51

2.6 討論的觀點. 51

第2部分響應式Web設計之旅

3 使用樣式板表達設計55

3.1 利用設計指南進行可視化設計56

3.1.1 設計指南是什麼57

3.1.2 開發一個設計指南58

3.1.3 樣式板:創建一種視覺語言59

3.2 如何創建一個樣式板60

3.2.1 獲得反饋61

3.2.2 設計樣式板61

3.2.3 創建樣式板63

3.2.4 利用樣式板進行迭代設計68

3.3 模型之死. 69

3.4 總結70

3.5 討論的觀點70

4 響應式用戶體驗設計模式. 71

4.1 一級導航73

4.1.1 toggle導航模式. 74

4.1.2 select menu導航模式79

4.1.3 toggle導航和select menu導航的比較81

4.2 多級toggle導航82

4.3 響應式用戶體驗設計模式資源87

4.4 總結87

4.5 討論的觀點88

5 響應式佈局. 89

5.1 利用百分比進行流式佈局90

5.1.1 CSS中的百分比是如何工作的90

5.1.2 box-sizing . 94

5.1.3 流式網格系統97

5.2 構建一個流式佈局101

5.2.1 解讀原型101

5.2.2 開始編碼102

5.2.3 讓off-canvas元素動起來. 105

5.2.4 使元素具有響應性106

5.2.5 拓展到更寬的視圖109

5.3 總結110

5.4 討論的觀點110

6 添加內容模塊和排版.113

6.1 添加內容模塊115

6.1.1 創建有用的內容佔位符116

6.2 響應式設計中的排版121

6.2.1 嵌入式字體121

6.2.2 設置一個排版基礎123

6.3 總結. 126

6.4 討論的觀點126

第3部分用代碼來延伸設計

7 用CSS在瀏覽器中增加圖形129

7.1 利用CSS實現設計. 130

7.1.1 CSS基礎131

7.1.2 在流體結構中維持比例133

7.2 在你的設計中使用icon字體. 136

7.2.1 在用戶界面中使用雪碧圖137

7.2.2 基於字體的用戶界面圖形138

7.3 使用可縮放矢量圖形140

7.3.1 為頁面添加SVG圖像141

7.3.2 用CSS實現SVG 144

7.3.3 SVG格式的局限性. 146

7.4 總結147

7.5 討論的觀點148

8 漸進增強和Modernizr的過時控制149

8.1 技術性過時150

8.1.1 漸進增強150

8.1.2 優雅降級154

8.2 Modernizr是什麼. 155

8.2.1 初始化Modernizr 157

8.2.2 利用Modernizr寫跨瀏覽器的CSS . 159

8.3 用Modernizr進行JavaScript特性檢測162

8.3.1 檢測觸摸能力163

8.3.2 使用Modernizr.load和yepnope . 164

8.3.3 創建定製的Modernizr測試. 165

8.4 在網站中添加Modernizr . 166

8.5 總結169

8.6 討論的觀點170

9 響應式網站的測試和優化171

9.1 什麼是響應式測試172

9.1.1 模擬測試環境172

9.2 用於測試的瀏覽器工具176

9.3 使用Web審查器. 177

9.3.1 掌握Web審查器. 178

9.4 降低請求時間的技巧182

9.4.1 減少HTTP請求183

9.4.2 用Base64編碼減少圖片請求184

9.4.3 加載速度的優化清單184

9.5 總結. 186

9.6 討論的觀點. 186

附錄A 設計中的上下文感知計算.187

A.1 移動應用中的上下文感知. 188

A.2 Web中的上下文感知189

A.2.1 上下文斷點190

A.2.2 創建上下文測試192

A.2.3 CSS上下文195

A.3 總結196

附錄B Foundation框架

(可在www.manning.com/TheResponsiveWeb獲取。)