Dreamweaver/處理CSS布局可視化

關(guān)于 CSS 布局可視化

在“設(shè)計”視圖中工作時，Dreamweaver 允許您顯現(xiàn) CSS 布局塊。CSS 布局塊是一個 HTML 頁面元素，您可以將它定位在頁面上的任意位置。更具體地說，CSS 布局塊是不帶 display:inline 的 div 標(biāo)簽，或者是包括 display:block、position:absolute 或 position:relative CSS 聲明的任何其他頁面元素。下面是幾個在 Dreamweaver 中被視為 CSS 布局塊的元素示例：

1. div 標(biāo)簽
2. 指定了絕對或相對位置的圖像
3. 指定了 display:block 樣式的 a 標(biāo)簽
4. 指定了絕對或相對位置的段落,出于可視化呈現(xiàn)的目的，CSS 布局塊不包含內(nèi)聯(lián)元素（也就是代碼位于一行文本中的元素）或段落之類的簡單塊元素。

Dreamweaver 提供了多個可視化助理，供您查看 CSS 布局塊。例如，在設(shè)計時可以為 CSS 布局塊啟用外框、背景和框模型。將鼠標(biāo)指針移動到布局塊上時，也可以查看顯示有選定 CSS 布局塊屬性的工具提示。

下面的 CSS 布局塊可視化助理列表描述 Dreamweaver 為每個助理呈現(xiàn)的可視化內(nèi)容：

'CSS 布局外框'向您顯示頁面上所有 CSS 布局塊的外框。

'CSS 布局背景'向您顯示各個 CSS 布局塊的臨時指定背景顏色，并隱藏通常出現(xiàn)在頁面上的所有其他背景顏色或圖像。 每次啟用可視化助理查看 CSS 布局塊背景時，Dreamweaver 都會自動為每個 CSS 布局塊分配一種不同的背景顏色。（Dreamweaver 使用算法自動選擇顏色 － 您無法自行指定顏色。）指定的顏色在視覺上與眾不同，可幫助您區(qū)分不同的 CSS 布局塊。

'CSS 布局框模型'向您顯示所選 CSS 布局塊的框模型（即填充和邊界）。

查看 CSS 布局塊

如果需要，可以啟用或禁用 CSS 布局塊可視化助理。有關(guān)每個可視化助理所呈現(xiàn)的內(nèi)容的說明，請參見關(guān)于 CSS 布局可視化。

• '若要查看 CSS 布局塊外框，請執(zhí)行以下操作：'
  • 選擇“查看”>“可視化助理”>“CSS 布局外框”。
• '若要查看 CSS 布局塊背景，請執(zhí)行以下操作：'
  • 選擇“查看”>“可視化助理”>“CSS 布局背景”。
• '若要查看 CSS 布局塊框模型，請執(zhí)行以下操作：'
  • 選擇“查看”>“可視化助理”>“CSS 布局框模型”。

通過單擊“文檔”工具欄上的“可視化助理”按鈕，也可以使用 CSS 布局塊可視化助理選項。

將設(shè)計時間樣式表與 CSS 布局塊一起使用

可以使用設(shè)計時間樣式表來顯示通常未被視為 CSS 布局塊的元素的背景、邊框或框模型。為此，必須首先創(chuàng)建設(shè)計時間樣式表，此表會將 display:block 屬性分配給相應(yīng)頁面元素。

'若要將 CSS 布局塊可視化助理與非 CSS 布局塊的元素一起使用，請執(zhí)行以下操作：'

1. 創(chuàng)建外部 CSS 樣式表，方法是：選擇“文件”>“新建”，然后在“類別”列中選擇“基本頁”，在“基本頁”列中選擇“CSS”，然后單擊“創(chuàng)建”。
2. 在新樣式表中，創(chuàng)建規(guī)則，這些規(guī)則會將 display:block 屬性分配給要顯示為 CSS 布局塊的頁面元素。 例如，如果要顯示段落和列表項目的背景顏色，可以創(chuàng)建具有以下規(guī)則的樣式表：p{display:block;},li{display:block;},保存此文件。
3. 在“設(shè)計”視圖中，打開要附加新樣式的頁面,選擇“文本”>“CSS 樣式”>“設(shè)計時間”。
4. 在“設(shè)計時間樣式表”對話框中，單擊“只在設(shè)計時顯示”文本框上方的加號 (+) 按鈕，選擇剛才創(chuàng)建的樣式表，然后單擊“確定”。
5. 單擊“確定”以關(guān)閉“設(shè)計時間樣式表”對話框。

樣式表將附加到文檔中。如果使用上面的示例創(chuàng)建了樣式表，則會使用 display:block 屬性對所有段落和列表項目進(jìn)行格式設(shè)置，從而允許對段落和列表項目啟用或禁用 CSS 布局塊可視化助理。

參考來源

http://www.baike.baidu.com

Dreamweaver使用手冊導(dǎo)航

Dreamweaver安裝: Dreamweaver安裝 Dreamweaver使用： 新建站點| 創(chuàng)建新文檔| 保存新文檔| 關(guān)于CSS層| 插入層| 管理層| 將層轉(zhuǎn)化為表格| 制作層動畫| 處理CSS布局可視化| div標(biāo)簽進(jìn)行布局| 關(guān)于表格| 添加及刪除行和列| 拆分和合并單元格 |復(fù)制、粘貼和刪除單元格| 設(shè)置表格和單元格的格式| 選擇表格元素| 關(guān)于框架和框架集| 創(chuàng)建框架和框架集| 框架中打開文檔| 查看和設(shè)置框架屬性| 關(guān)于Dreamweaver模板| 模板標(biāo)簽語法| 設(shè)計視圖和代碼視圖中的模板和基于模板的文檔| 創(chuàng)建Dreamweaver模板| 創(chuàng)建可編輯區(qū)域| 編輯和更新模板| DreamWeaver管理模板| 關(guān)于使用頁面| 設(shè)置頁面屬性 | 任務(wù)自動化| 在瀏覽器中預(yù)覽和測試頁面| 插入文本| 設(shè)置段落格式和文檔結(jié)構(gòu)| 設(shè)置文本格式| 使用層疊樣式表設(shè)置文本格式| 創(chuàng)建鏈接| 管理鏈接| 導(dǎo)航條| DreamWeaver插入圖像| 使用JavaScript行為 Dreamweaver其他 : Dreamweaver快捷鍵 | Dreamweaver序列號