三、CSS Style面板的应用
在Dreamweaver MX 2004中界面最右边有一列各种选项面板的设置对话框，其中包括“CSS Style”，如图5。
图5
老版本的DW也有这个CSS Style面板，Dreamweaver MX 2004中只保留了CSS Style的编辑功能，去掉了套用模式（Dreamweaver MX 2004直接在属性面板中套用CSS样式）。Dreamweaver MX 2004在“Rules”面板中提供了更多的CSS功能，如图6。
图6
在CSS Rule面板中选择一个样式之后，它就会自动切换到该样式的有关选项，我们可以在面板上进行检查和修改。这个面板将CSS样式详细分成了好几大类，针对每一个样式都有详细的参数或选项帮助我们做设置。这样即使我们对CSS的用法不太熟悉，也可以轻松使用它的功能。
在Rules面板的下方是Relevant CSS面板，在这里有网页内每个部分的CSS详细设置内容。在网页中选定某个区域，Relevant CSS面板就出现相关的CSS设置选项，以及它上一层的 CSS样式，甚至 CSS 是套用的哪一个 HMTL标签都显示得很清楚，若有覆盖过的地方，会用特别的颜色和删除线来提示，如图7。
图7
四、CSS 语法提示
我们源代码视图中编辑CSS的时候，只输入一个CSS的样式名称和冒号，然后在空白的地方点击鼠标，Dreamweaver MX 2004会自动弹出一个选单，列出该样式可以使用的参数。如图8。我们只要在弹出的下拉菜单中选择要编辑的CSS样式就可以了，省去自己输入代码的麻烦。
图8
五、实例体验
下面我们利用CSS Rule和Relevant CSS面板来设置网页的CSS样式。
1.在Dreamweaver MX 2004中，提供了已经设置好CSS的网页模板，在Page Designs（CSS）模板中选择第一个模板样式“Two - Columm Left Nav ”，然后将它保存为站点。
（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）2.下面我们在页面中找到“Feature Title”标题文字，在右边的功能模块中找到并打开“Relevanet CSS”这个界面。
3.在“CSS Rule”中找到要处理的CSS类别，这里我们找到“h3”。如图9
图9
4.改变这个“Font-Size”字体大小。原来的大小是“100％”，我们改变它的值为 36 个像素。文字马上变大，如图10
图10
有了CSS这些新增的功能，我们在编辑网页的时候工作效率更高，效果更好。
