在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于"可视化"和操作简便,使用的朋友依然很多,今天罗列一些“最佳习惯”,希望对这些朋友有所帮助。
CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW引进了一些新的及改善过的CSS相关的特性。有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点。本文讨论在DW中使用CSS以及突出某一特定CSS特性时的一些建议。
一般地讲,样式表(style sheet)就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS:
代码式(Inline):写入到代码中的一次性的样式。
内嵌式(Embedded):可控制一个页面中所有元素的样式表
外联式(External):可控制许多页面中的元素的样式表
事实上,许多站点都根据需要把这三种方式结合起来使用。
在使用CSS时一个需要重点考虑的事实是不同的浏览器以及同一浏览器的不同版本以不同的方式来解析CSS。除了网络浏览器的差异之外,你还要意识到还有很多其他的浏览器,比如听力浏览器,基于电视的浏览器以及Palm pilot和TTY(teletypewriter,远程打字机)一类的手持设备。
最佳习惯是指什么?
大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范,但按照现有标准来使用CSS却还是不无裨益的。一般来说,开发人员应尽可能将内容与报告分离开来。这样做的好处在于:
1:增加站点的寿命
不规范的样式表可能在当时觉得很方便,但新版本的浏览器出来以后,很可能就会出现兼容性问题。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。
2:让你的站点对所有的用户以及浏览器都适用。
有些地方的政府已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备,比如听力浏览器,对CSS规范性要求极其严格。
3:让站点更新和维护更加轻松。
使用方式得当的话,CSS可让你在一个页面中的调整快速应用到所有页面中去。 Webjx.Com
你首先要做的选择是使用哪一种样式表。当涉及到最佳习惯时,对不同样式表的分析如下:
Inline CSS;简单地说,你应该尽量避免使用。除了一些其他的缺点之外,使用Inline CSS意味着你并没有利用到CSS的真正优点,即你并没有将内容与格式分离开。DW使用Inline CSS主要是为了定位页面元素(这些元素在DW的用户界面中称为“层(layer)”),或者为了使用某个DHTML特效,它需要使用Inline 样式的&#106avascript来改变一个对象的属性。
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附加在你的文档中了。
设计时间样式表(Design Time style sheets)
DW的这一特性可以让你在设计视图下工作时将样式表应用到页面,让你对站点的外观有一个更直观的认识。设计时间样式表将不会出现在站点内。从我们的最佳习惯的观点来讲,这一特性是非常有用的。如果你使用同时导入和连接两种方式(如上所述),附加设计时间样式表可以让你使用其中的任何一个来开发站点。当你想看在另一个样式表下页面外观如何时,你可以轻松更改为另一个样式表。
对于要将CSS应用于服务器端(比如ASP, PHP, or ColdFusion)或是要在客户端通过&#106avascript来存取的开发者来说,设计时间样式表同样有用。服务器端样式表也是处理客户端浏览器对CSS支持不好的又一种方式。但在以前版本的DW中,这种方式却不能让你在设计阶段查看CSS的实际效果。设计时间样式表让你实时查看样式表效果,所以你可在DW中以可视界面工作。另外一个好处就是当你上传站点文件时,你不必再检查整个站点寻找冗余的样式表了。
验证
无论你是自己创建样式表还是编辑现有的样式表,验证可以确保你不会误用不标准的标签或错误的代码。DW本身不包含CSS验证程序,你可以使用W3C站点提供的验证服务。在DW内你可以验证HTML 或DHTML标签( File > Check Page > Validate Markup (for HTML) 或 File > Check Page > Validate as XML for XHTML.)。在开发基于CSS的站点时,DW提供了很多辅助工具。有了MW MX的帮助,再加上对CSS良好的理解,你就可以开发出能经受时间考验的站点了。
分享到:
相关推荐
使用Dreamweaver内置工具进行高效CSS开发 Dreamweaver提供了一系列工具帮助开发者更高效地编写CSS: - **CSS面板**:可以轻松查看、编辑和管理CSS规则。通过右键点击样式规则,可以选择“Edit Rule…”来修改现有...
### Dreamweaver之DIV+CSS的使用技巧 #### DIV+CSS概述 在网页设计与开发领域,`div+css`是一种流行的布局方式,它利用HTML中的`<div>`标签配合CSS(层叠样式表)来实现网页的布局与美化。这种方式不仅能够提高...
4. **样式检查和清理**:检查CSS代码的语法错误,提供冗余代码清理建议,保持样式表的整洁和高效。 5. **性能分析**:分析CSS选择器的效率,帮助开发者优化性能,减少不必要的计算。 6. **响应式设计工具**:提供...
3. **类(Class)和ID(Identifier)命名**:对于CSS中的类和ID,建议使用组合的英文单词或英文单词的缩写,避免使用中文。类名和ID名可以用中划线`-`、下划线`_`或驼峰式(camelcase)来连接多个单词。例如,`#...
3. **CSS提示和检查**:Dreamweaver 8会自动检测和修复潜在的CSS语法错误,同时提供关于选择器优化、冗余规则去除等方面的建议,帮助设计师编写更高效的CSS代码。 4. **源代码控制**:对于熟悉HTML和CSS的高级用户...
【Dreamweaver CS4】:Dreamweaver是Adobe公司的一款集成开发环境(IDE),专门用于Web设计和开发。CS4版本提供了一个可视化的编辑界面,支持代码编辑、预览和调试功能,对HTML、CSS、JavaScript以及PHP等语言有良好...
《JSP + Dreamweaver CS4 + CSS + Ajax 动态网站开发典型案例》是一个综合性的学习资源,旨在帮助用户通过实例来掌握动态网站的构建技术。这个压缩包包含了一系列的项目文件,这些文件是根据书中的指导进行操作的,...
这款软件的简体中文语言包是为了方便中国用户更好地理解和使用Dreamweaver CS6而设计的,使得用户界面完全汉化,消除了语言障碍,提升了用户体验。 1. **Dreamweaver CS6 的功能特点**: - **代码编辑器**:内置了...
1. 下载汉化补丁文件,如"Adobe Dreamweaver CS5 css汉化补丁(修正版)"。 2. 备份原有的Dreamweaver CS5程序文件,以防万一。 3. 关闭正在运行的Dreamweaver程序。 4. 解压缩下载的汉化补丁,找到需要替换的文件或...
总之,Dreamweaver和CSS的结合使用使得网页设计更加高效且灵活。从制作导航按钮到背景图案的创建,再到色彩搭配和代码整合,每个步骤都需要细心处理。熟练掌握这些技能,将有助于创造出更具吸引力和用户体验的网页...
在DreamWeaver中,CSS代码默认会按照源代码格式化的方式显示,即每个属性和值都会自动换行,这样在处理大量CSS时可能会使代码看起来较为拥挤。如果你希望CSS代码一行显示,不进行换行,可以通过调整DreamWeaver的...
4. **CSS检查**:检查和修复CSS语法错误,提供优化建议。 **七、实战应用** 学习CSS不仅要理解理论,更要实践。尝试创建不同的布局、动画效果,利用CSS实现网页的交互性,如悬停效果、过渡动画、响应式设计等,不断...
3. **CSS样式**:通过Dreamweaver内置的CSS面板,学习如何定义文本样式、颜色、布局和页面背景等,掌握CSS选择器的使用,例如类选择器、ID选择器和元素选择器。 4. **响应式设计**:现代网页设计需要考虑不同设备的...
而更现代的布局方式是使用CSS Grid或Flexbox,Dreamweaver CS4也提供了相应的支持,帮助用户适应网页设计的发展趋势。 六、图像处理 虽然Dreamweaver CS4不是专业的图像编辑工具,但它可以进行基本的图像调整,如...
5. **CSS样式**:掌握如何在Dreamweaver中编写和应用CSS样式,包括选择器、属性、值,以及如何使用CSS面板进行可视化编辑。 6. **响应式设计**:了解如何创建响应式网页,适应不同设备的屏幕尺寸。使用媒体查询来...
### Dreamweaver 8 使用教程知识点详解 #### 一、Dreamweaver 8 的操作环境概览 在深入了解Dreamweaver 8之前,首先要熟悉它的操作环境。这是一款由Adobe公司出品的专业网页设计软件,拥有直观的设计视图和强大的...
在使用Dreamweaver软件时,CSS选择器中的类是网页设计中常用的元素之一,它允许开发者为页面元素定义特定的样式。类可以应用于一个或多个HTML元素,实现样式的复用和方便地修改页面样式。下面将详细介绍在...
在使用Dreamweaver进行网页设计时,首行缩进是一种常见的排版需求,目的是让文本段落更加美观,易于阅读。首行缩进通常指的是让段落的第一行向右偏移一定的距离,以区别于其他行。在Dreamweaver中实现首行缩进的方法...
标题中的“写给喜欢用DW编写CSS人的一些建议”指的是针对那些习惯于使用DreamWeaver这款软件来编写CSS样式的设计师们提供的一些建议。DreamWeaver因其可视化的编辑界面和便捷的操作,尽管不被提倡作为编写CSS的最佳...