浅谈Dreamweaver网页制作中CSS样式的应用技巧

辽宁 聂玉成

浅谈Dreamweaver网页制作中CSS样式的应用技巧

辽宁 聂玉成

CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求，Macromedia DW 8引进了一些新的及改善过的CSS相关的特性。有了这些新的特性，你可以为未来的更新作好计划，开发与W3C标准更加兼容的站点。本文通过归纳总结CSS样式编写过程中的一些方法技巧，帮助大家理解和纠正CSS样式编写时的不好的习惯，并讨论在DW8中使用CSS以及突出某一特定CSS特性时的一些建议。

CSS样式；编写技巧；不良习惯；最佳习惯

引言

层叠样式表CSS是一系列格式规则，使用CSS样式可以灵活地控制网页内容的外观。然而很多CSS使用者是从以前的网页制作中开始学习CSS网页布局的，或许还存在着一定的Dreamweaver习惯。希望本文能帮助大家理解和纠正一些不好的习惯。

一、CSS样式表的使用方式

一般地讲，样式表(style sheet)就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS：

1.代码式(Inline)：写入到代码中的一次性的样式。

2.内嵌式(Embedded)：可控制一个页面中所有元素的样式表。

3.外联式(External)：可控制许多页面中的元素的样式表。

事实上，许多站点都根据需要把这三种方式结合起来使用。

在使用CSS时一个需要重点考虑的事实是不同的浏览器以及同一浏览器的不同版本以不同的方式来解析CSS。除了网络浏览器的差异之外，你还要意识到还有很多其他的浏览器，比如听力浏览器、基于电视的浏览器以及Palm pilot和TTY(teletypewriter，远程打字机)一类的手持设备。

二、CSS样式编写的最佳习惯

（一）什么是最佳习惯

大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范，但按照现有标准来使用CSS却还是不无裨益的。一般来说，开发人员应尽可能将内容与报告分离开来。这样做的好处在于：

1.增加站点的寿命

不规范的样式表可能在当时觉得很方便，但新版本的浏览器出来以后，很可能就会出现兼容性问题。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。

2.让你的站点对所有的用户以及浏览器都适用

有些地方的政府已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备，比如听力浏览器，对CSS规范性要求极其严格。

3.让站点更新和维护更加轻松

使用方式得当的话，CSS可让你在一个页面中的调整快速应用到所有页面中去。

（二）应用最佳习惯对样式表进行分析

你首先要做的选择是使用哪一种样式表。当涉及到最佳习惯时，对不同样式表分析如下：

1.Inline CSS：简单地说，你应该尽量避免使用。除了一些其他的缺点之外，使用Inline CSS意味着你并没有利用到CSS的真正优点，即你并没有将内容与格式分离开。DW MX使用Inline CSS主要是为了定位页面元素 (这些元素在DW MX 的用户界面中称为“层(layer)”)，或者为了使用某个DHTML特效，它需要使用Inline样式的javascript来改变一个对象的属性。

2.Embedded CSS：它也不是最理想的，因为它只能对当前页面施加影响。在更新的过程中，如果某一个页面丢失，将会使站点的风格不一致;另外，当用户浏览你的站点时，每一页都要下载一次样式表信息。

3.External CSS：这是你的第一选择。External CSS可以让所有连接到它的页面保持一致的外观风格;提纲挈领，更改一次，轻松更新所有相关页面;让你的页面体积更小，浏览速度更快。其他的一些最佳习惯将在下文分析具体的CSS特性时提及。

三、在DW MX中创建CSS样式表

1.样式表的创建

在DW MX中创建CSS样式表时 (Text→CSS Style→Newstyle sheet)，在弹出的对话框中，你有两个选择：新样式表文档 (NewStyle Sheet File)和只用于当前页(This Document Only)。选中“NewStyle Sheet File”你就开始了创建External CSS的过程。这个选项要求你在真正的创建过程之前先命名样式表并为它选定一个保存位置，另外一个选项，“This Document Only”，则会直接把相关代码写入到页面的部分。

你也可以在“新样式(Newstyle)”对话框中选择一个现存的样式表来编辑或添加新的定义。

创建外部样式表以后，你需要把它附加在每个页面上(或是模板)。要这样做，可以在CSS面板上单击“附加样式表(Attach Style Sheet)”按纽，此时会弹出连接外部样式表 (Link External Style Sheet)对话框，在上面可以浏览到你的目标样式表的名字，找到以后，你可以选择连接(link)或者导入(import)此外部样式表。

2.CSS属性检查器

在DW MX的属性检查器中可以轻易切换到CSS模式。缺省情况下，属性检查器会显示原始的HTML模式下字体标签。点击字体下拉菜单旁边的小“A”，你就可以看到目前可用的CSS样式表，而不是字体标签列表。同时，你也可以轻松切回到HTML模式。

四、直接利用Dreamweaver8提供的CSS样式表

1.调用方式

DWMX中一个令人激动的CSS特性就是它包含了已制作好的CSS样式表。CSS的新用户可以先体验一下。选择File→New，在弹出的新文档对话框中选择选中CSSstylesheets，在右边的方框中会出现所有可用的CSS列表。为了实践我们所说的最佳习惯，选择一个标记为“Accessible”的。将文档保存在站点文件夹内，然后就可以用上述的方法来把CSS附加在你的文档中了。

2.设计时间样式表(Design Time style sheets)

DW MX的这一特性可以让你在设计视图下工作时将样式表应用到页面，让你对站点的外观有一个更直观的认识。设计时间样式表将不会出现在站点内。从我们的最佳习惯的观点来讲，这一特性是非常有用的。如果你使用同时导入和连接两种方式(如上所述)，附加设计时间样式表可以让你使用其中的任何一个来开发站点。当你想看在另一个样式表下页面外观如何时，你可以轻松更改为另一个样式表。

总之，CSS样式表在网页制作中发挥着重要的作用，它可以帮助用户对网页的布局、字体、颜色、背景和其他图文效果实现更加精确的控制。掌握CSS的操作技巧，学会用最佳习惯编辑CSS样式表，会对进一步学习网页制作打下良好的基础。

[1]周宏敏.Dreamweaver MX 2004应用培训教程.电子工业出版社，2003.180.

[2]张学明.关于CSS你只需知道的下件事.http://edu.itbulo.com/200804/123916.htm，2009年11月访问.

[3]宋执福.关于CSS样式表.http://zhidao.baidu.com/question/2305890.html，2009 年 10 月访问.

（作者单位：辽宁省鞍山市一职专）