不推荐用DreamWeaver写CSS,但还是有很多朋友用,因为它的“可视化”和操作简单。今天我列举一些“最佳习惯”,希望对这些朋友有所帮助。
CSS正在改变网站设计的过程。Macromedia DW MX引入了一些新的和改进的CSS相关功能,以满足倾向于CSS的设计人员不断增长的需求。有了这些新功能,您可以为将来的更新制定计划。
开发更符合W3C标准的网站。本文讨论了关于在DW MX中使用CSS和突出特定CSS特性的一些建议。
一般来说,样式表是控制web内容外观的格式规则的集合。您可以通过三种不同的方式在页面中使用CSS:
内联:写入代码的一次性样式。
嵌入式:可以控制页面中所有元素的样式表。
外部:可以控制许多页面中的元素的样式表。
事实上,许多网站根据需要结合使用这三种方法。
使用CSS时需要考虑的一个重要事实是,不同的浏览器和同一浏览器的不同版本以不同的方式解析CSS。除了网络浏览器之间的差异,你还应该意识到还有很多其他的浏览器,比如监听浏览器。
基于电视的浏览器和手持设备,如Palm pilot和TTY(电传打字机)。
最好的习惯是什么?
大多数技术都有自己的既定标准。CSS也不例外。虽然并不是网络上存在的所有CSS都是标准化的,但是根据现有的标准使用CSS是有益的。一般来说,开发人员应该尽可能将内容与报告分开。这样做的好处是:
1.增加网站的寿命。
不标准的样式表在当时可能是方便的,但是新版本的浏览器出来后,很可能会出现兼容性问题。一页一页的修改网站是一件非常耗时的工作,也让使用CSS变得毫无意义。
2.让你的网站适合所有用户和浏览器。
一些地方政府已经立法规定网站必须对残疾人无障碍。为残障人士设计的浏览设备,如听书浏览器,对CSS标准化有着极其严格的要求。
3.使网站更新和维护更容易。
如果使用得当,CSS允许您快速将一个页面中的调整应用到所有页面。
您必须做出的第一个选择是使用哪个样式表。说到最佳习惯,不同样式表的分析如下:
内联CSS简而言之,你应该尽量避免使用它。除了一些其他的缺点,使用内联CSS意味着你没有利用CSS的真正优势,也就是说,你没有将内容和格式分开。
DW MX使用内联CSS主要是为了定位页面元素(这些元素在DW MX的用户界面中称为“层”)或者使用一个DHTML特效。
它需要使用内嵌风格& # 106 AvaScript来改变对象的属性。
嵌入式CSS:也不理想,因为只能影响当前页面。在更新的过程中,如果丢失了一个页面,网站的风格就会不一致;此外,当用户浏览您的站点时,他们应该每页下载一次样式表信息。
外部CSS:这是你的首选。外部CSS可以使所有与之相连的页面保持一致的外观风格;大纲,改一次,轻松更新所有相关页面;缩小你的页面,加快浏览速度。
其他的一些最佳习惯将在下文分析具体的CSS特性时提及。
在DW MX中创建CSS样式表
在DW MX中创建CSS样式表时(Text》CSS Style》New style sheet),在弹出的对话框中,
你有两个选择:新样式表文档(New Style Sheet File) 和只用于当前页(This Document Only)。
选中“New Style Sheet File ”你就开始了创建External CSS的过程。这个选项要求你在真正的创建过程之前先命名样式表并为它选定一个保存位置;另外一个选项,
This Document Only,则会直接把相关代码写入到页面的部分。
你也可以在“新样式(New style)”对话框中选择一个现存的样式表来编辑或添加新的定义。
应该连接到External CSS还是导入?
创建外部样式表以后,你需要把它附加在每个页面上(或是模板)。要这样做,可以在CSS面板上淡季“附加样式表(Attach Style Sheet)”按纽,
此时会弹出连接外部样式表(Link External Style Sheet)对话框,在上面可以浏览到你的目标样式表的名字,找到以后,
你可以选择连接(link) 或者导入(import )此外部样式表。
连接是最常用的方式,选择“link”即可把样式表连接到页面。它会在你的页面中加入下面的标记:
所有支持CSS的浏览器都支持连接选项。如果你想一些比较旧的浏览器(比如Netscape 4.x)也能“看到”这个样式表的话,就要采用下面的方法。
如果你选择“导入”选项,所用的标记为:
NetSscape4会完全忽略导入的CSS,而按照连接的CSS来解释页面。这样我们就可以放心使用CSS中的新功能,不必担心浏览器的兼容性问题了。
CSS属性检查器
在DW MX的属性检查器中可以轻易切换到CSS模式。缺省情况下,属性检查器会显示原始的HTML模式下字体标签。点击字体下拉菜单旁边的小“A”,你就可以看到目前可用的CSS样式表,而不是字体标签列表。
同时,你也可以轻松切回到HTML模式。
现成的CSS样式表
DW MX中一个令人激动的CSS特性就是它包含了已制作好的CSS样式表。CSS的新用户可以先体验一下。选择File New,在弹出的新文档对话框中选择选中CSS style sheets,
在右边的方框中会出现所有可用的CSS列表。为了实践我们所说的最佳习惯,选择一个标记为“accessible”的。
将文档保存在站点文件夹内,然后就可以用上述的方法来把CSS附加在你的文档中了。
设计时间样式表(Design Time style sheets)
DW MX的这一特性可以让你在设计视图下工作时将样式表应用到页面,让你对站点的外观有一个更直观的认识。设计时间样式表将不会出现在站点内。从我们的最佳习惯的观点来讲,这一特性是非常有用的。
如果你使用同时导入和连接两种方式(如上所述),附加设计时间样式表可以让你使用其中的任何一个来开发站点。当你想看在另一个样式表下页面外观如何时,你可以轻松更改为另一个样式表。
对于要将CSS应用于服务器端(比如ASP, php, or ColdFusion)或是要在客户端通过#106avascript来存取的开发者来说,设计时间样式表同样有用。
服务器端样式表也是处理客户端浏览器对CSS支持不好的又一种方式。但在以前版本的DW中,这种方式却不能让你在设计阶段查看CSS的实际效果。设计时间样式表让你实时查看样式表效果,
所以你可在DW MX中以可视界面工作。另外一个好处就是当你上传站点文件时,你不必再检查整个站点寻找冗余的样式表了。
验证
在DW MX内你可以验证HTML 或DHTML标签( File Check Page Validate Markup (for HTML) 或File Check Page Validate as XML for XHTML.)。