Dreamweaver中CSS的应用

Dreamweaver具有强大的编辑层叠样式表（CSS）能力，对层叠样式表的编辑能力要远远强于Frontpage98。虽然Dreamweaver并没有声明对CSS2的支持，但程序本身对层叠样式表的扩展已基本具备了CSS2的基本规范，这一点是其他网页编写软件所不及的。如果不具备这样强大的层叠样式表编辑功能，Dreamweaver在编写DHTML方面的能力会大打折扣，看一看网页的源代码就会知道几乎每一个精彩的动画都要靠CSS的参与。当然，要得到理想的显示效果还要有新的浏览器，我在IE4.01下观看Dreamweaver的例页才得到正确的显示结果。我向大家推荐使用4.0的浏览器，特别是IE。

　　
　　　　　　　　　　
　　要编辑或管理层叠样式表首先要从window菜单调出样式浮动面板。如图A六所示。这个浮动面板一共显示了三个自定义的样式：style1,style2和style3。浮动面板上显示的样式都不是HTML关键字。改变HTML关键字是隐含的不直接显示在这个浮动面板上。对每一种样式我们都可以进行编辑删除、施加于页面元素等操作。可以通过右击样式的名称来实现上述操作。在将样式施加到页面元素时可以选中样式再向页面加入新的内容或点中所要施加样式的内容，一行或一段，再点中样式。所以如果要进行一般的编辑一定要选中（none）一项。如果我们点样式浮动面板下面的“Style Sheet……”按钮就可以对样式进行编辑。这时弹出一个对话框。如图A七所示。这个对话框列出了增加或改变的所有样式。“p”和“pre”的属性更改后在样式浮动面板中不显示而在这个对话框中将列出来。在这个对话框下部的“Stlyle definition”栏中显示选中样式的设置情况，如果设置内容过多将显示不出来。这个对话框中的“Link”一项指明要设置的样式的外部链接，即一个css文件。如果我们要定义一个新的样式就点“new”键，这时弹出“new style”对话框，如图A八所示。

　　　　

通过这个对话框我们可以选择自定义的样式、HTML关键字或CSS选择器提供的各种样式，例图中自定义了一个名为“style1”的新样式。确定以后会自动弹出新的对话框使用户对选定样式进行编辑。这个对话框如图九所示,左边一栏是新样式的各种属性，右面是属性的细节。例图是“type”属性的各种参数。带星号的参数都是扩展的样式属性，现有的浏览器可能不支持。如图A中的“type”属性的参数，我们可以设置字体、字的颜色、字间距、字型及附加线等各种参数值。图A十是以上例子在IE下的显示情况。有关样式表的具体细节十分庞杂，这里不可能作过多的介绍，有兴趣的读者可以参阅有关资料。