辅助功能*

目录

    
  1. 简介
  2. 用户界面变化
  3. Dreamweaver 设计视图中的可视化显示
  4. 变化越多则越接近一致
  5. 工作流程小建议
  6. 快速生成简单样式并以此为基础
  7. 向页面添加内容的同时设置 CSS
  8. 使用 Dreamweaver 了解规则
  9. 使用“CSS 样式”面板创建和编辑属性
  10. 从文档样式表移动到外部样式表

Dreamweaver 8 中的 CSS 概述

用户界面变化

Dreamweaver 8 保留了 Dreamweaver MX 2004 中引入的大部分 CSS 特定的用户界面元素。事实上，MX 2004 界面选项对于此版本的工作流程相当重要，因此我专门使用一节来描述这些相同的界面元素。此版本在现有界面的基础上做了一些改动，增强了用户工作流程的优化。

属性检查器

属性检查器只改变了一点：“CSS/编辑 CSS”按钮简介。该按钮使开发人员能够快速访问“CSS 样式”面板中的相关定义。如果“CSS 样式”面板已经打开，则 CSS 按钮呈灰色。截屏上显示我选择了一个已经样式化的段落 <P> 标签，但是由于已经为该样式打开“CSS 样式”面板，因此 CSS 按钮被禁用。

Dreamweaver 8 中的属性检查器，其中 CSS 按钮因“CSS 样式”面板已经为选定样式打开而呈灰色

图 1. Dreamweaver 8 中的属性检查器，其中 CSS 按钮因“CSS 样式”面板已经为选定样式打开而呈灰色

(+) 查看大图

“CSS 样式”面板

“CSS 样式”面板做了一些有趣的改动，尤其是使用外部 CSS 编辑器的开发人员会感兴趣。

首先是一处小改动：包括“CSS 样式”面板和“层”面板的面板分组，称为 CSS。如图 2 所示，此改动虽小，但能使用户快速找到相关面板组。

面板组已重命名为 CSS 以提高可用性

图 2. 面板组已重命名为 CSS 以提高可用性

备注: 折叠图 2 中所示的 CSS 面板组时，单击属性检查器中的 CSS 按钮将打开“CSS 样式”面板。这样，用户总能找到该面板组。

一旦“CSS 样式”面板打开，Dreamweaver 8 中的改动将变得更加明显，同时用户也可能有点疑惑。

“CSS 样式”面板具有两种模式：“所有”和“当前”。实际上我觉得这两个名称确实使人感到疑惑，尽管这仅仅是因为它太简单了。“所有”模式显示影响整个页面的声明的列表 — 本质上是“所有”声明。“当前”模式显示影响当前元素的 CSS 声明。明白了吗？没有理由疑惑！

“当前”模式

在“当前”模式下，“CSS 样式”面板显示以下内容：所选内容的摘要、规则和属性。图 3 显示当插入点位于重新定义为以蓝色、Geneva、12 像素显示的段落中时看到的情况。

“当前”模式下的“CSS 样式”面板，其中插入点位于重新定义为以蓝色、Geneva、12 像素显示的段落中

图 3.“当前”模式下的“CSS 样式”面板，其中插入点位于重新定义为以蓝色、Geneva、12 像素显示的段落中

“摘要”类别只列出那些影响所选内容(这里为当前选定的段落)外观的属性。如果在另一个段落内单击，而该段落被指定了称为 hilite_text 的类样式，则“CSS 样式”面板中的摘要类别显示该类样式定义的新颜色(#99FF66，见图 4)，而非段落标签的重新定义所定义的颜色 (#0000FF)。

显示 hilite_text 样式类信息的“CSS 样式”面板的“摘要”、“规则”和“属性”类别

图 4. 显示 hilite_text 样式类信息的“CSS 样式”面板的“摘要”、“规则”和“属性”类别

“规则”类别显示影响当前所选内容的规则层叠。参见图 4。在图 4 中，层叠中的第一条规则是 body 标签中定义的样式。按照“接近”所选内容的规则，该规则中定义的属性是矛盾的，因此，摘要部分不显示那些属性。在 CSS 术语中，此“接近度”称为特征。有关特征的更多信息，请访问 W3C 站点*。虽然在层叠中接下来是段落标签的重新定义设置的属性，但是只有字体系列和字体大小属性影响当前所选内容。最后的规则是 hilite_text 类样式，它只定义文本颜色。

有一种极好的替代显示，通过单击“规则”部分中的内部按钮即可使用。“关于”类别显示有关当前选定属性的有用信息，如图 5 所示。“关于”类别的标题表明，选定的属性是颜色属性。“关于”类别还表明，包含该特定属性的是哪条规则，以及该规则定义的位置。

“当前”模式下的“关于”类别，其中显示包含特定属性的是哪条规则，以及该规则定义的位置

图 5.“当前”模式下的“关于”类别，其中显示包含特定属性的是哪条规则，以及该规则定义的位置

这将我们带到了“CSS 样式”面板的“属性”类别。单击“摘要”类别中的任一属性，或者单击“规则”类别中的一条规则，相应规则中定义的属性将显示在“属性”类别中。“属性”类别还表明哪些属性在影响所选内容：任何矛盾的和超过层叠级别的属性，其名称上都会显示一道线。试验一下，选择 csstest.htm 文件第一行上的单词“highlighted”，然后选择“规则”类别中的 <body> 标签。在“属性”类别中，您会发现字体系列和字体大小上都有一道线，原因是按照 <p> 标签中定义的字体系列和字体大小属性，<body> 标签中为字体系列和字体大小定义的属性是矛盾的。<p> 标签中的属性覆盖了 <body> 标签中的规则，因为它们更“接近”高亮显示的选定内容。

备注: 在本文的后面，您将创建 csstest.html 文件，但目前可暂时利用范例文件中的 csstest.html 文件。

“属性”类别是面板的最基本部分。您不仅可以编辑已经定义的任何属性的细节(例如，将 .hilite_text 中定义的颜色属性从 #99FF66 改成另一种颜色，这就像单击颜色框或键入一种新的颜色那样简单)，还可以向该规则添加属性。单击“添加属性”链接可提供不同于 Dreamweaver 的定义 CSS 样式的方法，我会在“用户工作流程”一节中详细介绍该方法。

“所有”模式

“CSS 样式”面板的“所有”模式显示页面可用的所有规则，不管这些规则是在页首内或链接的单独样式表中定义的，还是从页面导入的。如图 6 所示，依据定义规则的位置，这些规则是分开的：文档头中定义的规则显示在 <style> 下，而样式表中定义的规则显示在样式表名称下。

备注: 内联样式(即标签自身范围内定义的样式)在“所有”模式下不会显示，而是适当的时候在“当前”模式下显示。

“所有”模式下的“CSS 样式”面板，其中显示依据定义位置而分隔的规则

图 6.“所有”模式下的“CSS 样式”面板，其中显示依据定义位置而分隔的规则

除了“所有规则”类别中的规则列表外，还包含一个属性表，其作用和“当前”模式下的属性表相同。在 Dreamweaver MX 2004 的“CSS 样式”面板中我们很熟悉这种模式，在那里它显示和组织页面可用的规则。不同之处(颇受欢迎的地方)是，属性表允许查看任何选定规则的属性、更改任何属性以及向规则添加属性。期望拥有 500 像素宽的面板来查看所有属性的旧时代已经过去了！

属性表

属性表实在太强大了，因此我专门用一节来描述它。我曾经提到，属性表同时适用于“所有”模式和“当前”模式。敏锐的 Dreamweaver MX 2004 用户会发现它与相关的 CSS 面板(它替代的面板)有相同之处。随着 Dreamweaver 8 的使用，该用户界面元素的强大性与灵活性将逐渐展现。我将花较多的时间来讲解如何在工作流程中使用它。而现在我先来介绍左下角的按钮。

属性表的右按钮只显示在当前文档中设置的属性，而非所有可设置的属性

图 7. 属性表的右按钮只显示在当前文档中设置的属性，而非所有可设置的属性

对于我在本节中提供的截屏，我选择了右按钮，它只显示设置属性。其它两个按钮显示可以设置的所有属性，左按钮按类别分组并列出属性，中间按钮按字母顺序列出属性。

在下节中，我将回顾 Dreamweaver 8 中 CSS 可视化显示的所有新功能。

第 2 页 共 10 页
上一页
下一頁