推薦：設(shè)計(jì)細(xì)節(jié)不能丟
因?yàn)樽约涸谠O(shè)計(jì)的時(shí)候就對(duì)這些東西經(jīng)常不是很在意，以為是很小的事情，結(jié)果往往給自己搞出不少的麻煩�？赡艽蠹覜](méi)有我這么粗心，不過(guò)還是想提醒一下跟我一樣的

http://www.jzfestival.com/

你現(xiàn)在看到的是我對(duì)近學(xué)習(xí)標(biāo)準(zhǔn)化網(wǎng)頁(yè)設(shè)計(jì)幾個(gè)月的一個(gè)測(cè)試結(jié)果。

這次我力爭(zhēng)將內(nèi)容與樣式分離及考慮到盡可能多的重用性，在圖片壓縮上也花了很大功夫，但最終因?yàn)樵O(shè)計(jì)稿在制作的過(guò)程中沒(méi)有考慮到的一些原因?qū)е履承﹫D片壓縮效果不夠理想。不過(guò)總體來(lái)說(shuō)我自己對(duì)這次的作品還是很滿足的，還希望前輩們給我潑潑冷水。

以下總結(jié)一下這次項(xiàng)目過(guò)程中的一些心得：

第一，等對(duì)整體有個(gè)了解后再開(kāi)始。隨說(shuō)現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)已漸漸趨向于根據(jù)內(nèi)容及結(jié)構(gòu)出發(fā)來(lái)設(shè)計(jì)頁(yè)面了，但不可否認(rèn)大部分人還是在根據(jù)設(shè)計(jì)師給我們的的 psd 上去實(shí)現(xiàn)的過(guò)程中。因此這次對(duì)于整個(gè)網(wǎng)站框架的設(shè)定是等了 3 個(gè)頁(yè)面（首頁(yè)，分類(lèi)導(dǎo)讀頁(yè)，內(nèi)容頁(yè)）設(shè)計(jì)稿出來(lái)之后才開(kāi)始的，這樣能在對(duì)整個(gè)網(wǎng)站有更全面些了解的基礎(chǔ)上去考慮問(wèn)題。

第二，在對(duì)圖片進(jìn)行壓縮的過(guò)程中有些小技巧的發(fā)現(xiàn)。對(duì)于色彩使用不多，漸變較少的圖片壓縮時(shí)，可以盡量選擇 png8 的方式進(jìn)行導(dǎo)出，當(dāng)然在使用的顏色模式上根據(jù)具體效果進(jìn)行調(diào)整，你會(huì)發(fā)現(xiàn)文件大小會(huì)比同等效果的 gif 小很多。然后就是對(duì)于透明 gif 及 png 圖片的導(dǎo)出，往往會(huì)出現(xiàn)鋸齒，非凡是文字，這個(gè)時(shí)候可以嘗試兩種方式：1.假如欲導(dǎo)出的圖片在要使用的地方背景是單色的或者顏色不多變，可以在導(dǎo)出的時(shí)候在雜邊處選擇和背景一樣的顏色即可，通暢會(huì)好很多。2:假如導(dǎo)出后的圖片是要用在背景色變化比較大的背景圖片上面時(shí)，你可以考慮給圖片加上一像素的陰影，這樣即可防止鋸齒的出現(xiàn)。

第三，對(duì)于多出使用的一些背景圖片，最好能在同一張大圖上進(jìn)行制作，然后通過(guò) background-position 屬性來(lái)定位到要使用的背景位置，這樣第一可以防止鼠標(biāo)滑動(dòng)效果時(shí)可能因?yàn)榫W(wǎng)速問(wèn)題導(dǎo)致的短暫空白現(xiàn)象，第二可以很方便的對(duì)網(wǎng)頁(yè)整體效果進(jìn)行調(diào)整，只要對(duì)這張背景圖集合圖片進(jìn)行如飽和度等下調(diào)整即可改編整個(gè)網(wǎng)站的風(fēng)格，減低了改版成本。

第四，在對(duì)下屬無(wú)指定樣式的標(biāo)記進(jìn)行樣式設(shè)定時(shí)進(jìn)行段落縮進(jìn)。這點(diǎn)也可能是因?yàn)樽龀绦騿T的原因，感覺(jué)這個(gè)方法能更清楚的了解整個(gè)樣式代碼。這個(gè)問(wèn)題大家看看圖就會(huì)明白了。

div.box_top {
background-position:top right;
padding:4px 0 0 4px;
}
div.box_top h2 {
background-position:top left;
margin:0;
padding:0;
}
div.box_inner {
background-position:bottom left;
margin-right:4px;
padding:0 0 4px 4px;
}
div.box_inner dl {
border:1px solid #cad3e2;
}
div.box_inner dl dt {
position:relative;
background:url(../images/bg_common.png) repeat-x 0 -20px;
font-size:12px;
height:25px;
line-height:1.8em;
padding:0 10px 0 18px;
color:#666;
}
div.box_inner dl dt em {
position:absolute;
top:-2px;
right:10px;
font-style:normal;
font-size:9px;
}
div.box_inner dl dt span {
color:#c00;
}
div.box_inner dl dt span a{
color:#c00;
}
div.box_inner dl dd {
clear:both;
padding:8px 10px 5px;
font-size:12px;
}

是不是這樣的 CSS 樣式更能讓你讀懂呢，個(gè)人非常喜歡這樣的編碼習(xí)慣，雖然會(huì)損失一點(diǎn)點(diǎn)壓縮效果，但相對(duì)以后麻煩的維護(hù)工作來(lái)，不覺(jué)得“性價(jià)比”很高嗎？

第五，盡量別用 em 進(jìn)行布局，因?yàn)楦鳛g覽器對(duì)標(biāo)準(zhǔn)字體大小的設(shè)置不一樣，em 用戶行距什么的還是沒(méi)啥大問(wèn)題的。

第六，給一類(lèi)設(shè)置每一個(gè)頁(yè)面的 body 賦個(gè) ID，不論在樣式中會(huì)否用到它。這樣做的目的會(huì)讓今后對(duì)某些的非凡要求的處理簡(jiǎn)單化，比如在首頁(yè)的時(shí)候你希望導(dǎo)航菜單的對(duì)應(yīng)按鈕標(biāo)識(shí)一下，就可以根據(jù)我給 body 賦的 ID 里來(lái)判定這是首頁(yè)，從而在樣式中對(duì)首頁(yè)的導(dǎo)航菜單中的“首頁(yè)”進(jìn)行非凡的設(shè)置，于此類(lèi)推到其它欄目中的欄目菜單，這樣就省去了服務(wù)端程序的處理或者逐個(gè)的修改工作。

分享：活著的頁(yè)面
討論時(shí)，同事無(wú)意間說(shuō)了一句話“我感覺(jué)這個(gè)頁(yè)面很死”。的確，有些頁(yè)面一看就死氣沉沉的，甚至還會(huì)出現(xiàn)千百年沒(méi)更新的幻覺(jué)，具體說(shuō)不上什么問(wèn)題，感覺(jué)就是如此