Dreamweaver基础教程—使用Dreamweaver设计CSS样式

Dreamweaver基础教程—使用Dreamweaver设计CSS样式

使用 Dreamweaver 设计 CSS 使用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 从【CSS 样式】面板开始 

Dreamweaver 从0版本开始把散乱的CSS技术支持功能集成到【CSS样式】面板中，从而 为设计师节省了大量宝贵时间，所以本节也从【CSS样式】面板开始走入Dreamweaver 世界。 

1.1 认识【CSS 样式】面板

启动 Dreamweaver，需要新建一个网页文档，然后选择【窗口】|【CSS 样式】菜单命令， 就会打开【CSS样式】面板，如图1所示。【CSS样式】面板包含的所有功能可以使用一句话来 概括：一个全能菜单、两种显示模式、三种属性视图、四个操作按钮。

l 一个全能菜单：CSS样式操作的所有功能都可以在面板菜单中找到。单击面板右上角 的下拉菜单图标（ ），将弹出一个下拉菜单，该菜单显示了所有 CSS 操作功能。实 际上，Dreamweaver 的所有面板都拥有这样一个全能菜单。当在面板中找不到所需要 的操作按钮时，去面板菜单选择是一个不错的方法。

l 两种显示模式：所谓显示模式就是显示已定义样式的方式，包括【全部】和【正在】 两种模式。在面板的顶部有两个按钮（ ），单击可以在这两种模式间进行来回