摘要：筆者擁有多年的網(wǎng)頁設(shè)計(jì)和制作經(jīng)驗(yàn)，本文以Dreamweaver Cs5為軟件平臺(tái)，把網(wǎng)頁設(shè)計(jì)與制作中應(yīng)遵循的一些基本原則總結(jié)并形成文字，和大家共同探討，以提高大家的網(wǎng)頁設(shè)計(jì)制作水平。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)；Dreamweaver Cs5；重點(diǎn)；平衡；流；代碼

中圖分類號(hào)：TP393.092-4 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9599 （2012） 21-0000-02

俗話說：“萬丈高樓平地起”，要想學(xué)好網(wǎng)頁設(shè)計(jì)制作，必須要了解在設(shè)計(jì)制作中應(yīng)遵循的一些原則。一直以來，我學(xué)習(xí)設(shè)計(jì)和制作的方法都是直接分析范例，了解設(shè)計(jì)者是如何解決各種實(shí)際問題的，這樣會(huì)起到事半功倍的效果。這種方法我覺得不僅對(duì)初學(xué)者有用，對(duì)于一些高手同樣也大有裨益。下面我把設(shè)計(jì)原則和制作原則分作兩塊闡述。

我們首先解讀一下網(wǎng)頁設(shè)計(jì)，網(wǎng)頁設(shè)計(jì)是一種建立在新型媒體之上的新型設(shè)計(jì)，是藝術(shù)設(shè)計(jì)類和計(jì)算機(jī)網(wǎng)絡(luò)類的交叉學(xué)科。具有視覺性強(qiáng)和互動(dòng)性強(qiáng)、受眾面廣等其他媒體所不具有的特點(diǎn)，它既有傳統(tǒng)媒體的優(yōu)點(diǎn)，又能使傳播變得更為直接、便捷和有效。網(wǎng)頁從最初到現(xiàn)在不斷呈現(xiàn)出新的潮流與模式，風(fēng)格日新月異，技術(shù)層出不窮，使人目不暇接。早期一些花里胡哨的設(shè)計(jì)目前已不再流行，代之的是更精致、更有目的性的樣式。根據(jù)多年的設(shè)計(jì)經(jīng)驗(yàn)我把設(shè)計(jì)原則歸納為以下幾點(diǎn)：

1 重點(diǎn)突出

重點(diǎn)即重要或意義重大的內(nèi)容。我們可以采取列舉頁面所有要素，然后按照其重要性來編號(hào)的方法，再基于這樣一個(gè)列表來設(shè)計(jì)視覺層次結(jié)構(gòu)，從而在視覺上突出你要表現(xiàn)的重點(diǎn)內(nèi)容。不能聽其自然，試圖強(qiáng)調(diào)一切，那么結(jié)果會(huì)是什么都沒強(qiáng)調(diào)。例如：有些網(wǎng)站會(huì)用大而醒目的文本并把其放置在頁面頂部的方法；有些網(wǎng)站會(huì)用色彩區(qū)域標(biāo)出的方法；有些網(wǎng)站會(huì)用不同面積顯示的方法等等。這些方法的使用都是一個(gè)目的吸引訪客關(guān)注重點(diǎn)。

2 對(duì)比

對(duì)比是兩個(gè)或更多個(gè)元素之間的視覺差異。有大量的設(shè)計(jì)元素可供巧妙地利用來實(shí)現(xiàn)對(duì)比，包括顏色、尺寸、布局、字體及字號(hào)等。設(shè)計(jì)中的對(duì)比能給網(wǎng)站帶來視覺上的變化，不會(huì)讓人覺得索然無味。還能幫助網(wǎng)站聚集焦點(diǎn)，解決對(duì)某些元素作為重點(diǎn)的需求。

3 平衡

平衡原則主要考慮設(shè)計(jì)中的元素如何分布，以及它們與頁面中視覺重量的整體布局有何關(guān)系。這會(huì)給視覺的穩(wěn)定性帶來相當(dāng)大的影響。平衡有兩種方式：對(duì)稱和不對(duì)稱。當(dāng)頁面的設(shè)計(jì)關(guān)于某條軸線對(duì)稱，并且軸線兩邊的視覺重量相同時(shí)，這就實(shí)現(xiàn)了對(duì)稱平衡。當(dāng)頁面的視覺重量被均勻分布到對(duì)稱軸上，而對(duì)稱軸兩邊的個(gè)體元素并不相對(duì)應(yīng)時(shí)，這就形成了不對(duì)稱平衡。我們要用一些元素去實(shí)現(xiàn)整體上的視覺平衡，不對(duì)稱平衡是一種在設(shè)計(jì)網(wǎng)頁時(shí)更加自然的處理手段。我們可以用直覺來處理平衡問題。

4 對(duì)齊

對(duì)齊是指以盡可能協(xié)調(diào)的方式將元素的自然邊界排列起來的過程。這樣，這些元素便統(tǒng)一成了一個(gè)更大的整體。網(wǎng)頁中如果忽視了對(duì)齊，會(huì)使元素看上去很分散，缺乏統(tǒng)一性。這時(shí)我們常常會(huì)用到欄和網(wǎng)格，我們只需要看看邊線就能完全達(dá)到我們的意圖。當(dāng)然對(duì)齊也是一個(gè)可以自我調(diào)整的原則，不必嚴(yán)格遵守，有時(shí)也可以打破它。

5 重復(fù)

重復(fù)的表現(xiàn)形式多種多樣，包括圖像、顏色、線條、形狀、以及整體的風(fēng)格等。如果一個(gè)網(wǎng)頁設(shè)計(jì)中沒有重復(fù)的元素，它通常會(huì)給人缺乏統(tǒng)一性和銜接不緊密的感覺，因此重復(fù)往往是一個(gè)必不可少的設(shè)計(jì)原則。它的一個(gè)巨大的好處是可預(yù)測(cè)性。如果網(wǎng)站以統(tǒng)一的方式來展現(xiàn)各個(gè)關(guān)鍵元素，那么用戶一看到那熟悉的樣式就知道其代表的含義是什么了。

6 流

流指用戶瀏覽網(wǎng)頁的路徑。主要是由重點(diǎn)和對(duì)比等元素的具體使用情況而決定的。事實(shí)上流完全取決于其他元素的綜合運(yùn)用。每個(gè)網(wǎng)站都有一個(gè)流，選定的標(biāo)準(zhǔn)應(yīng)該是：順暢、舒適、以及盡可能自然。一般而言，人們的視線都是從左到右、由上至下的，所以我們必須考慮這種自然順序。這樣就會(huì)使流恰到好處，將會(huì)讓用戶順著一條優(yōu)美而穩(wěn)定的路徑瀏覽網(wǎng)頁。

再好的設(shè)計(jì)也要通過制作才能把作品呈現(xiàn)給大家。網(wǎng)頁制作就是對(duì)切割好的網(wǎng)頁進(jìn)行優(yōu)化設(shè)置，對(duì)圖片、文字、動(dòng)畫等進(jìn)行排版操作。Dreamweaver Cs5是現(xiàn)在最為流行的頁面編輯軟件，可用于對(duì)Web站點(diǎn)、網(wǎng)頁進(jìn)行設(shè)計(jì)和開發(fā)。下面把筆者在使用此款軟件制作網(wǎng)頁時(shí)應(yīng)遵循的主要原則簡(jiǎn)述如下：

6.1 命名

一個(gè)網(wǎng)站不可能只由一個(gè)網(wǎng)頁組成，它還有許多子頁面。為了能使這些頁面有效地被鏈接起來，網(wǎng)頁開發(fā)者最好給這些頁面起一些有代表性的而且簡(jiǎn)潔易記的英文或拼音網(wǎng)頁名稱。這樣，既有助于方便地管理網(wǎng)頁，又會(huì)有助于網(wǎng)站的關(guān)鍵詞排名。

6.2 網(wǎng)站的目錄結(jié)構(gòu)

目錄結(jié)構(gòu)的好壞，對(duì)瀏覽者來說并沒有什么太大的感覺，但是對(duì)于站點(diǎn)本身的上傳維護(hù)，內(nèi)容未來的擴(kuò)充和移植有著重要的影響。所以整個(gè)網(wǎng)站的架構(gòu)和目錄設(shè)計(jì)要清晰，復(fù)雜的目錄有可能會(huì)使搜索引擎迷失方向，從而錯(cuò)過一些網(wǎng)站信息。網(wǎng)站的目錄層級(jí)不要太深，資深人士建議網(wǎng)站上的所有頁面最多不要超過5次點(diǎn)擊就能達(dá)到。越重要的網(wǎng)頁放在越頂層的目錄里，這樣既可以提高收錄速度，也會(huì)提高相應(yīng)頁面的權(quán)重。目錄名稱盡量使用短小的英文，以免顯示錯(cuò)誤。

6.3 網(wǎng)站的內(nèi)部鏈接

好的網(wǎng)站內(nèi)部鏈接應(yīng)形成一個(gè)強(qiáng)大的網(wǎng)絡(luò)，這樣能夠提升網(wǎng)站的權(quán)重，也能夠提高搜索引擎對(duì)網(wǎng)站的收錄量和收錄速度。要想形成網(wǎng)絡(luò)，首先每個(gè)頁面都應(yīng)該出現(xiàn)指向主頁或重要頁面的鏈接。可以通過網(wǎng)站的logo、導(dǎo)航、關(guān)鍵詞等鏈接的形式進(jìn)行指向。其次，在文章內(nèi)容頁，可以增加一些相關(guān)鏈接。比如有一篇文章，是關(guān)于聯(lián)想打印機(jī)的介紹。那么在文章的最后可以加上同一個(gè)網(wǎng)站中關(guān)于惠普等品牌打印機(jī)文章的鏈接。這樣既豐富了用戶的閱讀體驗(yàn)，也增加了搜索引擎對(duì)于網(wǎng)站“內(nèi)容相關(guān)性”這一重要方面的認(rèn)可。

6.4 網(wǎng)站地圖

網(wǎng)站地圖，又稱站點(diǎn)地圖，它就是一個(gè)頁面，上面放置了網(wǎng)站上所有頁面的鏈接。大多數(shù)人在網(wǎng)站上找不到自己所需要的信息時(shí)，可能會(huì)將網(wǎng)站地圖作為一種補(bǔ)救措施。能夠幫助用戶更快的查詢到所需要的信息，同時(shí)為搜索引擎提供綠色通道，使引擎程序迅速收錄主要網(wǎng)頁，得到較好的排名，讓用戶更容易找到您的站。

6.5 合理應(yīng)用多媒體技術(shù)

頁面的內(nèi)容可以用圖片、三維動(dòng)畫、Flash等來表現(xiàn)，但同時(shí)也要保證快速的訪問速度。大多數(shù)瀏覽者不會(huì)進(jìn)入需要等待5分鐘才能進(jìn)入的網(wǎng)站。所以設(shè)計(jì)網(wǎng)站時(shí)應(yīng)該盡量合理使用多媒體技術(shù)，通常將主要頁面的容量控制在50KB以內(nèi)，平均3OKB左右，以確保普通瀏覽者等待頁面的時(shí)間不超過10秒鐘。

要做一個(gè)好的網(wǎng)站并不容易，由其是現(xiàn)代社會(huì)飛速發(fā)展，新技術(shù)層出不窮。但從另一方面來說，在當(dāng)今社會(huì)多掌握一門技術(shù)就多一分成功的把握，而網(wǎng)頁制作技術(shù)是其中重要且最基礎(chǔ)的部分。因而想做出一個(gè)好的網(wǎng)站必須付出不懈的努力與奮斗，它不僅體現(xiàn)了一個(gè)人的計(jì)算機(jī)技術(shù)水平，更是一個(gè)人綜合素質(zhì)的展現(xiàn)。