通过dreamweaver设计网页时组织css的建议_dream…

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

　　代码式（Inline）：写入到代码中的一次性的样式。
　　内嵌式（Embedded）：可控制一个页面中任何元素的样式表
　　外联式（External）：可控制许多页面中的元素的样式表

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

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

　　最好习惯是指什么？

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

　　1：增加站点的寿命

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

　　2：让您的站点对任何的用户连同浏览器都适用。

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

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

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

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

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

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

　　External CSS：这是您的第一选择。External CSS能够让任何连接到他的页面保持一致的外观风格；提纲挈领，更改一次，轻松更新任何相关页面；让您的页面体积更小，浏览速度更快。其他的一些最好习惯将在下文分析具体的CSS特性时提及。

　　在DW中创建CSS样式表

　　在DW中创建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的属性检查器中能够轻易转换到CSS模式。缺省情况下，属性检查器会显示原始的HTML模式下字体标签。点击字体下拉菜单旁边的小“A”，您就能够看到现在可用的CSS样式表，而不是字体标签列表。同时，您也能够轻松切回到HTML模式。

　　现成的CSS样式表

　　DW中一个令人激动的CSS特性就是他包含了已制作好的CSS样式表。CSS的新用户能够先体验一下。选择File > New，在弹出的新文档对话框中选择选中CSS style sheets，在右边的方框中会出现任何可用的CSS列表。为了实践我们所说的最好习惯，选择一个标记为“Accessible”的。

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

　　设计时间样式表（Design Time style sheets）

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

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

　　验证

　　无论您是自己创建样式表还是编辑现有的样式表，验证能够确保您不会误用不标准的标签或错误的代码。DW本身不包含CSS验证程式，您能够使用W3C站点提供的验证服务。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有