崔 曉

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

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

崔 曉

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

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

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

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

1 TABLE布局

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

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

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

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

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

2 DIV+CSS布局

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

2.1 盒子模型原理

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

圖3 盒子模型

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

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

使用DIV+CSS進(jìn)行頁(yè)面布局的關(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 兩種布局方式的對(duì)比

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

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

4 結(jié)語(yǔ)

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

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

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

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

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

[5] 李文鋒,陳李霞.淺談Dreamweaver cs3中網(wǎng)頁(yè)布局設(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