HTML5中三種布局方式的分析比較

隋潮 李金友 通化師范學院計算機學院

HTML5中三種布局方式的分析比較

隋潮 李金友 通化師范學院計算機學院

隨著網絡科技的發展，網頁設計已進入人們的生活，并發揮著至關重要的作用。網頁設計的整體效果直接取決于網頁布局，為了更好的了解HTML5，本文簡單分析比較一下HTML5中的三種布局：表格、框架和DIV+CSS方式。

布局 HTML DIV+CSS

1 概述

網頁是網站的基本要素，網頁中的布局更是吸引瀏覽者的一大要素，網頁只有布局和內容完美的結合才能深受瀏覽者的喜愛。網頁布局的類型有很多，那么，如何選擇布局就要視情況而定了，如果內容繁多，“國”字型或拐角型比較實用；遇到說明性較強但內容數量上一般時，標題正文型布局比較實用；而三種框架型布局速度較快，瀏覽起來較方便，但是結構變化上不是很靈活；如果想要展示個人主頁的個性風采或者一個公司想要展示他的形象，則應該選擇封面型布局；如果不想使用過多的文字只想更靈活，更豐富的展現頁面，那么Flash型布局最為合適不過。

2 三種布局方式

HTML5中三種布局方式分別為表格布局、框架布局和DIV+CSS布局。下面簡單介紹一下三種布局方式。

2.1 表格布局

表格布局早期較為常見，表格可以簡明扼要的顯示和組織數據，準確的定位是表格的一大優勢，而且不用考慮各元素之間的相互影響。表格布局簡單靈活，比較直觀，使用方便，適用于初學者，支持大多數瀏覽器也是表格布局的一個有利因素。至今還有很多網站在使用表格布局。表格布局的缺點就是當頁面想要調整時，通常都需要重新制作表格。遇到多處頁面需要修改時，工作量將十分龐大。當面臨一個較為復雜的頁面時，HRML中將布滿lt;trgt;和lt;tdgt;標簽。如果表格過長或者內容過多，則需要下載較長的時間，頁面才能顯示出來。

2.2 框架布局

框架作為導航很是方便，在網頁的若干個區域中可以明顯的找出不同的內容。框架布局看起來清晰明了，并且有滾動條可以顯示更多的數據，各個框架之間互不干擾，減少了下載次數和下載時間，使網速有一定的提高。通常導航種類較多或網頁的功能較復雜時，則選擇框架結構。lt;framegt;lt;/framegt;是框架結構的常用標簽。但是框架結構不能為每個頁面都設置標題，同事也不適用于搜索引擎方面的問題。從而，框架結構布局使用率較低。

2.3 DIV+CSS布局

DIV是一種布局的元素，為內容提供內容和背景，相當于容器的性質，它把文檔分成幾個區域或模塊，不用CSS技術就可以改變頁面的布局，顏色，內容等等，DIV標簽的屬性同事時控制了所包含元素的特性。CSS（Cascading Style Sheets）可譯為“層疊樣式表”它控制著網頁的樣式，目前最新版本是CSS3。為了控制網頁布局，將格式和結構相分離，制作出小巧靈活的便捷的網頁。

DIV+CSS布局具有如下優勢：

（1）表現與內容相分離

只把儲文本信息放在HTML中，設計部分單獨放在一個樣式文件里，這種凈內容和表現分離的形式更符合搜索引擎的標準。

（2）提高索引效率

標簽的嵌套形式可以由HTML來替代，頁面內容也將會使用搜索引擎更快更有效的搜索到，一定程度上提高了索引的效率。

（3）提高網頁瀏覽速度，代碼簡潔

從文件大小的角度看，DIV+CSS重構的頁面要比表格編碼的頁面文件容量小得多，一般情況下前者只有后者的一半大小，大大減少了瀏覽器需要解析的標簽。

（4）易于維護和改版

一個CSS文件可以由多個頁面所共享，要想改變網站的整體布局只需要修改CSS文件就可以了，比較方便。

3 三種布局方式的比較

3.1 重構性布局

表格布局和框架布局所生成的頁面布局文件都是頁面的內容和布局格式控制混合在一起的，如此一來如果想對網頁布局進行略大的改動或者重新發布整個布局時，就會十分的麻煩，很可能會重新制作整個頁面。在DIV+CSS布局方式中，內容和布局兩者之間則是一個分離體，只要簡單的使用屬性就可以輕輕松松改變布局的風格和結構。

3.2 靈活性應用

在網頁設計布局技術中表格方式布局最為常見，使用起來比較靈活，采用嵌套的表格方式，對較為復雜的頁面布局仍然適用；框架布局方式的樣式則比較固定，較為適合類似于論壇等的布局這種特殊格式的網頁布局方式；而DIV+CSS布局方式能進行較為復雜的布局，使用起來比較簡單。

3.3 頁面瀏覽

在頁面下載時表格布局需要等整個表格全部下載完之后才能夠顯示出來，而DIV+CSS的頁面布局則科學一些，在下載時各個模塊之間互不影響，可以分別下載，這樣不僅頁面的下載速度得到了提高，而且搜索引擎的排名也有明顯的提高。從兼容性的角度看，框架布局方式和DIV+CSS布局方式都不是十分完善，還有待提高。

[1]劉霆雨.完美網頁設計與制作[M].北京：人民郵電出版社，2007:13-15.

[2]揚森香，聶志勇.網頁設計與制作案例教程[M].北京：北京大學出版社，2009：7-9.

課題：大學生創業項目階段性成果。

P315.69