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

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

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

頁面布局格式

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

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

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

左邊空白布局格式	左邊空白布局格式
上邊空白布局格式	上左邊空白布局格式
右邊空白布局格式	上下空白布局格式
分布式布局格式	藝術(shù)風格布局格式

頁面布局元素

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

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

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

空白

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

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

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

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

頁面布局方法

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

1）紙面布局法

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

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

2）軟件布局法

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

頁面布局技術(shù)

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

1）層疊樣式表頁面布局

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

2）表格頁面布局

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

3）框架頁面布局

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

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

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

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有強大的功能，使頁面所表達的信息更豐富，其視覺效果及聽覺效果要比其他頁面布局更加具有沖擊力，是當今最流行的一種技術(shù)，但是顯示文字信息內(nèi)容比較少，另外還需要更快的機器性能和更高的網(wǎng)絡(luò)帶寬。例如disney網(wǎng)站http://www.disney.com就是Flash頁面布局的     代表。

頁面尺寸

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

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

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

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