4.5 案例实战
本节将通过几个案例演示如何借助Dreamweaver自定义网页链接的动态效果，能够根据页面风格设计不同效果的链接样式。
4.5.1 定义网页链接样式
设计链接样式需要用到下面4个伪类选择器，它们可以定义超链接的4种不同状态。
a:link：定义超链接的默认样式。
a:visited：定义超链接被访问后的样式。
a:hover hover：定义鼠标经过超链接时的样式。
a:active：定义超链接被激活时的样式，如鼠标单击之后，到鼠标被松开之间的这段时间的样式。
【操作步骤】
第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。
第2步，在编辑窗口中选择文本“第三届国际茶文化节11月在广州举行”。
第3步，选择【窗口】｜【CSS设计器】命令，打开【CSS设计器】面板，依次执行下面操作，详细提示如图4.25所示。
（1）在【源】标题右侧单击
按钮，在弹出的下拉菜单中选择【在页面中定义】选项，设计网页内部样式表，然后选择<style>标签。
（2）在【选择器】标题右侧单击按钮，新增一个选择器，命名为“a:link”。
（3）在【属性】列表框中分别设置文本样式“color: #8FB812; text-decoration:none;”，定义字体颜色为鹅黄色，清除下画线样式，如图4.25所示。
图4.25 定义超链接伪类默认样式
第4步，以同样的方式继续添加3个伪类样式，设计超链接的其他状态样式，主要定义文本样式，设置鼠标经过超链接过程中呈现不同的超链接文本颜色，设置如图4.26所示。
图4.26 设置超链接其他伪类样式
第5步，按Ctrl+S快捷键，保存网页，再按F12键在浏览器中预览，演示效果如图4.27所示。超链接文本在默认状态隐藏显示了下画线，同时设置颜色为淡黄色，当鼠标经过时显示为鲜绿色。
图4.27 设计超链接的样式
4.5.2 设计精致下画线链接样式
在定义网页链接的字体颜色时，一般都会考虑选择网站专用色，以确保与页面风格融合。下画线是网页链接的默认样式，但很多网站都会清除所有链接的下画线。方法如下：
不过从用户体验的角度分析，如果取消下画线效果之后，可能会影响部分用户对网页的访问。因为下画线效果能够很好地提示访问者，当前鼠标经过的文字是一个链接。
下画线的效果当然不仅仅是一条实线，也可以根据需要进行设计。设计的方法包括以下方面。
使用text-decoration属性定义下画线样式。
使用border-bottom属性定义下画线样式。
使用background属性定义下画线样式。
下面示例演示如何分别使用上面3种方法定义不同的下画线链接效果。
【操作步骤】
第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。
第2步，在编辑窗口中构建一个列表结构。为每个列表项目文本定义空链接，并分别为它们定义一个类，以方便单独为每个列表项目定义不同的链接样式。
第3步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后准备在其中输入代码，用来定义链接的样式。
第4步，在内部样式表中输入下面代码，定义两个样式，其中第一个样式清除项目列表的缩进效果，清除项目符号；第二个样式定义列表项目向左浮动，让多个列表项目并列显示，同时使用margin属性调整每个列表项目的间距，效果如图4.28所示。
图4.28 设计列表并列显示样式
第5步，设计页面链接的默认样式：清除下画线效果，定义字体颜色为粉色。
第6步，使用text-decoration属性为第一个链接样式定义下画线样式。
.underline1 a:hover {text-decoration:underline;}
第7步，使用border-bottom属性为第二个链接样式定义下画线样式。
第8步，使用Photoshop设计一个虚线段，如图4.29所示是一个放大32倍的虚线段设计图效果，在设计时应该确保高度为1px，宽度可以为4px、6px或8px，主要根据虚线的疏密进行设置。然后使用粉色（#EF68AD）以跳格方式进行填充，最后保存为GIF格式图像即可，当然最佳视觉空隙是间隔两个像素空格。
图4.29 使用Photoshop设计虚线段
提示：由于浏览器在解析虚线时的效果并不一致，且显示效果不是很精致，最好的方法是使用背景图像来定义虚线，则效果会更好。
第9步，使用background属性定义下画线样式为第三个链接样式定义下画线样式。
第10步，保存网页，按F12键在浏览器中预览，则比较效果如图4.30所示。
图4.30 下画线链接样式效果
提示：有关下画线的效果还有很多，只要巧妙结合链接的底部边框、下画线和背景图像，就可以设计出很多新颖的样式。例如，可以定义下画线的色彩、下画线距离、下画线长度、对齐方式和定制双下画线等。
4.5.3 设计立体链接样式
本案例定义的网页链接，在默认状态下显示灰色右边框线和灰色底边框线效果。当鼠标经过时，则清除右侧和底部边框线，并定义左侧和顶部边框效果，这样利用错觉就设计出了一个简陋的凸凹立体效果。详细操作步骤请扫码阅读。
4.5.4 设计滑动背景链接样式
在本案例中，先定义链接块状显示，然后根据背景图像大小定义a元素的宽和高，并分别在默认状态和鼠标经过状态下定义背景图像。对于背景图像来说，宽度可以与背景图像宽度相同，也可以根据需要小于背景图像的宽度，但是高度必须保持与背景图像的高度一致。详细操作步骤请扫码阅读。