使用 Dreamweaver 设计 CSS 样式 159 使用Dreamweaver设计CSS样式 Dreamweaver 对于CSS技术的支持始于2002年的MX版本 （6.0版本号） ， 最初Dreamweaver 仅把 CSS 作为设置字体样式的一个辅助工具，新建 CSS 样式也被归为【文本】菜单项下。在新 世纪最初的几年里，大家对于 CSS 技术的认识还是比较肤浅的，仅视其为一种雕虫小技。到了 2004 年，当时的 Macromedia 公司逐渐意识到 CSS 技术的重要性，并在 2005 年推出的 Dreamweaver 0 版本中完全升级对 CSS 技术的支持。此时，CSS 在网页布局中的实践应用，以 及各种支持 CSS 技术的工具也雨后春笋般地冒出来。 自从 Adobe 并购 Macromedia 公司之后，Adobe 把支持 CSS 技术作为 Dreamweaver 升级的 核心，因此在 Dreamweaver CS3、Dreamweaver CS4 等版本中都会看到一个相对成熟的 CSS 技 术应用环境。不管是可视化操作环境，还是 CSS 编码环境，与目前各种 Web 设计工具相比较， Dreamweaver 都应该算是最优秀的。 很多高手排斥用 Dreamweaver 编写 CSS 样式， 认为可视化操作多此一举。 但是 Dreamweaver 所提供的环境对于初学者来说绝对是不可缺少的：一是手脚并用（可视化操作和代码输入）能 够提高开发速度；二是借助可视化环境能够直观、准确地预览效果、排查错误；三是贴心的辅 助工具帮助你节省大量宝贵时间。因此，本章将详细讲解如何使用 Dreamweaver 来开发 CSS 样 式表，以提高 CSS 编码的速度和质量。 1 1 从【从【CSS CSS 样式】面板开始样式】面板开始 Dreamweaver 从 0 版本开始把散乱的 CSS 技术支持功能集成到【CSS 样式】面板中，从而 为设计师节省了大量宝贵时间，所以本节也从【CSS 样式】面板开始走入 Dreamweaver 世界。 1.1 认识【认识【CSS 样式】样式】面板面板 启动 Dreamweaver，需要新建一个网页文档，然后选择【窗口】|【CSS 样式】菜单命令， 就会打开【CSS 样式】面板，如图 1 所示。 【CSS 样式】面板包含的所有功能可以使用一句话来 概括：一个全能菜单、一个全能菜单、两种显示模式、两种显示模式、三种属性视图三种属性视图、四个操作按钮四个操作按钮。 ? 一个全能菜单：CSS 样式操作的所有功能都可以在面板菜单中找到。单击面板右上角 的下拉菜单图标（ ） ，将弹出一个下拉菜单，该菜单显示了所有 CSS 操作功能。实 际上，Dreamweaver 的所有面板都拥有这样一个全能菜单。当在面板中找不到所需要 的操作按钮时，去面板菜单选择是一个不错的方法。 ? 两种显示模式：所谓显示模式就是显示已定义样式的方式，包括【全部】和【正在】 两种模式。在面板的顶部有两个按钮（ ） ，单击可以在这两种模式间进行来回 网页制作与网站开发从入门到精通 160 切换。 ? 【全部】 模式将显示当前文档中全部样式， 包括外部样式、 内部样式和行内样式， 如图 2 所示。 ? 【正在】模式将显示当前对象或选中内容所定义的样式，如图 1 所示。 图 1 【CSS 样式】面板和正在模式 图 2 【CSS 样式】的全部模式 ? 三种属性视图：所谓属性视图就是显示属性列表的方式。在【CSS 样式】面板底部左 侧并列显示三个按钮（ ） ，它们分别对应显示类别视图（ ） 、显示列表视图 （ ）和只显示设置属性（ ） 。具体说明如下。 ? 【显示类别视图】 ：把 CSS 属性按类进行归类，这样按类选择属性，设置的样式 会层次清晰，适合初学者使用，如图 3 所示。 ? 【显示列表视图】 ：把所有 CSS 属性按字母顺序进行排序显示，设置样式时能够 模糊检索，快速找到所需要的属性，适合初步入门用户使用，如图 4 所示。 图 3 显示类别视图 图 4 显示列表视图 ? 【只显示设置属性】 ：仅显示已经定义的属性列表，不再显示所有 CSS 属性，设 置样式时简单快捷，避免干扰，适合熟练 CSS 的用户使用，如图 5 所示。 ? 四个操作按钮：在【CSS 样式】面板底部右侧并列显示四个按钮（ ） ，它 们分别对应附加样式表（ ） 、新建 CSS 规则（ ） 、编辑样式（ ）和删除 CSS 属 性（ ） 。具体说明如下。 使用 Dreamweaver 设计 CSS 样式 161 ? 附加样式表：单击该按钮可以打开【链 接外部样式表】对话框，如图 6 所示， 在该对话框中设置要导入的外部样式 表文件、导入方式（如链接到文档还是 导入到文档）和样式表的媒体类型（即 在什么环境中有效） ，从而实现把外部 样式表导入到当前文档中。 ? 新建 CSS 规则：单击该按钮将打开【新 建CSS 规则】 对话框， 所谓规则就是CSS 样式的意思。在【新建CSS 规则】对话框中可以设置样式的选择器类型和名称，以 及该样式存放的位置，如图7 所示。 图 6 【链接外部样式表】对话框 图 7 【新建 CSS 规则】对话框 ? 编辑样式：单击该按钮可以打开【CSS 规则定义】对话框，如图 8 所示，在该对 话框中可以快速、直观地修改样式的属性和属性值，增加或删除属性。 ? 删除 CSS 属性：在【CSS 样式】面板下半部分的属性列表中选中已定义的属性， 单击【删除 CSS 属性】按钮可以快速删除该声明。 图 8 【CSS 规则定义】对话框 图 8.5 只显示设置属性 网页制作与网站开发从入门到精通 162 1.2 建立建立 CSS 样式工作流样式工作流 对于习惯手写 CSS 代码的用户来说，可能会抱怨 Dreamweaver 定义的 CSS 样式有点绕， 不过我们还是建议读者把手写代码和可视化操作混合在一起使用，不要过分强调必须使用可视 化操作或手写代码。Dreamweaver 能够很完美地兼容这两种开发方式，在开发过程中可以随时 切换开发的视图模式。使用可视化方式定义 CSS 样式的流程如下。 第一步，在【CSS 样式】面板底部单击【新建 CSS 规则】按钮图标（ ） ，打开【新建 CSS 规则】对话框。在该对话框中需要完成三件事：指定选择器类型、定义选择器名称和设置样式 存放位置。 ? 【新建 CSS 规则】对话框所提供 的选择器类型还是比较有限的， 包 括类选择器、标签选择器和 ID 选 择器等。笔者个人认为，不管定义 什么类型的选择器，都不妨在“复 合内容”选项状态下进行设置，这 样对话框不会限制输入的形式。 例 如， 如果希望定义一个比较复杂的 包含选择器“#main p.red” ，则不 妨按如图 9 所示进行设置。 此时完全可以把【选择器】文本框当作 一个选择器名称输入框，不再顾虑选择器类型的羁绊。 ? 【规则定义】 选项用来设置所要定义的样式存放位置， 可以把样式放在外部样式表中， 随后系统会要求你新建或选择一个外部样式表文件。而【仅限该文档】选项则表示定 义内部样式表，所定义的样式将被放置在当前网页文档的头部区域。 第二步，假设定义一个样式，选择器名称为“#main p.red” ，存放位置为内部样式，设置如图9 所 示，然后单击【确定】按钮关闭【新建 CSS 规则】对话框。此时 Dreamweaver 会自动打开【CSS 规则定义】对话框，并在文档头部区域插入标签，如图10 所示。 图 9 定义复杂选择器 使用 Dreamweaver 设计 CSS 样式 163 图 10 定义属性 第三步，在【CSS 规则定义】对话框中定义样式包含的属性。 【CSS 规则定义】对话框分类 集成了 CSS 大部分属性。设置时应该先在左 侧的【分类】列表框中选择属性类别，然后 在右侧设置具体的属性。所有设置项都可以 自由定义，也可以修改、删除和增加声明等 操作。 例如， 如果定义“#main p.red”选择器样式 为带有下划线样式的红色、14 像素字体，则 可以在左侧列表框中选择【类型】项，并在 右侧设置【大小】文本框，可以同时设置文 本框后面出现的单位；在【颜色】文本框中 设置“#FF0000” （红色） ，也可以单击 进行快速选择；在【修饰】选项组中勾选【下划线】复 选框。整个设置如图 11 所示。 如果熟悉 CSS 属性分类，那么对于【CSS 规则定义】对话框的使用会比较容易上手，否则 有时会感觉无所适从。本节不讲解这些选项的含义和设置方法，建议读者结合前面章节讲解的 内容逐步摸索和实践。 第四步，设置完毕单击【确定】按钮，Dreamweaver 会自动在当前文档中插入一个样式表。 至此，整个操作流程就完成了。实际上还可以在【代码】视图下对所插入的样式进行手工 编辑， 增加或删除某个属性。 Dreamweaver 能够自动侦测用户在样式表中的所有操作， 当按 Enter 键或空格键时，会自动弹出所有 CSS 属性列表，如图 12 所示。如果输入冒号，则会智能检测 所有定义的属性，并显示该属性所允许的值列表，如图 13 所示。 图 11 定义字体样式 网页制作与网站开发从入门到精通 164 图 12 智能提示 CSS 属性 图 13 智能提示 CSS 属性值 在样式表中手工输入代码、 编辑声明， 增删属性都不会影响 Dreamweaver 对样式表的解析， 并能够自由地在代码环境和可视化环境之间进行转换。例如，我们在上面定义的样式基础上， 在【代码】视图下继续增加声明，定义 fontfamily 属性，并修改已声明的属性值。手工编辑的 代码如下： 然后在【CSS 样式】面板底部单击【编辑样式】按钮图标（ ） ，将再次打开【CSS 规则 定义】对话框，此时就会看到样式表中所有修改都会显示在可视化对话框中，如图 14 所示。这 进一步说明“把手写代码和可视化操作混合在一起使用”来开发 CSS 样式表是可行的，也是比较 高效的，它兼顾了可视化操作的快捷直观和手写代码的方便简洁。 图 14 编辑样式 使用 Dreamweaver 设计 CSS 样式 165 1.3 应用应用 CSS 样式工作流样式工作流 也许你已经注意到，当使用 Dreamweaver 定义样式时，与手工定义样式一样，可视化定义 样式也需要把定义的样式应用到文档中。当然，对于不同类型的选择器，它们的作用范围不同。 例如，对于标签选择器样式，只要引入文档就会自动作用于文档对象，而对于多数选择器（如 类选择器、ID 选择器）还需要进一步操作才能够应用于文档。具体实施方法如下。 ? 对于标签选择器样式来说，只要把样式表引入到文档中即可生效。 ? 对于类选择器样式来说，可以在【属性检查器】面板中进行设置。 例如，定义一个红色样式类： .red color:red 然后在文档中选中应用该样式的对象， 可以在 【代码】 视图下， 也可以在 【设计】 视图下。在 【属 性检查器】面板的【目标规则】下拉列表中会看到文档中已定义的所有类样式，如图15所示。 图 15 应用样式 从【目标规则】下拉列表中选择.red 样式，即可把红色字体样式类应用到当前对象中。不 过 Dreamweaver 所提供的这个功能存在一个问题：如果希望为一个对象应用多个样式类时，就 会存在困难。因为 Dreamweaver 只支持为一个对象定义一个样式。要解决这个问题，我们只能 够切换到【代码】视图，然后手动增加多个样式。如再定义一个粗体样式类： .bold fontweight:bold 要把红色字体样式类 red 和粗体样式类手动同时增加 到一个对象中： 段落文本 当然， 在 【代码】 视图下， 应用类样式时， Dreamweaver 也会进行自动提示，方便进行选择，如图 16 所示。 ? 对于 ID 选择器样式来说，可以在插入 Div 标签时直接定义 ID 值。例如，事先定义一 个样式： #