-
如何讓網站更優秀，更適合W3C標準及具有良好的用戶體驗，這是許多網頁製作人員都面臨的問題，也是大家都想知道的東西，netgather站長在長期的實踐工作中終結了下面幾點，希望能帶給大家幫助，不足之處請批評指正。
1. 領會網站的主題，明確網站裡展示的內容以及大部分瀏覽群體狀況
想建立一個網站，並且是一個對用戶有用的網站，首先就應該考慮網站的內容以及網站功能，用戶需要什麼? 他們怎麼快捷方便的找到想要的東西?作為一個網站設計師在整個設計的時候都應該圍繞著這個方面來進行。如果使用者無法迅速得到他們想要的東西，或是你的網站操作不便捷，那麼這個網站就是失敗的。使用者就會失望而去，可能永遠不會再登入你的網站。一個小例子：如果你想做了一個股票方面的網站，但網站的字體大小都是12px的字，你想想，現在退休在家的老人，炒股的人數可不是一個小數目，就算你的網站內容再好再精闢，他們也不可能拿著放大鏡對著顯示器看你的網站吧，結果只是讓你流失了大批的用戶。
2.合理的顏色搭配
對於一個網頁設計師，設計的過程是痛苦的也是快樂的，明確要做一個什麼樣的網站之後，要把主題更合理的體現出來都會經過一個選色和排版的過程。個人認為，如果不是做一個超弦的個人化網站，那麼顏色搭配並非是一件難事。第一，明確主色。其實顏色的行業特性並不很重，只是人們對一個行業的感知才造成了行業與顏色搭配的關聯，比如做一個賓儀館網站，當然不能能紅色，為什麼?其實歸根結底於人的感知，因為我們都認為紅色是種喜慶的顏色，因而與賓儀館不符。像藍色一般用在科技或技術型網站較好，粉紅用在女性化方面的網站較好等。第二，輔色和點睛色，一個網站主體顏色確認，還須輔色和點睛色，輔色較多採用同種色彩搭配和鄰近色彩搭配。同種色彩搭配就是依主色改變其透明度、飽和度、變淡或加深頁得來，鄰近色彩搭配就是按主色取色環上相鄰的顏色，如紅色與橙色。點睛色一般與主色相差較大，一般用在網頁比較重要的內容或按鈕，其作用為吸引用戶視線、清楚網頁給人視覺的疲勞，點睛色合理使用，避免太多的出現，否則就會適得其反。
3.良好的網頁佈局
網頁版面要掌握的要素是主次分明、協調整潔、尊重使用者的視覺習慣，合理按排內容。把使用者想要的東西盡可能的先展示在眼前，同時注意潛在的引導使用者行為。俗話說：好記性不如爛筆頭，在設計一個網站介面的時候，我們應該先用鉛筆勾畫出網站的排版草圖，達到理想的效果後再用製圖軟體加以製作和修飾。細節決定成敗，在設計效果圖之中，盡量少用大的色塊、突出導航、版塊分明，以達到乾淨簡潔整齊協調的效果。例如導航條適當加入滑鼠效果;網頁線條避免色差太大;輪廓陰影別太明顯，若有若無最好;適當圖文並茂;網頁版塊間距大小合理且統一;同級別文字樣式統一;尊重日常生活物理特性達到逼真的效果(例如光照那邊變亮，那邊稍淡，再如一條彩帶繞過一物體，轉折處應該稍有突出且有細微圓角陰影)…
當網頁效果圖製作確認完後，我們就要著手html頁面的製作了。
4.網頁title及meta
網頁的title及meta應該跟根基不出欄目及內容頁而定，切勿全站使用一種的形式，keyWords可不用加，對搜尋引擎作用不大，頭部標籤避免關鍵字堆切。
5.h1—h6標籤的使用
一個網頁h1標籤只能用一次。在一個網站的首頁、頻道頁、清單頁，h1標籤可以分別用於網站的名稱、頻道名稱、欄位清單名稱，但在一個網站的文章詳情頁，h1標籤一定要用在文章標題上。 h2—h6標籤可以在一個頁面重複使用，依序遵守網站層次結構。
6.CSS文件
盡量從外部用link匯入css文件，寫一個自己常用的重置css樣式reset.css。避免使用*{}。一種樣式寫在一行，減少檔案大小，能用class定義的盡量使用而減少用id定義，盡量避免針對不同瀏覽器而使用的css hack技巧，萬不得己而為之。
7.背景圖的優化
除網站實際內容之外框架使用的圖片，盡量定義在css檔案中，根據實際，盡可能把背景圖合併，以提高載入速度。最好不要使一張很小很小的圖片平舖一個較大的範圍。
8.div+css佈局，縮小頁面嵌套
用div+css佈局目的就是為了減少頁面程式碼，讓網站結構層次化分明，內容與表現形式能分離。縮小嵌套不僅對搜尋引擎友好，也有利於減少頁面大小更方便後期維護修改。
9.優化頁面js
能合併的js檔案合併成一個，減少大規模循環和過多的層級引用，提高提高載入和運行速度。
10.避免死連結及空連接
對用戶而言，如果點擊一篇他們想要的文章打開的是“該頁無法顯示”，那將是多少沮喪的事情。
11. 適當的文字和圖形並茂
不要刻意用圖片填滿您的網站，搜尋引擎除了能拿到alt屬性外，他們不認識圖片。在適當的位置加上圖片，有助於吸引訪客，消除看大篇文字的疲勞。
12.網頁圖片的要求
網頁圖片加上alt屬性以及寬高屬性，不要刻意壓縮圖片，確保圖片顯示不會變形。
13. 在不同的瀏覽器中測試您的網站。
為了讓更多人能正常瀏覽您的網站，請用不同主流瀏覽器測試一下您的頁面，確保您的網站都能正常運作。
14.通過W3C驗證。
http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
作者tomato 的個人空