淺述網頁設計中的頁面布局技術

李娟

摘 要： 網頁是網站構成的基本元素，合理的頁面布局是網頁能否吸引瀏覽者的重要因素之一。文章對幾種常見的網頁布局技術進行了分析比較，并通過一個實例講述了網頁布局的基本方法。

關鍵詞： 網頁設計 頁面布局 CSS+DIV

要設計出精美的網頁，除了網頁內容及色彩搭配之外，如何合理地對網頁進行布局，將文字、圖像及各種網頁元素有規(guī)律、整齊地排列在網頁上，使頁面易讀和美觀，十分重要。

1.常見的頁面布局方式

（1）表格

表格布局是頁面布局技術中最簡單的布局方式。在Drea-mweaver中插入表格就類似于在WORD里插入表格，具有所見即所得的特點。利用表格組織各種網頁元素，既直觀又操作簡單。但是在網頁中插入大量表格，會造成頁面源代碼存在大量冗余、可讀性差、直接導致網頁讀取速度慢的問題，不利于網站的更新和維護，目前大中型網站一般不用表格布局。

（2）框架

框架就是把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域稱為一個框架，每個框架都可以獨立顯示一個網頁。框架布局比較靈活，若有效運用，則能使網頁更整潔、清晰。但是對于內容多、布局復雜的網站，不宜采用框架布局，過多的框架會影響網頁下載所需的時間，影響網頁的讀取速度，而且瀏覽器對框架結構的兼容性不好。

（3）DIV+CSS

DIV+CSS布局技術的出現彌補了表格和框架布局的不足，優(yōu)勢在于代碼精簡、頁面下載速度快，表現和內容相分離，布局靈活，便于維護。我們可以將樣式單獨保存在CSS文件中，例如用手機WAP上網時，樣式文件就可以不加載，大大地節(jié)約頁面下載時間。多個頁面可共享一個CSS文件，要修改頁面樣式時，只需修改CSS文件即可實現對整個頁面的重新布局，不影響網頁內容。目前多數大型網站都采用此種方法進行布局，但是對于初學者來說，它的操作相對復雜，要求用戶對代碼有一定的了解。

2.DIV+CSS網頁布局設計舉例

以一個最常見的三欄式結構為例，網頁分成頭部（#top）、內容（#main）、底部（#bottom）三部分，內容部分分成左側（#leftmain）和右側（#rightmain）兩部分。

HTML文件代碼如下：

3.結語

本文介紹了目前網頁設計中常見的布局技術，表格、框架和DIV+CSS各有優(yōu)缺點。雖然DIV+CSS布局方式將成為今后網頁設計的標準，但是DIV+CSS的操作相對復雜，特別是對于網頁初學者，要完全用DIV+CSS布局頁面，需要用戶有扎實的代碼基礎。目前不是所有的瀏覽器都支持CSS的頁面，使用范圍頁有一定局限。所以在日常教學中，要根據學生的實際情況，合理利用布局技術，用table+CSS布局構建小型個人網站是不錯的選擇。

參考文獻：

[1]楊陽.DIV+CSS網站布局實錄[M].北京：科學出版社，2009.

[2]溫謙.CSS網頁設計標準教程[M].北京：人民郵電出版社，2009.

[3]王儉敏等.CSS+DIV網頁樣式與布局案例指導[M].北京：電子工業(yè)出版社，2009，4.

[4]曾順.精通CSS+DIV網頁樣式與布局[M].北京：人民郵電出版社，2007.