您现在的位置： 圆点视线 >> 教程 >> 网页设计 >> Dreamweaver教程 >> 文章正文

[图文]DreamweaverMX2004实现一个页面两种连接风格           ★★★

DreamweaverMX2004实现一个页面两种连接风格

作者：netjc.co… 　文章来源：netjc.com 　点击数： 　更新时间：2008-5-17 20:17:26

页面功能：【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 【字体：小 大】

很多人也许学会了怎样使链接文字随鼠标点击状态改变而改变的效果，这是css的使用效果，也许你只懂得设置一种状态，比如鼠标放在文字上方，文字变为红色。

　　1、首先启动Dreamweaver MX 2004，然后新建一个HTML文件,做两个带连接的文字。

　　2、按SHIFT+F11，打开css styles控制面板，新建一css样式，需要注意的是，你选择器类型为：高级(ID、上下文选择器等)，再选择选择器a:hover，并没有出现上图的效果，其实技巧就是在这里！我们手动把a:hove改成a.one:hove，也就是在a的后面加上一个点与名字（可任意英文，不能是数字）。设置好后点确定。如下图：

　　3：在弹出的a。one:hover 的 CSS 样式定义对话框中设置你要的效果，这里我们选择字体的颜色为红色。设置完后点“确定”。如下图：

　　4、重复第2、3步，第2步需要修改的地方就是把a.one:hover该回a:hover(就是直接选中a:hover就可。第3步需要改的就是字体的颜色了，我们设置为黄色。

　　5、现在预览还没有效果，我们还需要动点小手术，我们来看看设置完后的css styles控制面板，如下图：

　　6、在页面中选中其中你想要当鼠标放上去的时候是红色的链接文字，再在CSS样式面板中用鼠标右击a.one:hover，然后选择“套用”。如下图：

　　7：现在预览你的页面就已经有两种效果了。

　　总结：按照以上逻辑，我们可以做出无限个文字链接效果，关键是在于a:hover a:active a:link a:visited的修改而已，前面介绍的只是a:hover，其实其他三个一样可以。只要参照第2步的设置就可以轻松的搞定。最后嘱咐大家一句，我们制作网页不能只学会设计工具(Dreamweaver等设计软件)就算学会了网页制作了，关键是大家必须懂得代码。这时我们可以打开“代码视图”看看效果：