建設(shè)一個(gè)優(yōu)秀的網(wǎng)站我們都應(yīng)該注意些什么呢？

　　如何才能讓網(wǎng)站更優(yōu)秀，更適合W3C標(biāo)準(zhǔn)及具有良好的用戶體驗(yàn)，這是很多網(wǎng)頁(yè)制作人員都面臨的問(wèn)題，也是大家都想知道的東西，netgather站長(zhǎng)在長(zhǎng)期的實(shí)踐工作中終結(jié)了下面幾點(diǎn)，希望能給大家?guī)?lái)幫助，不足之處請(qǐng)批評(píng)指正。 1. 領(lǐng)會(huì)網(wǎng)站的主題，明確網(wǎng)站里展示的內(nèi)容以及大部分瀏覽群體情況

　　想建一個(gè)網(wǎng)站，并且是一個(gè)對(duì)用戶有用的網(wǎng)站，首先就應(yīng)該考慮網(wǎng)站的內(nèi)容以及網(wǎng)站功能，用戶需要什么？他們?cè)趺纯旖莘奖愕恼业较胍臇|西？作為一個(gè)網(wǎng)站設(shè)計(jì)師在整個(gè)設(shè)計(jì)的時(shí)候都應(yīng)該圍繞這個(gè)方面來(lái)進(jìn)行。如果用戶不能夠迅速得到他們想要的東西，或是你的網(wǎng)站操作不便捷，那么這個(gè)網(wǎng)站就是失敗的。用戶就會(huì)失望而去，可能永遠(yuǎn)都不會(huì)再登錄你的網(wǎng)站。一個(gè)小例子：如果你想做了一個(gè)股票方面的網(wǎng)站，但網(wǎng)站的字體大小都是12px的字，你想想，現(xiàn)在退休在家的老人，炒股的人數(shù)可不是一個(gè)小數(shù)目，就算你的網(wǎng)站內(nèi)容再好再精辟，他們也不可能拿著放大鏡對(duì)著顯示器看你的網(wǎng)站吧，結(jié)果只是讓你流失了大批的用戶。

　　2.合理的顏色搭配

　　對(duì)于一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師，設(shè)計(jì)的過(guò)程是痛苦的也是快樂(lè)的，明確要做一個(gè)什么樣的網(wǎng)站之后，要把主題更合理的體現(xiàn)出來(lái)都會(huì)經(jīng)過(guò)一個(gè)選色和排版的過(guò)程。個(gè)人認(rèn)為，如果不是做一個(gè)超弦的個(gè)性化網(wǎng)站，那么顏色搭配并非是一件難事。第一，明確主色。其實(shí)顏色的行業(yè)特性并不很重，只是人們對(duì)一個(gè)行業(yè)的感知才造成了行業(yè)與顏色搭配的關(guān)聯(lián)，比如做一個(gè)賓儀館網(wǎng)站，當(dāng)然不能能紅色，為什么？其實(shí)歸根于人的感知，因?yàn)?我們都認(rèn)為紅色是種喜慶的顏色，因而與賓儀館不相符。像藍(lán)色一般用在科技或技術(shù)型網(wǎng)站較好，粉紅用在女性化方面的網(wǎng)站較好等。第二，輔色和點(diǎn)睛色，一個(gè)網(wǎng)站主體顏色確認(rèn)，還須輔色和點(diǎn)睛色，輔色較多采用同種色彩搭配和鄰近色彩搭配。同種色彩搭配就是按主色改變其透明度、飽和度、變淡或加深頁(yè)得來(lái)，鄰近色彩搭配就是按主色取色環(huán)上相鄰的顏色，如紅色與橙色。點(diǎn)睛色一般與主色相差較大，一般用在網(wǎng)頁(yè)比較重要的內(nèi)容或按鈕，其作用為吸引用戶視線、清楚網(wǎng)頁(yè)給人視覺(jué)的疲勞，點(diǎn)睛色合理使用，避免太多的出現(xiàn)，否則就會(huì)適得其反。

　　3.良好的網(wǎng)頁(yè)布局

　　網(wǎng)頁(yè)布局應(yīng)該把握的要素是主次分明、協(xié)調(diào)整潔、尊重用戶的視覺(jué)習(xí)慣，合理按排內(nèi)容。把用戶想要的東西盡可能的首先展示在眼前，同時(shí)注意潛在的引導(dǎo)用戶行為。俗話說(shuō)：好記性不如爛筆頭，在設(shè)計(jì)一個(gè)網(wǎng)站界面的時(shí)候，我們應(yīng)該先用鉛筆勾畫(huà)出網(wǎng)站的排版草圖，達(dá)到理想的效果后再用制圖軟件加以制作和修飾。細(xì)節(jié)決定成敗，在設(shè)計(jì)效果圖之中，盡量少用大的色塊、突出導(dǎo)航、版塊分明，以達(dá)到干凈簡(jiǎn)潔整齊協(xié)調(diào)的效果。比如導(dǎo)航條適當(dāng)加入鼠標(biāo)效果；網(wǎng)頁(yè)線條避免色差太大；輪廓陰影別太明顯，若有若無(wú)最好；適當(dāng)圖文并茂；網(wǎng)頁(yè)版塊間距大小合理且統(tǒng)一；同級(jí)別文字樣式統(tǒng)一；尊重日常生活物理特性達(dá)到*真的效果（比如光照那邊變亮，那邊稍淡，再如一條彩帶繞過(guò)一物體，轉(zhuǎn)折處應(yīng)該稍有突出且有細(xì)微圓角陰影）……當(dāng)網(wǎng)頁(yè)效果圖制作確認(rèn)完后，我們就要著手html頁(yè)面的制作了。

　　4.網(wǎng)頁(yè)title及meta

　　網(wǎng)頁(yè)的title及meta應(yīng)該跟根基不出欄目及內(nèi)容頁(yè)而定，切勿全站使用一種的形式，keywords可不用加，對(duì)搜索引擎作用不大，頭部標(biāo)簽避免關(guān)鍵字堆切。

　　5.h1—h6標(biāo)簽的使用

　　一個(gè)網(wǎng)頁(yè)h1標(biāo)簽只能用一次。在一個(gè)網(wǎng)站的首頁(yè)、頻道頁(yè)、列表頁(yè)，h1標(biāo)簽可以分別用于網(wǎng)站的名稱、頻道名稱、欄目列表名稱，但在一個(gè)網(wǎng)站的文章詳情頁(yè)，h1標(biāo)簽一定要用在文章標(biāo)題上。h2—h6標(biāo)簽可以在一個(gè)頁(yè)面重復(fù)使用，依次遵守網(wǎng)站層次結(jié)構(gòu)。

　　6.css文件

　　盡量從外部用link導(dǎo)入css文件，寫(xiě)一個(gè)自己經(jīng)常使用的重設(shè)css樣式reset.css。避免使用*{}。一種樣式寫(xiě)在一行，減小文件大小，能用class定義的盡量使用而減少用id定義，盡量避免針對(duì)不同瀏覽器而使用的css hack技巧，萬(wàn)不得己而為之。

　　7.背景圖的優(yōu)化

　　除網(wǎng)站實(shí)際內(nèi)容之外框架使用的圖片，盡量定義在css文件中，根據(jù)實(shí)際，盡可能把背景圖合并，以提高加載速度。最好不要使一張很小很小的圖片平鋪一個(gè)較大的范圍。

　　8.div+css布局，減小頁(yè)面嵌套

　　用div+css布局目的就是為了減小頁(yè)面代碼，使網(wǎng)站結(jié)構(gòu)層次化分明，內(nèi)容與表現(xiàn)形式能分離。減小嵌套不只對(duì)搜索引擎友好，也有利于減小頁(yè)面大小更方便后期維護(hù)修改。

　　9.優(yōu)化頁(yè)面js

　　能合并的js文件合并成一個(gè)，減少大規(guī)模循環(huán)和過(guò)多的層級(jí)引用，提高提高加載和運(yùn)行速度。

　　10.避免死鏈接及空連接

　　對(duì)用戶而言，如果點(diǎn)擊一篇他們想要的文章打開(kāi)的是“該頁(yè)無(wú)法顯示”，那將是多少沮喪的事情。

　　11. 適當(dāng)?shù)奈淖趾蛨D形并茂

　　不要刻意用圖片填充您的網(wǎng)站，搜索引擎除了能拿到alt屬性外，他們不認(rèn)識(shí)圖片。在適當(dāng)?shù)奈恢眉由蠄D片，有助于吸引訪問(wèn)者，消除看大篇文字的疲勞。

　　12.網(wǎng)頁(yè)圖片的要求

　　網(wǎng)頁(yè)圖片加上alt屬性以及寬高屬性，不要刻意壓縮圖片，確保圖片顯示不變形。