编辑“Dreamweaver/处理CSS布局可视化”

{{Dreamweaver top}}
<font color=red>'''关于 CSS 布局可视化'''</font>

在“设计”视图中工作时，Dreamweaver 允许您显现 CSS 布局块。CSS 布局块是一个 HTML 页面元素，您可以将它定位在页面上的任意位置。更具体地说，CSS 布局块是不带 display:inline 的 div 标签，或者是包括 display:block、position:absolute 或 position:relative CSS 声明的任何其他页面元素。下面是几个在 Dreamweaver 中被视为 CSS 布局块的元素示例：
#div 标签 
#指定了绝对或相对位置的图像 
#指定了 display:block 样式的 a 标签 
#指定了绝对或相对位置的段落,出于可视化呈现的目的，CSS 布局块不包含内联元素（也就是代码位于一行文本中的元素）或段落之类的简单块元素。
 
Dreamweaver 提供了多个可视化助理，供您查看 CSS 布局块。例如，在设计时可以为 CSS 布局块启用外框、背景和框模型。将鼠标指针移动到布局块上时，也可以查看显示有选定 CSS 布局块属性的工具提示。

下面的 CSS 布局块可视化助理列表描述 Dreamweaver 为每个助理呈现的可视化内容：

''''CSS 布局外框''''向您显示页面上所有 CSS 布局块的外框。

''''CSS 布局背景''''向您显示各个 CSS 布局块的临时指定背景颜色，并隐藏通常出现在页面上的所有其他背景颜色或图像。
每次启用可视化助理查看 CSS 布局块背景时，Dreamweaver 都会自动为每个 CSS 布局块分配一种不同的背景颜色。（Dreamweaver 使用算法自动选择颜色 － 您无法自行指定颜色。）指定的颜色在视觉上与众不同，可帮助您区分不同的 CSS 布局块。

''''CSS 布局框模型''''向您显示所选 CSS 布局块的框模型（即填充和边界）。

<font color=red>'''查看 CSS 布局块'''</font>

如果需要，可以启用或禁用 CSS 布局块可视化助理。有关每个可视化助理所呈现的内容的说明，请参见关于 CSS 布局可视化。

*''''若要查看 CSS 布局块外框，请执行以下操作：''''
**选择“查看”>“可视化助理”>“CSS 布局外框”。 
*''''若要查看 CSS 布局块背景，请执行以下操作：''''
**选择“查看”>“可视化助理”>“CSS 布局背景”。 
*''''若要查看 CSS 布局块框模型，请执行以下操作：''''
**选择“查看”>“可视化助理”>“CSS 布局框模型”。 
通过单击“文档”工具栏上的“可视化助理”按钮，也可以使用 CSS 布局块可视化助理选项。

<font color=red>'''将设计时间样式表与 CSS 布局块一起使用'''</font>

可以使用设计时间样式表来显示通常未被视为 CSS 布局块的元素的背景、边框或框模型。为此，必须首先创建设计时间样式表，此表会将 display:block 属性分配给相应页面元素。

''''若要将 CSS 布局块可视化助理与非 CSS 布局块的元素一起使用，请执行以下操作：''''
#创建外部 CSS 样式表，方法是：选择“文件”>“新建”，然后在“类别”列中选择“基本页”，在“基本页”列中选择“CSS”，然后单击“创建”。 
#在新样式表中，创建规则，这些规则会将 display:block 属性分配给要显示为 CSS 布局块的页面元素。 例如，如果要显示段落和列表项目的背景颜色，可以创建具有以下规则的样式表：p{display:block;},li{display:block;},保存此文件。 
#在“设计”视图中，打开要附加新样式的页面,选择“文本”>“CSS 样式”>“设计时间”。 
#在“设计时间样式表”对话框中，单击“只在设计时显示”文本框上方的加号 (+) 按钮，选择刚才创建的样式表，然后单击“确定”。 
#单击“确定”以关闭“设计时间样式表”对话框。 
样式表将附加到文档中。如果使用上面的示例创建了样式表，则会使用 display:block 属性对所有段落和列表项目进行格式设置，从而允许对段落和列表项目启用或禁用 CSS 布局块可视化助理。


== 参考来源 ==
http://www.baike.baidu.com
{{Dreamweaver}}
[[category:Dreamweaver|C]]