Dreamweaver中编写CSS的“最佳习惯” |
|
由于“可视化”和操作简便，在DreamWeaver中编写CSS的朋友众多，今日我们介绍一些在Dreamweaver中编写CSS的“最佳习惯”， 盼望对大家有所协助 。 CSS正在转变网站设计的 历程 。为投合不停增进的 偏向于CSS的设计人员的需要，Macromedia DW MX引进了一些新的及改善过的CSS 有关的 特点 。有了这些新的 特点，你 可 认为 将来的更新作好 方案，开发与W3C 标准更加兼容的站点 。本文 探讨在DreamWeaver中 使用CSS以及突出某一特定CSS 特点时的一些 提议 。 普通地讲， 款式表(style sheet)便是操纵网页内容外观的 格局化的 规定的 集中 。 可以以三种不同的 模式在你的页面中 使用CSS： 代码式(Inline)：写入到代码中的一次性的
款式 。 事实上，许多站点都依据需要把这三种 模式 联合起来 使用 。 在 使用CSS时一个需要重点考量的事实是不同的阅读器以及同一阅读器的不同版本以不同的 模式来解析CSS 。除了网络阅读器的差别之外，你还要意识到还有众多 其余的阅读器， 比方听力阅读器，基于电视的阅读器以及Palm pilot和TTY(teletypewriter，远程打字机)一类的手持 设施 。 最佳习惯是指什么? 大多数技术都有自己约定俗成的 标准 。CSS也不例外 。 固然并非网络上存在的全部CSS都很 标准，但依照现有 标准来 使用CSS却还是不无裨益的 。普通来说，开发人员应尽可能将内容与报告 拆散开来 。这样做的 好处在于： 1、增加站点的寿命 不 标准的 款式表可能在当时感觉很容易，但新版本的阅读器出来以后，很可能就会浮现兼容性问题 。到时逐页 批改站点便是一项十分费时的工作同时也使 使用CSS失去了 意思 。 2、让你的站点对全部的消费者以及阅读器都 实用 有些地方的政府已经立法要求网站必须让残障人士也和样 可以阅读 。为残障 意识设计的阅读 设施， 比方听力阅读器，对CSS 标准性要求极其严格 。 3、让站点更新和 保护更加轻松 使用 模式得当的话，CSS可让你在一个页面中的调整 快捷 利用到全部页面中去 。 你首先要做的 取舍是 使用哪一种 款式表 。当 波及到最佳习惯时，对不同 款式表的 综合如下： Inline CSS： 容易地说，你应该尽量幸免 使用 。除了一些 其余的缺陷之外， 使用Inline CSS 象征着你并没有利用到CSS的真正 长处，即你并没有将内容与 格局 拆散开 。DW MX 使用Inline CSS重要是为了定位页面元素(这些元素在DW MX的消费者界面中称为“层(layer)”)，或者为了 使用某个DHTML特效，它需要 使用Inline 款式的javascript来转变一个对象的属性 。 Embedded CSS：它也不是最 事实的，由于它不得不对目前页面施加影响 。在更新的过程中，假如某一个页面 迷失，将会使站点的 格调不 统一;另外，当消费者阅读你的站点时，每一页都要下载一次 款式表信息 。 External CSS：这是你的第一 取舍 。External 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)或是要在客户端通过javascript来存取的开发者来说，设计 工夫 款式表同样有用 。服务器端 款式表也是 解决客户端阅读器对CSS 支撑不好的又一种 模式 。但在以往版本的DW中，这种 模式却不能让你在设计阶段查看CSS的实际 动机 。设计 工夫 款式表让你实时查看 款式表 动机，所以你可在DW MX中以可视界面工作 。另外一个 好处便是当你上传站点文件时，你 毋庸再 审查整个站点寻觅冗余的 款式表了 。 验证 无论你是自己 缔造 款式表还是编辑现有的 款式表，验证 可以确保你不会误用不 标准的标签或 舛误的代码 。DW MX 本身不包括CSS验证程序，你 可以 使用W3C站点提供的验证服务 。在DW MX内你 可以验证HTML 或DHTML标签( File > Check Page > Validate Markup (for HTML) 或 File > Check Page > Validate as XML for XHTML.) 。在开发基于CSS的站点时，DW MX提供了众多辅助工具 。有了MW MX的协助，再外加对CSS良好的 了解，你就 可以开发出能 禁受 工夫考验的站点了 。 |
