下载首页     资讯中心     落伍笑话     最近更新     下载分类     下载排行       广告服务     落伍文秘     落伍论坛     RSS  
电信镜像站点
网通镜像站点
落伍免费博客
系统程序 安全软件 网络工具 媒体工具 视频软件 图文处理
游戏娱乐 汉化补丁
主机托管 域名注册 虚拟主机
桌面工具 管理软件 教育教学 数码软件 ASP源码 PHP源码
国产软件 国外软件
网站建设 网络推广 主机托管
您的位置:首页设计学院Dreamweaver → Dreamweaver打造多彩文字链接
  Dreamweaver打造多彩文字链接
  日期:2005-7-25 17:54:30 人气: 出处:蓝色理想 作者:梦觉    [ ]
  文字链接可以说是网页中最常见的页面元素了,默认的文字链接样式都是带下划线的效果,这种一陈不变的外观可能使很多朋友都想改变它,以使之符合页面的整体效果,自从样式表得到广泛的应用后,这个愿望现在可以非常方便的实现。今天我给大家介绍利用样式表打造多彩的文字链接效果。我将分为初级篇、进阶篇和高级篇给大家作介绍,所有的链接样式效果我们都将在Dreamweaver的样式编辑器中完成,关于Dreamweaver中的样式编辑器的用法请参考以前的介绍。


  一、 准备工作


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


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



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


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



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



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



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


  二、 初级链接样式


  这部分的链接效果我们将完全在样式编辑器的Type分类中完成,如何创建和设置我不再细说,只把完成的面板图给大家看,并稍作介绍。


  1、 普通链接。如图六;




  普通的链接都是在样式编辑器的Category分类中的第一项Type中设定,Color定义链接字体的颜色,Decoration定义链接的划线风格,分为以下几类:
  underline:下划线
  overline:上划线
  line-through:删除线
  blink:闪动线
  none:无划线

  本部分的其他几种链接样式都是通过改变划线的组合来达到的效果。


  2、 无下划线链接,如图七;



  3、 双划线链接,如图八;



  4、 删除线链接,如图九;



三、 进阶链接样式


  接下来我介绍一种另类链接样式的定义方法,这种方法主要是利用样式表中的Border属性来替代普通链接的划线,由于Border有更多的控制参数和样式,因此可以实现一些特殊的效果。我们来看看下面的面板,如图十;




  在Border选项中包括Width(划线宽度)、Color(划线色彩)、Style(划线种类)三部分,而每部分又是可以针对不同的边框设定不同的参数,这是普通链接划线不可能实现的效果。


  需要提醒大家的是,使用这种方法定义链接样式还有一个必要的条件:就是必须定义样式中的Box属性,如图十一;




  这是因为Border是属于样式中的块状元素,我们必须先定义一个块状元素才可以使Border起作用。我们只要任意定义Box选项中的Width或Height即可,具体数值大家可以试着看看效果,我在这里定义了Height为0。下面我们看看可以做出什么样的效果。


  1、 另类链接样式。设置如图十二;



  2、 定制下划线色彩,我们可以定义出下划线与文字不同的色彩,这是普通链接文字不可能实现的效果,只要将Border的色彩和文字的色彩定义的不同即可,如图十三;



  3、 定制下划线距离。此种划线的距离我们可以在Box分类中设置,只需改变Padding的数值,在本例中我们设定Padding—Bottom为5pix,如图十四;



  4、 定制划线长度和对齐方式。更进一步我们还可以精确定义划线的长度和对齐方式,打开Box分类设定Width为200,如图十五;设定Block分类的Text Align为Center,即中间对齐,如图十六;




  5、 定制双划线效果。改变Border中的Style即可改变划线的外观,其中设定Style为Double,并设定Bottom为3pix即可实现双划线的效果。如图十七;



  四、 高级链接样式


  通过组合应用上面介绍的技术,我们还可以创作出更复杂的文字链接样式,下面我们介绍三个例子。


  1、 定义块状链接。首先给链接增加一个背景色,如图十八;




  再为文字链接增加四边框即可实现平面块状文字链接,如图十九;



  2、 定义按钮状文字链接。改变边框的样式,定义Border-Style为outset,如图二十;




  定义Box选项中的Width和Height可以定义按钮的宽和高,定义Padding为2pix可以使链接文字与按钮四周有2pix的间距,如图二十一;



  3、 定义特效文字链接。CSS样式表中还包含了一组特效滤镜,我们可以再结合滤镜与前边的参数创建特殊的链接样式。本例中我创建了一个使用Blur滤镜的文字链接,并带有边框效果。如图二十二;




  4、 定义静态背景切换的效果。本例是通过对链接文字普通状态和Hover状态设定不同的背景图片来实现背景切换的效果。见下图:





  5、 动态背景切换的效果。此效果与上例基本一样,只是在Hover状态定义了一个动态Gif图片背景。而且这个图片需要一点技巧就是设定循环为一遍,并在最后添加一个帧,设定帧的时间为一个较大的值,如10000。这样可以使动画执行一边后就停止。为改善效果执行时的速度,我们还需要在Dreamweaver中增加了一个Preload /doc/webpage/images/images行为。这需要打开行为面板,并添加Preload /doc/webpage/images/images行为,如图:





  我们可以把最后两种链接样式所需要用到的四张图片都预先载入,如下图:



  五、 总结


  我就介绍这么多链接样式,配合设置链接文字的hover状态,可以实现非常漂亮的效果,希望朋友们根据上面的思路,组合创造出更多地链接文字样式。记住,样式表就好比网页制作中具有宝藏的一个冰山,今天我们只是揭开了冰山小小的一个角落,更多的宝藏等着你去挖掘。



上一篇:Photoshop制作麦克风三步曲之二
下一篇:Photoshop制作麦克风三步曲之三
 
 热点文章
·脱光衣服要收钱
·学习贯彻十六届五中全会精..
·卖淫
·国税干部妻子廉政爱家演讲..
·个人年终总结材料
·关于学习团员先进性的心得..
·树立正确的入党动机,早日..
·团员、青年学习教育心得体..
·去看色情电影!
·保持团员先进性 坚定..
 推荐文章
·特大淫秽色情网站情色六..
·比尔盖茨最痛恨的三个中..
·轻松"偷窥"!强..
·玩转智能手机 Pocket PC..
·微软发布MSN 8.5最终版[..
·微软推出Windows Media ..
·Ubuntu,Kubuntu和Xubunt..
·第3只眼:病毒开启摄像头..
·微软Vista官方中文版泄露..
·[特大新闻]百度3000万收..
·zend已经可以破解
·为了你的系统安全千万别..
·希捷收购迈拓官方网站开..
·液晶八代生产线逼迫液晶..
·卡巴斯基安全套装2006版..
关于本站帮助( ?)广告服务版权声明业务合作加盟我们265自助链联系我们
版权所有:落伍下载站 2005-2006 未经授权禁止复制或建立镜像 
Copyright © 2005-2006 www.LwDown.com online services. All rights reserved. 粤ICP备06085338号
在线管理员QQ:5330918 QQ群1:12761713(满) QQ群2:18427800
我要啦免费统计