網頁設計中布局方式之比較

摘要：在網頁設計中，網頁布局的效果直接影響到網頁設計的質量，本文分析說明了目前常用的三種布局方式：表格方式、框架方式和DIV+CSS方式，并對三種方式進行了詳細的比較。

關鍵詞：表格 DIV+CSS 布局

1 概述

在網頁設計過程中，色彩的搭配、文字的變化、圖片的處理等，這些都是不可忽略的因素，但除此之外，還有一個非常重要的因素——網頁的布局。不同類型的網站采用不同的布局，不但能使網站結構合理化，也可以使訪問者一看就明白：這個網站是做什么的。

目前網頁常見的布局結構類型主要有“國”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、標題文本型布局、框架型布局和變化型布局等。無論是哪一種布局結構，我們在布局時都應遵循以下三個基本原則：①主題鮮明：視覺設計表達的是一定的意圖和要求，這就要求視覺設計不但要單純、簡練、清晰和精確，還要注意通過獨特的風格和強烈的視覺沖擊力，來鮮明地突出設計主題。②形式與內容統一：內容決定形式，形式反作用于內容，一個優秀的設計必定是形式對內容的完美表現。③強調整體性：注意單個頁面形式與內容統一的同時，更不能忽視同一主題下多個分頁面組成的整體網頁形式與整體內容的統一。

2 常見布局方式

在網頁設計中，常見的布局方式一般有三種，第一種是使用表格（table），第二種是使用框架，另一種是使用DIV+CSS。下面我們將具體的對這三種布局方式進行說明與分析。

2.1 表格布局方式

表格是一種簡明扼要而內容豐富的組織和顯示信息的方式，在文檔處理中占有十分重要的位置。使用表格既可以在頁面上顯示表格式數據，也可以進行文本和圖形的布局。由于表格使用簡單而且靈活，是最早也是使用最廣泛的網頁布局技術。通過使用相關的一系列表格標簽，如table、th、tr、td、caption、thread、tfoot、tbody、col等，并對表格單元格進行合并或拆分以及在表格中嵌套表格等操作，從而得到需要的布局。

表格布局的優勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響，而且在定位圖片和文本時非常方便。但當使用過多表格時，頁面下載速度將會受到影響。并且靈活性較差，不易修改和擴展。

2.2 框架布局方式

框架也是網頁設計中對頁面布局控制的一種重要手段。使用框架可以將一個瀏覽器窗口劃分為多個區域，每個區域可以分別顯示不同的網頁。訪問者瀏覽站點時，可以使某個區域的內容永遠不更改，但可通過導航條的鏈接更改主要框架的內容。框架結構常被用在具有多個分類導航或多項復雜功能的網頁上。框架結構的實現主要是利用…標簽。

框架布局能有效地實現頁面導航，方便用戶瀏覽網頁，并在框架窗口中支持滾動條，從而能顯示更多內容。由于框架集中相同的內容只用下載一次，所以能減少頁面下載時間。但兼容性略差。

2.3 DIV+CSS布局方式

DIV+CSS是網站標準（或稱“WEB標準”）中常用術語之一，在XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現各種定位。

DIV是指HTML標記集中的標記

①表現和內容相分離

將涉及部分剝離出來放在一個獨立樣式文件中，HTML文件只存放文本信息，符合W3C標準。

②提高搜索引擎對網頁的索引效率

用只包含結構化內容的HTML代替嵌套的標簽，搜索引擎將更有效地搜索到你的網頁內容。

③代碼簡潔，提高頁面瀏覽速度

對于同一個頁面視覺效果，采用DIV+CSS重構的頁面容量要比TABLE編碼的頁面文件容量小得多，代碼更加簡潔，前者一般只有后者的1/2大小。對于一個大型網站來說，可以節省大量帶寬。

④易于維護和改版

由于內容和樣式的分離，使頁面和樣式的調整變得更加方便。只需簡單的修改幾個CSS文件就可以重新設計整個網站的頁面。

3 三種方式比較

3.1 應用的靈活性

表格方式是最常用的網頁布局技術，它使用簡單而且靈活，通過表格的嵌套，可以進行比較復雜的網頁布局；框架方式由于其提供了固定的布局樣式，所以適合布局一些特殊格式的網頁，例如論壇的布局常使用這一方式。而DIV+CSS方式使用也比較簡單，可以進行復雜的布局。

3.2 布局的重構性

無論是表格還是框架，最終生成的網頁布局文件是布局格式控制和網頁內容混在一起，這樣對網頁布局進行較大改動甚至重新布局時，就會顯得非常困難和麻煩，有可能需要重新制作頁面。而DIV+CSS方式布局和內容表現是一個分離體，使用屬性就可以輕松改變布局結構和風格。

3.3 網頁瀏覽

利用表格布局的網頁在下載的時候必須等整個表格內容都下載完畢之后才會一次性顯示出來，而利用DIV塊的CSS布局的頁面就科學得多，各個子塊可以分別下載顯示，從而提高了頁面下載速度，搜索引擎的排名也會因此而提高。但從兼容性的角度來說，框架方式和DIV+CSS方式都表現差強人意，有待進一步提高。

參考文獻：

[1]梁斌，柯華坤.《網頁布局技術比較與應用優化》，中國教育技術裝備，2009，11.

[2]馬東.《網頁與網站設計》，東方出版社，2008年.

[3]王儉敏.《CSS+DIV網頁樣式與布局》，電子工業出版社，2008.

[4]鄭寧寧.《淺析DIV+CSS網頁設計技術》，山東省農業管理干部學院學報，2008.

[5]揚森香，聶志勇.《網頁設計與制作案例教程》，北京大學出版社，2009.

[6]嚴加瓊.《淺析網頁設計中的網頁布局》，電腦學習，2010，1.