首次完整小型站點架構的心得體會_網頁設計教程

推薦：設計細節不能丟
因為自己在設計的時候就對這些東西經常不是很在意，以為是很小的事情，結果往往給自己搞出不少的麻煩。可能大家沒有我這么粗心，不過還是想提醒一下跟我一樣的

http://www.jzfestival.com/

你現在看到的是我對近學習標準化網頁設計幾個月的一個測試結果。

這次我力爭將內容與樣式分離及考慮到盡可能多的重用性，在圖片壓縮上也花了很大功夫，但最終因為設計稿在制作的過程中沒有考慮到的一些原因導致某些圖片壓縮效果不夠理想。不過總體來說我自己對這次的作品還是很滿足的，還希望前輩們給我潑潑冷水。

以下總結一下這次項目過程中的一些心得：

第一，等對整體有個了解后再開始。隨說現在的網頁設計已漸漸趨向于根據內容及結構出發來設計頁面了，但不可否認大部分人還是在根據設計師給我們的的 psd 上去實現的過程中。因此這次對于整個網站框架的設定是等了 3 個頁面（首頁，分類導讀頁，內容頁）設計稿出來之后才開始的，這樣能在對整個網站有更全面些了解的基礎上去考慮問題。

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

第三，對于多出使用的一些背景圖片，最好能在同一張大圖上進行制作，然后通過 background-position 屬性來定位到要使用的背景位置，這樣第一可以防止鼠標滑動效果時可能因為網速問題導致的短暫空白現象，第二可以很方便的對網頁整體效果進行調整，只要對這張背景圖集合圖片進行如飽和度等下調整即可改編整個網站的風格，減低了改版成本。

第四，在對下屬無指定樣式的標記進行樣式設定時進行段落縮進。這點也可能是因為做程序員的原因，感覺這個方法能更清楚的了解整個樣式代碼。這個問題大家看看圖就會明白了。

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 樣式更能讓你讀懂呢，個人非常喜歡這樣的編碼習慣，雖然會損失一點點壓縮效果，但相對以后麻煩的維護工作來，不覺得“性價比”很高嗎？

第五，盡量別用 em 進行布局，因為各瀏覽器對標準字體大小的設置不一樣，em 用戶行距什么的還是沒啥大問題的。

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

分享：活著的頁面
討論時，同事無意間說了一句話“我感覺這個頁面很死”。的確，有些頁面一看就死氣沉沉的，甚至還會出現千百年沒更新的幻覺，具體說不上什么問題，感覺就是如此