您的位置: 首页 > 技术文档 > 网页制作 > Dreamweaver打造多彩文字链接
网页制作常见问题、精华整理 回到列表 轻松玩转花样表单
 Dreamweaver打造多彩文字链接

作者:梦觉 时间: 2003-07-04 文档类型:原创 来自:

第 1 页 准备工作
第 2 页 初级链接样式
第 3 页 进阶链接样式
第 4 页 高级链接样式

  文字链接可以说是网页中最常见的页面元素了,默认的文字链接样式都是带下划线的效果,这种一陈不变的外观可能使很多朋友都想改变它,以使之符合页面的整体效果,自从样式表得到广泛的应用后,这个愿望现在可以非常方便的实现。今天我给大家介绍利用样式表打造多彩的文字链接效果。我将分为初级篇、进阶篇和高级篇给大家作介绍,所有的链接样式效果我们都将在Dreamweaver的样式编辑器中完成,关于Dreamweaver中的样式编辑器的用法请参考以前的介绍。链接样式浏览效果如下图;具体的页面浏览请看这里

一、 准备工作

我们将首先创建一个基本的链接样式,其他的样式将在此基础上添加一个自定义的Class类。

1、  Shift+F11打开样式面板,点击新建样式按钮,如图一;

2、  在Type选项中选择Use CSS Selector,创建默认链接样式,如图二;

3、  按照图三中所示设定默认链接的样式为无下划线,字体为宋体9pt,其他色彩等等都不设置,我们将在后面为每一个Class类分别设置。

4、  定义样式类Class。我们下面的每一个样式风格都是定义了一个单独的类,并将其赋予链接文字。步骤如下:点击添加打开新定义样式面板,选择Make Custom Style(class)定义自己的样式类。如图四;

5、  为链接文字添加样式类。在Dreamweaver中选择一项链接文字,在窗口最下端的快速标签选择条上选择<a>标签,右键点击此标签,选择Set Class将自定义的样式赋予此链接文字即可,如图五;

6、  其它链接文字样式的做法与此相同,后面我将不再作介绍。在本教程中有关定义hover状态的链接样式办法,朋友们可以自己制作。我也不再作介绍,只是提示定义时直接输入[.t1:hover]即可。

出处:
责任编辑:无意

上一页 下一页 初级链接样式

◎进入论坛网页制作网站综合版块参加讨论

相关文章 更多相关链接
DW中实现flash的透明背景
Dreamweaver制作网页幻灯片效果
AI制作珍珠项链
平面设计的几个小技巧
Google将推出免费Gmail电子邮件
作者文章 更多作者文章
使用Fw MX插件 3D Primitives
FW MX 2004版本控制和文件上传
FW MX 2004新功能色彩替换详解
我失去了一个朋友
Dreamweaver打造多彩文字链接
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
悟道web标准:前端性能优化
纯中文域名".中国"今日提交申请
世界之窗3.0皮肤设计大赛结果公布
使用jQuery制作滑动动画效果的层
如何设计网页横幅
Plump 图标设计
Subrat Nayak图标设计
百度知道推出文档分享服务
CSS Sprites(CSS雪碧):要还是不要?
UIRSS三周年纪念日推出V2公测版
栏目最新 栏目最新列表
Firefox的Jetpack扩展案例分析
阿里妈妈UED谈CSS Sprites技术
Photoshop中设计绿色时尚Web网站
操作Dom节点实现间歇滚动新闻
浏览器15年历史回顾
如何创建Firefox的Jetpack扩展
全透视:CSS Z-index 属性
用PS 3D工具绘制甜麦圈包装袋
悟道Web标准:让W3C标准兼容终端
悟道WEB标准:统一思想,遵循标准
>> 分页 首页 前页 后页 尾页 页次:1/41个记录/页 转到 页 共4个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文总共有 7 条评论,现在显示最新的 5 条。暂时没有人参与评分


218.76.42.8 Publish at 2004-6-8 11:36:47
对对对,楼主能不能给一个CSS样式的下载?? 这样比较直观 也方便讨论
218.75.134.5 Publish at 2004-4-8 11:52:28
222222
218.246.104.72 Publish at 2004-4-5 13:48:07
www.blueidea.com/articleimg/2003/07/385/MyCSS.css
210.82.106.161 Publish at 2004-3-20 23:29:27
楼主能不能给一个CSS样式的下载?? 这样比较直观 也方便讨论 谢谢
218.14.101.197 Publish at 2004-2-3 21:50:44
将就点,努力学点英文,不要老是靠中文翻译。人家图片是英文说明人家文章写得早!

查看全部评论

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
《Web标准设计》
闪魂-FlashCS4完美入门与案例精粹
Waver_h's华丽世界
Illustrator CS3质感绘画表现技法
《Flash短片轻松学》
《用户体验要素》
《JavaScript语言精粹》
作品集 更多内容

发现王国2009版 米修系列月历壁纸 整套房产设计稿 我的学习 一条鱼 珠江钢琴等几个黑色首 南宁威尔森