網(wǎng)頁設計中的常見頁面布局方式

Web頁面布局是對頁面的整體規(guī)劃，即把頁面劃分成不同的區(qū)域，用于放置不同的頁面內(nèi)容。對于整個網(wǎng)站，每個頁面的布局應該相對保持協(xié)調(diào)一致，不應該有大的跳躍感。大部分網(wǎng)頁頁面布局的內(nèi)容是摘要信息列表：關鍵詞、信息短語、信息縮寫或信息前幾行內(nèi)容，當客戶對某些摘要或提示信息感興趣時，就會點擊超鏈接得到其詳細內(nèi)容。

頁面布局通常被比做一個翻轉(zhuǎn)的金字塔，如圖所示。

頁面布局格式

網(wǎng)站頁面布局根據(jù)導航元素放置的方式來分類。主要根據(jù)網(wǎng)站內(nèi)容、風格和總量來選擇布局類型。例如，通常導航元素被放置在左邊和上邊空白處。導航元素的背景通常和剩余頁面的顏色或者外觀不同，企業(yè)的徽標、網(wǎng)站名稱一般放置在頁面的左上角。網(wǎng)站版權信息、聯(lián)系信息通常放在網(wǎng)頁的最下面。對于頁面設計，采用通用的布局格式使頁面更具有可讀性和直觀性。

下面是幾種常見的布局類型。

下面兩個圖片是傳統(tǒng)左邊空白布局的例子，導航元素在左邊空白處。

左邊空白布局格式	左邊空白布局格式
上邊空白布局格式	上左邊空白布局格式
右邊空白布局格式	上下空白布局格式
分布式布局格式	藝術風格布局格式

頁面布局元素

網(wǎng)站開發(fā)人員在正式設計時，首要考慮網(wǎng)站的整體外觀和頁面結(jié)構，從視覺和技術的角度理解組成整個頁面的元素以及它們之間的相互關系，頁面布局應該具有邏輯性和易于理解性，幫助分類、簡化和闡明信息。一旦確定了頁面布局元素，應該在整個網(wǎng)站上貫徹所選擇的元素。

網(wǎng)頁布局元素包括頁面規(guī)劃布局、邊界、字體、顏色、圖像以及表格等。

• 框架：規(guī)劃頁面布局，允許同時顯示多個頁面。
• 表格：規(guī)劃頁面布局，在單元格中可以放置各種網(wǎng)頁元素，容易排版。
• 導航：引導用戶在網(wǎng)站內(nèi)的移動。
• 段落：在頁面上分組文本字符。
• 圖像：提供視覺吸引、信息和導航。
• 列表：組織并強調(diào)某些信息條目。
• 顏色：提供網(wǎng)站整體色彩感覺，增加可讀性，易于分類。
• 邊距：控制顯示內(nèi)容距瀏覽器窗口邊界的距離。
• 邊界：為HTML表和框架提供可見的邊界。
• 空白：分開頁面上的元素。

空白

當瀏覽一個沒有空白的頁面時，用戶會感到頁面很擁擠，而造成心理的緊張，對閱讀這樣的頁面有一種厭煩的抵觸感覺。初學網(wǎng)頁設計的人往往會忽視“空白”元素，“空白”元素實際上與其他頁面布局元素有緊密關聯(lián)，甚至是其他元素的一部分，如行間距等?？瞻自诰W(wǎng)頁設計中非常重要，它能夠使網(wǎng)頁看起來簡潔、明快，閱讀舒暢，是網(wǎng)頁設計中必不可缺少的元素。

值得注意的是，用戶不欣賞在網(wǎng)頁上堆積無用的內(nèi)容。用戶快速掃描頁面時，掃描的內(nèi)容越多，錯過的信息就越多。這并不是說不能給用戶提供大量信息，只是不要在一個頁面上提供所有的信息。比如一些網(wǎng)站的主頁提供特大量的信息，反而會使大部分用戶忽視大部分內(nèi)容，因此每一個網(wǎng)頁應該包括大約比同樣印刷版本少50%的信息。

切記不要試圖將盡可能多的信息放在一個網(wǎng)頁中，應該有合理的、簡明的分類，不要強迫客戶從一堆信息中艱難地挑出所需要的信息，要讓客戶自己選擇是否進入更深的鏈接獲得信息。也不要只為了讓頁面變短而分割頁面，除非是在邏輯斷點處。每一個頁面都應該是獨立、完整的。只有照顧了整個頁面空間的分配，空白才能表現(xiàn)出一定的活力，利用空白可以使頁面布局生動活潑、松緊有度，使客戶瀏覽時有舒適、輕松和簡潔之感。

開發(fā)設計人員可以使用表和透明GIF圖像來給頁面添加空白。可以使用無邊界HTML表定位內(nèi)容，提供無內(nèi)容的區(qū)域來布局頁面。

頁面布局方法

頁面布局方法主要有兩種：紙面布局法和軟件布局法。

1）紙面布局法

在設計頁面布局時，設計人員需要在紙面上畫出頁面布局的草圖，將設想落實到紙        面上，查看設計效果。人們經(jīng)常會瞬間產(chǎn)生一個好的靈感和想法，但很快又會在頭腦中消失，因此當有了好的靈感和想法時應該立即用紙面記錄下來，以備以后容納到頁面設計當中去。

不要直接在網(wǎng)頁設計工具中邊設計網(wǎng)頁邊修改頁面布局，想到哪里，設計到哪里，這樣會浪費很多時間和精力。在開始制作網(wǎng)頁前，應該首先在紙上畫出頁面布局草圖，一旦確定就不要輕易修改，在頁面設計中要自始至終貫徹確定好的頁面布局。

2）軟件布局法

另外一種頁面布局方法是使用圖形軟件工具設計頁面布局草圖，可以使用比較熟悉的圖形軟件如Photoshop、Fireworks等。使用這些圖形工具可以方便地設計頁面布局和顏色，比紙面布局法更能查看頁面布局的整體效果和真實效果，使用圖形工具和層更容易修改和查看各種無法用紙張實現(xiàn)的效果。

頁面布局技術

常用的頁面布局方法有：層疊樣式表頁面布局、表格頁面布局、框架頁面布局、透明GIF頁面布局和Flash頁面布局。

1）層疊樣式表頁面布局

在HTML 4.0標準中，層疊樣式表（CSS）新技術能完全精確地定位文本和圖片，現(xiàn)在CSS是一個比較流行的頁面布局方法，可以實現(xiàn)過去無法實現(xiàn)的想法?，F(xiàn)在越來越多的瀏覽器開始支持CSS技術，但不同的瀏覽器使用方法可能略有不同，用戶使用時應該注意。

2）表格頁面布局

表格布局現(xiàn)在幾乎已成為一個頁面布局的標準，它的優(yōu)勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響。表格的每一個單元格可以放置不同文本和圖片，而且非常易于內(nèi)容對齊。表格邊界設置為0，客戶就看不到表格邊框，只看到表格單元格放置的內(nèi)容。表格布局在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點是，當用了過多表格時，頁面下載速度會受到影響。在以后的章節(jié)中將詳細講述表格頁面布局方法。

3）框架頁面布局

框架可以用于頁面布局，雖然它們在導航中也扮演重要角色。

現(xiàn)在使用框架技術進行頁面設計的網(wǎng)站越來越少，框架頁面以左上角對齊，每一個框架部分都可以獨立控制，表格單元格就不可以單獨控制。從布局上考慮，框架結(jié)構不失為一個好的布局方法。框架技術也可以設置邊框為0，瀏覽客戶也看不到框架邊框。

在以后的章節(jié)中將詳細講述框架頁面設計技術。

4）透明GIF頁面布局

透明GIF圖像可以作為空白區(qū)域的占位符插入到網(wǎng)頁中，它們是背景透明、尺寸可變的圖像，因此，透過圖像可以看到頁面的背景，瀏覽客戶是看不到透明GIF圖片的?？梢栽?lt;IMG>標記中指定高、寬屬性來創(chuàng)建需要的空白的尺寸。例如使段落從左面縮進20個像素，則在段落的第一個字符前插入下面的標記：

<img src=”transparent.gif” height=”2″ width=”20″>

也可以在表格的單元格中放置透明GIF圖像用于控制行或者列的尺寸。

5）Flash頁面布局

這種頁面布局采用了現(xiàn)在非常流行的Flash動畫用于規(guī)劃頁面的布局，F(xiàn)lash有強大的功能，使頁面所表達的信息更豐富，其視覺效果及聽覺效果要比其他頁面布局更加具有沖擊力，是當今最流行的一種技術，但是顯示文字信息內(nèi)容比較少，另外還需要更快的機器性能和更高的網(wǎng)絡帶寬。例如disney網(wǎng)站http://www.disney.com就是Flash頁面布局的     代表。

頁面尺寸

由于頁面尺寸和顯示器大小及分辨率有關系，因此網(wǎng)頁不能超越顯示器的范圍，而且因為瀏覽器也將占去不少空間，所以留給頁面尺寸的空間就會變得越來越小。一般分辨率在800*600（推薦）的情況下，頁面的顯示尺寸為：780*428像素；分辨率在640*480的情況下，頁面的顯示尺寸為：620*311像素；分辨率在1024*768的情況下，頁面的顯示尺寸為：1007*600像素。從以上數(shù)據(jù)可以看出，分辨率越高，頁面尺寸越大。

瀏覽器的工具欄也是影響頁面尺寸的主要原因。一般瀏覽器的工具欄都可以取消或者增加，因而造成頁面的尺寸也是不一樣的。

在網(wǎng)頁設計過程中，向下拖動頁面是唯一給網(wǎng)頁增加更多內(nèi)容（尺寸）的方法。除非需要，否則不要讓訪問者拖動很長的頁面。

切記在網(wǎng)頁設計過程中，一定不要左右拖動頁面，只能上下拖動頁面，而且也不能拖動過長，客戶往往會忽視頁面下面的內(nèi)容。