摘要：隨著Web標(biāo)準(zhǔn)在國內(nèi)的逐漸普及以及很多業(yè)內(nèi)人士的大力推行， 采用CSS+DIV對網(wǎng)站重構(gòu)日趨被大家重視起來了，很多大型網(wǎng)站已經(jīng)完成了重構(gòu)工作。Web標(biāo)準(zhǔn)提出將網(wǎng)頁的內(nèi)容與表現(xiàn)分離，同時要求HTML文檔要具有良好的結(jié)構(gòu)。在Web標(biāo)準(zhǔn)下，制作網(wǎng)站需要一定的知識和技巧，還有一定的流程。要制作一個具有特色的網(wǎng)頁也是需要一定方法與技巧。本文在這里主要探討了，在Web標(biāo)準(zhǔn)下，網(wǎng)站建設(shè)和網(wǎng)頁制作應(yīng)考慮的幾個問題。

關(guān)鍵詞：Web標(biāo)準(zhǔn)；CSS+DIV；重構(gòu)；網(wǎng)站建設(shè)

中圖分類號：TP393文獻(xiàn)標(biāo)識碼：A文章編號：1009-3044(2008)30-0754-02

The Main Consideration on the Web Site Construction

ZHAO Zhong-shu

(Liaoning University of International Business and Economics，DaLian 116052， China)

Abstract: With the wide spread of Web standard in China as well as the application by the experts in the field， CSS+DIV has attracted great attention when it is applied to the website reconstruction. And a lot of large websites have completed the work of reconstruction with it. The web standard proposes that the content of the webpage and its performance should be separated， and that the HTML document should be well constructed. Under the Web standard， it requires certain knowledge and skills as well as procedure to construct a website. And it is also true to make a webpage with special features. The article discusses the problems that should be taken into consideration in the procedure of constructing the website and making WebPages under the Web standard.

Key words: Web standard; CSS+DIV; reconstruction; Website construction

1 確定網(wǎng)站的標(biāo)題，網(wǎng)站空間排序適當(dāng)

一個網(wǎng)站很重要的就是標(biāo)題，標(biāo)題就像路牌一樣，讓瀏覽者在你的網(wǎng)站上逛來逛去，全靠它指路了。網(wǎng)站給人的第一印象是否能夠馬上注意到標(biāo)題，標(biāo)題要意義清晰、描述性強，把最吸引人的地方放在突出顯眼的位置，然后再慢慢展開。也可以把你的獨特內(nèi)容包裹成一個懸念，吸引人家注意。讀者看一篇文章，前三段注意力最集中，如果這“寸土寸金”的前三段用不好，瀏覽頁面的時間會變短。

網(wǎng)站空間排序適當(dāng)，要給人以和諧的感覺，頁面中的文字與圖形的布局要考慮到重點的突出，不能讓圖形淹沒文字，也不能圖形太少而讓人覺得單調(diào)。視覺的吸引和誘惑力是不能低估的。

2 網(wǎng)頁應(yīng)該易懂，要控制每個模塊的信息量

網(wǎng)站設(shè)計最重要的原則是網(wǎng)頁要易讀。也就是要多花費心思來規(guī)劃文字與背景顏色的搭配方案。注意不要使背景的顏色沖淡了文字的視覺效果，不應(yīng)用太多的顏色組合，讓人看你的網(wǎng)頁很費勁。一般來說，淺色背景下的深色文字為佳。

文字的字體不要設(shè)得太小，也不能太大。文字太小，容易讓人視覺疲勞；文字太大，或者文字視覺效果變化頻繁，像是沖著人大喊大叫，看起來不舒服。另外，最好讓文本左對齊，而不是居中。按當(dāng)代中文的閱讀習(xí)慣，文本大都居左對齊。當(dāng)然，標(biāo)題一般應(yīng)該居中，因為這符合讀者的閱讀習(xí)慣。

網(wǎng)站在內(nèi)容上要盡量要細(xì)致，讓人家能在最短的時間內(nèi)，了解你想呈現(xiàn)給人家什么。開門見山，直截了當(dāng)。立體規(guī)劃內(nèi)容，將所有部分按一定的構(gòu)架各就其位、分別納入不同層次的頁面。注意先要把最重要的內(nèi)容放到首頁上，其他的依次就緒。文本內(nèi)容盡量別讓其一行文字的寬度，橫跨整個屏幕。段落一多，讓人看起來很費勁，而其瀏覽器不同差別更大。最好別超過屏幕寬度的一半。

3 定位好網(wǎng)站的形象

網(wǎng)站也需要整體的形象包裝和設(shè)計。有創(chuàng)意的形象設(shè)計，對網(wǎng)站的宣傳推廣有事半功倍的效果。在網(wǎng)站主題和名稱定下來之后，需要思考的就是網(wǎng)站的形象。

1) 設(shè)計好網(wǎng)站的標(biāo)志(logo)。首先需要設(shè)計制作一個網(wǎng)站的標(biāo)志(logo)。就如同商標(biāo)一樣，logo是站點特色和內(nèi)涵的集中體現(xiàn)，看見logo就讓大家聯(lián)想起站點。標(biāo)志可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。標(biāo)志的設(shè)計創(chuàng)意來自網(wǎng)站的名稱和內(nèi)容。

2) 設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩。網(wǎng)站給人的第一印象來自視覺沖擊，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒。“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站型象和延伸內(nèi)涵的色彩。例如：IBM的深藍(lán)色，肯得基的紅色條型，Windows視窗標(biāo)志上的紅藍(lán)黃綠色塊，都使我們覺得很貼切，很和諧。

3) 設(shè)計網(wǎng)站的標(biāo)準(zhǔn)字體。和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志，標(biāo)題，主菜單的特有字體。一般我們網(wǎng)頁默認(rèn)的字體是宋體。為了體現(xiàn)站點的“與眾不同”和特有風(fēng)格，我門可以根據(jù)需要選擇一些特別字體。

4) 設(shè)計網(wǎng)站的宣傳標(biāo)語。也可以說是網(wǎng)站的精神，網(wǎng)站的目標(biāo)。用一句話甚至一個詞來高度概括。

以上四方面：標(biāo)志，色彩，字體，標(biāo)語，是一個網(wǎng)站樹立起形象的關(guān)鍵，確切的說是網(wǎng)站的表面文章，設(shè)計并完成這幾步，網(wǎng)站將脫胎換骨，整體形象有一個提高。

4 確定網(wǎng)站的欄目和版塊

建立一個網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰；也好比造一座高樓，首先要設(shè)計好框架圖紙，才能使樓房結(jié)構(gòu)合理。網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，內(nèi)容東一塊西一塊。結(jié)果不但瀏覽者看得糊涂，自己擴充和維護(hù)網(wǎng)站也相當(dāng)困難，網(wǎng)站或許就此半途而廢，所以，在動手制作網(wǎng)頁前，一定要考慮好以下三方面：

1) 確定欄目和版塊

2) 確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)

3) 確定網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計

首先來討論“確定網(wǎng)站的欄目和版塊”。網(wǎng)站的題材確定后，收集和組織了許多相關(guān)的資料內(nèi)容。能否吸引學(xué)生們來瀏覽網(wǎng)站。內(nèi)容放的位置、好東西在版面上的分布都是至關(guān)重要的。欄目的實質(zhì)是一個網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細(xì)考慮，合理安排。一般的網(wǎng)站欄目安排要注意以下幾方面：

1) 一定要緊扣主題

一般的做法是：將主題按一定的方法分類并將它們作為網(wǎng)站的主欄目。主題欄目個數(shù)在總欄目中要占絕對優(yōu)勢，這樣的網(wǎng)站明顯的專業(yè)，主題突出，容易給人留下深刻印象。

2) 設(shè)一個最近更新或網(wǎng)站指南欄目。這樣做是為了照顧常來的訪客，讓主頁更有人性化。

3) 設(shè)定一個可以雙向交流的欄目不需要很多，但一定要有。比如論壇，留言本，郵件列表等，可以讓瀏覽者留下他們的信息。

4)設(shè)一個下載或常見問題回答欄目網(wǎng)絡(luò)的特點是信息共享。也要設(shè)好其他的輔助內(nèi)容，如關(guān)于本站，版權(quán)信息等可以不放在主欄目里，以免沖淡主題。

5 在Web標(biāo)準(zhǔn)下設(shè)計網(wǎng)頁的注意的問題

1) 現(xiàn)在的網(wǎng)頁設(shè)計已漸漸趨向于根據(jù)內(nèi)容及結(jié)構(gòu)來出發(fā)設(shè)計頁面，但大部分人還是根據(jù)設(shè)計師設(shè)計的設(shè)計稿上去實現(xiàn)。因此對于整個網(wǎng)站框架設(shè)定是等3個頁面（首頁，分類導(dǎo)讀頁，內(nèi)容頁）設(shè)計稿出來之后才開始的，這樣能對整個網(wǎng)站有更全面些了解的基礎(chǔ)上去考慮問題。

2) 對圖片進(jìn)行壓縮的過程中，對于色彩使用不多，漸變較少的圖片壓縮時，可以盡量選擇png8的方式進(jìn)行導(dǎo)出，在使用的顏色模式上根據(jù)具體效果進(jìn)行調(diào)整，文件大小會比同等效果的gif文件小的多。

3) 對于透明的gif及png圖片導(dǎo)出，往往會出現(xiàn)鋸齒，特別是文字，這個時候可以嘗試兩種方法：

a.如果導(dǎo)出的圖片在要使用的地方背景是單色的或者顏色不多，可以在導(dǎo)出的時候再雜邊處選擇和背景一樣的顏色即可。

b.如果導(dǎo)出后的圖片是要用在背景色變化比較大的背景圖片上面時，你可以考慮給圖片加上一像素的陰影，這樣可以防止鋸齒的出現(xiàn)。

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

5) 對CSS樣式標(biāo)記進(jìn)行段落縮進(jìn)。使樣式代碼更清晰方便后期維護(hù)。

6) 給類型相同的頁面的body標(biāo)簽賦個ID屬性，這樣做的目的可以使某些的特殊要求的處理簡單化，列如在首頁的時候你希望導(dǎo)航菜單的對應(yīng)按鈕標(biāo)識一下，就可以根據(jù)body賦的ID屬性來判斷這是首頁，從而在樣式中對首頁的導(dǎo)航菜單中的“首頁”進(jìn)行特別的設(shè)置，于此類推到其它欄目中的欄目菜單，這樣就省去了服務(wù)器程序的處理或者逐個的修改工作。

參考文獻(xiàn)：

[1] Jakob Nielsen， Hoa Loranger.網(wǎng)站優(yōu)化---通過提高Web可用性構(gòu)建用戶滿意的網(wǎng)站[M].2007.

[2] Jeffrey Zeldman.網(wǎng)站重構(gòu)---應(yīng)用Web標(biāo)準(zhǔn)進(jìn)行設(shè)計[M].2004.

[3] 譚浩強、張翰韜.網(wǎng)頁設(shè)計技術(shù)與制作[M].2005.