寫(xiě)給程序員的Web設(shè)計(jì)書(shū)

內(nèi)容概要

由霍根編著的《寫(xiě)給程序員的Web設(shè)計(jì)書(shū)》系統(tǒng)而深入地闡釋了網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)，幫助讀者從開(kāi)發(fā)人員的角度理解什么是設(shè)計(jì)。通讀本書(shū)之后，讀者可以跨越純視覺(jué)思考者和純線性思考者之間的交流鴻溝?！秾?xiě)給程序員的Web設(shè)計(jì)書(shū)》的主要內(nèi)容有：如何挑選配色，如何選擇字體，如何用
Photoshop實(shí)現(xiàn)基本設(shè)計(jì)，如何創(chuàng)作Banner等頁(yè)面元素，如何制作HTML和
CSS模板以及如何測(cè)試設(shè)計(jì)的兼容性和可訪問(wèn)性等。
《寫(xiě)給程序員的Web設(shè)計(jì)書(shū)》適合開(kāi)發(fā)人員和Web設(shè)計(jì)師研讀，對(duì)于那些獨(dú)立且沒(méi)有設(shè)計(jì)背景的開(kāi)發(fā)人員非常有用。

作者簡(jiǎn)介

Brian
P.Hogan是一名自由職業(yè)者和開(kāi)發(fā)顧問(wèn)。他從1995年就開(kāi)始從事專(zhuān)業(yè)網(wǎng)站開(kāi)發(fā)，使用ASP、PHP和Ruby開(kāi)發(fā)過(guò)各種類(lèi)型的網(wǎng)站和Web應(yīng)用程序。他喜歡傳授技術(shù)知識(shí)，撰寫(xiě)技術(shù)文章，尤其擅長(zhǎng)網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)方面的技術(shù)。

書(shū)籍目錄

第1章  引言
    1.1  說(shuō)在前面的話
    1.2  網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)
      1.2.1  明確要求
      1.2.2  Photoshop  時(shí)間
      1.2.3  代碼時(shí)間
      1.2.4  一切就緒
      1.2.5  現(xiàn)實(shí)不一定總是如此美好
    1.3  YourFoodbox.com
    1.4  準(zhǔn)備好了嗎
    1.5  致謝
第一部分  設(shè)計(jì)基礎(chǔ)
  第2章  網(wǎng)頁(yè)（再）設(shè)計(jì)的基礎(chǔ)——重新設(shè)計(jì)Foodbox
    2.1  目前的網(wǎng)站
    2.2  收集需求
    2.3  明確目的
    2.4  從哪里入手
    2.5  畫(huà)出你的想法
      2.5.1  一些約定俗成的布局風(fēng)格
      2.5.2  三張草圖
    2.6  挑選草圖
    2.7  小結(jié)
  第3章  配色
    3.1  色彩基礎(chǔ)
      3.1.1  色調(diào)、飽和度和亮度
      3.1.2  加法混色和減法混色
    3.2  色彩環(huán)境感知
    3.3  用顏色喚起情感
      3.3.1  暖色
      3.3.2  冷色
      3.3.3  中性色
      3.3.4  顏色和用戶
    3.4  配色方案
      3.4.1  單色方案
      3.4.2  相似色方案
      3.4.3  互補(bǔ)色方案
      3.4.4  分離互補(bǔ)色方案
    3.5  網(wǎng)絡(luò)安全色
    3.6  創(chuàng)建配色方案
      3.6.1  用技術(shù)法選擇顏色
      3.6.2  用自然選擇法選擇配色
    3.7  選擇一個(gè)方案
      3.7.1  前景色和背景色
      3.7.2  鏈接
    3.8  小結(jié)
  第4章  字體和排版
    4.1  深入字體
    4.2  字體類(lèi)別
      4.2.1  襯線字體
      4.2.2  無(wú)襯線字體
      4.2.3  等寬字體
    4.3  字體限制及應(yīng)對(duì)方法
      4.3.1  網(wǎng)頁(yè)安全字體
      4.3.2  圖片替換
      4.3.3  用字體棧來(lái)定義備用字體
      4.3.4  選擇備用字體
    4.4  挑選字體
      4.4.1  頁(yè)面內(nèi)容字體
      4.4.2  標(biāo)題字體
    4.5  使用基線網(wǎng)格
      4.5.1  行距
      4.5.2  計(jì)量單位
      4.5.3  為Foodbox  選擇字體
    4.6  小結(jié)
第二部分  圖像設(shè)計(jì)
  第5章  為Foodbox  設(shè)計(jì)Logo
    5.1  建立工作目錄
    5.2  Foodbox  的Logo
    5.3  當(dāng)我們需要自己設(shè)計(jì)Logo  的時(shí)候怎么辦
    5.4  小結(jié)
  第6章  設(shè)計(jì)樣式頁(yè)：頁(yè)面結(jié)構(gòu)
    6.1  關(guān)于圖層
    6.2  基本結(jié)構(gòu)
      6.2.1  屏幕大小
      6.2.2  定寬布局
      6.2.3  設(shè)置網(wǎng)格
      6.2.4  用輔助線劃定區(qū)域
      6.2.5  畫(huà)出不同區(qū)域
    6.3  放置Logo
    6.4  用圖層組組織圖像
    6.5  給Logo  加上倒影
    6.6  頁(yè)腳
    6.7  小結(jié)
  第7章  設(shè)計(jì)樣式頁(yè)：內(nèi)容相關(guān)
    7.1  制作搜索框
    7.2  餐譜導(dǎo)航標(biāo)簽云
    7.3  范圍潛變
    7.4  做一個(gè)美味的摘要
    7.5  主要內(nèi)容
    7.6  瀏覽器模仿
    7.7  小結(jié)
  第8章  樣式頁(yè)上的按鈕
    8.1  制作搜索圖標(biāo)
      8.1.1  創(chuàng)建圖標(biāo)背景
      8.1.2  繪制放大鏡
      8.1.3  放置搜索圖標(biāo)
    8.2  創(chuàng)建注冊(cè)和登錄按鈕
      8.2.1  添加文字
      8.2.2  添加注冊(cè)按鈕
    8.3  文字內(nèi)容來(lái)了
      8.3.1  替換掉原來(lái)的亂碼
      8.3.2  添加“最新菜譜”區(qū)
    8.4  小結(jié)
第三部分  建設(shè)網(wǎng)站
  第9章  用HTML  做出主頁(yè)
    9.1  網(wǎng)頁(yè)標(biāo)準(zhǔn)化
    9.2  首頁(yè)的結(jié)構(gòu)
    9.3  語(yǔ)義化的標(biāo)簽
    9.4  主頁(yè)的框架
      9.4.1  doctype
      9.4.2  html  標(biāo)簽
      9.4.3  屬性
      9.4.4  head  和body  標(biāo)簽
      9.4.5  沒(méi)有閉合標(biāo)簽的標(biāo)簽
      9.4.6  頁(yè)面標(biāo)題
      9.4.7  body  標(biāo)簽：重頭戲
    9.5  頁(yè)頭
    9.6  側(cè)邊欄
      9.6.1  搜索表單
      9.6.2  菜譜標(biāo)簽云
      9.6.3  食材標(biāo)簽云
    9.7  主要內(nèi)容
      9.7.1  意大利面圖片
      9.7.2  注冊(cè)和登錄按鈕
      9.7.3  最新菜譜區(qū)
    9.8  頁(yè)腳
    9.9  驗(yàn)證標(biāo)簽
      9.9.1  為網(wǎng)頁(yè)開(kāi)發(fā)設(shè)置Firefox  瀏覽器
      9.9.2  Web  Developer  工具欄
      9.9.3  驗(yàn)證文檔
    9.10  HTML
    9.11  小結(jié)
  第10章  為樣式頁(yè)面添磚加瓦
    10.1  圖像優(yōu)化
    10.2  處理不同格式的圖像
      10.2.1  GIF
      10.2.2  PNG
      10.2.3  JPEG
    10.3  文檔切片
    10.4  創(chuàng)建切片
    10.5  將Banner  導(dǎo)出成PNG  文件
      10.5.1  隱藏圖層
      10.5.2  保存切片
    10.6  導(dǎo)出其他圖片
    10.7  小結(jié)
  第11章  使用CSS  布局
    11.1  瀏覽器招人厭
    11.2  CSS  基礎(chǔ)
      11.2.1  選擇符
      11.2.2  聲明：屬性和值
      11.2.3  關(guān)于“層疊”
    11.3  瀏覽器如何解析CSS
      11.3.1  嵌入式
      11.3.2  style  標(biāo)簽
      11.3.3  外部CSS  文件
    11.4  創(chuàng)建并鏈接新的CSS  樣式表
    11.5  定義基本結(jié)構(gòu)、頁(yè)頭和頁(yè)腳
      11.5.1  瀏覽器默認(rèn)
      11.5.2  盒模型
      11.5.3  將內(nèi)容居中
      11.5.4  定義頁(yè)頭和頁(yè)腳
    11.6  將頁(yè)面的單欄變成雙欄
      11.6.1  文檔流
      11.6.2  浮動(dòng)
      11.6.3  背景顏色和浮動(dòng)
    11.7  為內(nèi)容加上外邊距
    11.8  主區(qū)域
      11.8.1  主區(qū)域文字
      11.8.2  注冊(cè)按鈕區(qū)域
      11.8.3  最新菜譜
    11.9  回到頁(yè)腳
    11.10  小結(jié)
  第12章  利用覆蓋法替換各區(qū)域中的標(biāo)題
    12.1  什么是覆蓋法
    12.2  為覆蓋做準(zhǔn)備，調(diào)整HTML
    12.3  覆蓋文字
    12.4  替換所有其他標(biāo)題
    12.5  替換鏈接
    12.6  這種方法的缺陷
    12.7  小結(jié)
  第13章  添加樣式
    13.1  設(shè)置字體和顏色
      13.1.1  風(fēng)格手冊(cè)的重要性
      13.1.2  偽類(lèi)
    13.2  標(biāo)簽云
    13.3  搜索表單
    13.4  頁(yè)腳
    13.5  清理零散的角落
      13.5.1  去掉圖片的邊框
      13.5.2  拉伸Banner  里的顏色
    13.6  小結(jié)
  第14章  制作打印機(jī)友好的頁(yè)面
    14.1  準(zhǔn)備工作
    14.2  鏈接打印用樣式表
    14.3  去掉不需要的元素
    14.4  設(shè)置外邊距、寬度和字體
      14.4.1  頁(yè)面外邊距
      14.4.2  選擇一個(gè)字體
      14.4.3  加上一個(gè)分隔符
    14.5  搞定鏈接
    14.6  還要應(yīng)付不習(xí)慣專(zhuān)有打印樣式的用戶
    14.7  小結(jié)
第四部分  準(zhǔn)備上線
  第15章  讓網(wǎng)頁(yè)適應(yīng)IE  和其他瀏覽器
    15.1  確定要支持哪些瀏覽器
      15.1.1  支持瀏覽器
      15.1.2  只支持某些特性
    15.2  關(guān)于瀏覽器的一些數(shù)據(jù)
    15.3  Internet  Explore：你無(wú)法逃避的惡魔
    15.4  IE7
      15.4.1  IE  的詭異模式
      15.4.2  XML  序言
      15.4.3  在doctype  上方的注釋
    15.5  IE6
      15.5.1  修復(fù)不正常的地方
      15.5.2  解決分欄的問(wèn)題
      15.5.3  修正透明問(wèn)題
      15.5.4  修復(fù)頁(yè)頭圖片下面的空白
    15.6  IE8
    15.7  其他瀏覽器
    15.8  小結(jié)
  第16章  可訪問(wèn)性和可用性
    16.1  可訪問(wèn)性對(duì)你來(lái)說(shuō)意味著什么
    16.2  關(guān)于可訪問(wèn)性的基礎(chǔ)問(wèn)題
      16.2.1  盲人
      16.2.2  色盲用戶
      16.2.3  有視覺(jué)缺陷的人
      16.2.4  有聽(tīng)力缺陷的用戶
      16.2.5  行動(dòng)障礙和沒(méi)有鼠標(biāo)的用戶
    16.3  包容一切
      16.3.1  導(dǎo)航
      16.3.2  處理出錯(cuò)信息
      16.3.3  跨瀏覽器測(cè)試
    16.4  重要的商業(yè)問(wèn)題
    16.5  改進(jìn)Foodbox  網(wǎng)站的可訪問(wèn)性
      16.5.1  添加跳轉(zhuǎn)鏈接
      16.5.2  屏幕閱讀器和display:none
      16.5.3  用“負(fù)位置”隱藏跳轉(zhuǎn)鏈接
      16.5.4  表單的標(biāo)簽
    16.6  使用制表鍵
    16.7  可訪問(wèn)性清單
    16.8  小結(jié)
  第17章  制作收藏夾圖標(biāo)
    17.1  創(chuàng)建簡(jiǎn)單的圖標(biāo)
    17.2  創(chuàng)建收藏夾圖標(biāo)
    17.3  小結(jié)
  第18章  搜索引擎優(yōu)化
    18.1  內(nèi)容為王
      18.1.1  “欺騙”搜索引擎
      18.1.2  到底什么是內(nèi)容
    18.2  選擇關(guān)鍵字
      18.2.1  猜想他們是如何找到你的
      18.2.2  決定你想如何被發(fā)現(xiàn)
      18.2.3  看看競(jìng)爭(zhēng)對(duì)手
      18.2.4  添加關(guān)鍵字
    18.3  完善頁(yè)面內(nèi)容
    18.4  不要因?yàn)閮?yōu)化而忽略了用戶
    18.5  你和鏈接
    18.6  到最后其實(shí)都是常識(shí)
    18.7  小結(jié)
  第19章  針對(duì)移動(dòng)設(shè)備的設(shè)計(jì)
    19.1  移動(dòng)用戶
    19.2  關(guān)于（很）小屏幕
    19.3  JavaScript
    19.4  提供移動(dòng)版
      19.4.1  移動(dòng)版樣式表
      19.4.2  用戶代理探測(cè)
      19.4.3  使用子域名
    19.5  做決定──到底要支持什么平臺(tái)
      19.5.1  在不產(chǎn)生重復(fù)內(nèi)容的情況下制作一個(gè)鏡像
      19.5.2  調(diào)整內(nèi)容
      19.5.3  處理程序
      19.5.4  進(jìn)一步改進(jìn)
    19.6  為移動(dòng)用戶做重構(gòu)
    19.7  小結(jié)
  第20章  測(cè)試與性能優(yōu)化
    20.1  優(yōu)化性能的策略
    20.2  確定影響性能的因素
      20.2.1  速度測(cè)試
      20.2.2  YSlow
    20.3  解決性能問(wèn)題
      20.3.1  設(shè)置超時(shí)報(bào)頭
      20.3.2  用ETag  改進(jìn)緩存
      20.3.3  用資源服務(wù)器分發(fā)請(qǐng)求
      20.3.4  文件壓縮
      20.3.5  壓縮腳本文件
    20.4  圖片優(yōu)化
    20.5  小結(jié)
  第21章  后續(xù)工作
    21.1  其他頁(yè)面和模板
    21.2  高級(jí)模板
    21.3  網(wǎng)格系統(tǒng)和CSS  框架
      21.3.1  YUI  網(wǎng)格
      21.3.2    網(wǎng)格系統(tǒng)
      21.3.3  框架不是萬(wàn)能的
    21.4  替換CSS
    21.5  不要忘記為有版權(quán)的照片付錢(qián)
    21.6  視覺(jué)效果
      21.6.1  縮放圖片
      21.6.2  寫(xiě)代碼
      21.6.3  把動(dòng)畫(huà)放到主頁(yè)上
    21.7  多試多做
  第22章  推薦閱讀
    22.1  色彩資源
    22.2  關(guān)于字體和排版的書(shū)
    22.3  技術(shù)書(shū)籍
    22.4  網(wǎng)站資源
參考書(shū)目

章節(jié)摘錄

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

媒體關(guān)注與評(píng)論

　　真希望我在第一次做網(wǎng)站的時(shí)候就能看到這本書(shū)。本書(shū)涵蓋了Web開(kāi)發(fā)的方方面面，當(dāng)你需要改進(jìn)網(wǎng)站時(shí)，這本書(shū)能為你解答很多問(wèn)題。　　——Shae Murphy，Social Brokerage CTO　　　　如果你已經(jīng)準(zhǔn)備好要踏入Web設(shè)計(jì)的奇妙世界，讀這本書(shū)可以讓你清晰且有效地了解那些關(guān)鍵概念。另外，輕松的行文風(fēng)格也使得閱讀本書(shū)是一種享受?！　　狫eff Cohen，Purple Workshops 創(chuàng)始人　　　　無(wú)論是初學(xué)者還是經(jīng)驗(yàn)豐富的設(shè)計(jì)師都能在這本書(shū)中有所收獲。從開(kāi)發(fā)人員的角度看，這本書(shū)在我的日常工作中發(fā)揮了巨大的作用，它讓我在組織頁(yè)面內(nèi)容的時(shí)候三思而后行?！　　狢hris Johnson，解決方案開(kāi)發(fā)專(zhuān)家　　　　在這本以開(kāi)發(fā)人員為目標(biāo)讀者的書(shū)中，模糊了一些公司中存在的設(shè)計(jì)團(tuán)隊(duì)和開(kāi)發(fā)團(tuán)隊(duì)之間的界限。畢竟，“程序員”也可以創(chuàng)造出美觀易用的頁(yè)面?！　　狫on Kinney，Avastone Technologies，Ruby構(gòu)架師　　　　“無(wú)論是初學(xué)者還是經(jīng)驗(yàn)豐富的設(shè)計(jì)師，都能在這本書(shū)中有所收獲。從開(kāi)發(fā)人員的角度看，這本書(shū)在我的日常工作中發(fā)揮了巨大作用，它讓我在組織頁(yè)面內(nèi)容的時(shí)候三思而后行?！薄　　狢hris Johnson，解決方案開(kāi)發(fā)專(zhuān)家

編輯推薦

　　《寫(xiě)給程序員的Web設(shè)計(jì)書(shū)》會(huì)開(kāi)發(fā)，也要懂設(shè)計(jì)，領(lǐng)悟先進(jìn)的Web設(shè)計(jì)理念，讓你的網(wǎng)站煜煜生輝。Web設(shè)計(jì)常常面對(duì)著一個(gè)很大的挑戰(zhàn)，它需要結(jié)合設(shè)計(jì)人員與程序員的思維。要跨越純視覺(jué)思考者和純線性思考者之間的交流鴻溝?，F(xiàn)實(shí)世界中。很多網(wǎng)站就是程序員設(shè)計(jì)的作品。如何讓程序員擁有設(shè)計(jì)者的視角，了解配色、字體、頁(yè)面布局等知識(shí)，并熟悉相關(guān)技術(shù)和設(shè)計(jì)工具，是《寫(xiě)給程序員的Web設(shè)計(jì)書(shū)》重點(diǎn)講述的內(nèi)容?！　　秾?xiě)給程序員的Web設(shè)計(jì)書(shū)》字里行間融匯了先進(jìn)的Web設(shè)計(jì)思想，讓開(kāi)發(fā)人員得以避免網(wǎng)頁(yè)設(shè)計(jì)誤區(qū)。真正提高設(shè)計(jì)能力。開(kāi)發(fā)出爽心悅目的網(wǎng)站。

圖書(shū)封面

圖書(shū)標(biāo)簽Tags

無(wú)

評(píng)論、評(píng)分、閱讀與下載

---

    寫(xiě)給程序員的Web設(shè)計(jì)書(shū) PDF格式下載

---