李娟

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

關(guān)鍵詞： 網(wǎng)頁設(shè)計 頁面布局 CSS+DIV

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

1.常見的頁面布局方式

（1）表格

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

（2）框架

框架就是把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域稱為一個框架，每個框架都可以獨立顯示一個網(wǎng)頁?？蚣懿季直容^靈活，若有效運用，則能使網(wǎng)頁更整潔、清晰。但是對于內(nèi)容多、布局復(fù)雜的網(wǎng)站，不宜采用框架布局，過多的框架會影響網(wǎng)頁下載所需的時間，影響網(wǎng)頁的讀取速度，而且瀏覽器對框架結(jié)構(gòu)的兼容性不好。

（3）DIV+CSS

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

2.DIV+CSS網(wǎng)頁布局設(shè)計舉例

以一個最常見的三欄式結(jié)構(gòu)為例，網(wǎng)頁分成頭部（#top）、內(nèi)容（#main）、底部（#bottom）三部分，內(nèi)容部分分成左側(cè)（#leftmain）和右側(cè)（#rightmain）兩部分。

HTML文件代碼如下：

3.結(jié)語

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

參考文獻：

[1]楊陽.DIV+CSS網(wǎng)站布局實錄[M].北京：科學(xué)出版社，2009.

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

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

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