第6章网页链接.pptx

《第6章网页链接.pptx》由会员分享，可在线阅读，更多相关《第6章网页链接.pptx（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第6章网页链接一个完整的网站，就是将许多页面链接在一起，用户通过网站的主页查找网站中所有页面，而网页彼此之间的链接，则称之为页面的链接。这就像在书本中查找目录的时候，在第一页的目录中找到所需资料的所在书页，然后根据所在页数翻找到此页。而在网站中，用户在页面中选择链接内容，页面则会自动跳转到所在的页面。6.1 网页链接所谓的链接是指从一个页面指向一个目标的链接关系，这个目标是多种样式的，可以是一个网页，也可以是相同网页的不同位置，甚至可以是一张图片、一个电子邮件地址、一个应用程序。当用户单击已经添加链接的页面内容时，链接目标将显示在浏览器上，并根据目标的类型来运行。6.1.1 初识页面链接在HT

2、ML文档中，使用标签指引页面中链接的目标点，让设计者创建指向目标点的链接。在链接的属性中，代码的写法为：链接锚点对象用a来表示锚点，a也源自于英文中的anchor。href属性意思是超文本引用，这个属性的值指定了链接的目标路径。6.1.2理解链接地址链接地址指的是链接到锚点对象的路径，这个路径所指的不仅仅只是一个页面地址，也可能是一个文件地址、一个邮箱地址。那么，对于一个页面的链接，该如何去定位这个链接对象的路径呢？6.2 链接的种种不同链接的分类有种种不同，使用的方法却是大同小异，创建一个超链接很容易。事实上，设计者使用到的只有标签这样的一个标签而已。虽然链接的方法类似，但是其展示的形式却自

3、由多变，如链接的方式，链接指向何处等。而从使用者的角度来说，设计者最重要的是保持链接的友好性。6.2.1基本的文本链接文本的链接是页面中最常见的链接形式，也是最基本的一种链接使用。一般文本链接中，最初文字上的超链接呈蓝色，文字下面有一条下划线，如果超链接已经被浏览过了，文本颜色就会发生改变，默认是紫色。6.2.2 基本的图像链接图像链接的使用频率和文本链接一样高，设置图像链接的方法和文本无异，在引用图片的代码前面先放入标签。代码如下：6.2.3 把邮箱留给需要联系你的人标签还可以链接电子邮箱地址。这是通过网页让使用者和设计者联系的最方便的方法。当然，也可以直接在页面中留下电子邮件地址，但是有时

4、候为了突出友好性，不是直接留下地址，而是采用将邮箱链接到页面内容上的方式，使用方法如下：链接锚点对象6.2.4在同一页面中快速查找信息页面除了和页面之外的文件或者程序链接外，还可以和同一页面中的内容进行链接。这种情况通常用于导航，使浏览页面的人直接可以跳到自己需要的信息版块上。由于是在同一页面内实现链接，也就是说，页面链接的路径就是在同一页面内，所以在HTML语言中使用标签中的“id”属性来确定路径位置。6.2.4 在同一页面中快速查找信息通过以下两个步骤可以理解这种代码的用法。（1）要确定链接的锚点对象，不同于页面和外部文件链接的方式在于，链接的路径由于在同一页面内，这里需要使用“#”来引用

5、同一页面中的内容。代码写为：（2）需要在页面中设定出链接的目标。使用的就是id属性。6.3 提高页面链接的友好度在设置了超链接的文本中，链接的内容都带有下划线，浏览过的字体也都是特定的颜色，始终给人千篇一律的感觉，而对于浏览者来说，这是一种不太舒服的感受。为了解决这些问题，使页面展现出亲和力的一面，设计者总是会用一些新颖的方法去改变链接的状态。6.3.1美观链接的状态链接的状态在页面中是很显眼的一部分，起到的作用举足轻重，而链接的样式是可以通过定义来修改的。在修改之前，首先要搞明白链接的过程，一个链接状态，可以分解为以下4个步骤。（1）链接还未被访问。（2）链接被选中时。（3）鼠标滑过链接。（

6、4）链接被访问后。6.3.1美观链接的状态使用HTML标签属性，通过添加link、alink和vlink来修改超链接文本的颜色。link属性修改链接未访问时的文本颜色，alink属性修改链接被选中时候文本的颜色，vlink属性修改链接被访问后的文本颜色。6.3.1美观链接的状态【深入学习】这里是使用HTML标签属性来实现的功能，事实上这种旧方法并不值得推荐，更好的方法是使用CSS。除了结构性的标签无法替代，如、，在表现性的作用上，应该习惯于避免使用标签属性的用法。而且CSS可以包含更多的属性修改，实现自由度更大的修饰。接下来从CSS的角度来了解如何修改链接状态。6.3.1美观链接的状态链接还未

7、被访问。a:link 链接被选中时。a:active 鼠标滑过链接。a:hover 链接被访问后。a:visited 而在中通常添加两个基本的属性：color属性修改文本的颜色，text-decoration选择是否显示下划线。6.3.2奇妙特殊的链接方式6.3.1节中了解了通过使用CSS的方法可以去除链接默认的下划线。本节将介绍2种新方法来改变下划线的样式。首先需要了解两个属性：border-bottom属性和padding-bottom属性。前者的意思是底部边界，后者的意思是底部内边。顾名思义，它们都是用来描述边框性质的属性。那么，这里的原理就是使用边框属性来替换掉原来的下划线。6.3.2

8、奇妙特殊的链接方式【深入学习】这里的dotted是点状的意思，除此之外，CSS中还允许其他形状的下划线。其他的还有dashed（虚线）、double（双线）、groove（槽线）、ridge（脊线）、inset（内陷）、outset（外陷），有兴趣的读者可以去尝试一下。而padding-bottom属性的作用可以引用自定义图像来制定下划线，技巧在于要细心地排版好下划线和文本的距离，如实例6-11设计的自定义下划线。6.3.3 热点图像区域的链接所谓图像热点区域，就是指一个图像中的某一区域。那么热点图像区域的链接，自然就是使用这一个区域作为超链接，就好像在一张地图上，以其中某一区域作为超链接。所

9、以，在代码中也用到一个形象的标签标签。标签下，嵌入使用标签表明某一区域，其中有3个属性值来确定这个区域，分别是shape属性、coords属性和href属性。shape属性：用来确定选区的形状，分别是rect（矩形）、circle（圆形）和poly（多边形）。coords属性：用来控制形状的位置，通过坐标来找到这个位置。href属性：就是超链接。所以，将这些属性运用在一起，这种方法的具体代码写法为：6.4 在新窗口中显示链接窗口在先前的所有链接中，页面都是在同一页面中跳转，有时候设计者希望链接的页面在新的窗口中打开，这时只要在标签中添加“target=_blank”就行了。6.5 案例：制作普通链接的主页在网页上经常遇到这样的链接功能：一个主页上罗列很多名词条目，每个条目链接着一个页面，用来为专门的链接条目服务。下面的例子中介绍了美国电影史上票房最高的前30名电影。目前为止，泰坦尼克号依然排位第一，这里就以它为一个目录，运用各种链接方式。6.6 小结本章介绍了超链接这一互联网中最具特色的技巧，这些技巧始终围绕一个标签标签展开。但其展现出的形式却是多种多样，说明了超链接是人性化设计的一门技术，其变化非常多。