教你在Dreamweaver中编写CSS

  CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性。有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点。

  一般地讲,样式表(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 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附加在你的文档中了。

  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良好的理解,你就可以开发出能经受时间考验的站点了。

时间: 2024-08-03 20:33:41

教你在Dreamweaver中编写CSS的相关文章

Dreamweaver中编写CSS的“最佳习惯”

由于"可视化"和操作简便,在DreamWeaver中编写CSS的朋友很多,今天我们介绍一些在Dreamweaver中编写CSS的"最佳习惯",希望对大家有所帮助. CSS正在改变网站设计的进程.为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性.有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点.本文讨论在DreamWeaver中使用CSS以及突出某一特定CSS特性时的一些

Dreamweaver中编写CSS的技巧

  CSS正在改变网站设计的进程.为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性.有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点.本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议. 一般地讲,样式表(style sheet)就是控制网页内容外观的格式化的规则的集合.可以以三种不同的方式在你的页面中使用CSS: 代码式(Inline):写入到代码中的一次性的样式. 内嵌式(E

Dreamweaver中应用CSS的技巧

  Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器.由于DW的功能之强大,所以可以在他里面直接定义css(样式表),而就是这css给我出了个小难题. 事情是这样的, 我用css主要是改变一下我的超级连接的颜色和下划线的有无.在DW里定义css的确很方便,里面的参数他都为你设置好了,只要你点鼠标就行了.正是由于他的简单,而使他带来了一个小问题(就我自己认为): 以下为引用的内容: style type="text/css" !-- a:hover { color

Dreamweaver教程-在 Dreamweaver 中编写 HTML 代码

 1.启动 Dreamweaver CS5 2.点击左上角的"文件"> "新建". 3.在"新建文档"界面选择"空白页". 4."页面类型"选择"HTML","布局"选择"<无>".然后单击"创建"按钮.   在Dreamweaver中打开新文档窗口.切换到 "代码"或者"拆分&q

在Dreamweaver中利用CSS样式表设置网页

了解 CSS 层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观.使用 CSS 设置页面格式时,内容与表现形式是相互分开的.页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分(通常为 部分)中.使用 CSS 可以非常灵活并更好地控制页面的外观,从精确的布局定位到特定的字体和样式等. CSS 使您可以控制许多仅使用 HTML 无法控制的属性.例如,您可以为所选文本指定不同的字

在DreamWeaver中应用CSS样式表技巧两则

css|dreamweaver|技巧|样式表 一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"Text&q

DreamWeaver中应用CSS样式表技巧两则

css|dreamweaver|技巧|样式表 一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"Text&q

DreamWeaver中应用CSS样式表

一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"Text"|"CSS Styles&q

Dreamweaver中设置CSS代码缩写及横排成一行的方法

学习css的朋友可能都遇到,下载下些大站的源代码查看,会发现它的每个样式内的属性代码都是横排的较多,但自己在DW里生成出来的都是一个属性占一行,整个页面好长呀!有什么办法让css像一些大站那样排成一行呢?答案很简单,看下面的图文就清楚了,不过这个功能是dreamweaver cs3新增的功能,以前的版本好像没有哟! 在DW CS3中的编辑--首选参数--代码格式,能看到一个css(s)...的按钮,点击这个按钮,在打开的窗口中可以根据自己的需要让css横排还是竖排了.哈哈,简单吧!设置过之后用代