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

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

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

隨著網(wǎng)絡(luò)科技的發(fā)展，網(wǎng)頁設(shè)計(jì)已進(jìn)入人們的生活，并發(fā)揮著至關(guān)重要的作用。網(wǎng)頁設(shè)計(jì)的整體效果直接取決于網(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)容繁多，“國”字型或拐角型比較實(shí)用；遇到說明性較強(qiáng)但內(nèi)容數(shù)量上一般時(shí)，標(biāo)題正文型布局比較實(shí)用；而三種框架型布局速度較快，瀏覽起來較方便，但是結(jié)構(gòu)變化上不是很靈活；如果想要展示個(gè)人主頁的個(gè)性風(fēng)采或者一個(gè)公司想要展示他的形象，則應(yīng)該選擇封面型布局；如果不想使用過多的文字只想更靈活，更豐富的展現(xiàn)頁面，那么Flash型布局最為合適不過。

2 三種布局方式

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

2.1 表格布局

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

2.2 框架布局

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

2.3 DIV+CSS布局

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

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

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

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

（2）提高索引效率

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

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

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

（4）易于維護(hù)和改版

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

3 三種布局方式的比較

3.1 重構(gòu)性布局

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

3.2 靈活性應(yīng)用

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

3.3 頁面瀏覽

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

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

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

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

P315.69