盘点Dreamweaver使用CSS注意事项

1/1盘点Dreamweaver使用CSS的注意事项盘点Dreamweaver使用CSS的留意事项

由于“可视化”和操作简便，在DW中编写CSS的伴侣许多，今日我们介绍一些在DW中编写CSS的“最佳习惯”，盼望对大家有所关心。

CSS正在转变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求，MacromediaDWMX引进了一些新的及改善过的CSS相关的特性。有了这些新的特性，你可以为将来的更新作好方案，开发与W3C标准更加兼容的站点。本文争论在DWMX中使用CSS以及突出某一特定CSS特性时的一些建议。

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

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

内嵌式(Embedded)：可掌握一个页面中全部元素的样式表

外联式(External)：可掌握很多页面中的元素的样式表

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

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

最佳习惯是指什么?

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

1、增加站点的寿命

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

2、让你的站点对全部的用户以及扫瞄器都适用

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

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

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

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

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

EmbeddedCSS：它也不是最抱负的，由于它只能对当前页面施加影响。在更新的过程中，假如某一个页面丢失，将会使站点的风格不全都;另外，当用户扫瞄你的站点时，每一页都要下载一次样式表信息。

ExternalCSS：这是你的第一选择。ExternalCSS可以让全部连接到它的页面保持全都的外观风格;提纲挈领，更改一次，轻松更新全部相关页面;让你的页面体积更小，扫瞄速度更快。其他的一些最佳习惯将在下文分析详细的CSS特性时提及。

在DWMX中创建CSS样式表

在DWMX中创建CSS样式表时(Text》CSSStyle》Newstylesheet)，在弹出的对话框中，你有两个选择：新样式表文档(NewStyleSheetFile)和只用于当前页(ThisDocumentOnly)。选中“NewStyleSheetFile”你就开头了创建ExternalCSS的过程。这个选项要求你在真正的创建过程之前先命名样式表并为它选定一个保存位置;另外一个选项，ThisDocumentOnly，则会直接把相关代码写入到页面的部分。

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

应当连接到ExternalCSS还是导入?

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

连接是最常用的方式，选择“link”即可把样式表连接到页面。它会在你的页面中加入下面的标记：

全部支持CSS的扫瞄器都支持连接选项。假如你想一些比较旧的扫瞄器(比如Netscape4.x)也能“看到”这个样式表的话，就要采纳下面的.方法。

假如你选择“导入”选项，所用的标记为：

NetSscape4会完全忽视导入的CSS，而根据连接的CSS来解释页面。这样我们就可以放心使用CSS中的新功能，不必担忧扫瞄器的兼容性问题了。

CSS属性检查器

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

同时，你也可以轻松切回到HTML模式。

现成的CSS样式表

DWMX中一个令人感动的CSS特性就是它包含了已制作好的CSS样式表。CSS的新用户可以先体验一下。选择FileNew，在弹出的新文档对话框中选择选中CSSstylesheets，在右边的方框中会消失全部可用的CSS列表。为了实践我们所说的最佳习惯，选择一个标记为“Accessible”的。

将文档保存在站点文件夹内，然后就可以用上述的方法来把CSS附加在你的文档中了。

设计时间样式表(DesignTimestylesheets)

DWMX的这一特性可以让你在设计视图下工作时将样式表应用到页面，让你对站点的外观有一个更直观的熟悉。设计时间样式表将不会消失在站点内。从我们的最佳习惯的观点来讲，这一特性是非

常有用的。假如你使用同时导入和连接两种方式(如上所述)，附加设计时间样式表可以让你使用其中的任何一个来开发站点。当你想看在另一个样式表下页面外观如何时，你可以轻松更改为另一个样式表。

对于要将CSS应用于服务器端(比如ASP,PHP,orColdFusion)或是要在客户端通过javascript来存取的开发者来说，设计时间样式表同样有用。服务器端样式表也是处理客户端扫瞄器对CSS支持不好的又一种方式。但在以前版本的DW中，这种方式却不能让你在设计阶段查看CSS的实际效果。设计时间样式表让你实时查看样式表效果，所以你可在DWMX中以可视界面工作。另外一个好处就是当你上传站点文件时，你不必再检查整个站点查找冗余的样式表了。

验证

无论你是自己创建样式表还是编辑现有的样式表，验证可以确保你不会误用不标准的标签或错误的代码。DWMX本身不包含CSS验证程序，你可以使用W3C站点供应的验证服务。在DWMX内你可以验证HTML或DHTML标签(Fi