網頁佈局的基本類型

　網頁佈局的基本類型

　　網頁的佈局不可能像平面設計那麼簡單，除了上文提到過的可操做性外，技術問題也是制約網頁佈局的一個重要因素。雖然網頁製做已經擺脫了HTML時代，可是尚未徹底作到揮灑自如，這就決定了網頁的佈局是有必定規則的，這種規則使得網頁佈局只能在左右對稱結構佈局、「同」字型結構佈局、「回」字型結構佈局、「匡」字型結構佈局、「廠」字型佈局、自由式結構佈局、「另類」結構佈局等幾種佈局的基本結構中選擇。

1　左右對稱結構佈局

     左右對稱結構是網頁佈局中最爲簡單的一種。「左右對稱」所指的只是在視覺上的相對對稱，而非幾何意義上的對稱，這種結構將網頁分割爲左右兩部分。通常使用這種結構的網站均把導航區設置在左半部，而右半部用做主體內容的區域。左右對稱性結構便於瀏覽者直觀地讀取主體內容，可是卻不利於發佈大量的信息，因此這種結構對於內容較多的大型網站來講並不合適，如圖1所示

圖1 左右對稱結構佈局的網站

2　「同」字型結構佈局

　　「同」字結構名副其實，採用這種結構的網頁，每每將導航區置於頁面頂端，一些如廣告條、友情連接、搜索引擎、註冊按鈕、登錄面板、欄目條等內容置於頁面兩側，中間爲主體內容，這種結構比左右對稱結構要複雜一點，不但有條理，並且直觀，有視覺上的平衡感，可是這種結構也比較僵化。在使用這種結構時，高超的用色技巧會規避「同」字結構的缺陷，如圖2所示

圖2 「同」字型結構佈局的網站

3　「回」字型結構佈局

　　「回」字型結構其實是對「同」字型結構的一種變形，即在「同」字型結構的下面增長了一個橫向通欄，這種變形將「同」字型結構不是很重視的頁腳利用起來，這樣增大了主體內容，合理地使用了頁面有限的面積，可是這樣每每使頁面充斥着各類內容，擁擠不堪，如圖3所示

圖3 「回」字型結構佈局的網站

4　「匡」字型結構佈局

　　和「回」字型結構同樣，「匡」字型結構其實也是「同」字型結構的一種變形，也能夠認爲是將「回」字型結構的右側欄目條去掉得出的新結構，這種結構是「同」字型結構和「回」字型結構的一種折中，這種結構承載的信息量與「同」字型相同，並且改善了「回」字型的封閉型結構，如圖4所示

圖4「匡」字型結構佈局的網站

5. 「廠」字型佈局
「廠」字型結構佈局，就是指頁面頂部爲橫條網站標誌+廣告條，下方左面爲主菜單，右面顯示正文信息，總體效果相似「廠」字，因此稱之爲「廠」字型佈局。這是網頁設計中用的最普遍的一種佈局方式，通常應用於企業網站中的二級頁面。這種佈局的優勢是頁面結構清晰、主次分明，是初學者最容易上手的佈局方法。缺點是規矩呆板，若是細節色彩上不注意，很容易讓人看之無味。

6　自由式結構佈局

　　以上4種結構是傳統意義上的結構佈局。自由式結構佈局相對而言就沒有那麼「安分守己」了，這種結構的隨意性特別大，顛覆了從前以圖文爲主的表現形式，將圖像、Flash動畫或者視頻做爲主體內容，其餘的文字說明及欄目條均被分佈到不顯眼的位子，起裝飾做用，這種結構在時尚類網站中使用的很是多，尤爲是在時裝、化妝用品的網站中。這種結構富於美感，能夠吸引大量的瀏覽者欣賞，可是卻由於文字過少，而難以讓瀏覽者長時間駐足，另外起指引做用的導航條不明顯，而不便於操做，如圖5所示

圖6 自由式結構佈局的網站

7　「另類」結構佈局

　　若是說自由式結構是現代主義的結構佈局，那麼「另類」結構佈局就能夠被稱爲後現代的表明了。在「另類」結構佈局中，傳統意義上的全部網頁元素所有被顛覆，被打散後融入到一個模擬的場景中。在這個場景中，網頁元素化身爲某一種實物，採用這種結構佈局的網站多用於設計類網站，以顯示站長的前衛的設計理念，這種結構要求設計者要有很是豐富的想象力和很是強的圖像處理技巧，由於這種結構稍有不慎就會由於頁面內容太多而拖慢速度，如圖6所示

圖7「另類」結構佈局的網站

此文章摘自 《精通Web標準建站:標記語言、網站分析、設計理念、SEO與BI(附光盤) 》