在DreamWeaver中应用CSS样式表技巧两则
日期:2006年10月3日 作者: 查看:[大字体 中字体 小字体]-
一、 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色:
在默认情况下,用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"子菜单中,你将可以在此网页中应用这些样式。
- [1] [2] 下一页
-
- 在DreamWeaver中应用CSS样式表技巧两则 相关文章:
- ·网站的文章内容SEO优化基本原则
- ·Excel行列转置粘贴数据的一则实例
- ·Office技巧四则 助你提高办公软件使用效率
- ·WPS2007文档中进行复杂输入的两则技巧
- ·用好Excel 2007六则小技巧 帮你节省时间
- ·网络故障排除实例应用一则
- ·采购智能交换机的五个基本原则
- ·入门:SEO的准则
- ·Photoshop轻松制作照片艺术边框效果实例2则
- ·网页设计心得:页面布局的简单规则
- 在DreamWeaver中应用CSS样式表技巧两则 相关软件
- ·商界成功者最推崇的成事法则:先做人后做事
- ·《无规则高尔夫大师赛》试玩
- ·新《企业会计准则》
- ·《四法则》
- ·语堂传世之作:武则天正传
- ·决定一生的99个简单法则
- ·中国职场生存法则66条
- ·35岁以前成功的12条黄金法则
- ·明清官场幕后规则—师爷当家
- ·民主的原则
- 特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作
- 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转
- 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源:http://www.hackhome.com
上一篇:SPAN和DIV的区别
精品推荐
热点TOP10
- ·入门:用Dreamweaver简单描述制作网页的基本步骤
- ·Dreamweaver+ASP制作动态二级菜单
- ·用Dreamweaver MX 2004制作ASP动态网站(投票系统篇)
- ·公司建站完全手册――网页色彩设计点滴
- ·Dreamweaver CS3 新功能描述
- ·Dreamweaver实例:随机播放背景音乐
- ·Dreamweaver插入Flash添加透明或其他参数
- ·充分利用Dreamweaver CS3的代码片断功能面板
- ·Dreamweaver也能轻松制作Flash相册
- ·简单描述Adobe Dreamweaver CS3 的最新功能
- ·用DW制作网页时关于文字自动换行的小技巧
- ·在DreamweaverCS3中用Spry将XML数据显示到HTML页
- ·Dreamweaver教程:框架技术
- ·级联删除的触发器代码解释
- ·Dreamweaver 8.0/Flash 8.0/Fireworks 8.0简体中文正式版下载及注册码
- ·网页制作傻瓜工具集锦
- ·Dreamweaver MX 2004的PPT格式课件
- ·Dreamweaver使用CSS样式表设置网页
- ·用DW8轻松制作漂亮的Flash像册
- ·Dreamweaver使用CSS样式表设置网页文本格式
特别推荐
- ·利用DW8掌握网页代码基本格式
- ·用Dreamweaver8制作网页中常用的过度效果
- ·级联删除的触发器代码解释
- ·DW滤镜样式的语法规则
- ·Dreamweaver初学者常见问题解答
- ·12个Dreamweaver鲜为人知的小秘诀
- ·巧妙运用Dreamweaver进行网页制作技巧
- ·网页导航设计九大注意事项
- ·Dreamweaver技巧12条
- ·DreamWeaver 经典
- ·寻找Dreamweaver鲜为人知的小秘诀
- ·在DW中插入Flash的参数详解
- ·Dreamweaver层使用八定律
- ·用Dreamweaver MX 2004的Flash动画元素
- ·DW 技巧简单几问几答
- ·Dreamweaver MX实例:插入交替图像按钮
- ·在DreamWeaver中应用CSS样式表技巧两则
- ·Dreamweaver MX 2004的一句话技巧
- ·巧妙运用DW进行网页制作技巧
- ·Dreamweaver经典问题大搜罗
