寫給程序員的Web設計書（簡體書）

《寫給程序員的Web設計書》系統而深入地闡釋了網站的設計與實現，幫助讀者從開發人員的角度理解什么是設計。通讀《寫給程序員的Web設計書》之後，讀者可以跨越純視覺思考者和純線性思考者之間的交流鴻溝。《寫給程序員的Web設計書》的主要內容有：如何挑選配色，如何選擇字體，如何用Photoshop實現基本設計，如何創作Banner等頁面元素，如何制作HTML和CSS模板以及如何測試設計的兼容性和可訪問性等。《寫給程序員的Web設計書》適合開發人員和Web設計師研讀，對于那些獨立且沒有設計背景的開發人員非常有用。

作者：（美國）霍根（Brian P. Hogan） 譯者：吳珂霍根，Brian P. Hogan，是一名自由職業者和開發顧問。他從1995年就開始從事專業網站開發，使用ASP、PHP和Ruby開發過各種類型的網站和Web應用程序。他喜歡傳授技術知識，撰寫技術文章，尤其擅長網頁設計和開發方面的技術。

《寫給程序員的Web設計書》會開發，也要懂設計，領悟先進的Web設計理念，讓你的網站煜煜生輝。Web設計常常面對著一個很大的挑戰，它需要結合設計人員與程序員的思維。要跨越純視覺思考者和純線性思考者之間的交流鴻溝。現實世界中。很多網站就是程序員設計的作品。如何讓程序員擁有設計者的視角，了解配色、字體、頁面布局等知識，并熟悉相關技術和設計工具，是《寫給程序員的Web設計書》重點講述的內容。《寫給程序員的Web設計書》字里行間融匯了先進的Web設計思想，讓開發人員得以避免網頁設計誤區。真正提高設計能力。開發出爽心悅目的網站。

第1章 引言 11.1 說在前面的話 11.2 網頁設計實戰 21.2.1 明確要求 21.2.2 Photoshop時間 31.2.3 代碼時間 31.2.4 一切就緒 31.2.5 現實不一定總是如此美好 41.3 YourFoodbox.com 41.4 準備好了嗎 41.5 致謝 4第一部分 設計基礎第2章 網頁(再)設計的基礎——重新設計Foodbox 82.1 目前的網站 82.2 收集需求 112.3 明確目的 122.4 從哪里入手 132.5 畫出你的想法 132.5.1 一些約定俗成的布局風格 152.5.2 三張草圖 152.6 挑選草圖 172.7 小結 17第3章 配色 183.1 色彩基礎 183.1.1 色調、飽和度和亮度 183.1.2 加法混色和減法混色 193.2 色彩環境感知 203.3 用顏色喚起情感 223.3.1 暖色 223.3.2 冷色 223.3.3 中性色 233.3.4 顏色和用戶 243.4 配色方案 243.4.1 單色方案 253.4.2 相似色方案 263.4.3 互補色方案 273.4.4 分離互補色方案 283.5 網絡安全色 293.6 創建配色方案 303.6.1 用技術法選擇顏色 303.6.2 用自然選擇法選擇配色 353.7 選擇一個方案 393.7.1 前景色和背景色 403.7.2 鏈接 403.8 小結 41第4章 字體和排版 424.1 深入字體 424.2 字體類別 434.2.1 襯線字體 434.2.2 無襯線字體 444.2.3 等寬字體 444.3 字體限制及應對方法 454.3.1 網頁安全字體 454.3.2 圖片替換 464.3.3 用字體棧來定義備用字體 464.3.4 選擇備用字體 474.4 挑選字體 474.4.1 頁面內容字體 484.4.2 標題字體 484.5 使用基線網格 494.5.1 行距 504.5.2 計量單位 504.5.3 為Foodbox選擇字體 524.6 小結 53第二部分 圖像設計第5章 為Foodbox設計Logo 565.1 建立工作目錄 565.2 Foodbox的Logo 575.3 當我們需要自己設計Logo的時候怎么辦 605.4 小結 61第6章 設計樣式頁：頁面結構 626.1 關于圖層 626.2 基本結構 636.2.1 屏幕大小 646.2.2 定寬布局 656.2.3 設置網格 656.2.4 用輔助線劃定區域 666.2.5 畫出不同區域 676.3 放置Logo 676.4 用圖層組組織圖像 686.5 給Logo加上倒影 686.6 頁腳 696.7 小結 70第7章 設計樣式頁：內容相關 717.1 制作搜索框 717.2 餐譜導航標簽云 727.3 范圍潛變 737.4 做一個美味的摘要 747.5 主要內容 767.6 瀏覽器模仿 777.7 小結 78第8章 樣式頁上的按鈕 798.1 制作搜索圖標 798.1.1 創建圖標背景 798.1.2 繪制放大鏡 818.1.3 放置搜索圖標 828.2 創建注冊和登錄按鈕 828.2.1 添加文字 858.2.2 添加注冊按鈕 858.3 文字內容來了 868.3.1 替換掉原來的亂碼 868.3.2 添加“最新菜譜”區 868.4 小結 87第三部分 建設網站第9章 用HTML做出主頁 909.1 網頁標準化 919.2 首頁的結構 919.3 語義化的標簽 939.4 主頁的框架 949.4.1 doctype 949.4.2 html標簽 979.4.3 屬性 979.4.4 head和body標簽 989.4.5 沒有閉合標簽的標簽 989.4.6 頁面標題 999.4.7 body標簽：重頭戲 1009.5 頁頭 1029.6 側邊欄 1029.6.1 搜索表單 1039.6.2 菜譜標簽云 1049.6.3 食材標簽云 1069.7 主要內容 1089.7.1 意大利面圖片 1089.7.2 注冊和登錄按鈕 1099.7.3 最新菜譜區 1109.8 頁腳 1109.9 驗證標簽 1149.9.1 為網頁開發設置Firefox瀏覽器 1149.9.2 Web Developer工具欄 1159.9.3 驗證文檔 1169.10 HTML 5 1169.11 小結 119第10章 為樣式頁面添磚加瓦 12010.1 圖像優化 12010.2 處理不同格式的圖像 12110.2.1 GIF 12110.2.2 PNG 12210.2.3 JPEG 12310.3 文檔切片 12410.4 創建切片 12510.5 將Banner導出成PNG文件 12710.5.1 隱藏圖層 12710.5.2 保存切片 12710.6 導出其他圖片 12810.7 小結 129第11章 使用CSS布局 13011.1 瀏覽器招人厭 13011.2 CSS基礎 13111.2.1 選擇符 13111.2.2 聲明：屬性和值 13211.2.3 關于“層疊” 13311.3 瀏覽器如何解析CSS 13611.3.1 嵌入式 13611.3.2 style標簽 13711.3.3 外部CSS文件 13811.4 創建并鏈接新的CSS樣式表 13811.5 定義基本結構、頁頭和頁腳 13911.5.1 瀏覽器默認 13911.5.2 盒模型 14111.5.3 將內容居中 14111.5.4 定義頁頭和頁腳 14211.6 將頁面的單欄變成雙欄 14211.6.1 文檔流 14311.6.2 浮動 14311.6.3 背景顏色和浮動 14611.7 為內容加上外邊距 14811.8 主區域 14811.8.1 主區域文字 14811.8.2 注冊按鈕區域 14911.8.3 最新菜譜 15011.9 回到頁腳 15011.10 小結 151第12章 利用覆蓋法替換各區域中的標題 15212.1 什么是覆蓋法 15212.2 為覆蓋做準備，調整HTML 15212.3 覆蓋文字 15212.4 替換所有其他標題 15312.5 替換鏈接 15412.6 這種方法的缺陷 15612.7 小結 156第13章 添加樣式 15713.1 設置字體和顏色 15713.1.1 風格手冊的重要性 15813.1.2 偽類 15913.2 標簽云 16013.3 搜索表單 16013.4 頁腳 16113.5 清理零散的角落 16113.5.1 去掉圖片的邊框 16113.5.2 拉伸Banner里的顏色 16213.6 小結 163第14章 制作打印機友好的頁面 16414.1 準備工作 16414.2 鏈接打印用樣式表 16414.3 去掉不需要的元素 16514.4 設置外邊距、寬度和字體 16514.4.1 頁面外邊距 16614.4.2 選擇一個字體 16614.4.3 加上一個分隔符 16714.5 搞定鏈接 16714.6 還要應付不習慣專有打印樣式的用戶 16814.7 小結 169第四部分 準備上線第15章 讓網頁適應IE和其他瀏覽器 17215.1 確定要支持哪些瀏覽器 17215.1.1 支持瀏覽器 17215.1.2 只支持某些特性 17315.2 關于瀏覽器的一些數據 17315.3 Internet Explore：你無法逃避的惡魔 17415.4 IE7 17515.4.1 IE的詭異模式 17615.4.2 XML序言 17615.4.3 在doctype上方的注釋 17615.5 IE6 17615.5.1 修復不正常的地方 17715.5.2 解決分欄的問題 17815.5.3 修正透明問題 17815.5.4 修復頁頭圖片下面的空白 17915.6 IE8 18015.7 其他瀏覽器 18115.8 小結 183第16章 可訪問性和可用性 18416.1 可訪問性對你來說意味著什么 18416.2 關于可訪問性的基礎問題 18516.2.1 盲人 18516.2.2 色盲用戶 18916.2.3 有視覺缺陷的人 19116.2.4 有聽力缺陷的用戶 19116.2.5 行動障礙和沒有鼠標的用戶 19216.3 包容一切 19216.3.1 導航 19316.3.2 處理出錯信息 19416.3.3 跨瀏覽器測試 19416.4 重要的商業問題 19416.5 改進Foodbox網站的可訪問性 19516.5.1 添加跳轉鏈接 19516.5.2 屏幕閱讀器和display:none 19616.5.3 用“負位置”隱藏跳轉鏈接 19716.5.4 表單的標簽 19716.6 使用制表鍵 19816.7 可訪問性清單 20016.8 小結 201第17章 制作收藏夾圖標 20217.1 創建簡單的圖標 20217.2 創建收藏夾圖標 20217.3 小結 203第18章 搜索引擎優化 20418.1 內容為王 20418.1.1 “欺騙”搜索引擎 20418.1.2 到底什么是內容 20518.2 選擇關鍵字 20618.2.1 猜想他們是如何找到你的 20618.2.2 決定你想如何被發現 20618.2.3 看看競爭對手 20618.2.4 添加關鍵字 20718.3 完善頁面內容 20718.4 不要因為優化而忽略了用戶 20818.5 你和鏈接 20818.6 到最後其實都是常識 20818.7 小結 209第19章 針對移動設備的設計 21019.1 移動用戶 21019.2 關于(很)小屏幕 21119.3 JavaScript 21219.4 提供移動版 21219.4.1 移動版樣式表 21219.4.2 用戶代理探測 21219.4.3 使用子域名 21319.5 做決定——到底要支持什么平臺 21319.5.1 在不產生重復內容的情況下制作一個鏡像 21419.5.2 調整內容 21519.5.3 處理程序 21619.5.4 進一步改進 21819.6 為移動用戶做重構 21819.7 小結 219第20章 測試與性能優化 22020.1 優化性能的策略 22020.2 確定影響性能的因素 22120.2.1 速度測試 22120.2.2 YSlow 22220.3 解決性能問題 22220.3.1 設置超時報頭 22220.3.2 用ETag改進緩存 22320.3.3 用資源服務器分發請求 22520.3.4 文件壓縮 22620.3.5 壓縮腳本文件 22620.4 圖片優化 22920.5 小結 230第21章 後續工作 23121.1 其他頁面和模板 23121.2 高級模板 23421.3 網格系統和CSS框架 23521.3.1 YUI網格 23521.3.2 960網格系統 23621.3.3 框架不是萬能的 23821.4 替換CSS 23921.5 不要忘記為有版權的照片付錢 24021.6 視覺效果 24121.6.1 縮放圖片 24121.6.2 寫代碼 24121.6.3 把動畫放到主頁上 24321.7 多試多做 245第22章 推薦閱讀 24622.1 色彩資源 24622.2 關于字體和排版的書 24622.3 技術書籍 24622.4 網站資源 247參考書目 249

照舊，輔助線將是放置元素的得力助手。先在左邊標尺的126像素的地方放一條水平的輔助線，這條輔助線是搜索區域標題所在位置的參考。如果用標尺刻度放置輔助線的方式讓你感覺到無聊了，你可以試試這種方法：輸入朝向和位置坐標直接創建輔助線。具體做法是從View選項中選擇新建輔助線，然後輸入合適的參數創建。用來確定標題的第二條輔助線應該在162像素的位置。雖然由于標題的上沿會和126像素位置的輔助線重合，這個輔助線顯得有點多余。然而，標題的字高有24像素，為了能讓行高是18像素的倍數，我們需要額外的空間，這就導致標題的行高是36像素。按下字母T鍵激活文字工具。將字體和字號分別設置為Monotype Corsiva和24pt，將文字顏色設為48541C，這是在配色方案中我們為標題選定的顏色。在剛剛定義的那條輔助線的下方單擊一下畫布，輸入“Search Recipes”。用移動工具讓文字和輔助線對齊。接下來要用繪制工具和一些圖層效果來畫出搜索框。首先需要用輔助線來劃定搜索框的區域。現成的162像素位置的輔助線已經標記出了搜索框的頂部，我們還需要兩條豎直的輔助線，分別位于270像素和288像素的位置，這樣就確定了搜索框和按鈕的位置。注意，每條輔助線都落在了網格上。新建一個名為search box的圖層。選用矩形工具，將填充顏色設置為FFFFFF，在輔助線所圈定的范圍內劃出一個搜索框。右鍵單擊這個圖層的小圖標，選擇Blending Options（混合選項）。從彈出來的對話框中進入Stock.（描邊）選項卡，將描邊大小設為1，顏色為000000。7.2餐譜導航標簽云網站是使用標簽的形式來組織菜譜分類的。用戶可以為菜譜們打上標簽，這樣在大量的菜譜中可以方便地找到想要的東西。現在，不少受歡迎的網站都會用標簽云（tag cloud）的形式來顯示系統中最常見的標簽。標簽云會用不同大小的字體來顯示關聯次數較多的標簽。例如，如果被打上“甜點”標簽的條目是其他類型的三倍還多，那么“甜點”這個標簽在標簽云中的字號就要比其他的標簽大很多倍。我們會做一個類似于圖7-2的效果。通常來說，標簽云需要5～6種不同的字體大小，但是作為一個樣式頁，大、中、小三種字體就夠了。