![Dreamweaver+Flash+Photoshop网页设计从入门到精通(微课精编版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/579/25744579/b_25744579.jpg)
4.4 设计超链接样式
本节将通过几个案例演示如何借助Dreamweaver自定义网页链接的动态效果,并根据页面风格设计不同效果的链接样式。
4.4.1 定义基本样式
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P109_15408.jpg?sign=1738855063-01vuotiiSf46AORpcFJ06tJMMiacTr3q-0-4885d084c4c2e61148bccfe36f76b974)
视频讲解
设计链接样式需要用到下面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所示。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P110_15439.jpg?sign=1738855063-XKJNKMKFy30dtLEbzQ4fbHzvEH7glicN-0-fde559dec3588a24191fb160fc14b51e)
图4.13 定义超链接伪类默认样式
(1)在【源】标题右侧单击加号按钮,在弹出的下拉菜单中选择【在页面中定义】选项,设计网页内部样式表,然后选择<style>标记。
(2)在【选择器】标题右侧单击加号按钮,新增一个选择器,命名为a:link。
(3)在【属性】列表框中分别设置文本样式:color为#8FB812,text-decoration为none,定义字体颜色为鹅黄色,清除下画线样式,如图4.13所示。
第4步,以同样的方式继续添加3个伪类样式,设计超链接的其他状态样式,主要定义文本样式,设置鼠标经过超链接过程中呈现不同的超链接文本颜色,设置如图4.14所示。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P110_15443.jpg?sign=1738855063-maibATOjMJyOcTY25BwEGckzSB0B8xHD-0-29753a187bab840c419692cd8a30cb83)
图4.14 定义遮罩层的不透明效果
第5步,按Ctrl+S快捷键,保存网页,再按F12键在浏览器中预览,演示效果如图4.15所示。超链接文本在默认状态隐藏显示了下画线,同时设置颜色为淡黄色,当鼠标经过时显示为鲜绿色。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P111_15467.jpg?sign=1738855063-QmX0dtLnOLCaepqtrCrEY5jSWsPyPQWb-0-7841bdc87828dc285e3821a8a5294fad)
图4.15 设计超链接的样式
4.4.2 定义下画线样式
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P111_15526.jpg?sign=1738855063-TSYQLmt6XTjUqqXLbnxDADXHch0xRdef-0-9681b47ec9f6f556c9dadd2d9316c4e0)
视频讲解
在定义网页链接的字体颜色时,一般都会考虑选择网站专用色,以确保与页面风格融合。下画线是网页链接的默认样式,但很多网站都会清除所有链接的下画线。方法如下:
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所示。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P112_15616.jpg?sign=1738855063-MQfr6MLwuEHpirYv6ti5SRqF1WyPyvh1-0-9ece4a6316e0cd1b1bfb369b460de147)
图4.16 设计列表并列显示样式
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P112_47351.jpg?sign=1738855063-5LIhbPaKOdHl8c2uCD8efPLouMZtodPd-0-1168aa9e591f694d3f82740792627552)
第5步,设计页面链接的默认样式:清除下画线效果,定义字体颜色为粉色。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P112_47352.jpg?sign=1738855063-2qYYU5uMH0nuBWI7SiVy7z3PxNXvBy8a-0-a5250e3697b363963a883bc0024e89e4)
第6步,使用text-decoration属性为第一个链接样式定义下画线样式。
.underline1 a:hover {text-decoration:underline;}
第7步,使用border-bottom属性为第二个链接样式定义下画线样式。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P113_47355.jpg?sign=1738855063-jgPuzJNRKchgrm68Pi9YEoPgYegTcPzx-0-a8239a9777c4a56c7790adfea69e12d5)
第8步,使用Photoshop设计一个虚线段,如图4.17所示是一个放大32倍的虚线段设计图效果,在设计时应该确保高度为1像素,宽度可以为4像素、6像素或8像素,主要根据虚线的疏密进行设置。然后使用粉色(#EF68AD)以跳格方式进行填充,最后保存为GIF格式图像即可,当然最佳视觉空隙是间隔两个像素空格。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P113_15703.jpg?sign=1738855063-fPCwwzD7MvKahsywHVUMtAAvdqRtWzcr-0-0b3fc9496bf3051d2ce24b5baf996d01)
图4.17 使用Photoshop设计虚线段
提示:由于浏览器在解析虚线时的效果并不一致,且显示效果不是很精致,最好的方法是使用背景图像来定义虚线,效果会更好。
第9步,使用background属性定义下画线样式,为第三个链接样式定义下画线样式。
.underline3 a:hover { /*定义背景图像,定位到链接元素的底部,并沿x轴水平平铺*/ background:url (images/dashed3.gif) left bottom repeat-x; }
第10步,保存网页,按F12键在浏览器中预览,比较效果如图4.18所示。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P113_15744.jpg?sign=1738855063-ztWHDliTcFG4OERIewTTefwigtfhs3z5-0-883092551bfec9114dd60864b5cf80f0)
图4.18 下画线链接样式效果
4.4.3 定义立体样式
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P114_15878.jpg?sign=1738855063-pwVwsNB5JiScyTHjF5uWvn1rysDnCXGe-0-d64609c15a5d1cfca0560bd160b04495)
视频讲解
立体效果设计技巧如下:
☑ 利用边框线的颜色变化来制造视觉错觉。可以把右边框和底部边框结合,把顶部边框和左边框结合,利用明暗色彩的搭配来设计立体变化效果。
☑ 利用链接背景色的变化来营造凸凹变化的效果。链接的背景色可以设置相对深色的效果,以营造凸起效果,当鼠标经过时,再定义浅色背景来营造凹下效果。
☑ 利用环境色、字体颜色(前景色)来烘托这种立体变化过程。
本案例定义的网页链接,在默认状态下显示灰色右边框线和灰色底边框线效果。当鼠标经过时,则清除右侧和底部边框线,并定义左侧和顶部边框效果,这样利用错觉就设计出了一个简单的凸凹立体效果。
【操作步骤】
第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所示。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P115_15943.jpg?sign=1738855063-ns0fZThh723ep76bwrwLgNXdaCslBfrK-0-2b10a52d353e00e213a27379ab8cfc2b)
图4.19 设计列表并列显示样式
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P115_47361.jpg?sign=1738855063-3pOsYamIpW7RUVakQrb9vV9AVcveGUm8-0-95c854f6e3aa34c56e1c0f7adbcde2ab)
第5步,定义<a>标记在默认状态下的显示效果,即鼠标未经过时的样式。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P115_47362.jpg?sign=1738855063-pmVGfHN7PiCVCEZsUoNpEzwh2dwPwrpy-0-f4b9e8cb6ff9004d7205bcc04ebb804d)
第6步,定义鼠标经过时的链接样式。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P115_47363.jpg?sign=1738855063-mbMwlr1z1UYHmB5zXBdUuWe5UHuqMK1M-0-c32d695a96abb1d37f677893557d4bf6)
第7步,保存网页,按F12键在浏览器中预览,演示效果如图4.20所示。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P116_16051.jpg?sign=1738855063-cqXxFA4R1cWXiUcAJSvlcz9og913IxL8-0-3b0b48e4311104f65ba099bf019490a0)
图4.20 立体链接样式效果
4.4.4 定义动态背景样式
使用背景图像设计链接样式比较常用,其中利用背景图像的动态滑动技巧设计很多精致的链接样式,这种技巧被称为滑动门技术。演示示例请扫码阅读。
![](https://epubservercos.yuewen.com/C0E556/14216368103664106/epubprivate/OEBPS/Images/Figure-P116_16121.jpg?sign=1738855063-Yv0IjLbBj3LjG65LgV42a8nkctd9syg8-0-5adcef8107096347633ff402a68763c5)
线上阅读