欢迎访问第1万维网网站!用户名: 密码: [忘记密码]

合作代理 | 在线咨询

您的位置: 第一万维网 >> dreamweaver教程 >> 正 文

Dreamweaver打造多彩文字链接

来源:第一万维网   更新时间:2010-2-20 11:56:49

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

一、 准备职业

我们将首先创建一度根本的链接式样,其他的式样将在此房基上添加一度自定义的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]即可。

二、 初级链接式样

这部分的链接效果我们将完全在式样编辑器的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。这样合格执行一范围后就停止。为好转效果执行时的速度,我们还欲望增多了一度Preload /doc/webpage/images/images行为。这欲望开辟动为面板,并添加Preload /doc/webpage/images/images行为,如图:

我们合格把最后两种链接式样所欲望用到的四张图片都预先载入,如下图:

五、 小结

我就介绍这样多链接式样,配合安装链接文字的hover形状,合格完成非常漂亮的效果,指望朋友们证据范围的思路,结合创造出更多地链接文字式样。记住,式样表就好比主页制作中具有宝藏的一度冰山,今日我们但是揭开了冰山小小的一度拐角,更多的宝藏等着你去挖掘。

(第一万维网责任编辑:郑朝峰)

  • 上一篇文章:
  • 下一篇文章:
  • 最新图片新闻文章

    网友正在看下面的相关文章

    快捷操作

    本栏目最新文章

    业界新闻

    第一万维网公告

    本站最新图片文章

    第一万维网QQ客服

    为了给您提供更加方便快捷的服务请选择您的服务专员,点击QQ号码即可。
    企业在线客服QQ:800015119

    第一万维网快速服务导航