首 页 网络编程
网页制作 图形图象 操作系统 冲浪宝典
软件教学 认证考试

网络安全 网络办公 行业资讯 评测对比
您当前位置:站长天空 -> 操作系统-> Linux教程
在dreamweaver中应用css样式表技巧两则_dreamweaver教程
作者:网友供稿 点击:0
推荐
西部数码-全国虚拟主机10强!20余项虚拟主机管理功能,全国领先!第6代双线路虚拟主机,南北访问畅通无阻!可在线rar解压,自动数据恢复设置虚拟目录等.免费赠送访问统计,企业邮局.Cn域名注册10元/年,自助建站480元起,免费试用7天,满意再付款!P4主机租用799元/月.月付免压金
站内搜索
文章页数:[1] 

  一、 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色:

  在默认情况下,用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.z6688.com/
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

文章页数:[1] 


放大字体显示 缩小字体显示 打印文章 推荐给朋友
热门文章
·最简单的Struts程序-JSP教程,资料/其它
·利用激光供电的光电电流互感器
·java到structs-JSP教程,Java技巧及代码
·鼠标样式,整体背景图,滚动条的效果(网页效果)-ASP教程,ASP应用
·ASP中正则表达式的应用-ASP教程,正则表达式
·XML应用-利用XML 与XSL-.NET教程,XML应用
·.net 下用javascript调用webservice-.NET教程,Web Service开发
·Asp无组件上传进度条解决方案-ASP教程,组件开发
·破译动网验证码的简单方法-.NET教程,评论及其它
·linux系统文件命令精通指南(上)
最新文章
·mashups+ajax打造全新web开发_ajax教程
·windows vista系统中写字板应用全攻略_windows vista
·adsense单价持续低迷的解读_网赚技巧
·google反作弊小组成员专访_站长访谈
·端午议话:谈网站的特色_站长心得
·浅谈我的十点论坛管理经验_站长心得
·如何针对msn的onpage进行网页优化_站长心得
·用google 搜索框黏住易变的访问者_google推广
·google关键词广告每次点击付费(ppc)术语表_google推广
·确保万无一失的google 关键词广告公式_google推广
相关主题
  • 在dreamweaver中插入有颜色的直线_dreamweaver教程
  • 在dreamweaver中精细化你的表格外观_dreamweaver教程
  • 在dreamweaver中如何使用library_dreamweaver教程
  • 在Dreamweaver MX中应用“占位图形”-网页设计,Dreamweaver
  • 在Dreamweaver中自动设置网页的水平线颜色-网页设计,Dreamweaver
  • 西部数码虚拟主机

    友情链接
    CNNIC 西部数码
    万网 自助建站
    虚拟主机 asp空间
    域名注册 域名
    域名申请 主页空间
    论坛空间 网站空间
    国际域名 虚拟空间
    空间租用 DDOS防火墙
    成都主机托管 四川主机托管
    主机租用 服务器租用
    网站目录 自助建站
    虚拟主机 网址大全
    软件下载
    自助链接
    虚拟主机资讯 特价虚拟主机
    版权申明:本站文章均来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!
    关于我们:站长天空:专业提供最新的站长资讯、在线教程、虚拟主机权威评测、虚拟主机性能对比、网站制作教程,开发教程,站长工具。包括网页制作教程、冲浪宝典、编程参考、操作系统、软件教学、行业动态等。
    特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。
    发表评论 打印  刷新     关闭