平面设计教程提供行业内各种相关的软件教程和理论教程,是您学习平面设计的好地方. 设为首页加入收藏
您当前所在的位置:首页>>平面设计教程>>正文

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

文章来源:网络  作者:佚名  更新时间:2004-5-14 13:48:49
一、 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色:

  在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观。要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线。首先在DreamWeaver的Document Windows中随便建 立一个链接,你可以看到这个链接会有下划线。怎样去除这条下划线呢?

  1.在点击菜单栏上的"Text"|"CSS Styles"| "Edit Style Sheet…"(或者直接按快捷键Ctrl+shift+E),调出Edit Style Sheet(编辑样式表)对话框窗口。

  2.点击"New (新建)",然后在"New Style (新样式)"对话框中,点击"Use CSS Selector"按钮。

  3.在Selector栏中键入a, 然后点OK。

  4.随后弹出"CSS 样式定义"对话框,在Type类的decoration(装饰)中,勾选none,然后点OK,再点Done。你将立刻在Document Windows中发现链接的下划线已经消失了。那么又怎样实现当鼠标悬停在链接上时链接变色呢?重复上述步骤中的的第一、第二步。然后点选Selector旁的下拉箭头,选择"a:hover",再点OK。在随后弹出的 "Style definition for a: hover"对话框中,在Type类的color中任意选择一种颜色(比如选择红色),然后点OK,再点Done便完成了。按F12预览,将鼠标放在链接上,该链接是不是变成了红色?如果在刚才的"Style definition for a: hover"对话框中,在Backgroud(背景)类里,选择backgroud的颜色为绿色,那么当你把鼠标放在超级链接上时,不但链接会变成红色,而且还会有绿色的背景。事实上,通过刚才的CSS 样式定义对话框,你还可以实现更多的特殊效果,有兴趣的朋友不妨去好好琢磨一下。

  二、创建可反复使用的外部CSS样式表

  用DreamWeaver在某网页中创建了一种CSS样式后,如果你要在另外的网页中应用该样式,你不必从新创建该CSS样式,只要你创建了外部CSS样式表文件(external CSS style sheet),你便可以在今后任意调用该样式表文件中的样式。为了便于管理,先在站点所在文件夹中,新建一个文件夹,取名为CSS,专门用于放置外部样式表文件(其扩展名为css)。

  1、在Document Window中按Ctrl+shift+E,调出Edit Style Sheet(编辑样式表)对话框窗口

  2、点击"link"。

  3、在弹出的Link External Style Sheet(链接外部样式表)对话框,点BROWSE,找到刚才创建的CSS文件夹。

  4、在Select Stylesheet File (选择样式表文件)窗口"文件名"栏中,键入*.css (*可以为任意名),请注意,事实上此时在CSS文件夹中并无样式表文件,在"文件名"栏中键入的新名字将成为外部样式表新文件的名字。比如键入title.css,,然后点Select | OK。

  5、在Edit Style Sheet(编辑样式表)对话框窗口中,会新增加 title.css (link), 双击它。

  6、在弹出的"title.css"窗口中,点"New"。

  7、在"New Style"对话框中,点选"Make Custom Style (class)"按钮

  8、在Name栏中键入某个名字,如myheadline,点OK。

  9、在接下来的"Style definition for .myheadline in title.css"对话框中,进行字体、颜色等各种设置,完成后点OK。如还要创建新的样式,再点"New",重复刚才的步骤6、7、8、9,最后点"save"| "done",于是title.css这个外部样式表文件便创建好了。菜单栏上的"TEXT" |"CSS Styles"子菜单中将会列出title.css中的所有样式。如要在其他网页中调用这个title.css,只需重复上述1至3步,然后在Select Stylesheet File窗口"文件名"栏中输入title.css。点"select"| "ok"| "done", title.css中所有的样式便会出现在该网页菜单栏上的"Text" |"CSS Styles"子菜单中,你将可以在此网页中应用这些样式。 
责任编辑:three
转载请注明出处三视觉平面设计在线 请不要修改文字图片链接信息
上一篇文章:用CSS创建一个布局居中的页面
下一篇文章:如何将 CSS 加入网页
相关设计
CSS层叠样式表(滤镜篇)
CSS层叠样式表(效果篇)
CSS层叠样式表(基础篇)
CSS样式表 之 有关表格边框的CSS语法整理
CSS样式表 之 禁止背景在网页中平铺
用CSS创建一个布局居中的页面
如何将 CSS 加入网页
CSS技术在网页设计中的运用
巧用CSS滤镜做案文字
 
热门设计推荐
百事集团的部分饮料包装设计
英国设计机构ZipDesign平面设
电影《灵异孤儿院》海报设计
美国设计机构VSA Partners平
Companhia Athletica插画类经
奥地利设计师Bohatsch Walte
经典国外企业画册设计欣赏
西班牙设计师Eskenazi Mario
Eric Lin时尚类平面设计作品
Logomotive经典标志设计欣赏
国外设计师的文字创意设计
Amanda Cho精彩优秀设计作品
Mitchell个性平面设计在线欣
有趣的Whiskas插画创意思设计
Jenny Song综合类设计作品欣
部分Jennifer Platte排版设计
Logomotive经典标志设计欣赏
利用布娃娃设计出的系列创意
国外优秀简单标志设计欣赏
Lauren Y.Chen瓶贴等包装设计
精彩推荐
平面设计教程不但能提升您的设计和软件操作水平,还能从中获得很多经验和执行手法,使得学习过程中增添了不少乐趣.