淺議網(wǎng)頁設計及制作中應遵循一些原則

1、淺議網(wǎng)頁設計及制作中應遵循一些原則摘要：筆者擁有多年的網(wǎng)頁設計和制作經(jīng)驗，本文以 dreamweaver cs5為軟件平臺，把網(wǎng)頁設計與制作中應遵循 的一些基本原則總結(jié)并形成文字，和大家共同探討，以提高 大家的網(wǎng)頁設計制作水平。關鍵詞：網(wǎng)頁設計；dreamweaver cs5；重點；平衡； 流；代碼中圖分類號：tp393. 092-4文獻標識碼：a文章編號： 1007-9599(2012) 21-0000-02俗話說：''萬丈髙樓平地起”，要想學好網(wǎng)頁設計制作, 必須要了解在設計制作中應遵循的一些原則。一直以來，我 學習設計和制作的方法都是直接分析范例，了解設計者是如 何解決各

2、種實際問題的，這樣會起到事半功倍的效果。這種 方法我覺得不僅對初學者有用，對于一些高手同樣也大有裨 益。下面我把設計原則和制作原則分作兩塊闡述。我們首先解讀一下網(wǎng)頁設計，網(wǎng)頁設計是一種建立在新 型媒體之上的新型設計，是藝術設計類和計算機網(wǎng)絡類的交 叉學科。具有視覺性強和互動性強、受眾面廣等其他媒體所 不具有的特點，它既有傳統(tǒng)媒體的優(yōu)點，又能使傳播變得更 為直接、便捷和有效。網(wǎng)頁從最初到現(xiàn)在不斷呈現(xiàn)出新的潮 流與模式，風格日新月異，技術層出不窮，使人目不暇接。 早期一些花里胡哨的設計目前已不再流行，代之的是更精 致、更有目的性的樣式。根據(jù)多年的設計經(jīng)驗我把設計原則 歸納為以下幾點：1重點突出重點

3、即重要或意義重大的內(nèi)容。我們可以采取列舉頁面 所有要素，然后按照其重要性來編號的方法，再基于這樣一 個列表來設計視覺層次結(jié)構，從而在視覺上突出你要表現(xiàn)的 重點內(nèi)容。不能聽其自然，試圖強調(diào)一切，那么結(jié)果會是什 么都沒強調(diào)。例如：有些網(wǎng)站會用大而醒目的文本并把其放 置在頁面頂部的方法；有些網(wǎng)站會用色彩區(qū)域標出的方法； 有些網(wǎng)站會用不同面積顯示的方法等等。這些方法的使用都 是一個目的吸引訪客關注重點。2對比對比是兩個或更多個元素之間的視覺差異。有大量的設 計元素可供巧妙地利用來實現(xiàn)對比，包括顏色、尺寸、布局、 字體及字號等。設計中的對比能給網(wǎng)站帶來視覺上的變化， 不會讓人覺得索然無味。還能幫助網(wǎng)站聚

4、集焦點，解決對某 些元素作為重點的需求。3平衡平衡原則主要考慮設計中的元素如何分布，以及它們與 頁面中視覺重量的整體布局有何關系。這會給視覺的穩(wěn)定性 帶來相當大的影響。平衡有兩種方式：對稱和不對稱。當頁 面的設計關于某條軸線對稱，并且軸線兩邊的視覺重量相同 時，這就實現(xiàn)了對稱平衡。當頁面的視覺重量被均勻分布到 對稱軸上，而對稱軸兩邊的個體元素并不相對應時，這就形 成了不對稱平衡。我們要用一些元素去實現(xiàn)整體上的視覺平 衡，不對稱平衡是一種在設計網(wǎng)頁時更加自然的處理手段。 我們可以用直覺來處理平衡問題。4對齊對齊是指以盡可能協(xié)調(diào)的方式將元素的自然邊界排列 起來的過程。這樣，這些元素便統(tǒng)一成了一個更

5、大的整體。 網(wǎng)頁中如果忽視了對齊，會使元素看上去很分散，缺乏統(tǒng)一 性。這時我們常常會用到欄和網(wǎng)格，我們只需要看看邊線就 能完全達到我們的意圖。當然對齊也是一個可以自我調(diào)整的 原則，不必嚴格遵守，有時也可以打破它。5重復重復的表現(xiàn)形式多種多樣，包括圖像、顏色、線條、形 狀、以及整體的風格等。如果一個網(wǎng)頁設計中沒有重復的元 素，它通常會給人缺乏統(tǒng)一性和銜接不緊密的感覺，因此重 復往往是一個必不可少的設計原則。它的一個巨大的好處是 可預測性。如果網(wǎng)站以統(tǒng)一的方式來展現(xiàn)各個關鍵元素，那 么用戶一看到那熟悉的樣式就知道其代表的含義是什么了。6流流指用戶瀏覽網(wǎng)頁的路徑。主要是由重點和對比等元素 的具體使用

6、情況而決定的。事實上流完全取決于其他元素的 綜合運用。每個網(wǎng)站都有一個流，選定的標準應該是：順暢、 舒適、以及盡可能自然。一般而言，人們的視線都是從左到 右、由上至下的，所以我們必須考慮這種自然順序。這樣就 會使流恰到好處，將會讓用戶順著一條優(yōu)美而穩(wěn)定的路徑瀏 覽網(wǎng)頁。再好的設計也要通過制作才能把作品呈現(xiàn)給大家。網(wǎng)頁 制作就是對切割好的網(wǎng)頁進行優(yōu)化設置，對圖片、文字、動 畫等進行排版操作。dreamweaver cs5是現(xiàn)在最為流行的頁 面編輯軟件，可用于對web站點、網(wǎng)頁進行設計和開發(fā)。下 面把筆者在使用此款軟件制作網(wǎng)頁時應遵循的主要原則簡 述如下：6. 1命名一個網(wǎng)站不可能只由一個網(wǎng)頁組成

7、，它還有許多子頁 面。為了能使這些頁面有效地被鏈接起來，網(wǎng)頁開發(fā)者最好 給這些頁面起一些有代表性的而且簡潔易記的英文或拼音 網(wǎng)頁名稱。這樣，既有助于方便地管理網(wǎng)頁，又會有助于網(wǎng) 站的關鍵詞排名。6. 2網(wǎng)站的目錄結(jié)構目錄結(jié)構的好壞，對瀏覽者來說并沒有什么太大的感 覺，但是對于站點本身的上傳維護，內(nèi)容未來的擴充和移植 有著重要的影響。所以整個網(wǎng)站的架構和目錄設計要清晰， 復雜的目錄有可能會使搜索引擎迷失方向，從而錯過一些網(wǎng) 站信息。網(wǎng)站的目錄層級不要太深，資深人士建議網(wǎng)站上的 所有頁面最多不要超過5次點擊就能達到。越重要的網(wǎng)頁放 在越頂層的目錄里，這樣既可以提高收錄速度，也會提高相 應頁面的權重

8、。目錄名稱盡量使用短小的英文，以免顯示錯 誤。6. 3網(wǎng)站的內(nèi)部鏈接好的網(wǎng)站內(nèi)部鏈接應形成一個強大的網(wǎng)絡，這樣能夠提 升網(wǎng)站的權重，也能夠提高搜索引擎對網(wǎng)站的收錄量和收錄 速度。要想形成網(wǎng)絡，首先每個頁面都應該出現(xiàn)指向主頁或 重要頁面的鏈接。可以通過網(wǎng)站的logo、導航、關鍵詞等鏈 接的形式進行指向。其次，在文章內(nèi)容頁，可以增加一些相 關鏈接。比如有一篇文章，是關于聯(lián)想打印機的介紹。那么 在文章的最后可以加上同一個網(wǎng)站中關于惠普等品牌打印 機文章的鏈接。這樣既豐富了用戶的閱讀體驗，也增加了搜 索引擎對于網(wǎng)站“內(nèi)容相關性”這一重要方面的認可。6. 4網(wǎng)站地圖網(wǎng)站地圖，又稱站點地圖，它就是一個頁面，上面放置 了網(wǎng)站上所有頁面的鏈接。大多數(shù)人在網(wǎng)站上找不到自己所 需要的信息時，可能會將網(wǎng)站地圖作為一種補救措施。能夠 幫助用戶更快的查詢到所需要的信息，同時為搜索引擎提供 綠色通道，使引擎程序迅速收錄主要網(wǎng)頁，得到較好的排名, 讓用戶更容易找到您的站。6. 5合理應用多媒體技術頁面的內(nèi)容可以用圖片、三維動畫、flash等來表現(xiàn)， 但同時也要保證快速的訪問速度。大多數(shù)瀏覽者不會進入需 要等待5分鐘才能進入的網(wǎng)站。所以設計網(wǎng)站時應該盡量合 理使用多媒體技術，通常將主要頁面的容量控制在50kb以 內(nèi)，平均30kb左右，以確保普通瀏覽者等待頁面的時間不 超過10秒鐘。要做一