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

2016-02-19 21:28 9 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享在DreamWeaver中应用CSS样式表技巧两则的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

一、 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色:
  
  在默认情况下,用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"子菜单中,你将可以在此网页中应用这些样式

来源:http://www.tulaoshi.com/n/20160219/1626243.html

延伸阅读
标签: Web开发
原文: 作者: 有多种方式可以将渐进增强融入到层叠样式表(Cascading Style Sheets, 简称CSS)的工作中,本文将讨论其中比较成功的一些,并考虑采用其它方式来逐步增强你的站点。 样式表的组织 如何在文档中引入样式表,很多Web设计者和开发者并没有想太多,但这其实是一门艺术。使用正确的方法,可以立即获得渐进增强的很多好处。 使...
标签: Web开发
一.在学习css之前你应该掌握哪些基础知识 1.什么是网页,什么是超文本语言(html)。 2.会使用Dreamweaver等常用的网页编辑器。 Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver8在页面中加...
随着互联网经济的不断发展,互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信息量,我们对网页中每一个栏目的增删,都会是一个很复杂的过程。为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观,而其...
标签: Web开发
在一行内声明CSS 我们来对比下面两段代码: h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} h2 { font-size:18px; border:1px solid blue; color:#000; background-color:#FFF; } 第二种看起来的确格式化,但是不会在阅读上有任何帮助。写在一行内可以让你...
标签: Web开发
了解层叠样式表 层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时,请将内容与表现形式分开。页面内容(即 HTML 代码)驻留在 HTML 文件自身中,而用于定义代码表现形式的 CSS 规则驻留在另一个文件(外部样式表)或 HTML 文档的另一部分(通常为文件头部分)中。使用 CSS 可以非常灵...

经验教程

120

收藏

69

精华推荐

CSS样式表最佳习惯

CSS样式表最佳习惯

金燕商标注册

CSS样式表书写顺序

CSS样式表书写顺序

帮大哥55

Windows技巧两则

Windows技巧两则

加Q757856333罢

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部