現(xiàn)在使用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局是非常主流的，這里向大家描述一下DIV標(biāo)簽進(jìn)行布局，如果有一個(gè)帶有附加到文檔的定位樣式的現(xiàn)有CSS樣式表，使用該標(biāo)簽將非常有用。

DIV標(biāo)簽進(jìn)行布局

插入DIV標(biāo)簽進(jìn)行布局

可以使用DIV標(biāo)簽創(chuàng)建CSS布局塊并在文檔中對(duì)它們進(jìn)行定位。如果有一個(gè)帶有附加到文檔的定位樣式的現(xiàn)有CSS樣式表，使用該標(biāo)簽將非常有用。DreamWeaver使您能夠快速插入DIV標(biāo)簽并對(duì)其應(yīng)用現(xiàn)有樣式。您可以將Dreamweaver設(shè)計(jì)文件用作CSS布局的起始點(diǎn)。從“新建文檔”對(duì)話框的“頁(yè)面設(shè)計(jì)(CSS)”類(lèi)別中選擇一個(gè)文件.

若要插入DIV標(biāo)簽，請(qǐng)執(zhí)行以下操作：

1.在“文檔”窗口中，將插入點(diǎn)放置在要顯示DIV標(biāo)簽的位置。

2.執(zhí)行下列操作之一：

選擇“插入”>“布局對(duì)象”>“DIV標(biāo)簽”。
在“插入”欄的“布局”類(lèi)別中單擊“DIV標(biāo)簽”按鈕,出現(xiàn)“插入DIV標(biāo)簽”對(duì)話框。

3.完成對(duì)話框。

4.單擊“確定”。

DIV標(biāo)簽以一個(gè)框的形式出現(xiàn)文檔中，并帶有占位符文本。將指針移到該框的邊緣上時(shí)，Dreamweaver會(huì)高亮顯示該框。如果已經(jīng)給DIV標(biāo)簽分配了絕對(duì)位置，它就可充當(dāng)一個(gè)Dreamweaver層。有

使用DIV標(biāo)簽進(jìn)行布局

插入DIV標(biāo)簽后，您可以對(duì)其進(jìn)行操作或者在其中添加內(nèi)容。絕對(duì)定位的DIV標(biāo)簽為Dreamweaver層。

在為DIV標(biāo)簽分配了邊框后，或者在選定了“CSS布局外框”后，DIV標(biāo)簽便具有可視邊框。（默認(rèn)情況下，“查看”>“可視化助理”菜單中已經(jīng)選定了“CSS布局外框”。）將指針移到DIV標(biāo)簽上時(shí)，Dreamweaver將高亮顯示此標(biāo)簽。

在選擇DIV標(biāo)簽時(shí)，可以在“CSS樣式”面板中查看和編輯它的規(guī)則。您也可以向DIV標(biāo)簽添加內(nèi)容，方法是：將插入點(diǎn)放在DIV標(biāo)簽中，然后就像在頁(yè)面中添加內(nèi)容那樣添加內(nèi)容。

若要查看和編輯應(yīng)用于DIV標(biāo)簽的規(guī)則，請(qǐng)執(zhí)行以下操作：

1.執(zhí)行以下操作之一以選擇DIV標(biāo)簽：
單擊DIV標(biāo)簽的邊框。提示:查找標(biāo)記色彩以查看邊框。
在DIV標(biāo)簽內(nèi)單擊，然后按兩次Ctrl+A(Windows)或Command+A(Macintosh)。
在DIV標(biāo)簽內(nèi)單擊，然后從“文檔”窗口底部的標(biāo)簽選擇器中選擇DIV標(biāo)簽。

2.如果“CSS樣式”面板尚未打開(kāi)，請(qǐng)選擇“窗口”>“CSS樣式”以打開(kāi)“CSS樣式”面板.應(yīng)用于DIV標(biāo)簽的規(guī)則顯示在面板中。

3.根據(jù)需要進(jìn)行編輯。

若要在DIV標(biāo)簽中放置插入點(diǎn)以添加內(nèi)容，請(qǐng)執(zhí)行以下操作：在該標(biāo)簽邊框內(nèi)的任意位置單擊。

若要更改DIV標(biāo)簽中的占位符文本，請(qǐng)執(zhí)行以下操作：選擇該文本，然后在它上面鍵入內(nèi)容或按Delete鍵。就像在頁(yè)面中添加內(nèi)容那樣，可以將內(nèi)容添加到DIV標(biāo)簽中。

更改DIV標(biāo)簽的高亮顏色

在“設(shè)計(jì)”視圖中將指針移到DIV標(biāo)簽的邊緣上時(shí)，Dreamweaver將高亮顯示標(biāo)簽的邊框。如果需要，可以啟用或禁用高亮顯示功能，或者在“首選參數(shù)”對(duì)話框中更改高亮顏色。

若要更改DIV標(biāo)簽的高亮顯示首選參數(shù)，請(qǐng)執(zhí)行以下操作：

1.選擇“編輯”>“首選參數(shù)”(Windows)或Dreamweaver>“首選參數(shù)”(Macintosh),即顯示“首選參數(shù)”對(duì)話框。

2.從左側(cè)的類(lèi)別列表中選擇“標(biāo)記色彩”。

3.進(jìn)行下面其中一項(xiàng)更改：
若要更改DIV標(biāo)簽的高亮顏色，請(qǐng)單擊“鼠標(biāo)滑過(guò)”顏色框并使用顏色選擇器來(lái)選擇一種高亮顏色（或在文本框中輸入高亮顏色的十六進(jìn)制值）。
若要對(duì)DIV標(biāo)簽啟用或禁用高亮顯示功能，請(qǐng)選擇或取消選擇“鼠標(biāo)滑過(guò)”的“顯示”復(fù)選框。這些選項(xiàng)會(huì)影響當(dāng)指針滑過(guò)時(shí)Dreamweaver會(huì)高亮顯示的所有對(duì)象，例如表格。

4.單擊“確定”。
 

【編輯推薦】

1. 深入學(xué)習(xí)DIV標(biāo)簽概念及其用法
2. IE6.0對(duì)padding的解讀分析
3. 利用img和div標(biāo)簽實(shí)現(xiàn)圖像下拉列表的模擬
4. DIV+CSS開(kāi)發(fā)Xhtml網(wǎng)頁(yè)對(duì)SEO優(yōu)化的影響
5. DIV CSS網(wǎng)頁(yè)布局中對(duì)段落進(jìn)行排版的方法