5.5 Dreamweaver制作样式表

建立样式表的意义在于实现了统一管理网页的外观，设计者不仅可以通过修改样式表来改变单个网页的外观，而且还可以改变多个网页甚至整个网站的外观，从而大大减轻工作量，提高效率。下面我们就使用Dreamweaver CS3方便地、快速地编写样式文件。

一、什么是样式

让我们先看看图1所示的效果，图中的颜色、字体、字体大小、边框、图片等都很漂亮，其实这就是样式的功劳。所以说，如果把网页内容比喻为一个女孩的话，样式就好比这位女孩穿的衣服。女孩喜欢用漂亮的衣装来打扮自己，同样，我们的网页也需要华丽的样式来包装。

图1 应用了样式的注册页面

二、制作样式表

既然图1所示页面样式如此好看，那如何实现呢？其实，在Dreamweaver CS3中增添了新的标准“CSS样式”面板，通过它可以学习和使用以可视化方式应用于页面的CSS样式。下面我们就使用Dreamweaver CS3以可视化方式来创建样式表，接着应用创建好的样式表。

1.创建样式表

创建如图1所示的样式表的具体操作步骤如下：

(1) 选择“窗口”一“CSS样式”命令，打开“CSS样式”面板，在面板中右击鼠标，在弹出的菜单中选择“新建”命令，如图2所示。

图2 新建样式

(2) 在弹出的“新建CSS规则”对话框中，设置内容如图3所示。单击“确定”按钮新建一个样式文件，并取名为“make_ cssl.css”，然后保存。

图3 新建标签table的CSS规则

(3) 单击“保存”按钮之后，就弹出定义“table的CSS规则定义”对话框，如图4所示，在图中设置方框的样式为“margin: 4px; padding: 2px;”，边框的样式为“border:thin solid #FF99FF;”。同理，定义标签<BODY>的样式规则为“font-family:“宋体";font-size: 12px;”，<A>的样式规则为"text-decoration: none; color: blue;”。

图4 table的CSS规则定义

(4) 在"CSS样式”面板中右击鼠标，在弹出的菜单中选择“新建”命令，然后出现如图3所示的“新建CSS规则”对话框。定义一个名称为.picButton的类样式。然后定义其样式规则为“background-image:url(back.jpg); border:0px; margin: 0px; padding: 0px; height: 23px; width: 82px; font-size: 14px;”。定义一个名称为.textBorder的类样式，然后定义其样式规则为‘‘border-top-width: 1px; border-right-width: 1px; border-bottom-width:1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid;”。注意类的样式名前要加一个句点。

2.应用样式表

CSS样式表创建完以后，就要对相关的页面进行样式的作用，起到美化页面的效果，应用CSS样式表的具体操作步骤如下：

(1) 打开要应用样式的网页，如图5所示。

(2) 在“属性”面板中单击“样式”下拉列表框，选择“附加样式表”选项，如图5所示。