淺談網(wǎng)頁設(shè)計與制作中應(yīng)遵循的一些原則

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

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

中圖分類號：TP393.092-4 文獻標識碼：A 文章編號：1007-9599 （2012） 21-0000-02

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

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

1 重點突出

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

2 對比

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

3 平衡

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

4 對齊

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

5 重復(fù)

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

6 流

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

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

6.1 命名

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

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

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

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

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

6.4 網(wǎng)站地圖

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

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

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

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