ＤＩＶ＋ＣＳＳ布局可視化嘗試

摘要：用DIV+CSS布局頁面，具備結(jié)構(gòu)清晰、縮減頁面代碼、方便搜索引擎搜索、內(nèi)容與表現(xiàn)分離等優(yōu)點，倍受業(yè)界推崇。專業(yè)的網(wǎng)頁制作軟件Dreamweaver 8提供了非常強大的CSS功能，如何引導(dǎo)初學(xué)者入門，充分利用這一功能對DIV元素進行控制，實現(xiàn)頁面布局，關(guān)鍵在于讓初學(xué)者認識DIV元素，理解CSS樣式，掌握應(yīng)用CSS控制頁面元素的方法。

關(guān)鍵詞：DIV；CSS；布局；可視化

中圖分類號：TP393文獻標識碼：A文章編號：1009-3044(2008)26-1821-05

DIV+CSS Layout Visual Attempt

YANG Fang-ju

(Guizhou Vocational Technology College of Electronic Information Computer Science Department， Kaili 556000， China)

Abstract: With the DIV+CSS layout page， has the structure clear， the deflation page code， convenience merits and so on search engine. content and performance separation， which are received and esteemed by all .Specialized homepage manufacture software Dreamweaver 8 has provided the extremely formidable CSS function， how to guide the beginner to cross the threshold and fully use this function to carry on the control to the DIV element， realizes the page layout， the key lies in making the beginner understand the DIV element and the CSS pattern; as well as mastering and using the CSS to control the method of page element.

Key words: DIV; CSS; layout; visualization

目前，業(yè)界越來越關(guān)注DIV+CSS的標準化設(shè)計，大到各大門戶網(wǎng)站，小到不計其數(shù)的個人網(wǎng)站，許多初學(xué)者也想用DIV+CSS設(shè)計網(wǎng)頁，但由于現(xiàn)在的學(xué)習(xí)資料介紹的都是DIV+CSS的代碼，初學(xué)者難以入門，本人在Dreamweaver 8中，進行DIV+CSS布局可視化嘗試，覺得簡單易行，在此闡述如下，希望能給初學(xué)者一點幫助。

1 認識DIV標簽與CSS樣式

1.1 DIV標簽（也可稱DIV元素）

DIV 全稱 DIVision 意為“區(qū)分”，是XHTML中的塊狀元素，即DIV是矩形的，有自己的高度和寬度。在Dreamweaver 8(下面簡稱DW)的設(shè)計視圖中，單擊[插入]面板的[布局]工具欄中的“插入DIV標簽”插入，然后可在其中輸入文字、插入圖片等任何頁面元素，包括其他的DIV元素。選中DIV元素時，其屬性面板中沒有任何可設(shè)置的屬性，也就是說，DIV元素是一個沒有任何特性的容器，如果單獨使用 DIV 而不加任何 CSS， 那么它在網(wǎng)頁中的效果和使用 是一樣的，沒有任何特別之處，默認情況下，一行只能容納一個DIV元素。是什么因素導(dǎo)致DIV元素作為網(wǎng)頁布局的主力元素呢？這是因為DIV沒有任何特性，很容易被CSS控制樣式。

1.2 CSS樣式

CSS是Cascading style Sheet的簡稱，中文譯作“層疊樣式表”，應(yīng)用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景等效果實現(xiàn)更加精確的控制，同時能夠?qū)崿F(xiàn)內(nèi)容與表現(xiàn)的分離。在DW中，可以直接編輯CSS樣式代碼，也可以通過[CSS樣式]面板來創(chuàng)建和編輯CSS樣式規(guī)則。

2 理解CSS的盒子模型

XHTML中大部分的元素（特別是塊狀元素）都可以視為一個盒子，而網(wǎng)頁元素的定位實際就是這些大大小小的盒子在頁面中的定位。CSS的盒子模型如圖1所示。

XHTML中塊狀元素的結(jié)構(gòu)和圖中的盒子相似，除了包含內(nèi)容（文本或圖片）外，還有內(nèi)邊距、邊框和外邊距一層層的包裹。在定位XHTML元素時要充分地考慮到這些要素，才可以更加自如地擺弄這些盒子。圖2是DW的[CSS規(guī)則定義]分類為[方框]的對話框，下面我們將圖1盒子模型與圖2進行對照，有助于對CSS的理解和設(shè)置。其對應(yīng)關(guān)系如表1所示。

圖3是[CSS規(guī)則定義]類型為“邊框”的對話框，與盒模型中的“邊框”border相對應(yīng)，邊框的定義包括[樣式]、[寬度]、[顏色]，同樣，也可以獨立設(shè)置上、右、下、左邊框的樣式、寬度、顏色。

在Web標準中，CSS的width屬性指盒子內(nèi)容的寬度，而整個盒子的實際寬度為：

盒子寬度=padding_left+border_left+margin_eft+width+padding_right+border_ right+margin_right

相應(yīng)地，CSS的height屬性指盒子內(nèi)容的高度，而整個盒子的實際高度為：

盒子高度=margin_top+border_top+padding_top+height+padding_bottom+border _bottom+margin_bottom

3 掌握DIV元素的創(chuàng)建和樣式設(shè)置方法

要使用DIV元素進行網(wǎng)頁布局，首先須學(xué)會使用CSS靈活地設(shè)置DIV元素的樣式。

3.1 DIV元素的創(chuàng)建及width、heigth、border、背景的設(shè)置

步驟1：打開DW，新建文件并保存，命名為exp1.htm。

步驟2：在設(shè)計視圖中，單擊[插入]面板[布局]工具欄中的“插入DIV標簽”，打開如圖4所示的對話框→在[ID]后的文本框中輸入“box1”→[確定]，插入一個DIV元素，如圖5所示。

步驟3：在剛插入的DIV#box1上單擊鼠標右鍵→選擇[CSS樣式]→[新建]打開如圖6所示的對話框→將[定義在]指定為“僅對該文檔”→[確定]，打開對話框。

步驟4：在打開的對話框中[分類]欄選擇[方框]→設(shè)置[寬]150px，[高]80px，如圖2所示在[分類]欄選擇[邊框]→按圖3所示設(shè)置→在[分類]欄選擇[背景]→設(shè)置[背景顏色]#cc99ff→[確定]→單擊F12預(yù)覽，效果如圖7所示。

Width、height屬性常用像素（px）作為固定尺寸的單位，當(dāng)單位為百分比時，DIV元素的寬度和高度為自適應(yīng)狀態(tài)，即寬度和高度適應(yīng)瀏覽器窗口或父容器的尺寸變化而變化。

下面我們將Width和height都改為100%，操作方法如下：

在圖8的[CSS樣式]面板中→雙擊“#box1”， 打開[#box1 CSS規(guī)則定義]對話框→在[分類]欄選擇[方框]→設(shè)置[寬]100%，[高]30%→預(yù)覽，效果如圖9所示。

很顯然，其寬度（100%）隨著瀏覽器的寬度變化而變化。但是高度的問題出現(xiàn)了，雖然設(shè)置為30%，按理說其高度應(yīng)該隨著瀏覽器的高度變化而變化。然而在本例中DIV高度僅和文本高度相當(dāng)，好像高度設(shè)置沒有起作用。

其實設(shè)置高度自適應(yīng)有一個前提，DIV的高度自適應(yīng)是相對于父容器的高度的，本例中DIV父容器為body或者html（不同瀏覽器解析方式不同），body或者html在本例中沒有設(shè)置高度，DIV的高度自適應(yīng)沒有參照物，也就無法生效。

這個問題只要在CSS中設(shè)置body標簽和html標簽的高度，就可解決，操作如下：

步驟1：單擊如圖8所示的[CSS樣式]面板右下角的“新建CSS規(guī)則”按鈕→在打開的如圖6所示的對話框中，[選擇器類型]選擇為[標簽(重新定義特定標簽的外觀)(T)] →在[標簽]欄選擇“body”標簽→將[定義在]指定為“僅對該文檔”→[確定]；

步驟2：在打開的[＃body CSS規(guī)則定義] 對話框中，選擇[類型]為[方框]→設(shè)置[高]100%→[確定]；

步驟3：用步驟1、2同樣的方法設(shè)置“html”標簽的[高]為100%。

現(xiàn)在，DIV#box1的高度隨著瀏覽器的高度變化而變化了。

3.2DIV水平居中的設(shè)置

為了適應(yīng)不同瀏覽用戶的分辨率，網(wǎng)頁設(shè)計者要始終保證頁面整體內(nèi)容在頁面居中。使用HTML表格布局頁面時，只需要設(shè)置布局表格的 align屬性為center即可。而DIV居中沒有屬性可以設(shè)置，只能通過CSS控制其位置。

這里值得注意的一點是：在布局頁面前，網(wǎng)頁制作者一定要把頁面的默認邊距清除，才能保證DIV的正常局中。為了方便操作，常用的方法是使用通配選擇符*，將所有對象的邊距清除，即margin屬性和padding屬性的值設(shè)為0。

步驟1：單擊如圖8所示的[CSS樣式]面板右下角的“新建CSS規(guī)則”按鈕→在打開的如圖6所示的對話框中，[選擇器類型]選擇為[標簽(重新定義特定標簽的外觀)(T)]→在[標簽]后的文本框中輸入“*”→[確定]；

步驟2：在打開的[* CSS規(guī)則定義]對話框中，[類型]選擇為[方框] →勾選[填充]與[邊界]的[全部相同]→在[上]后面的文本框中輸入“0” →[確定]。

使DIV元素水平居中的方法有多種，常用的方法是用CSS設(shè)置DIV的左、右外邊距均為auto，即margin-left屬性和margin-right屬性的值為auto。

以前面的例子exp1.htm為例，在圖8[CSS樣式]面板中→雙擊“＃box1” 打開[＃box1 CSS規(guī)則定義]對話框→在[分類]欄選擇[方框]→取消[邊界]的[全部相同]前的對勾→設(shè)置[右(G)]、[左(E)]都為[自動]如圖10所示→[確定]→預(yù)覽，效果如圖11所示。

由于左外邊距和右外邊距的值相等，均為auto，從而實現(xiàn)了水平局中。

3.3 DIV元素的嵌套

與用表格布局頁面類似，為了實現(xiàn)復(fù)雜的布局結(jié)構(gòu)，DIV元素也需要互相嵌套。不過在布局頁面時盡量少嵌套，因為XHTML元素多重嵌套將影響瀏覽器對代碼的解析速度。下面是一個父DIV中嵌套二個子DIV的例子：

步驟1：新建一個文件，保存并命名為exp2.htm；

步驟2：單擊[布局]工具欄中的“插入DIV標簽”按鈕，打開如圖4所示的對話框→在[ID]后面的文本框中輸入名稱“fubox”→[確定]，插入一個DIV元素；

步驟3：在DIV＃fubox上單擊右鍵→選擇[CSS樣式]→[新建]，打開如圖6所示的對話框→將[定義在]指定為“僅對該文檔”→[確定]

步驟4：在打開的對話框中的[分類]欄選擇[方框]→設(shè)置[寬]300px，[高]200px→在[分類]欄選擇[背景]→設(shè)置[背景顏色]#ff0000→[確定]；

步驟5：刪除DIV#fubox中的默認內(nèi)容“此處顯示 id \"fubox\" 的內(nèi)容”，并將光標定位在DIV#fubox中，用步驟2、3、4同樣的方法插入一個[名稱]zibox1、[寬]140px、[高]80px、[背景顏色]#ffff00的子DIV#zibox1，并將默認內(nèi)容“此處顯示 id \"zibox1\" 的內(nèi)容”替換為“第一個子DIV”；

步驟6：用與步驟5同樣的方法，在fubox中插入一個[名稱]zibox2、[寬]140px、[高]80px、[背景顏色]#ffccff的DIV#zibox2，內(nèi)容替換為“第二個子DIV”。dw的設(shè)計視圖如圖12所示。

當(dāng)然，也可以應(yīng)用3.3節(jié)的局中方法，設(shè)置父DIV#fubox在瀏覽器窗口中局中，子DIV#zibox1、DIV#zibox2在父DIV#fubox中局中，請讀者自己試驗。

3.4 DIV元素的浮動

通過前面的例子不難發(fā)現(xiàn)：一個DIV元素在它所在的容器中總是占據(jù)一行，在exp2.htm中，DIV#fubox 的寬度為300px，DIV#zibox1與DIV#zibox2的寬度都為140px，DIV#zibox1的寬度加DIV#zibox2的寬度等于280px，按理DIV#zibox1和DIV#zibox2在DIV#fubox中完全可以排列在一行上，但DIV#zibox1與DIV#zibox2卻各占據(jù)一行，能否使DIV#zibox1與DIV#zibox2并列于一行呢？回答是肯定的，設(shè)置CSS中的 “float”屬性，可以使多個塊狀元素并列于一行。

float屬性也被稱為浮動屬性，這個詞非常形象。對前面的DIV元素設(shè)置浮動屬性后，當(dāng)前面的DIV元素留有足夠的空白寬度時，后面的DIV元素將自動流上來，和前面的DIV元素并列于一行。float屬性的值有l(wèi)eft、right、none和inherit。很多對象都有inherit屬性，這是繼承屬性，代表繼承父容器的屬性。float屬性值為none時，塊狀元素不會浮動，這也是塊狀元素的默認值。float屬性值為left時，塊狀元素將向左浮動；float屬性值為right時，塊狀元素將向右浮動。

值得注意的是：使多個DIV并列于一行的前提是這一行有足夠的寬度容納多個DIV的寬度。

在exp2.htm中，設(shè)置DIV#zibox1的float屬性為left，可以使DIV#zibox1與DIV#zibox2并列于一行，操作如下：

在[CSS樣式]面板中（如圖12所示）→雙擊“＃fubox #zibox1” 打開[＃fubox #zibox1CSS規(guī)則定義]對話框→在[分類]欄選擇[方框]→設(shè)置[浮動]為“左對齊”→[確定]，dw的設(shè)計視圖如圖13所示，預(yù)覽效果如圖14所示。

這里由于DIV#zibox1設(shè)置成向左浮動，“浮”很形象，即飄到面上，而后面的元素就流上來了，所以有如圖13所示的設(shè)計示圖，DIV#zibox1與DIV#zibox2疊在一起，DIV#zibox1浮在上面。若希望設(shè)計視圖與瀏覽視圖基本一致，則將需要排列在一行的塊狀元素都設(shè)成浮動。讀者可以將DIV#zibox2也設(shè)置成左浮動或右浮動，看看效果。

浮動屬性是CSS布局的最佳利器，可以通過不同的浮動屬性值靈活地定位DIV元素，以達到靈活布局網(wǎng)頁的目的。但有時候由于前面的元素定義了浮動屬性，往某個位置浮了而又不希望后面的元素流上來，怎么辦呢？

為了更加靈活地定位塊狀元素，CSS提供了clear（清除）屬性，clear屬性的值有none（無）、left（左對齊）、right（右對齊）和both（兩者），默認值為none。當(dāng)多個塊狀元素由于前面的元素設(shè)置成浮動屬性而并列時，如果某個元素不需要被“流”上去，即可設(shè)置相應(yīng)的clear屬性。clear（清除）屬性在[CSS規(guī)則定義]對話框的[方框]類中定義，如圖15所示，讀者可自己練習(xí)。

3.5 列表元素布局

頁面大塊區(qū)域的布局一般使用DIV元素，而在某些區(qū)域也使用其他元素，如使用比較廣泛的列表元素（ul li標簽），在傳統(tǒng)的HTML頁面制作中，列表元素使用并不多，而在CSS的幫助下，列表元素變得空前強大，甚至用于小區(qū)域布局。這里我們討論DIV ul li的布局。

列表元素的li是塊狀元素，所以有寬度和高度設(shè)置，并且可以通過浮動屬性的設(shè)置使多個li元素并排。這種結(jié)構(gòu)非常適合于網(wǎng)頁的導(dǎo)航條布局。在頁面布局時，列表元素不需要編號，所以列表元素更多使用無序列表ul標簽。下面我們來制作如下所示的導(dǎo)航條：

步驟1：新建一個文件，保存并命名為exp3.htm；

步驟2：應(yīng)用前面介紹的方法插入一個DIV標簽，并命名為：globalnav；

步驟3：在DIV＃globalnav上單擊右鍵→選擇[CSS樣式]→[新建]，打開如圖6所示的對話框→將[定義在]指定為“新建樣式表文件”→[確定]→在打開的[保存樣式表文件]對話框中，指定保存的位置，輸入文件名稱“nav.css”→[保存]；

步驟4：在打開的對話框中的[分類]欄選擇[方框]→設(shè)置[寬]350px，[高]20px，[背景顏色]#999966，[邊界]：左auto、右auto

步驟5：創(chuàng)建“*”CSS樣式，設(shè)置[填充]為0、[邊界]為0；

步驟6：刪除DIV#globalnav中的默認內(nèi)容“此處顯示 id \" globalnav \" 的內(nèi)容”→以段的形式輸入欄目文字：首頁、公司簡介、服務(wù)理念、產(chǎn)品中心、聯(lián)系我們→選中欄目文字→在屬性面板中設(shè)置為項目列表，如圖16所示。

步驟7：在欄目文字上單擊鼠標右鍵→選擇[CSS樣式]→[新建]，打開[新建CSS規(guī)則]對話框（可以看到選擇器后的文本框為：#globalnav li，正是我們所要的，不要改變它）→[確定]。

步驟8：在打開的[#globalnav li CSS規(guī)則定義]對話框中的[分類]欄選擇[方框]→設(shè)置[寬]68px、[高]20px、[浮動]左對齊→在[分類]欄選擇[邊框]→勾選3個[全部相同]，設(shè)置[樣式]實線，[寬度]1px，[顏色]＃333333→在[分類]欄選擇[列表]→設(shè)置[類型]無→在[分類]欄選擇[類型]→設(shè)置[行高]20px→在[分類]欄選擇[區(qū)塊] →設(shè)置[文本對齊]局中→[確定]。

到此，上面的導(dǎo)航條就做好了，這是一個典型的DIV ul li的布局例子。本例中，CSS樣式是獨立存儲在一個nav.css文件中，實現(xiàn)了內(nèi)容與表現(xiàn)的分離。

4 應(yīng)用DIV+CSS布局頁面

4.1 將頁面內(nèi)容區(qū)塊化

在剛學(xué)習(xí)網(wǎng)頁制作時，總是先考慮怎么設(shè)計，考慮那些圖片、字體、顏色、以及布局方案。這里我們先不考慮“外觀”，而是先分析和規(guī)劃頁面結(jié)構(gòu)，將頁面內(nèi)容區(qū)塊化，如圖17所示。

這個頁面分為上下4行區(qū)域，分別是標志廣告區(qū)、導(dǎo)航區(qū)、主體內(nèi)容區(qū)和版權(quán)信息區(qū)。而主體內(nèi)容區(qū)又分為左右2個大區(qū)，左邊為縱向?qū)Ш絽^(qū)，右邊為主體內(nèi)容區(qū)，主體內(nèi)容區(qū)又分為6個不同內(nèi)容塊。

4.2 應(yīng)用DIV布局

將頁面內(nèi)容區(qū)塊圖用DIV布局，其DIV結(jié)構(gòu)如圖18。

通常將整個頁面包含在一個大的DIV＃container塊中，以便于控制整個頁面內(nèi)容局中顯示，DIV#container中嵌套DIV#banner、DIV#links、DIV#content、DIV#footer，其中DIV#banner、DIV#links、DIV#footer的內(nèi)容布局較簡單，而DIV#content相對較復(fù)雜些，其內(nèi)部又嵌套DIV#left和DIV#right，而DIV#right又嵌套DIV#con1、… DIV#con6等6個內(nèi)容塊。這里設(shè)置DIV#left向左浮動，DIV#right向右浮動，#con1、… #con6向左浮動，而#footer要設(shè)置其clear屬性為“both”，即設(shè)置[清除]為“兩者”。由于篇幅的原因，詳細步驟就省略了。

應(yīng)用DW實現(xiàn)DIV+CSS布局，操作簡單，只要充分理解CSS的盒子模型，掌握應(yīng)用CSS控制頁面元素的方法，便能用DIV輕松布局。