基于新Ｗｅｂ標準下的ＤＩＶ＋ＣＳＳ網(wǎng)頁布局方法探討

摘要：隨著利用舊的頁面布局的弊端逐漸暴露，新Web標準的重要性越來越被人們所重視。本文主要討論了在新Web標準下的DIV+CSS網(wǎng)頁布局方法，這種方法使網(wǎng)頁外觀與結(jié)構(gòu)分離，使站點的訪問及維護更加容易，最后通過一個實例介紹了其基本操作流程。

關(guān)鍵詞：網(wǎng)頁布局；DIV；CSS樣式

中圖分類號：TP309文獻標識碼：A文章編號：1009-3044(2008)11-20343-04

1 早期常用的網(wǎng)頁布局方法

早期的網(wǎng)頁布局，通常采用以下四種方法，如表1所示：

這些布局的方法在很長時間以來，都是較為流行的網(wǎng)頁布局方式，或是其中的一種，或是這四種布局方式的混合使用。隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展和許多新的上網(wǎng)設(shè)備的出現(xiàn)，使得這些網(wǎng)頁布局方式越來越不能適應(yīng)新的要求。

新的Web標準在國內(nèi)逐漸普及，一種基于DIV+CSS的新型網(wǎng)頁布局方式開始流行，一些大型門戶網(wǎng)站都已經(jīng)完成了網(wǎng)站重構(gòu)，一些中小型網(wǎng)站也在逐步改善之中。

2 新的Web標準

Web標準是一系列標準的集合，在Web標準中，把網(wǎng)頁分成4部分：內(nèi)容（Content）、結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。

“內(nèi)容”就是頁面實際要傳達的真正信息，包含數(shù)據(jù)、文檔或者圖片等。注意這里強調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身。比如一些輔助的信息，像導(dǎo)航菜單、裝飾性圖片等。

“結(jié)構(gòu)”就是把混亂的內(nèi)容進行結(jié)構(gòu)化，比如加上標題、作者、章、節(jié)、段落和列表，這些就稱為結(jié)構(gòu)。結(jié)構(gòu)使內(nèi)容更加具有邏輯性，易用性。

雖然定義了結(jié)構(gòu)，但是內(nèi)容還是原來的樣式?jīng)]有改變，例如字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾。所有這些用來改變內(nèi)容外觀的東西，稱之為“表現(xiàn)”。

“行為”就是對內(nèi)容的交互及操作，例如，使用JavaScript判斷一些表單提交，或者實現(xiàn)菜單的顯示和隱藏等。

HTML和XHTML頁面都是由“內(nèi)容、結(jié)構(gòu)、表現(xiàn)和行為”這4個方面組成的。“內(nèi)容”是基礎(chǔ)，然后是附加上去的“結(jié)構(gòu)”和“表現(xiàn)”，最后再對它們加上“行為”。針對“結(jié)構(gòu)、表現(xiàn)和行為”這三個部分，W3C組織制定了大部分的標準：

(1)結(jié)構(gòu)化標準語言XHTML和XML；

(2)表現(xiàn)標準語言CSS；

(3)行為標準主要包括對象模型（如W3C的DOM）、ECMAScript等。

這些標準大部分由W3C（World Wide Web Consortium）起草和發(fā)布，也有其他的一些組織，比如上面的ECMA（European Computer Manufacturers Association）的ECMAScript標準。

新的Web標準是W3C在2000年底發(fā)布的XHTML1.0和XML1.0，CSS2.0等。

采用新標準的優(yōu)點有很多：使得網(wǎng)頁下載速度更快；內(nèi)容可以被更廣泛的設(shè)備所訪問，比如屏幕閱讀器、手持設(shè)備或其它支持上網(wǎng)的新型設(shè)備；更少的代碼和組件，網(wǎng)站易于維護；帶寬要求低，成本降低等等。

3 DIV+CSS網(wǎng)頁布局方案

根據(jù)新的Web標準，采用DIV+CSS的網(wǎng)頁布局方案，可以把“內(nèi)容”放在DIV（Division，區(qū)塊）中，結(jié)構(gòu)由DIV產(chǎn)生，最后使用CSS（Cascading Style Sheet，層疊樣式表）來進行“表現(xiàn)”重構(gòu)網(wǎng)站布局，丟棄繁冗復(fù)雜的表格。DIV+CSS的布局方式使得內(nèi)容和表現(xiàn)分離，如果采用外部樣式表，可以大大簡化網(wǎng)站代碼的字節(jié)數(shù)，降低了服務(wù)器的負擔(dān)，使得下載速度更快。

DIV+CSS的布局方法是基于盒模型的概念，可以把每個DIV塊看成是一個盒子，盒子里面的東西和盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin），如圖1所示。

用DIV+CSS設(shè)計思路是這樣的：

（1）用DIV來定義語義結(jié)構(gòu)；

（2）為這個CSS定義的盒子內(nèi)加上內(nèi)容，如文字、圖片等；

（3）最后用CSS來美化網(wǎng)頁，如加入背景、線條邊框、對齊屬性等；

下面通過一個實例來具體說明，用表格布局的頁面如圖2所示，接下來我們用DIV+CSS的布局方式來重構(gòu)這個頁面。

首先用div來定義結(jié)構(gòu)：

這個頁面的布局是一個典型的上中下版面分欄結(jié)構(gòu)，如圖3所示。

其結(jié)構(gòu)代碼如下：

上面我們定義了四個大盒子，分別是body、header、main、footer，在main這個盒子中又分了左右兩個小盒子：menu（菜單欄）和content（內(nèi)容）。把header、main和footer這三個盒子放進body這個大盒子，是為了讓這些盒子等寬，并從上到下整齊排列，然后在整個頁面中居中對齊，方便控制。

定義body的樣式是：

body {

font-family: \"宋體\"， Arial， sans-serif;/*定義網(wǎng)頁默認字體樣式*/

font-size: 12px;

margin: 10px auto;/*定義上下邊界為10px，左右自動，使得左右居中*/

height: auto;width: 800px;/*定義寬和高*/

border: 1px solid #006633;/*定義邊界為1px寬，實線，顏色為#006633*/

}

在頁頭的整個區(qū)塊里，應(yīng)用一幅背景圖header.gif即可。其樣式代碼為：

#header {

height: 145px; width: 800px; /*定義寬和高*/

background-image:url(header.gif);/*定義背景圖片*/

background-repeat: no-repeat;/*定義背景圖片不平鋪*/

margin:0px;/* 定義上下左右邊界為0px*/

}

為了統(tǒng)一定位menu和content這兩個子區(qū)塊，main區(qū)塊里放置兩個區(qū)塊，的樣式代碼為：

#main {

height: 330px;

width: 800px;

margin:0px;

}

菜單欄menu區(qū)塊了放置了一個背景圖片menu.gif，靠左浮動，代碼如下：

#menu{

float:left; /* 定義menu區(qū)塊的位置為左浮動，一般定義兩個并排放置的區(qū)塊時常用float屬性*/

background-image:url(menu.gif); /*定義背景圖片*/

background-repeat:no-repeat; /*定義背景圖片不平鋪*/

margin:0px 3px 0px 0px;/*依次分別為上下左右邊界*/

width:200px;height:330px;

}

超鏈接的文字用無項目列表充當(dāng)內(nèi)容，在menu區(qū)塊里加入鏈接的內(nèi)容項：

把ul和li也可以理解成小的區(qū)塊，下面定義樣式如下：

#menu ul{

margin:60px 60px 60px 55px;

font-size:14px;

list-style-type: none;

}

#menu li a{/*定義導(dǎo)航欄超鏈接的樣式*/

color:#000000;

text-decoration:none;/*文字無下劃線*/

padding-top:4px;

display:block;

width:90px;

height:22px;

text- align:center;

background-color: #97c0ff;

margin-left:2px;

}

#menu li a:hover{/*定義鼠標移到超鏈接文字的樣式*/

text-decoration:underline;/*文字有下劃線*/

color:#ffffff;

}

內(nèi)容部分主要放入公司的一些說明，在content中先填入內(nèi)容：

然后定義content塊的樣式，代碼如下：

#content{

float:left;

padding:30px 30px;

}

對于版權(quán)欄，給它加個背景，與頁頭相映，里面文字要自動居中對齊，樣式代碼如下：

#footer {

height: 20px;width: 800px;

margin:0px;

text- align: center;

background-color: #609FFF;

}

最終可以把所有的樣式存到另一個樣式文件style.css中，其全部樣式代碼結(jié)構(gòu)如下：

index.htm中的結(jié)構(gòu)代碼是這樣的：

\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

本公司實行全程服務(wù)……

4結(jié)語

DIV+CSS網(wǎng)頁布局方法已經(jīng)逐步成為主流的網(wǎng)頁布局方法，當(dāng)然在這個過渡時期，并不是所有的網(wǎng)站都已采用這種方法，有些仍然在使用表格及框架的混合，或者是表格及浮動框架的混合，但基于新Web標準下的DIV+CSS網(wǎng)頁布局方法必定逐步取代這些舊的布局模式，成為未來發(fā)展的方向。

參考文獻：

[1] 曾順，精通CSS+DIV網(wǎng)頁樣式與布局，北京，人民郵電出版社，2007.

[2] 李燁，別具光芒DIV+CSS網(wǎng)頁布局與美化，北京，人民郵電出版社，2007.

注：本文中所涉及到的圖表、注解、公式等內(nèi)容請以PDF格式閱讀原文