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

隋潮 李金友 通化師范學(xué)院計算機學(xué)院

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

隋潮 李金友 通化師范學(xué)院計算機學(xué)院

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

布局 HTML DIV+CSS

1 概述

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

2 三種布局方式

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

2.1 表格布局

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

2.2 框架布局

框架作為導(dǎo)航很是方便，在網(wǎng)頁的若干個區(qū)域中可以明顯的找出不同的內(nèi)容?？蚣懿季挚雌饋砬逦髁?，并且有滾動條可以顯示更多的數(shù)據(jù)，各個框架之間互不干擾，減少了下載次數(shù)和下載時間，使網(wǎng)速有一定的提高。通常導(dǎo)航種類較多或網(wǎng)頁的功能較復(fù)雜時，則選擇框架結(jié)構(gòu)。lt;framegt;lt;/framegt;是框架結(jié)構(gòu)的常用標(biāo)簽。但是框架結(jié)構(gòu)不能為每個頁面都設(shè)置標(biāo)題，同事也不適用于搜索引擎方面的問題。從而，框架結(jié)構(gòu)布局使用率較低。

2.3 DIV+CSS布局

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

DIV+CSS布局具有如下優(yōu)勢：

（1）表現(xiàn)與內(nèi)容相分離

只把儲文本信息放在HTML中，設(shè)計部分單獨放在一個樣式文件里，這種凈內(nèi)容和表現(xiàn)分離的形式更符合搜索引擎的標(biāo)準(zhǔn)。

（2）提高索引效率

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

（3）提高網(wǎng)頁瀏覽速度，代碼簡潔

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

（4）易于維護和改版

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

3 三種布局方式的比較

3.1 重構(gòu)性布局

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

3.2 靈活性應(yīng)用

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

3.3 頁面瀏覽

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

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

[2]揚森香，聶志勇.網(wǎng)頁設(shè)計與制作案例教程[M].北京：北京大學(xué)出版社，2009：7-9.

課題：大學(xué)生創(chuàng)業(yè)項目階段性成果。

P315.69