網頁中的圖形設計是在線內容用戶體驗的關鍵,尤其是現在的用戶會使用多種設備訪問網頁,如智能手機、平板電腦、筆記本電腦、桌面電腦,甚至是智能電視。《響應式Web圖形設計》以創建響應式Web的角度,介紹了基礎的HTML和CSS語法,並深入研究了響應式Web設計中色彩、布局、圖像、排版、動畫、視頻和音頻等方面的內容。
《響應式Web圖形設計》結構整、輕松易懂,能夠幫助Web設計新手快速入門,並打下堅實的基礎。
目錄
第1章 了解HTML
1.1為什麼要學習HTML?
1.1.1HTML使得因特網更受歡迎
1.1.2學習HTML,更好地理解網頁設計
1.1.3學習HTML很容易
1.2HTML編程基礎
1.2.1文本編輯器
1.2.2文字處理軟件不是文本編輯器
1.2.3用HTML編寫代碼
1.3構建網頁
1.3.1指定DOCTYPE
1.3.2保存和查看頁面
1.4布置頁面內容
1.4.1HTML標題
1.4.2HTML文本標簽
1.4.3為網站創建鏈接
1.4.4添加title屬性
1.4.5網站的鏈接
1.5總結
第2章 使用CSS設置樣式
2.1CSS來幫忙
2.2初識樣式
2.2.1聲明
2.2.2選擇器
2.2.3更多的CSS選擇器
2.3添加CSS格式
2,3.1鏈接到CSS
2,3.2內聯樣式
2.4塊和行內格式化
2.4.1HTML的通用元素
2.4.2偽類和偽元素
2.5專門為IE寫CSS
2.6常規流和定位
2.6.1靜態文本流(static)
2.6.2固定定位(fixed)
2.6.3相對定位(reIatjve)
2.6.4絕對定位(absolute)
2.7總結
第3章 網頁排版
3.1網頁字體
3.1.1size屬性和值
3.1.2那麼,你應該使用什麼測量值呢?
3.1.3粗細、樣式、變形和修飾
3.2網頁安全字體實踐
3.2.1網頁安全字體
3.2.2移動安全字體
3.3制作更好的字體棧
3.4網頁中的「Real Fonts」
3.4.1@font—face屬性
3.4.2生成嵌入文件
3.4.3免費字體
3.4.4商業字體
3.5總結
第4章 網頁設計中的挑戰
4.1網絡環境
4.1.1揭示瀏覽器問題
4.1.2使用測試頁
4.1.3顏色
4.1.4屏幕和像素
4.1.5可訪問性
4.2決定你的跨瀏覽器目標
4.3針對不同設備開發網站
4.3.1重置和標准化瀏覽器樣式
4.3.2特殊前綴
4.3.3檢驗
4.3.4測試
4.4總結
第5章 網頁中的顏色
5.1網頁顏色編碼
5.1.1十六進制顏色標記
5.1.2重寫HTML的默認顏色
5.1.3圖像邊框
5.1.4帶透明度的CSS顏色
5.2顏色屬性
5.3原色系統
5.4顏色組合
5.5構建配色方案
5.5.1尋找基色
5.5.2文化與顏色
5.5.3瀏覽顏色的啟示
5,5.4構思方案
5.6一致的顏色
5.6.1校正顏色
5.6.2拾取顏色
5.7CSS顏色表
5.8總結
第6章 網站圖像
6.1位數的問題
6.1.1像素深度
6.1.2色調分離和抖動
6.1.3更多位意味着更多顏色
6.1.4為什麼位深度如此重要?
6.2光柵圖像格式
6.2.1GIF圖像格式
6.2.2JPEG圖像格式
6.2.3PNG圖像格式
6.3圖像壓縮表
6.4SVG:網頁中的矢量文件
6.5總結
第7章 為網頁創建圖像
7.1使用
7.1.1為網頁設置工作區
7.1.2設置文檔尺寸
7.1.3導出光柵圖像
7.1.4使用Illustrator導出矢量圖像
7.2使用Photoshop
7.2.1新建文檔
7.2.2導出光柵圖像
7.3管理Web圖像文件
7.4減小文件尺寸
7.4.1壓縮光柵圖像
7.4.2使用HTTP壓縮
7.5總結
第8章 透明度和陰影
8.1使用GIF圖像創造透明度
8.1.1雜邊
8,2PNG半透明圖像
8.2.18位PNG
8.2.224位PNG
8.3CSS透明度
8.3.1圓角
8.3.2圖像蒙版
8.3.3元素透明
8.3.4背景色透明度
8.3.5文本陰影
8.3.63D文本陰影
8.3.7盒陰影
8.4總結
第9章 收藏夾圖標和移動書簽
9.1收藏夾圖標在哪里
9.2收藏夾圖標的圖像格式
9.3將收藏夾圖標插入到網站中
9.3.1為子網站設定收藏夾圖標
9.3.2推廣收藏夾圖標
9.4為網頁創建收藏夾圖標
9.5移動書簽
9.5.1文件格式
9.5.2命名規范
9.5.3自動圖像處理
9.5.4插入圖標
9.6混合收藏夾圖標與移動書簽
9.7總結
第10章 列表和圖標字體
10.1無序列表
10.1.1CSS項目符號圖標
10.1.2插入定制圖標
10.2定義列表
10,3有序列表
10.3.1改變順序
10.3.2設置目錄
10.3.3添加有序標記的另一種寫法
10.4高效列表設計
10.5圖標字體
10.5.1選擇一種圖標字體
10.5.2突出字符或者短語
10.5.3創建可點擊的單獨圖標
10.6總結
第11章 圖像映射
11.1創造圖像映射
11.1.1基礎的手工編碼
11.1.2使用Fireworks
112響應式圖像映射
11.3總結
第12章 頁面布局
12.1CSS浮動
12.1.1float屬性
12.1.2多重浮動
12.1.3clear屬性
12.2浮動頁面布局
12.2.1頁面結構
12.2.2兩欄流式布局
12.2.3兩欄固定布局
12.2.4三欄流式布局
12.2.5三欄固定布局
12.2.6使用浮動布局的優缺點
12.3CSS框架
12.3.1網格系統
12.3.2最后看看框架
12.4響應式布局
12.4.1適應媒體查詢
12.4.2流式布局
12.4.3文本回流
12.4.4媒體查詢實戰
12.4.5響應式框架
12.5總結
第13章 響應Web設計中的圖像
13.1縮放圖像和媒體
13.2縮放圖像帶來的問題
13.2.1大尺寸圖像
13.2.2更大尺寸的圖像
13.2.3把網速考慮進來
13.3自適應圖像解決方案
13.3.1另尋他法
13.3.2壓縮Retina圖像
13.4多圖像解決方案
13.4.1picture元素
13.4.2srcset屬性
13.4.3使用圖像補丁腳本
13.5總結
第14章 對齊圖像
14.1圖像與文本的對齊
14.1.1baseline
14.1.2text—bottom
14.1.3text—top
14.1.4top和bottom
14.1.5middIe
14.2在瀏覽器窗口中居中圖像
14.2.1使用CSS設置背景
14.2.2僅用CSS
14.2.3幸虧有jQuery,我們不用把數字寫死了
14.3在瀏覽器中伸展圖像
14.4總結
1.1為什麼要學習HTML?
1.1.1HTML使得因特網更受歡迎
1.1.2學習HTML,更好地理解網頁設計
1.1.3學習HTML很容易
1.2HTML編程基礎
1.2.1文本編輯器
1.2.2文字處理軟件不是文本編輯器
1.2.3用HTML編寫代碼
1.3構建網頁
1.3.1指定DOCTYPE
1.3.2保存和查看頁面
1.4布置頁面內容
1.4.1HTML標題
1.4.2HTML文本標簽
1.4.3為網站創建鏈接
1.4.4添加title屬性
1.4.5網站的鏈接
1.5總結
第2章 使用CSS設置樣式
2.1CSS來幫忙
2.2初識樣式
2.2.1聲明
2.2.2選擇器
2.2.3更多的CSS選擇器
2.3添加CSS格式
2,3.1鏈接到CSS
2,3.2內聯樣式
2.4塊和行內格式化
2.4.1HTML的通用元素
2.4.2偽類和偽元素
2.5專門為IE寫CSS
2.6常規流和定位
2.6.1靜態文本流(static)
2.6.2固定定位(fixed)
2.6.3相對定位(reIatjve)
2.6.4絕對定位(absolute)
2.7總結
第3章 網頁排版
3.1網頁字體
3.1.1size屬性和值
3.1.2那麼,你應該使用什麼測量值呢?
3.1.3粗細、樣式、變形和修飾
3.2網頁安全字體實踐
3.2.1網頁安全字體
3.2.2移動安全字體
3.3制作更好的字體棧
3.4網頁中的「Real Fonts」
3.4.1@font—face屬性
3.4.2生成嵌入文件
3.4.3免費字體
3.4.4商業字體
3.5總結
第4章 網頁設計中的挑戰
4.1網絡環境
4.1.1揭示瀏覽器問題
4.1.2使用測試頁
4.1.3顏色
4.1.4屏幕和像素
4.1.5可訪問性
4.2決定你的跨瀏覽器目標
4.3針對不同設備開發網站
4.3.1重置和標准化瀏覽器樣式
4.3.2特殊前綴
4.3.3檢驗
4.3.4測試
4.4總結
第5章 網頁中的顏色
5.1網頁顏色編碼
5.1.1十六進制顏色標記
5.1.2重寫HTML的默認顏色
5.1.3圖像邊框
5.1.4帶透明度的CSS顏色
5.2顏色屬性
5.3原色系統
5.4顏色組合
5.5構建配色方案
5.5.1尋找基色
5.5.2文化與顏色
5.5.3瀏覽顏色的啟示
5,5.4構思方案
5.6一致的顏色
5.6.1校正顏色
5.6.2拾取顏色
5.7CSS顏色表
5.8總結
第6章 網站圖像
6.1位數的問題
6.1.1像素深度
6.1.2色調分離和抖動
6.1.3更多位意味着更多顏色
6.1.4為什麼位深度如此重要?
6.2光柵圖像格式
6.2.1GIF圖像格式
6.2.2JPEG圖像格式
6.2.3PNG圖像格式
6.3圖像壓縮表
6.4SVG:網頁中的矢量文件
6.5總結
第7章 為網頁創建圖像
7.1使用
7.1.1為網頁設置工作區
7.1.2設置文檔尺寸
7.1.3導出光柵圖像
7.1.4使用Illustrator導出矢量圖像
7.2使用Photoshop
7.2.1新建文檔
7.2.2導出光柵圖像
7.3管理Web圖像文件
7.4減小文件尺寸
7.4.1壓縮光柵圖像
7.4.2使用HTTP壓縮
7.5總結
第8章 透明度和陰影
8.1使用GIF圖像創造透明度
8.1.1雜邊
8,2PNG半透明圖像
8.2.18位PNG
8.2.224位PNG
8.3CSS透明度
8.3.1圓角
8.3.2圖像蒙版
8.3.3元素透明
8.3.4背景色透明度
8.3.5文本陰影
8.3.63D文本陰影
8.3.7盒陰影
8.4總結
第9章 收藏夾圖標和移動書簽
9.1收藏夾圖標在哪里
9.2收藏夾圖標的圖像格式
9.3將收藏夾圖標插入到網站中
9.3.1為子網站設定收藏夾圖標
9.3.2推廣收藏夾圖標
9.4為網頁創建收藏夾圖標
9.5移動書簽
9.5.1文件格式
9.5.2命名規范
9.5.3自動圖像處理
9.5.4插入圖標
9.6混合收藏夾圖標與移動書簽
9.7總結
第10章 列表和圖標字體
10.1無序列表
10.1.1CSS項目符號圖標
10.1.2插入定制圖標
10.2定義列表
10,3有序列表
10.3.1改變順序
10.3.2設置目錄
10.3.3添加有序標記的另一種寫法
10.4高效列表設計
10.5圖標字體
10.5.1選擇一種圖標字體
10.5.2突出字符或者短語
10.5.3創建可點擊的單獨圖標
10.6總結
第11章 圖像映射
11.1創造圖像映射
11.1.1基礎的手工編碼
11.1.2使用Fireworks
112響應式圖像映射
11.3總結
第12章 頁面布局
12.1CSS浮動
12.1.1float屬性
12.1.2多重浮動
12.1.3clear屬性
12.2浮動頁面布局
12.2.1頁面結構
12.2.2兩欄流式布局
12.2.3兩欄固定布局
12.2.4三欄流式布局
12.2.5三欄固定布局
12.2.6使用浮動布局的優缺點
12.3CSS框架
12.3.1網格系統
12.3.2最后看看框架
12.4響應式布局
12.4.1適應媒體查詢
12.4.2流式布局
12.4.3文本回流
12.4.4媒體查詢實戰
12.4.5響應式框架
12.5總結
第13章 響應Web設計中的圖像
13.1縮放圖像和媒體
13.2縮放圖像帶來的問題
13.2.1大尺寸圖像
13.2.2更大尺寸的圖像
13.2.3把網速考慮進來
13.3自適應圖像解決方案
13.3.1另尋他法
13.3.2壓縮Retina圖像
13.4多圖像解決方案
13.4.1picture元素
13.4.2srcset屬性
13.4.3使用圖像補丁腳本
13.5總結
第14章 對齊圖像
14.1圖像與文本的對齊
14.1.1baseline
14.1.2text—bottom
14.1.3text—top
14.1.4top和bottom
14.1.5middIe
14.2在瀏覽器窗口中居中圖像
14.2.1使用CSS設置背景
14.2.2僅用CSS
14.2.3幸虧有jQuery,我們不用把數字寫死了
14.3在瀏覽器中伸展圖像
14.4總結
網路書店
類別
折扣
價格
-
新書87折$256