<b>Dreamweaver打造多彩文字链接</b>[DW设计]

文字链接可以说是中最常见的页面元素了,默许的文字链接款式都是带下划线的效果,这种一陈不变的外观大概使很多朋友都想改变它,以使之符合页面的整体效果,自从款式表得到遍及的利用后,这个希望目前可以非常便利的实现.本日我给大家介绍操纵款式表打造多彩的文字链接效果.我将分为初级篇、进阶篇和高级篇给大家作介绍,全部的链接款式效果我们都将在的款式编辑器中完成,关于中的款式编辑器的用法请参考从前的介绍.链接款式浏览效果以下图;具体的页面浏览CSS.htm" target=_blank>请看这里

 

　　1、 预备工作

　　我们将首先成立一个基本的链接款式,其他的款式将在此底子上增添一个自定义的Class类.

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

　　2、 在Type选项中挑选Use CSS Selector,成立默许链接款式,如图二;
 

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

　　4、 定义款式类Class.我们下面的每一个款式都是定义了一个单独的类,并将其赋予链接文字.步骤以下:点击增添翻开新定义款式面板,挑选Make Custom Style（class）定义自己的款式类.如图四;
 

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

　　6、 别的链接文字款式的做法与此相同,背面我将不再作介绍.在本中有关定义hover状况的链接款式办法,朋友们可以自己制作.我也不再作介绍,只是提醒定义时直接输入[.t1:hover]便可.

　　2、 初级链接款式

　　这部份的链接效果我们将完好在款式编辑器的Type分类中完成,若何成立和设置我不再细说,只把完成的面板图给大家看,并稍作介绍.

　　1、 普通链接.如图六;
 

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

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

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

 

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

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

3、 进阶链接款式

　　接下来我介绍一种另类链接款式的定义办法,这种办法主如果操纵款式表中的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便可实现双划线的效果.如图十七;
 

　　4、 高级链接款式

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

　　1、 定义块状链接.首先给链接增添一个后台色,如图十八;
 

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

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

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

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

　　4、 定义静态后台切换的效果.本例是通过对链接文字普通状况和Hover状况设定差别的后台图片来实现后台切换的效果.见下图:
 

　　5、 动态后台切换的效果.此效果与上例基本一样,只是在Hover状况定义了一个动态Gif图片后台.并且这个图片需求一点本领就是设定循环为一遍,并在最后增添一个帧,设定帧的时间为一个较大的值,如10000.这样可以使动画履行一边后就终止.为改进效果履行时的速度,我们还需求在中增添了一个Preload /doc/webpage/images/images行为.这需求翻开行为面板,并增添Preload /doc/webpage/images/images行为,如图:
 

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

　　5、 总结

　　我就介绍这么多链接款式,配合设置链接文字的hover状况,可以实现非常漂亮的效果,具体的页面浏览请看这里,但愿朋友们按照上面的思绪,组合创造出更多地链接文字款式.记着,款式表就好比中具有宝藏的一个冰山,本日我们只是揭开了冰山小小的一个角落,更多的宝藏等着你去发掘.