首页 > 代码库 > 5.5 Dreamweaver制作样式表
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所示。  图5 给打开的网页指定样式表 (3) 选择“附加样式表”选项之后，会出现如图6所示的对话框，单击“浏览”按纽指定要链接的外部样式文件为“make cssl.css”  图6 设置打开的网页和指定的样式表绑定 (4) 单击“确定”按钮，就完成了网页“use css forml.html”和样式表文件“make cssl.css”之间的绑定，也就是网页“use css forml.html”应用了样式表文件“make cssl.css”。应用样式之后的效果如图1所示。 本节作业： 使用Dreamweaver制作如下图所示的页面效果。  注意事项： 1.参照图示掌握Dreamweaver CS3制作CSS样式表的方法。 网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！ 点击下载第五章案例及作业资源 返回《HTML入门经典》教程列表 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/html/jc/536.html |