第1 章 引言 1
1.1 說在前麵的話 1
1.2 網頁設計實戰 2
1.2.1 明確要求 2
1.2.2 Photoshop 時間 3
1.2.3 代碼時間 3
1.2.4 一切就緒 3
1.2.5 現實不一定總是如此美好 4
1.3 YourFoodbox.com 4
1.4 準備好瞭嗎 4
1.5 緻謝 4
第一部分 設計基礎
第2 章 網頁（再）設計的基礎——重新設計Foodbox 8
2.1 目前的網站 8
2.2 收集需求 11
2.3 明確目的 12
2.4 從哪裏入手 13
2.5 畫齣你的想法 13
2.5.1 一些約定俗成的布局風格 15
2.5.2 三張草圖 15
2.6 挑選草圖 17
2.7 小結 17
第3 章 配色 18
3.1 色彩基礎 18
3.1.1 色調、飽和度和亮度 18
3.1.2 加法混色和減法混色 19
3.2 色彩環境感知 20
3.3 用顔色喚起情感 22
3.3.1 暖色 22
3.3.2 冷色 22
3.3.3 中性色 23
3.3.4 顔色和用戶 24
3.4 配色方案 24
3.4.1 單色方案 25
3.4.2 相似色方案 26
3.4.3 互補色方案 27
3.4.4 分離互補色方案 28
3.5 網絡安全色 29
3.6 創建配色方案 30
3.6.1 用技術法選擇顔色 30
3.6.2 用自然選擇法選擇配色 35
3.7 選擇一個方案 39
3.7.1 前景色和背景色 40
3.7.2 鏈接 40
3.8 小結 41
第4 章 字體和排版 42
4.1 深入字體 42
4.2 字體類彆 43
4.2.1 襯綫字體 43
4.2.2 無襯綫字體 44
4.2.3 等寬字體 44
4.3 字體限製及應對方法 45
4.3.1 網頁安全字體 45
4.3.2 圖片替換 46
4.3.3 用字體棧來定義備用字體 46
4.3.4 選擇備用字體 47
4.4 挑選字體 47
4.4.1 頁麵內容字體 48
4.4.2 標題字體 48
4.5 使用基綫網格 49
4.5.1 行距 50
4.5.2 計量單位 50
4.5.3 為Foodbox 選擇字體 52
4.6 小結 53
第二部分 圖像設計
第5 章 為Foodbox 設計Logo 56
5.1 建立工作目錄 56
5.2 Foodbox 的Logo 57
5.3 當我們需要自己設計Logo 的時候怎麼辦 60
5.4 小結 61
第6 章 設計樣式頁：頁麵結構 62
6.1 關於圖層 62
6.2 基本結構 63
6.2.1 屏幕大小 64
6.2.2 定寬布局 65
6.2.3 設置網格 65
6.2.4 用輔助綫劃定區域 66
6.2.5 畫齣不同區域 67
6.3 放置Logo 67
6.4 用圖層組組織圖像 68
6.5 給Logo 加上倒影 68
6.6 頁腳 69
6.7 小結 70
第7 章 設計樣式頁：內容相關 71
7.1 製作搜索框 71
7.2 餐譜導航標簽雲 72
7.3 範圍潛變 73
7.4 做一個美味的摘要 74
7.5 主要內容 76
7.6 瀏覽器模仿 77
7.7 小結 78
第8 章 樣式頁上的按鈕 79
8.1 製作搜索圖標 79
8.1.1 創建圖標背景 79
8.1.2 繪製放大鏡 81
8.1.3 放置搜索圖標 82
8.2 創建注冊和登錄按鈕 82
8.2.1 添加文字 85
8.2.2 添加注冊按鈕 85
8.3 文字內容來瞭 86
8.3.1 替換掉原來的亂碼 86
8.3.2 添加“最新菜譜”區 86
8.4 小結 87
第三部分 建設網站
第9 章 用HTML 做齣主頁 90
9.1 網頁標準化 91
9.2 首頁的結構 91
9.3 語義化的標簽 93
9.4 主頁的框架 94
9.4.1 doctype 94
9.4.2 html 標簽 97
9.4.3 屬性 97
9.4.4 head 和body 標簽 98
9.4.5 沒有閉閤標簽的標簽 98
9.4.6 頁麵標題 99
9.4.7 body 標簽：重頭戲 100
9.5 頁頭 102
9.6 側邊欄 102
9.6.1 搜索錶單 103
9.6.2 菜譜標簽雲 104
9.6.3 食材標簽雲 106
9.7 主要內容 108
9.7.1 意大利麵圖片 108
9.7.2 注冊和登錄按鈕 109
9.7.3 最新菜譜區 110
9.8 頁腳 110
9.9 驗證標簽 114
9.9.1 為網頁開發設置Firefox 瀏覽器 114
9.9.2 Web Developer 工具欄 115
9.9.3 驗證文檔 116
9.10 HTML 5 116
9.11 小結 119
第10 章 為樣式頁麵添磚加瓦 120
10.1 圖像優化 120
10.2 處理不同格式的圖像 121
10.2.1 GIF 121
10.2.2 PNG 122
10.2.3 JPEG 123
10.3 文檔切片 124
10.4 創建切片 125
10.5 將Banner 導齣成PNG 文件 127
10.5.1 隱藏圖層 127
10.5.2 保存切片 127
10.6 導齣其他圖片 128
10.7 小結 129
第11 章 使用CSS 布局 130
11.1 瀏覽器招人厭 130
11.2 CSS 基礎 131
11.2.1 選擇符 131
11.2.2 聲明：屬性和值 132
11.2.3 關於“層疊” 133
11.3 瀏覽器如何解析CSS 136
11.3.1 嵌入式 136
11.3.2 style 標簽 137
11.3.3 外部CSS 文件 138
11.4 創建並鏈接新的CSS 樣式錶 138
11.5 定義基本結構、頁頭和頁腳 139
11.5.1 瀏覽器默認 139
11.5.2 盒模型 141
11.5.3 將內容居中 141
11.5.4 定義頁頭和頁腳 142
11.6 將頁麵的單欄變成雙欄 142
11.6.1 文檔流 143
11.6.2 浮動 143
11.6.3 背景顔色和浮動 146
11.7 為內容加上外邊距 148
11.8 主區域 148
11.8.1 主區域文字 148
11.8.2 注冊按鈕區域 149
11.8.3 最新菜譜 150
11.9 迴到頁腳 150
11.10 小結 151
第12 章 利用覆蓋法替換各區域中的標題 152
12.1 什麼是覆蓋法 152
12.2 為覆蓋做準備，調整HTML 152
12.3 覆蓋文字 152
12.4 替換所有其他標題 153
12.5 替換鏈接 154
12.6 這種方法的缺陷 156
12.7 小結 156
第13 章 添加樣式 157
13.1 設置字體和顔色 157
13.1.1 風格手冊的重要性 158
13.1.2 僞類 159
13.2 標簽雲 160
13.3 搜索錶單 160
13.4 頁腳 161
13.5 清理零散的角落 161
13.5.1 去掉圖片的邊框 161
13.5.2 拉伸Banner 裏的顔色 162
13.6 小結 163
第14 章 製作打印機友好的頁麵 164
14.1 準備工作 164
14.2 鏈接打印用樣式錶 164
14.3 去掉不需要的元素 165
14.4 設置外邊距、寬度和字體 165
14.4.1 頁麵外邊距 166
14.4.2 選擇一個字體 166
14.4.3 加上一個分隔符 167
14.5 搞定鏈接 167
14.6 還要應付不習慣專有打印樣式的用戶 168
14.7 小結 169
第四部分 準備上綫
第15 章 讓網頁適應IE 和其他瀏覽器 172
15.1 確定要支持哪些瀏覽器 172
15.1.1 支持瀏覽器 172
15.1.2 隻支持某些特性 173
15.2 關於瀏覽器的一些數據 173
15.3 Internet Explore：你無法逃避的惡魔 174
15.4 IE7 175
15.4.1 IE 的詭異模式 176
15.4.2 XML 序言 176
15.4.3 在doctype 上方的注釋 176
15.5 IE6 176
15.5.1 修復不正常的地方 177
15.5.2 解決分欄的問題 178
15.5.3 修正透明問題 178
15.5.4 修復頁頭圖片下麵的空白 179
15.6 IE8 180
15.7 其他瀏覽器 181
15.8 小結 183
第16 章 可訪問性和可用性 184
16.1 可訪問性對你來說意味著什麼 184
16.2 關於可訪問性的基礎問題 185
16.2.1 盲人 185
16.2.2 色盲用戶 189
16.2.3 有視覺缺陷的人 191
16.2.4 有聽力缺陷的用戶 191
16.2.5 行動障礙和沒有鼠標的用戶 192
16.3 包容一切 192
16.3.1 導航 193
16.3.2 處理齣錯信息 194
16.3.3 跨瀏覽器測試 194
16.4 重要的商業問題 194
16.5 改進Foodbox 網站的可訪問性 195
16.5.1 添加跳轉鏈接 195
16.5.2 屏幕閱讀器和display:none 196
16.5.3 用“負位置”隱藏跳轉鏈接 197
16.5.4 錶單的標簽 197
16.6 使用製錶鍵 198
16.7 可訪問性清單 200
16.8 小結 201
第17 章 製作收藏夾圖標 202
17.1 創建簡單的圖標 202
17.2 創建收藏夾圖標 202
17.3 小結 203
第18 章 搜索引擎優化 204
18.1 內容為王 204
18.1.1 “欺騙”搜索引擎 204
18.1.2 到底什麼是內容 205
18.2 選擇關鍵字 206
18.2.1 猜想他們是如何找到你的 206
18.2.2 決定你想如何被發現 206
18.2.3 看看競爭對手 206
18.2.4 添加關鍵字 207
18.3 完善頁麵內容 207
18.4 不要因為優化而忽略瞭用戶 208
18.5 你和鏈接 208
18.6 到最後其實都是常識 208
18.7 小結 209
第19 章 針對移動設備的設計 210
19.1 移動用戶 210
19.2 關於（很）小屏幕 211
19.3 JavaScript 212
19.4 提供移動版 212
19.4.1 移動版樣式錶 212
19.4.2 用戶代理探測 212
19.4.3 使用子域名 213
19.5 做決定──到底要支持什麼平颱 213
19.5.1 在不産生重復內容的情況下製作一個鏡像 214
19.5.2 調整內容 215
19.5.3 處理程序 216
19.5.4 進一步改進 218
19.6 為移動用戶做重構 218
19.7 小結 219
第20 章 測試與性能優化 220
20.1 優化性能的策略 220
20.2 確定影響性能的因素 221
20.2.1 速度測試 221
20.2.2 YSlow 222
20.3 解決性能問題 222
20.3.1 設置超時報頭 222
20.3.2 用ETag 改進緩存 223
20.3.3 用資源服務器分發請求 225
20.3.4 文件壓縮 226
20.3.5 壓縮腳本文件 226
20.4 圖片優化 229
20.5 小結 230
第21 章 後續工作 231
21.1 其他頁麵和模闆 231
21.2 高級模闆 234
21.3 網格係統和CSS 框架 235
21.3.1 YUI 網格 235
21.3.2 960 網格係統 236
21.3.3 框架不是萬能的 238
21.4 替換CSS 239
21.5 不要忘記為有版權的照片付錢 240
21.6 視覺效果 241
21.6.1 縮放圖片 241
21.6.2 寫代碼 241
21.6.3 把動畫放到主頁上 243
21.7 多試多做 245
第22 章 推薦閱讀 246
22.1 色彩資源 246
22.2 關於字體和排版的書 246
22.3 技術書籍 246
22.4 網站資源 247
參考書目 249
· · · · · · (收起)
1.1 說在前麵的話 1
1.2 網頁設計實戰 2
1.2.1 明確要求 2
1.2.2 Photoshop 時間 3
1.2.3 代碼時間 3
1.2.4 一切就緒 3
1.2.5 現實不一定總是如此美好 4
1.3 YourFoodbox.com 4
1.4 準備好瞭嗎 4
1.5 緻謝 4
第一部分 設計基礎
第2 章 網頁（再）設計的基礎——重新設計Foodbox 8
2.1 目前的網站 8
2.2 收集需求 11
2.3 明確目的 12
2.4 從哪裏入手 13
2.5 畫齣你的想法 13
2.5.1 一些約定俗成的布局風格 15
2.5.2 三張草圖 15
2.6 挑選草圖 17
2.7 小結 17
第3 章 配色 18
3.1 色彩基礎 18
3.1.1 色調、飽和度和亮度 18
3.1.2 加法混色和減法混色 19
3.2 色彩環境感知 20
3.3 用顔色喚起情感 22
3.3.1 暖色 22
3.3.2 冷色 22
3.3.3 中性色 23
3.3.4 顔色和用戶 24
3.4 配色方案 24
3.4.1 單色方案 25
3.4.2 相似色方案 26
3.4.3 互補色方案 27
3.4.4 分離互補色方案 28
3.5 網絡安全色 29
3.6 創建配色方案 30
3.6.1 用技術法選擇顔色 30
3.6.2 用自然選擇法選擇配色 35
3.7 選擇一個方案 39
3.7.1 前景色和背景色 40
3.7.2 鏈接 40
3.8 小結 41
第4 章 字體和排版 42
4.1 深入字體 42
4.2 字體類彆 43
4.2.1 襯綫字體 43
4.2.2 無襯綫字體 44
4.2.3 等寬字體 44
4.3 字體限製及應對方法 45
4.3.1 網頁安全字體 45
4.3.2 圖片替換 46
4.3.3 用字體棧來定義備用字體 46
4.3.4 選擇備用字體 47
4.4 挑選字體 47
4.4.1 頁麵內容字體 48
4.4.2 標題字體 48
4.5 使用基綫網格 49
4.5.1 行距 50
4.5.2 計量單位 50
4.5.3 為Foodbox 選擇字體 52
4.6 小結 53
第二部分 圖像設計
第5 章 為Foodbox 設計Logo 56
5.1 建立工作目錄 56
5.2 Foodbox 的Logo 57
5.3 當我們需要自己設計Logo 的時候怎麼辦 60
5.4 小結 61
第6 章 設計樣式頁：頁麵結構 62
6.1 關於圖層 62
6.2 基本結構 63
6.2.1 屏幕大小 64
6.2.2 定寬布局 65
6.2.3 設置網格 65
6.2.4 用輔助綫劃定區域 66
6.2.5 畫齣不同區域 67
6.3 放置Logo 67
6.4 用圖層組組織圖像 68
6.5 給Logo 加上倒影 68
6.6 頁腳 69
6.7 小結 70
第7 章 設計樣式頁：內容相關 71
7.1 製作搜索框 71
7.2 餐譜導航標簽雲 72
7.3 範圍潛變 73
7.4 做一個美味的摘要 74
7.5 主要內容 76
7.6 瀏覽器模仿 77
7.7 小結 78
第8 章 樣式頁上的按鈕 79
8.1 製作搜索圖標 79
8.1.1 創建圖標背景 79
8.1.2 繪製放大鏡 81
8.1.3 放置搜索圖標 82
8.2 創建注冊和登錄按鈕 82
8.2.1 添加文字 85
8.2.2 添加注冊按鈕 85
8.3 文字內容來瞭 86
8.3.1 替換掉原來的亂碼 86
8.3.2 添加“最新菜譜”區 86
8.4 小結 87
第三部分 建設網站
第9 章 用HTML 做齣主頁 90
9.1 網頁標準化 91
9.2 首頁的結構 91
9.3 語義化的標簽 93
9.4 主頁的框架 94
9.4.1 doctype 94
9.4.2 html 標簽 97
9.4.3 屬性 97
9.4.4 head 和body 標簽 98
9.4.5 沒有閉閤標簽的標簽 98
9.4.6 頁麵標題 99
9.4.7 body 標簽：重頭戲 100
9.5 頁頭 102
9.6 側邊欄 102
9.6.1 搜索錶單 103
9.6.2 菜譜標簽雲 104
9.6.3 食材標簽雲 106
9.7 主要內容 108
9.7.1 意大利麵圖片 108
9.7.2 注冊和登錄按鈕 109
9.7.3 最新菜譜區 110
9.8 頁腳 110
9.9 驗證標簽 114
9.9.1 為網頁開發設置Firefox 瀏覽器 114
9.9.2 Web Developer 工具欄 115
9.9.3 驗證文檔 116
9.10 HTML 5 116
9.11 小結 119
第10 章 為樣式頁麵添磚加瓦 120
10.1 圖像優化 120
10.2 處理不同格式的圖像 121
10.2.1 GIF 121
10.2.2 PNG 122
10.2.3 JPEG 123
10.3 文檔切片 124
10.4 創建切片 125
10.5 將Banner 導齣成PNG 文件 127
10.5.1 隱藏圖層 127
10.5.2 保存切片 127
10.6 導齣其他圖片 128
10.7 小結 129
第11 章 使用CSS 布局 130
11.1 瀏覽器招人厭 130
11.2 CSS 基礎 131
11.2.1 選擇符 131
11.2.2 聲明：屬性和值 132
11.2.3 關於“層疊” 133
11.3 瀏覽器如何解析CSS 136
11.3.1 嵌入式 136
11.3.2 style 標簽 137
11.3.3 外部CSS 文件 138
11.4 創建並鏈接新的CSS 樣式錶 138
11.5 定義基本結構、頁頭和頁腳 139
11.5.1 瀏覽器默認 139
11.5.2 盒模型 141
11.5.3 將內容居中 141
11.5.4 定義頁頭和頁腳 142
11.6 將頁麵的單欄變成雙欄 142
11.6.1 文檔流 143
11.6.2 浮動 143
11.6.3 背景顔色和浮動 146
11.7 為內容加上外邊距 148
11.8 主區域 148
11.8.1 主區域文字 148
11.8.2 注冊按鈕區域 149
11.8.3 最新菜譜 150
11.9 迴到頁腳 150
11.10 小結 151
第12 章 利用覆蓋法替換各區域中的標題 152
12.1 什麼是覆蓋法 152
12.2 為覆蓋做準備，調整HTML 152
12.3 覆蓋文字 152
12.4 替換所有其他標題 153
12.5 替換鏈接 154
12.6 這種方法的缺陷 156
12.7 小結 156
第13 章 添加樣式 157
13.1 設置字體和顔色 157
13.1.1 風格手冊的重要性 158
13.1.2 僞類 159
13.2 標簽雲 160
13.3 搜索錶單 160
13.4 頁腳 161
13.5 清理零散的角落 161
13.5.1 去掉圖片的邊框 161
13.5.2 拉伸Banner 裏的顔色 162
13.6 小結 163
第14 章 製作打印機友好的頁麵 164
14.1 準備工作 164
14.2 鏈接打印用樣式錶 164
14.3 去掉不需要的元素 165
14.4 設置外邊距、寬度和字體 165
14.4.1 頁麵外邊距 166
14.4.2 選擇一個字體 166
14.4.3 加上一個分隔符 167
14.5 搞定鏈接 167
14.6 還要應付不習慣專有打印樣式的用戶 168
14.7 小結 169
第四部分 準備上綫
第15 章 讓網頁適應IE 和其他瀏覽器 172
15.1 確定要支持哪些瀏覽器 172
15.1.1 支持瀏覽器 172
15.1.2 隻支持某些特性 173
15.2 關於瀏覽器的一些數據 173
15.3 Internet Explore：你無法逃避的惡魔 174
15.4 IE7 175
15.4.1 IE 的詭異模式 176
15.4.2 XML 序言 176
15.4.3 在doctype 上方的注釋 176
15.5 IE6 176
15.5.1 修復不正常的地方 177
15.5.2 解決分欄的問題 178
15.5.3 修正透明問題 178
15.5.4 修復頁頭圖片下麵的空白 179
15.6 IE8 180
15.7 其他瀏覽器 181
15.8 小結 183
第16 章 可訪問性和可用性 184
16.1 可訪問性對你來說意味著什麼 184
16.2 關於可訪問性的基礎問題 185
16.2.1 盲人 185
16.2.2 色盲用戶 189
16.2.3 有視覺缺陷的人 191
16.2.4 有聽力缺陷的用戶 191
16.2.5 行動障礙和沒有鼠標的用戶 192
16.3 包容一切 192
16.3.1 導航 193
16.3.2 處理齣錯信息 194
16.3.3 跨瀏覽器測試 194
16.4 重要的商業問題 194
16.5 改進Foodbox 網站的可訪問性 195
16.5.1 添加跳轉鏈接 195
16.5.2 屏幕閱讀器和display:none 196
16.5.3 用“負位置”隱藏跳轉鏈接 197
16.5.4 錶單的標簽 197
16.6 使用製錶鍵 198
16.7 可訪問性清單 200
16.8 小結 201
第17 章 製作收藏夾圖標 202
17.1 創建簡單的圖標 202
17.2 創建收藏夾圖標 202
17.3 小結 203
第18 章 搜索引擎優化 204
18.1 內容為王 204
18.1.1 “欺騙”搜索引擎 204
18.1.2 到底什麼是內容 205
18.2 選擇關鍵字 206
18.2.1 猜想他們是如何找到你的 206
18.2.2 決定你想如何被發現 206
18.2.3 看看競爭對手 206
18.2.4 添加關鍵字 207
18.3 完善頁麵內容 207
18.4 不要因為優化而忽略瞭用戶 208
18.5 你和鏈接 208
18.6 到最後其實都是常識 208
18.7 小結 209
第19 章 針對移動設備的設計 210
19.1 移動用戶 210
19.2 關於（很）小屏幕 211
19.3 JavaScript 212
19.4 提供移動版 212
19.4.1 移動版樣式錶 212
19.4.2 用戶代理探測 212
19.4.3 使用子域名 213
19.5 做決定──到底要支持什麼平颱 213
19.5.1 在不産生重復內容的情況下製作一個鏡像 214
19.5.2 調整內容 215
19.5.3 處理程序 216
19.5.4 進一步改進 218
19.6 為移動用戶做重構 218
19.7 小結 219
第20 章 測試與性能優化 220
20.1 優化性能的策略 220
20.2 確定影響性能的因素 221
20.2.1 速度測試 221
20.2.2 YSlow 222
20.3 解決性能問題 222
20.3.1 設置超時報頭 222
20.3.2 用ETag 改進緩存 223
20.3.3 用資源服務器分發請求 225
20.3.4 文件壓縮 226
20.3.5 壓縮腳本文件 226
20.4 圖片優化 229
20.5 小結 230
第21 章 後續工作 231
21.1 其他頁麵和模闆 231
21.2 高級模闆 234
21.3 網格係統和CSS 框架 235
21.3.1 YUI 網格 235
21.3.2 960 網格係統 236
21.3.3 框架不是萬能的 238
21.4 替換CSS 239
21.5 不要忘記為有版權的照片付錢 240
21.6 視覺效果 241
21.6.1 縮放圖片 241
21.6.2 寫代碼 241
21.6.3 把動畫放到主頁上 243
21.7 多試多做 245
第22 章 推薦閱讀 246
22.1 色彩資源 246
22.2 關於字體和排版的書 246
22.3 技術書籍 246
22.4 網站資源 247
參考書目 249
· · · · · · (收起)
具體描述
《寫給程序員的Web設計書》係統而深入地闡釋瞭網站的設計與實現，幫助讀者從開發人員的角度理解什麼是設計。通讀《寫給程序員的Web設計書》之後，讀者可以跨越純視覺思考者和純綫性思考者之間的交流鴻溝。《寫給程序員的Web設計書》的主要內容有：如何挑選配色，如何選擇字體，如何用Photoshop實現基本設計，如何創作Banner等頁麵元素，如何製作HTML和CSS模闆以及如何測試設計的兼容性和可訪問性等。
《寫給程序員的Web設計書》適閤開發人員和Web設計師研讀，對於那些獨立且沒有設計背景的開發人員非常有用。
用戶評價
評分
##對從沒寫過 Web 的程序員來說是個不錯的入門, 但是要做係統瞭解和進階還是明顯不夠
評分
##思維比較程序員書的網頁開發書籍
評分
##把Web頁麵設計的過程講瞭一遍。
評分
##把Web頁麵設計的過程講瞭一遍。
評分
##基本上看完瞭！我就準備用這本書，學習學習設計！挺不錯的。
評分
##清湯淡水，太小兒科瞭。
評分
##基本上看完瞭！我就準備用這本書，學習學習設計！挺不錯的。
評分
##書如其名。幫助對網頁設計比較無力的程序員快速掌握網頁設計的基本技術：logo，配色，布局。完全值得買一本隨時翻閱。記得要動手實踐！
##基本上看完瞭！我就準備用這本書，學習學習設計！挺不錯的。