網站是否受固然要看網站的內部結構、前期定位和網站內容，但是網站中的各個網頁看起來是否賞心悅目而便于操作，也是非常重要的，這就涉及到了網頁的布局設計這個問題。隨著Web標準的推廣，將網頁布局設計的更為合理，已經不再像在HTML時代那樣難以做到，所以瀏覽者對網頁布局的評價也越來越挑剔。

　　在這個Web標準“橫行”的年代，只注重內容，不注重網頁布局的網站必定會死掉，因為有很多內容與之相同的網站用優秀的網頁布局將瀏覽者吸引了過去。本章將從網頁基本元素、布局的準備工作、網頁布局類型等方面進行詳細闡述，讓網頁炫起來!

　　10.1 認識網頁基本元素

　　網站的基本元素是網頁，一個個的網頁構成了一個完整的網站，如圖10.1所示。

　　網頁也是可分的，構成網頁的基本元素包括標題、網站LOGO、頁眉、頁腳、主體內容、功能區、導航區、廣告欄等。這些元素在網頁的位置安排，就是網頁的整體布局。

　　10.1.1 標題

　　每個網頁的最頂端都有一條信息，這條信息往往出現在瀏覽器的標題欄，而非網頁中，但是這條信息也是網頁布局中的一部分。這條信息是對這個網頁中主要內容的提示，即標題。

　　10.1.2 網站LOGO

　　LOGO是網站所有者對外宣傳自身形象的工具。LOGO集中體現了這個網站的文化內涵和內容定位。可以說， LOGO是一個網站的最為吸引人、最容易被人記住的標志。如果網站所有者已經導入了CIS系統，那么LOGO的設計就要符合CIS的設定。如果所有者沒有導入CIS，就要根據網站的文化內涵和內容定位設計LOGO。無論怎樣，網站LOGO的設計都要在網站制作初期進行，這樣才能從網站的長遠發展角度出發，設計出一個能夠長時間使用的、最能代表該網站的LOGO。LOGO在網站中的位置都比較醒目，目的是要使其突出，容易被人識別與記憶。在二級網頁中，頁眉位置一般都留給LOGO。另外，LOGO往往被設計成為一種可以回到首頁的超鏈接。

　　說明CIS簡稱CI，全稱 Corporate Identity System，譯稱企業識別系統，意譯為“企業形象統一戰略”。

　　10.1.3 頁眉

　　網頁的上端即是這個頁面的頁眉。頁眉并不是在所有的網頁中都有，一些特殊的網頁就沒有明確劃分出頁眉。頁眉往往在一個頁面中相當重要的位置，容易引起瀏覽者的注意，所以很多網站都會在頁眉中設置宣傳本網站的內容，如網站宗旨、網站LOGO等，也有一些網站將這個 “黃金地段”作為廣告位出租。

　　10.1.4 主體內容

　　主體內容是網頁中的最重要的元素。主體內容并不完整，往往由下一級內容的標題、內容提要、內容摘編的超鏈接構成。主體內容借助超鏈接，可以利用一個頁面，高度概括幾個頁面所表達的內容，而首頁的主體內容甚至能在一個頁面中高度概括整個網站的內容。

　　主體內容一般均有圖片和文檔構成，現在的一些網站的主體內容中還加入了視頻、音頻等多媒體文件。由于人們的閱讀習慣是由上至下、由左至右，所以主體內容的內容分布也是按照這個規律，依照重要到不重要的順序安排內容，所以在主體內容中，左上方的內容是最重要的。

　　10.1.5 頁腳

　　網頁的最底端部分被稱為頁腳，頁腳部分通常被用來介紹網站所有者的具體信息和聯絡方式，如名稱、地址、聯系方式、版權信息等。其中一些內容被做成標題式的超鏈接，引導瀏覽者進一步了解詳細的內容。

　　Yahoo!網站的頁腳除上述內容外，增加了導航內容，這種方式在首頁內容過多的情況很適用。好處是瀏覽者不必滑動滾動條，可直接選擇欄目，易用性強。

　　10.1.6 功能區

　　功能區是網站主要功能的集中表現。一般位于網頁的右上方或右側邊欄。功能區包括：電子郵件、信息發布、用戶名注冊、登陸網站等內容。有些網站使用了IP定位功能，定位瀏覽者所在地，然后可在功能區顯示當地的天氣、新聞等個性化信息。

　　10.1.7 導航區

　　如果說主體內容部分重要的話，導航區的重要性與其不相上下，甚至導航區的設計可以成為一種獨立的設計，與網頁布局設計分庭抗禮。之所以說導航區重要，是因為其所在位置左右著整個網頁布局的設計。導航區一般分為4種位置，分別是左側、右側、頂部和底部。一般網站使用的導航區都是單一的，但是也有一些網站為了使網頁更便于瀏覽者操作，增加可訪問性，往往采用了多導航技術，如Yahoo!網站采用了左側導航與底部導航相結合的方式。但是無論采用幾個導航區，網站中的每個頁面的導航區位置均是固定的。

　　10.1.8 廣告區

　　廣告區是網站實現贏利或自我展示的區域。一般位于網頁的頁眉、右側和底部。廣告區內容以文字、圖像、Flash動畫為主。通過吸引瀏覽者點擊鏈接的方式達成廣告效果。廣告區設置要達到明顯、合理、引人注目，這對整個網站的布局很重要。