響應(yīng)式Web圖形設(shè)計(jì)pdf

隨著智能手機(jī)和平板電腦等移動(dòng)設(shè)備的普及，網(wǎng)頁(yè)既可以橫向，也可以縱向顯示，設(shè)計(jì)不再以桌面瀏覽器窗口的寬度為標(biāo)準(zhǔn)，如何才能更好的設(shè)計(jì)Web界面呢？小編這里推薦大家閱讀響應(yīng)式Web圖形設(shè)計(jì)，這是一本HTML5＆CSS3基礎(chǔ)知識(shí)+現(xiàn)代設(shè)計(jì)精髓理念的圖書，由美國(guó)程序員 Christopher Schmitt編著。

本書內(nèi)容豐富翔實(shí)，主要講解了網(wǎng)頁(yè)排版、網(wǎng)站圖像、透明度和陰影、列表和圖標(biāo)字體、頁(yè)面布局等等網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，并提供了在開發(fā)環(huán)境下關(guān)于HTML和CSS的基礎(chǔ)知識(shí)，還逐章深入地介紹更加先進(jìn)或者獨(dú)一無(wú)二的設(shè)計(jì)解決方案，非常適合Web設(shè)計(jì)新手快速入門。

內(nèi)容介紹

網(wǎng)頁(yè)中的圖形設(shè)計(jì)是在線內(nèi)容用戶體驗(yàn)的關(guān)鍵，尤其是現(xiàn)在的用戶會(huì)使用多種設(shè)備訪問(wèn)網(wǎng)頁(yè)，如智能手機(jī)、平板電腦、筆記本電腦、桌面電腦，甚至是智能電視?！俄憫?yīng)式Web圖形設(shè)計(jì)》以創(chuàng)建響應(yīng)式Web的角度，介紹了基礎(chǔ)的HTML和CSS語(yǔ)法，并深入研究了響應(yīng)式Web設(shè)計(jì)中色彩、布局、圖像、排版、動(dòng)畫、視頻和音頻等方面的內(nèi)容。本書結(jié)構(gòu)整、輕松易懂，能夠幫助Web設(shè)計(jì)新手快速入門，并打下堅(jiān)實(shí)的基礎(chǔ)。

響應(yīng)式Web圖形設(shè)計(jì)章節(jié)目錄

第1章 了解HTML 1

1．1 為什么要學(xué)習(xí)HTML？ 2

1．1．1 HTML使得因特網(wǎng)更受歡迎 2

1．1．2 學(xué)習(xí)HTML，更好地理解網(wǎng)頁(yè)設(shè)計(jì) 2

1．1．3 學(xué)習(xí)HTML很容易 2

1．2 HTML編程基礎(chǔ) 4

1．2．1 文本編輯器 4

1．2．2 文字處理軟件不是文本編輯器 4

1．2．3 用HTML編寫代碼 5

1．3 構(gòu)建網(wǎng)頁(yè) 6

1．3．1 指定DOCTYPE 6

1．3．2 保存和查看頁(yè)面 9

1．4 布置頁(yè)面內(nèi)容 10

1．4．1 HTML標(biāo)題 10

1．4．2 HTML文本標(biāo)簽 10

1．4．3 為網(wǎng)站創(chuàng)建鏈接 12

1．4．4 添加title屬性 12

1．4．5 網(wǎng)站的鏈接 13

1．5 總結(jié) 15

第2章 使用CSS設(shè)置樣式 17

2．1 CSS來(lái)幫忙 18

2．2 初識(shí)樣式 18

2．2．1 聲明 18

2．2．2 選擇器 19

2．2．3 更多的CSS 選擇器 19

2．3 添加CSS格式 20

2．3．1 鏈接到CSS 21

2．3．2 內(nèi)聯(lián)樣式 22

2．4 塊和行內(nèi)格式化 23

2．4．1 HTML的通用元素 24

2．4．2 偽類和偽元素 25

2．5 專門為IE寫CSS 27

2．6 常規(guī)流和定位 29

2．6．1 靜態(tài)文本流(static) 29

2．6．2 固定定位(fixed) 29

2．6．3 相對(duì)定位(relative) 29

2．6．4 絕對(duì)定位(absolute) 30

2．7 總結(jié) 33

第3章 網(wǎng)頁(yè)排版 35

3．1 網(wǎng)頁(yè)字體 36

3．1．1 size屬性和值 38

3．1．2 那么，你應(yīng)該使用什么測(cè)量值呢？ 39

3．1．3 粗細(xì)、樣式、變形和修飾 40

3．2 網(wǎng)頁(yè)安全字體實(shí)踐 42

3．2．1 網(wǎng)頁(yè)安全字體 42

3．2．2 移動(dòng)安全字體 43

3．3 制作更好的字體棧 44

3．4 網(wǎng)頁(yè)中的“Real Fonts” 45

3．4．1 @font-face屬性 46

3．4．2 生成嵌入文件 47

3．4．3 免費(fèi)字體 48

3．4．4 商業(yè)字體 50

3．5 總結(jié) 53

第4章 網(wǎng)頁(yè)設(shè)計(jì)中的挑戰(zhàn) 55

4．1 網(wǎng)絡(luò)環(huán)境 56

4．1．1 揭示瀏覽器問(wèn)題 56

4．1．2 使用測(cè)試頁(yè) 58

4．1．3 顏色 58

4．1．4 屏幕和像素 59

4．1．5 可訪問(wèn)性 59

4．2 決定你的跨瀏覽器目標(biāo) 61

4．3 針對(duì)不同設(shè)備開發(fā)網(wǎng)站 65

4．3．1 重置和標(biāo)準(zhǔn)化瀏覽器樣式 65

4．3．2 特殊前綴 67

4．3．3 檢驗(yàn) 68

4．3．4 測(cè)試 70

4．4 總結(jié) 71

第5章 網(wǎng)頁(yè)中的顏色 73

5．1 網(wǎng)頁(yè)顏色編碼 74

5．1．1 十六進(jìn)制顏色標(biāo)記 74

5．1．2 重寫HTML的默認(rèn)顏色 74

5．1．3 圖像邊框 75

5．1．4 帶透明度的CSS顏色 76

5．2 顏色屬性 76

5．3 原色系統(tǒng) 77

5．4 顏色組合 78

5．5 構(gòu)建配色方案 79

5．5．1 尋找基色 79

5．5．2 文化與顏色 81

5．5．3 瀏覽顏色的啟示 82

5．5．4 構(gòu)思方案 84

5．6 一致的顏色 85

5．6．1 校正顏色 86

5．6．2 拾取顏色 86

5．7 CSS顏色表 86

5．8 總結(jié) 91

第6章 網(wǎng)站圖像 93

6．1 位數(shù)的問(wèn)題 94

6．1．1 像素深度 94

6．1．2 色調(diào)分離和抖動(dòng) 94

6．1．3 更多位意味著更多顏色 94

6．1．4 為什么位深度如此重要？ 95

6．2 光柵圖像格式 97

6．2．1 GIF圖像格式 97

6．2．2 JPEG圖像格式 98

6．2．3 PNG圖像格式 99

6．3 圖像壓縮表 100

6．4 SVG：網(wǎng)頁(yè)中的矢量文件 106

6．5 總結(jié) 107

第7章 為網(wǎng)頁(yè)創(chuàng)建圖像 109

7．1 使用Illustrator 110

7．1．1 為網(wǎng)頁(yè)設(shè)置工作區(qū) 110

7．1．2 設(shè)置文檔尺寸 111

7．1．3 導(dǎo)出光柵圖像 114

7．1．4 使用Illustrator導(dǎo)出矢量圖像 116

7．2 使用Photoshop 117

7．2．1 新建文檔 117

7．2．2 導(dǎo)出光柵圖像 117

7．3 管理Web圖像文件 118

7．4 減小文件尺寸 119

7．4．1 壓縮光柵圖像 119

7．4．2 使用HTTP壓縮 120

7．5 總結(jié) 123

第8章 透明度和陰影 125

8．1 使用GIF圖像創(chuàng)造透明度 126

8．1．1 雜邊 127

8．2 PNG半透明圖像 128

8．2．1 8位PNG 128

8．2．2 24位PNG 129

8．3 CSS透明度 129

8．3．1 圓角 130

8．3．2 圖像蒙版 130

8．3．3 元素透明 131

8．3．4 背景色透明度 132

8．3．5 文本陰影 132

8．3．6 3D文本陰影 133

8．3．7 盒陰影 133

8．4 總結(jié) 135

第9章 收藏夾圖標(biāo)和移動(dòng)書簽 137

9．1 收藏夾圖標(biāo)在哪里 138

9．2 收藏夾圖標(biāo)的圖像格式 139

9．3 將收藏夾圖標(biāo)插入到網(wǎng)站中 139

9．3．1 為子網(wǎng)站設(shè)定收藏夾圖標(biāo) 139

9．3．2 推廣收藏夾圖標(biāo) 140

9．4 為網(wǎng)頁(yè)創(chuàng)建收藏夾圖標(biāo) 140

9．5 移動(dòng)書簽 144

9．5．1 文件格式 144

9．5．2 命名規(guī)范 144

9．5．3 自動(dòng)圖像處理 145

9．5．4 插入圖標(biāo) 145

9．6 混合收藏夾圖標(biāo)與移動(dòng)書簽 146

9．7 總結(jié) 147

第10章 列表和圖標(biāo)字體 149

10．1 無(wú)序列表 150

10．1．1 CSS項(xiàng)目符號(hào)圖標(biāo) 150

10．1．2 插入定制圖標(biāo) 151

10．2 定義列表 151

10．3 有序列表 152

10．3．1 改變順序 153

10．3．2 設(shè)置目錄 153

10．3．3 添加有序標(biāo)記的另一種寫法 154

10．4 高效列表設(shè)計(jì) 156

10．5 圖標(biāo)字體 158

10．5．1 選擇一種圖標(biāo)字體 159

10．5．2 突出字符或者短語(yǔ) 160

10．5．3 創(chuàng)建可點(diǎn)擊的單獨(dú)圖標(biāo) 161

10．6 總結(jié) 163

第11章 圖像映射 165

11．1 創(chuàng)造圖像映射 166

11．1．1 基礎(chǔ)的手工編碼 166

11．1．2 使用Fireworks 168

11．2 響應(yīng)式圖像映射 170

11．3 總結(jié) 171

第12章 頁(yè)面布局 173

12．1 CSS浮動(dòng) 174

12．1．1 float屬性 174

12．1．2 多重浮動(dòng) 175

12．1．3 clear屬性 175

12．2 浮動(dòng)頁(yè)面布局 176

12．2．1 頁(yè)面結(jié)構(gòu) 176

12．2．2 兩欄流式布局 178

12．2．3 兩欄固定布局 179

12．2．4 三欄流式布局 181

12．2．5 三欄固定布局 182

12．2．6 使用浮動(dòng)布局的優(yōu)缺點(diǎn) 184

12．3 CSS框架 184

12．3．1 網(wǎng)格系統(tǒng) 184

12．3．2 最后看看框架 187

12．4 響應(yīng)式布局 188

12．4．1 適應(yīng)媒體查詢 189

12．4．2 流式布局 190

12．4．3 文本回流 192

12．4．4 媒體查詢實(shí)戰(zhàn) 193

12．4．5 響應(yīng)式框架 199

12．5 總結(jié) 199

第13章 響應(yīng)Web設(shè)計(jì)中的圖像 201

13．1 縮放圖像和媒體 202

13．2 縮放圖像帶來(lái)的問(wèn)題 202

13．2．1 大尺寸圖像 203

13．2．2 更大尺寸的圖像 203

13．2．3 把網(wǎng)速考慮進(jìn)來(lái) 204

13．3 自適應(yīng)圖像解決方案 204

13．3．1 另尋他法 204

13．3．2 壓縮Retina圖像 205

13．4 多圖像解決方案 208

13．4．1 picture元素 208

13．4．2 srcset屬性 209

13．4．3 使用圖像補(bǔ)丁腳本 210

13．5 總結(jié) 217

第14章 對(duì)齊圖像 219

14．1 圖像與文本的對(duì)齊 220

14．1．1 baseline 220

14．1．2 text-bottom 220

14．1．3 text-top 221

14．1．4 top和bottom 221

14．1．5 middle 222

14．2 在瀏覽器窗口中居中圖像 222

14．2．1 使用CSS 設(shè)置背景 222

14．2．2 僅用CSS 223

14．2．3 幸虧有jQuery，我們不用把數(shù)字寫死了 224

14．3 在瀏覽器中伸展圖像 225

14．4 總結(jié) 226

使用說(shuō)明

1、下載并解壓，得出pdf文件

2、如果打不開本文件，請(qǐng)務(wù)必下載pdf閱讀器

3、安裝后，在打開解壓得出的pdf文件

4、雙擊進(jìn)行閱讀