隨著智能手機(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ì)精髓理念的圖書(shū),由美國(guó)程序員 Christopher Schmitt編著。
本書(shū)內(nèi)容豐富翔實(shí),主要講解了網(wǎng)頁(yè)排版、網(wǎng)站圖像、透明度和陰影、列表和圖標(biāo)字體、頁(yè)面布局等等網(wǎng)頁(yè)設(shè)計(jì)技術(shù),并提供了在開(kāi)發(fā)環(huán)境下關(guān)于HTML和CSS的基礎(chǔ)知識(shí),還逐章深入地介紹更加先進(jìn)或者獨(dú)一無(wú)二的設(shè)計(jì)解決方案,非常適合Web設(shè)計(jì)新手快速入門(mén)。
內(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)畫(huà)、視頻和音頻等方面的內(nèi)容。本書(shū)結(jié)構(gòu)整、輕松易懂,能夠幫助Web設(shè)計(jì)新手快速入門(mén),并打下堅(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編寫(xiě)代碼 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 專門(mén)為IE寫(xiě)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 制作更好的字體?!?4
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è)備開(kāi)發(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 重寫(xiě)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)書(shū)簽 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)書(shū)簽 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)書(shū)簽 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)記的另一種寫(xiě)法 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ù)字寫(xiě)死了 224
14.3 在瀏覽器中伸展圖像 225
14.4 總結(jié) 226
使用說(shuō)明
1、下載并解壓,得出pdf文件
2、如果打不開(kāi)本文件,請(qǐng)務(wù)必下載pdf閱讀器
3、安裝后,在打開(kāi)解壓得出的pdf文件
4、雙擊進(jìn)行閱讀
- 下載地址
- 本地下載通道:
- 浙江電信下載
- 北京聯(lián)通下載
- 江蘇電信下載
- 廣東電信下載
有問(wèn)題? 點(diǎn)此報(bào)錯(cuò)
發(fā)表評(píng)論
0條評(píng)論軟件排行榜
熱門(mén)推薦
- 有柿電腦版 v11.5.684.06M / 簡(jiǎn)體中文
- 得間免費(fèi)小說(shuō)電腦版 v5.2.7.172.56M / 簡(jiǎn)體中文
- 吉利博瑞用戶手冊(cè) pdf高清版57.89M / 簡(jiǎn)體中文
- 開(kāi)源閱讀電腦版 v3.2517.96M / 簡(jiǎn)體中文
- 京東讀書(shū)電腦版 v1.13.4官方版1.98M / 簡(jiǎn)體中文
- cnki全球?qū)W術(shù)快報(bào)電腦版 v0.2.3495.79M / 簡(jiǎn)體中文
- 未公開(kāi)的Oracle數(shù)據(jù)庫(kù)秘密 迪貝斯pdf掃描版34.69M / 簡(jiǎn)體中文
- PHP語(yǔ)言精粹電子書(shū) pdf掃描版25.72M / 簡(jiǎn)體中文
- docker入門(mén)實(shí)戰(zhàn) pdf完整版1.38M / 簡(jiǎn)體中文
- C++黑客編程揭秘與防范第2版 冀云pdf掃描版54.58M / 簡(jiǎn)體中文