进入旧版 | 服务项目 | 成功案例 | 联系方式 | 过客留言 | 友情链接
   
设为首页
加入收藏
联系我们
网站首页 | 新闻资讯 | 操作系统 | 办公软件 | 网络软件 | 工具软件 | 媒体动画 | 网页制作 | 网站开发 | 程序开发 | 平面设计
Photoshop视频教程 | Word入门 | Flash入门 | JScript | VBScript | ASP | PHP | ADO | 网页特效 | 3DS MAX6.0命令 | 系统进程
您当前的位置:GOODSGY电脑学习网 -> 网页制作 -> Dreamweaver -> 文章内容  
Dreamweaver编写CSS需要掌握的技巧

由于“可视化”和操作简便,在DreamWeaver中编写CSS的朋友很多,今天我们介绍一些在Dreamweaver中编写CSS的“最佳习惯”,希望对大家有所帮助。

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

  一般地讲,样式表(style sheet)就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS:www.goodsgy.com

  代码式(Inline):写入到代码中的一次性的样式。
  内嵌式(Embedded):可控制一个页面中所有元素的样式表
  外联式(External):可控制许多页面中的元素的样式表www.goodsgy.com

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

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

  最佳习惯是指什么?www.goodsgy.com

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

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

  2、让你的站点对所有的用户以及浏览器都适用
  有些地方的政府已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备,比如听力浏览器,对CSS规范性要求极其严格。www.goodsgy.com

  3、让站点更新和维护更加轻松
  使用方式得当的话,CSS可让你在一个页面中的调整快速应用到所有页面中去。www.goodsgy.com

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

  Inline CSS:简单地说,你应该尽量避免使用。除了一些其他的缺点之外,使用Inline CSS意味着你并没有利用到CSS的真正优点,即你并没有将内容与格式分离开。DW MX使用Inline CSS主要是为了定位页面元素(这些元素在DW MX的用户界面中称为“层(layer)”),或者为了使用某个DHTML特效,它需要使用Inline 样式的javascript来改变一个对象的属性。www.goodsgy.com

  Embedded CSS:它也不是最理想的,因为它只能对当前页面施加影响。在更新的过程中,如果某一个页面丢失,将会使站点的风格不一致;另外,当用户浏览你的站点时,每一页都要下载一次样式表信息。www.goodsgy.com

  External CSS:这是你的第一选择。External CSS可以让所有连接到它的页面保持一致的外观风格;提纲挈领,更改一次,轻松更新所有相关页面;让你的页面体积更小,浏览速度更快。其他的一些最佳习惯将在下文分析具体的CSS特性时提及。www.goodsgy.com

  在DW MX中创建CSS样式表www.goodsgy.com

  在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,则会直接把相关代码写入到页面的部分。www.goodsgy.com

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

  应该连接到External CSS还是导入?www.goodsgy.com

  创建外部样式表以后,你需要把它附加在每个页面上(或是模板)。要这样做,可以在CSS面板上淡季“附加样式表(Attach Style Sheet)”按纽,此时会弹出连接外部样式表 (Link External Style Sheet)对话框,在上面可以浏览到你的目标样式表的名字,找到以后,你可以选择连接(link) 或者导入(import )此外部样式表。www.goodsgy.com

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

  所有支持CSS的浏览器都支持连接选项。如果你想一些比较旧的浏览器(比如Netscape 4.x)也能“看到”这个样式表的话,就要采用下面的方法。www.goodsgy.com

  如果你选择“导入”选项,所用的标记为:www.goodsgy.com

  NetSscape4会完全忽略导入的CSS,而按照连接的CSS来解释页面。这样我们就可以放心使用CSS中的新功能,不必担心浏览器的兼容性问题了。www.goodsgy.com

  CSS属性检查器www.goodsgy.com

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

  同时,你也可以轻松切回到HTML模式。www.goodsgy.com

  现成的CSS样式表www.goodsgy.com

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

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

  设计时间样式表(Design Time style sheets)www.goodsgy.com

  DW MX的这一特性可以让你在设计视图下工作时将样式表应用到页面,让你对站点的外观有一个更直观的认识。设计时间样式表将不会出现在站点内。从我们的最佳习惯的观点来讲,这一特性是非常有用的。如果你使用同时导入和连接两种方式(如上所述),附加设计时间样式表可以让你使用其中的任何一个来开发站点。当你想看在另一个样式表下页面外观如何时,你可以轻松更改为另一个样式表。www.goodsgy.com

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

  验证www.goodsgy.com

  无论你是自己创建样式表还是编辑现有的样式表,验证可以确保你不会误用不标准的标签或错误的代码。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良好的理解,你就可以开发出能经受时间考验的站点了。
www.goodsgy.com

在百度中搜索:Dreamweaver编写CSS需要掌握的技巧
在Google中搜索:Dreamweaver编写CSS需要掌握的技巧
在Yahoo中搜索:Dreamweaver编写CSS需要掌握的技巧

收藏到网摘:新浪VIVI 365key 我摘 POCO网摘 博采中心 YouNote 和讯网摘 天天收藏
[] [返回上一页] [打 印] [收 藏]

 相关文章    最新文章
· 为了Dreamweaver Adobe停止研发GoLive
· [组图] CorelDraw教程 跟我一起绘制《翠鸟..
· [组图] Dreamweaver技巧:教你制作和套用模..
· [组图] Dreamweaver表格妙用-线框制作详解..
· Dreamweaver常用技巧方法十六则
· [图文] Dreamweaver8制作网页常用的过度效..
· Dreamweaver不支持中文文件名的解决方法
· [组图] Dreamweaver技巧:制作和套用模板
· Dreamweaver若干技巧须知道
· [组图] Dreamweaver制作和套用模板的技巧
 
· 写给喜欢用DW编写CSS人的一些建议
· Dreamweaver编写CSS需要掌握的技巧
· [组图] Dreamweaver技巧:教你制作和套用模..
· [组图] Dreamweaver表格妙用-线框制作详解..
· Dreamweaver常用技巧方法十六则
· [图文] Dreamweaver8制作网页常用的过度效..
· Dreamweaver不支持中文文件名的解决方法
· [组图] Dreamweaver技巧:制作和套用模板
· Dreamweaver若干技巧须知道
· [组图] Dreamweaver制作和套用模板的技巧

∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论…]
站内搜索

精彩图文
  网站导航  
操作系统 办公软件 网络软件
Vista Windows2003 WindowsXP Windows2000/NT Windows9X/ME Linux 其他 Word Excel Powerpoint Outlook 金山系列 其他 网页浏览 上传下载 联络聊天 邮件工具 服务器软件 网络辅助
工具软件 媒体动画 网页制作
系统工具 媒体工具 压缩工具 图文处理 文件管理 其他 3DMAX Authorware Director Maya 视频处理 其他 Flash Dreamweaver FireWorks FrontPage LiveMotion Golive HTML/CSS 其它
网站开发 平面设计 程序设计
ASP JSP PHP CGI JavaScript VBScript XML/SOAP Web服务器 Photoshop PhotoImpact CorelDraw Illustrator Freehand 设计欣赏 其他 VB VC .NET C/C++ DELPHI JAVA

冀ICP备05019428号
Copyright © 2004-2008 电脑学习网 Inc.All rights reserved.
TEL:13832340607
QQ:39873155
E_Mail:good_sgy@tom.com  
MSN:goodsgy@hotmail.com