淺談網(wǎng)頁布局TABLE和DIV+CSS

崔 曉

(武漢工程職業(yè)技術(shù)學(xué)院 湖北 武漢：430080)

淺談網(wǎng)頁布局TABLE和DIV+CSS

崔 曉

(武漢工程職業(yè)技術(shù)學(xué)院 湖北 武漢：430080)

TABLE和DIV+CSS是市場上常用的兩種網(wǎng)頁布局方式，本文采用一個網(wǎng)頁實(shí)例分別對兩種布局方式進(jìn)行了比較分析，并給出了具體實(shí)現(xiàn)的HTML源代碼。

表格；DIV+CSS；TABLE；網(wǎng)頁布局；對比

網(wǎng)頁的布局指的是用戶在網(wǎng)頁設(shè)計(jì)的過程中，安排網(wǎng)頁中的文本、圖像、動畫、視頻等元素在頁面中顯示的位置以及具體數(shù)量。目前市場上常用的網(wǎng)頁布局是TABLE布局和DIV+CSS布局。下面分別對這兩種布局方式的特點(diǎn)進(jìn)行比較分析。

1 TABLE布局

表格是網(wǎng)頁元素之一，可以用來進(jìn)行頁面布局。在HTML語言中，代表表格，代表行，代表單元格。表格布局主要通過嵌套表格實(shí)現(xiàn)，即大表格中嵌套小表格。對于如圖1所示的網(wǎng)頁效果圖，使用表格布局設(shè)計(jì)整個版面如圖2所示。

圖1 網(wǎng)頁效果圖

圖2 使用TABLE布局的具體設(shè)計(jì)圖

首先在網(wǎng)頁中插入一個三行一列的大表格進(jìn)行網(wǎng)頁的整體頁面設(shè)置，然后在大表格的第一行插入一個三行一列的小表格，用來顯示網(wǎng)頁的標(biāo)題部分。接著在大表格的第二行插入一個一行二列的表格，顯示網(wǎng)頁的主體內(nèi)容(即圖片、詩歌和語句注釋)。最后在大表格的最后一行寫入版權(quán)信息。

使用TABLE進(jìn)行頁面布局的關(guān)鍵源代碼如下：

2 DIV+CSS布局

CSS(Cascading Style Sheet)即層疊樣式表，它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。DIV+CSS布局包括兩部分：一系列的CSS樣式，用來定義頁面元素的外觀；以及與其相對應(yīng)的一系列XHTML標(biāo)簽，主要是DIV標(biāo)簽，構(gòu)成頁面的基礎(chǔ)。

2.1 盒子模型原理

DIV+CSS布局的核心是盒子模型，將每個DIV標(biāo)簽看成一個空盒子，網(wǎng)頁元素的內(nèi)容(content)放在盒子中，如圖3所示。盒子具有寬度(width)和高度(height)，盒子里面的內(nèi)容到盒子的邊框之間的距離稱為填充(padding)，盒子本身有邊框(border)，盒子邊框外和其他盒子之間的距離稱為邊界(margin)。

圖3 盒子模型

2.2 使用DIV+CSS的具體實(shí)現(xiàn)

同樣，以圖1所示的網(wǎng)頁效果圖為例，采用DIV+CSS布局設(shè)計(jì)頁面，可以將頁面分為頂部、中部和底部三個區(qū)域。頂部區(qū)域可劃分為上、中、下三個部分，顯示標(biāo)題信息；中部區(qū)域可分為左側(cè)和右側(cè)兩個部分，顯示網(wǎng)頁的主要內(nèi)容，即詩歌；底部區(qū)域顯示網(wǎng)頁的版權(quán)信息。

使用DIV+CSS進(jìn)行頁面布局的關(guān)鍵源代碼如下：

其中，CSS樣式表的設(shè)置如下：

JHJcontainer {text-align: left;width: 760px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;height: auto;}

JHJtop {height: 100px;width: 760px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;}

JHJtop1 {height: 40px;width: auto;text-align: center;}

JHJtop2 {height: 30px;width: auto;text-align: right;}

JHJtop3 {float: left;height: 30px;width: auto;}

JHJcontent {padding: 0px;height: auto;width: 760px;}

JHJbottom {clear: both;border-top-width: 12px;border-bottom-width: 12px;text-align: center;}

JHJleft {width: 300px;float: left;clip: rect(auto,5px,auto,5px);}

JHJright {width: 460px;float: right;}

3 兩種布局方式的對比

使用TABLE布局頁面，可以精確定位網(wǎng)頁元素在頁面中的位置，整個網(wǎng)頁整齊有序。但是根據(jù)關(guān)鍵代碼可以看出，樣式和表格的內(nèi)容混在一起，難以進(jìn)行修改和二次開發(fā)，工作量繁重，網(wǎng)頁的更新和維護(hù)非常困難。另外，對于表格布局，頁面下載時需要等接收到整個表格的內(nèi)容后才會顯示，特別是嵌套表格，導(dǎo)致頁面下載速度較慢。

使用DIV+CSS布局頁面，代碼結(jié)構(gòu)清晰明了，實(shí)現(xiàn)了表現(xiàn)和內(nèi)容的分離，這種優(yōu)勢是Table布局無可比擬的。后期更新網(wǎng)站，只需要簡單修改CSS樣式即可。另外，由于采用DIV+CSS布局，代碼簡潔，頁面瀏覽速度快。但是也存在缺點(diǎn)，如可能出現(xiàn)部分瀏覽器不兼容問題，而且對于初學(xué)者，入門較為困難。

4 結(jié)語

經(jīng)過對比研究，TABLE布局和DIV+CSS布局兩者各有優(yōu)缺點(diǎn)。初學(xué)者可以從TABLE布局入手，熟悉網(wǎng)頁的基本制作方法。但是隨著Web3.0技術(shù)的發(fā)展，DIV+CSS布局已逐漸成為市場的主流趨勢，網(wǎng)頁設(shè)計(jì)人員應(yīng)深入研究如何更好的運(yùn)用該技術(shù)方法。

[1] 雷燁.運(yùn)用DIV+CSS技術(shù)對網(wǎng)頁進(jìn)行布局[J].電腦知識與技術(shù)：學(xué)術(shù)交流,2016，(3):212-213.

[2] 詹劼.DIV+CSS和TABLE網(wǎng)頁布局的對比分析[J].湖南城市學(xué)院學(xué)報(bào)：自然科學(xué)版,2015,24(3):135-136.

[3] 賈英霞.基于DIV+CSS網(wǎng)頁布局的教學(xué)難點(diǎn)探討[J].無線互聯(lián)科技,2015，(12):92-93.

[4] 徐景秀.淺談網(wǎng)頁布局中的表格與框架[J].科技資訊,2014，(18):223-223.

[5] 李文鋒,陳李霞.淺談Dreamweaver cs3中網(wǎng)頁布局設(shè)計(jì)的方法[J].才智,2009，(17):150-150.

DiscussiononWebPageLayoutofTABLEandDIV+CSS

Cui Xiao

(Wuhan Engineering Institute,Wuhan 430080, Hubei)

TABLE and DIV+CSS are two commonly used web page layouts. In this paper, these two kinds of layouts are compared, using an example of a web page, and the specific implementations of HTML source code are presented.

form; DIV+CSS; web layout; comparision

TP393.18

A

1671-3524(2017)02-0024-03

(責(zé)任編輯：李文英)

2017-04-10

2017-04-27

崔 曉(1981～)，女，碩士，講師.E-mail：469238284@qq.com