Dreamweaver+Flash+Photoshop网页设计从入门到精通（微课精编版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

4.4 设计超链接样式

本节将通过几个案例演示如何借助Dreamweaver自定义网页链接的动态效果，并根据页面风格设计不同效果的链接样式。

4.4.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.13所示。

图4.13 定义超链接伪类默认样式

（1）在【源】标题右侧单击加号按钮，在弹出的下拉菜单中选择【在页面中定义】选项，设计网页内部样式表，然后选择<style>标记。

（2）在【选择器】标题右侧单击加号按钮，新增一个选择器，命名为a:link。

（3）在【属性】列表框中分别设置文本样式：color为#8FB812，text-decoration为none，定义字体颜色为鹅黄色，清除下画线样式，如图4.13所示。

第4步，以同样的方式继续添加3个伪类样式，设计超链接的其他状态样式，主要定义文本样式，设置鼠标经过超链接过程中呈现不同的超链接文本颜色，设置如图4.14所示。

图4.14 定义遮罩层的不透明效果

第5步，按Ctrl+S快捷键，保存网页，再按F12键在浏览器中预览，演示效果如图4.15所示。超链接文本在默认状态隐藏显示了下画线，同时设置颜色为淡黄色，当鼠标经过时显示为鲜绿色。

图4.15 设计超链接的样式

4.4.2 定义下画线样式

视频讲解

在定义网页链接的字体颜色时，一般都会考虑选择网站专用色，以确保与页面风格融合。下画线是网页链接的默认样式，但很多网站都会清除所有链接的下画线。方法如下：

     a {/* 完全清除超链接的下画线效果*/
         text-decoration:none;
     }

不过从用户体验的角度分析，取消下画线效果之后，可能会影响部分用户对网页的访问。因为下画线效果能够很好地提示访问者，当前鼠标经过的文字是一个链接。

下画线的效果当然不仅仅是一条实线，也可以根据需要进行设计。设计的方法包括：

☑ 使用text-decoration属性定义下画线样式。

☑ 使用border-bottom属性定义下画线样式。

☑ 使用background属性定义下画线样式。

下面的示例演示了如何分别使用上面3种方法定义不同的下画线链接效果。

【操作步骤】

第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。

第2步，在编辑窗口中构建一个列表结构。为每个列表项目文本定义空链接，并分别为它们定义一个类，以方便单独为每个列表项目定义不同的链接样式。

     <ul>
         <li class="underline1"><a href="#">隐私家园</a></li>
         <li class="underline2"><a href="#">微博公众号</a></li>
         <li class="underline3"><a href="#">微信公众号</a></li>
     </ul>

第3步，在<head>标记内添加<style type="text/css">标记，定义一个内部样式表，然后准备在其中输入代码，用来定义链接的样式。

第4步，在内部样式表中输入下面的代码，定义两个样式，其中第一个样式清除项目列表的缩进效果，清除项目符号；第二个样式定义列表项目向左浮动，让多个列表项目并列显示，同时使用margin属性调整每个列表项目的间距，效果如图4.16所示。

图4.16 设计列表并列显示样式

第5步，设计页面链接的默认样式：清除下画线效果，定义字体颜色为粉色。

第6步，使用text-decoration属性为第一个链接样式定义下画线样式。

     .underline1 a:hover {text-decoration:underline;}

第7步，使用border-bottom属性为第二个链接样式定义下画线样式。

第8步，使用Photoshop设计一个虚线段，如图4.17所示是一个放大32倍的虚线段设计图效果，在设计时应该确保高度为1像素，宽度可以为4像素、6像素或8像素，主要根据虚线的疏密进行设置。然后使用粉色（#EF68AD）以跳格方式进行填充，最后保存为GIF格式图像即可，当然最佳视觉空隙是间隔两个像素空格。

图4.17 使用Photoshop设计虚线段

提示：由于浏览器在解析虚线时的效果并不一致，且显示效果不是很精致，最好的方法是使用背景图像来定义虚线，效果会更好。

第9步，使用background属性定义下画线样式，为第三个链接样式定义下画线样式。

     .underline3 a:hover {
        /*定义背景图像，定位到链接元素的底部，并沿x轴水平平铺*/
         background:url (images/dashed3.gif) left bottom repeat-x;
     }

第10步，保存网页，按F12键在浏览器中预览，比较效果如图4.18所示。

图4.18 下画线链接样式效果

4.4.3 定义立体样式

视频讲解

立体效果设计技巧如下：

☑ 利用边框线的颜色变化来制造视觉错觉。可以把右边框和底部边框结合，把顶部边框和左边框结合，利用明暗色彩的搭配来设计立体变化效果。

☑ 利用链接背景色的变化来营造凸凹变化的效果。链接的背景色可以设置相对深色的效果，以营造凸起效果，当鼠标经过时，再定义浅色背景来营造凹下效果。

☑ 利用环境色、字体颜色（前景色）来烘托这种立体变化过程。

本案例定义的网页链接，在默认状态下显示灰色右边框线和灰色底边框线效果。当鼠标经过时，则清除右侧和底部边框线，并定义左侧和顶部边框效果，这样利用错觉就设计出了一个简单的凸凹立体效果。

【操作步骤】

第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。

第2步，在编辑窗口中构建一个列表结构。

     <ul>
         <li><a href="#">首页</a></li>
         <li><a href="#">今日最热</a></li>
         <li><a href="#">衣服</a></li>
         <li><a href="#">鞋子</a></li>
         <li><a href="#">包包</a></li>
         <li><a href="#">配饰</a></li>
         <li><a href="#">美妆</a></li>
         <li><a href="#">特卖</a></li>
         <li><a href="#">团购</a></li>
         <li><a href="#">好店</a></li>
         <li><a href="#">杂志</a></li>
         <li><a href="#">爱美丽Club</a></li>
     </ul>

第3步，在<head>标记内添加<style type="text/css">标记，定义一个内部样式表，然后准备在其中输入代码，用来定义链接的样式。

第4步，在内部样式表中输入下面的代码，定义两个样式，其中第一个样式清除项目列表的缩进效果，清除项目符号；第二个样式定义列表项目向左浮动，让多个列表项目并列显示，同时使用margin属性调整每个列表项目的间距，效果如图4.19所示。

图4.19 设计列表并列显示样式

第5步，定义<a>标记在默认状态下的显示效果，即鼠标未经过时的样式。

第6步，定义鼠标经过时的链接样式。

第7步，保存网页，按F12键在浏览器中预览，演示效果如图4.20所示。

图4.20 立体链接样式效果

4.4.4 定义动态背景样式

使用背景图像设计链接样式比较常用，其中利用背景图像的动态滑动技巧设计很多精致的链接样式，这种技巧被称为滑动门技术。演示示例请扫码阅读。

线上阅读

上一章目录下一章