Dreamweaver 8 中的 CSS 概述

Dreamweaver 设计视图中的可视化显示

在本节中，您可以找到所有令高级 CSS 开发人员感到欣喜的变化。这些变化包括新增加了一些可帮助您查看样式显示的工具，以及对 Dreamweaver 呈现的样式属性的改进。

用于 CSS 显示的工具

可以使用第一组显示选项查看或创建包含支持不同媒体类型的不同样式表的页面。可以选择“查看”>“样式呈现”，然后选择不同的媒体类型来设计或测试样式。如果您感到疑惑(某些人可能会有此表现)，那么在网站中集成多种媒体类型最轻松的方法是定义单独的打印媒体样式表。macromedia.com 网站利用的就是单独的打印媒体样式表。

图 8. 显示可能存在的媒体类型的“样式呈现”菜单

容易获得的易于查看的选项是最后这一个：显示样式。该选项默认为启用，但取消选中它会删除所有 CSS 呈现。作为一种全面检查方式，该选项对于关注辅助功能的人会很有用。例如，在无 CSS 呈现的情况下查看页面可帮助开发人员了解内容顺序，因为屏幕阅读器可能会遇到它。

“文档”工具栏中包含另一组显示选项。单击可视化助理按钮(俏皮的眼睛)可显示以下子菜单。

图 9. 文档工具栏中的“可视化助理”菜单

这些选项对那些需定义包括框属性和外框的属性的用户非常有用。在下面每个解释中，我将提供具有完全相同页面的截屏。每一截屏均会显示，在仅启用所述显示选项的情况下页面的显示方式。截屏中包括一个使用定位、填充、边距定义的 DIV 标签；一个仅用来放置 P 标签的 DIV 标签以及一个 P 标签。

• CSS 布局背景：该选项可为所有受到 CSS 属性影响的元素添加背景色。由于打开该设置会影响文本元素的颜色外观，因此建议您根据需要启用或禁用该选项。

  备注：布局背景的颜色可能与图 10 中的颜色不一致，并且在打开或关闭该功能时，背景颜色会发生变化。Dreamweaver 可向背景颜色共分配 16 种颜色。如果页面上的 DIV 标签多于 16 个，并且有些是嵌套标签，那么重叠的背景颜色可能相同。先关闭该功能然后再重新打开可帮助您解决此问题。

  

  图 10.在启用“CSS 布局背景”可视化助理的情况下显示的样式

• CSS 布局框模型：该选项可在选定框元素的内外添加一些剖面线，用来代表所有填充和边距设置。您需要在 csstest.htm 范例文件中为它选择虚线框，以便如图 11 中所示。另外，一旦选定了该元素，就会出现一个工具提示，具体情况取决于鼠标指针悬停在元素内的位置。在下面的截屏中，鼠标指针位于选定 DIV 标签的外框上。如果悬停在外剖面线上，则工具提示仅指示边距设置。如果悬停在内剖面线上，则工具提示仅指示填充设置。如果悬停在内容上，则工具提示将指示宽度和高度等设置。

  

  图 11.在启用“CSS 布局框模型”可视化助理的情况下显示的样式

• CSS 布局外框：该选项给所有 DIV 标签添加一个外框。这不仅有助于开发人员选择 DIV 标签，而且是一种了解哪些元素受 DIV 标签控制的简便方法。例如，在下面的截屏中，很容易看出页面的最后一段不在 DIV 标签中，而它上面的段落则在该标签中。

  

  图 12.在启用“CSS 布局外框”可视化助理的情况下显示的样式

• 层外框：该选项只给使用框模型属性定义的 DIV 标签添加外框。也就是说，它给那些用于定位的 DIV 标签添加外框。参见以下截屏中的插图(请记住中间段落包含在 DIV 标签中，而该标签无边框)。顶框仍保留其高亮显示边框。

  

  图 13.在启用“层外框”可视化助理的情况下显示的样式

元素的可视化显示得到改进

Dreamweaver 8 在呈现 CSS 元素方面有了很大改进，至少包括一个在前面截屏中显示的元素。过去，使用任何类型边框定义的框元素都以单行显示。现在，Dreamweaver 8 可显示所有边框类型，包括截屏中所示的虚线。

最明显的改进在于 Dreamweaver 呈现各种定位元素(尤其是复杂页面中的元素和带有嵌套标签的元素)的方式。下面是一个有关呈现改进的示例：

• 边框样式
• 定位属性，尤其是嵌套元素
• 支持溢出属性
• 首行和首字母伪元素
• 支持在水平线上呈现 CSS 属性

第 3 页 共 10 页

上一页

下一頁