第5 章超级链接网站往往由多个网页构成,如果网页之间彼此是独立的,那么网页就好比是孤岛,这样的网站是无法运行的。而超级链接将各个独立的网页文件及其他资源链接起来。本章主要学习超级链接及属性的设置,以及锚记链接、邮箱链接、空链接、下载文件链接等不同链接样式的超级链接的制作方法。 5.1 超级链接概述浏览网页时,某些网页中有些文字是蓝色的(也可以自己设置成其他颜色),这些文字下面还可能有一条下画线。当移动鼠标指针到这些文字上时,鼠标指针就会变成一只手的形状,此时单击,就可以直接跳到与这些文字相链接的网页或WWW 网站上,如图5.1所示。图5.1 超级链接示例超级链接本质上属于网页的一部分,它是一种允许网页同其他网页或站点进行链接的元素,是网页中最重要、最根本的元素之一。各个网页链接在一起后,才能真正构成一个网站。访问者通过单击超级链接对象,就可以从一个网页跳转到目标对象。这个目标对象可以是另一个网页,也可以是相同网页上的不同位置,还可以是图片、电子邮件地址、文件、动画,甚至是应用程序。 5.1.1 超级链接的分类超级链接中由于单击而引起跳转的对象称为超级链接的载体,跳转到的对象称为链接第5 章　超级链接 85 目标。超级链接通常有两种分类方式。 (1)按链接载体的特点,通常把链接分为文本链接与图像链接两大类。 . 文本链接:用文本作为链接载体,简单、实用。 . 图像链接:用图像作为链接载体,能使网页美观、生动活泼,它既可以是指向单个模板的链接,也可以是根据图像不同的区域建立多个链接。 (2)按链接目标,可以将超级链接分为以下几种类型。 . 内部链接:链接目标是本站点的其他文档,用以实现在本站点内跳转。 . 外部链接:链接到本站点之外的其他站点或文档,通过这种链接可以跳转到其他站点。 . 锚点链接:连接到同一网页或不同网页中指定位置的链接,例如网页的顶部、底部或者其他特定位置。 . E-mail链接:目标是一个电子邮件地址。 . 执行文件链接:链接网站中可执行的程序,常用于下载在线执行。 5.1.2 超级链接标签 HTML中使用标签表示一个超级链接,字母标签中的a为英文单词anchor(锚) 的首字母缩写。有了标签 ,才有了今天丰富多彩的互联网,超级链接标签是 HTML中非常重要的一个标签。 HTML超级链接标签代表一个链接点,它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像,这已是众所周知了,但关于它的语法结构可能有点鲜为人知, 而要用活它,则必须了解其语法结构。标签的基本语法: 超级链接的文字访问者浏览网页时,单击“产生超级链接的文字”就可以打开属性href设置的“超级链接的目标文件”。【例5.1】超级链接示例。点击访问首页上面的语句将产生一个同文件夹下的超级链接,链接的文件名为index.htm。没有特定声明情况下,“点击访问首页”这几个字通常有下画线,并且显示成蓝色的文字,如图5.2 所示。对于标签,除href属性外,还有很多参数需要根据实际情况加以设置,以实现不同的链接效果。下面详细介绍超级链接标签的几个常用属性及其用法。 1.href属性 href是hypertextreference的缩略词,用于设定超级链接目标文件的地址(即链接地址)。通常,链接地址必须为URL地址,如果没有给出具体路径,则为默认路径,和当前页 86 网页设计与制作（第4 版）图5.2 例5.1的显示效果的路径相同。 2.title属性很多情况下,超级链接的文字不足以描述所要链接的内容,超级链接标签提供了title 属性,能很方便地给浏览者做出提示。 title属性的值即提示内容,当浏览者的光标停留在超级链接上时,会在超级链接的附近显示title属性设置的提示信息,这样不会影响页面排版的整洁性。【例5.2】 title属性示例。 Think Pad X220 当鼠标指针移到“ThinkPadX220”这个链接上时,显示说明“笔记本参数指标”,如图5.3 所示。图5.3 例5.2的浏览器效果 3.target属性 target用于设置链接的目标对象的显示方式,即指定打开链接的目标窗口。默认情况下,超级链接打开新页面的方式是自我覆盖。根据浏览者的不同需要,读者可以指定超级链接打开新窗口的其他方式。超级链接标签提供了target属性进行设置,取值分别为以下5个。第5 章　超级链接 87 (1)_self:表示链接的对象在当前窗口打开,此值为默认设置,一般不需要单独设置。【例5.3】 target属性设置为_self示例。关于我...... 图5.4为例5.3的初始页面,当鼠标指针单击超级链接文本时,将会在当前浏览器窗口打开并显示aboutme.htm 页面,如图5.5所示,覆盖浏览器窗口原来显示的页面。图5.4 例5.3的初始页面图5.5 超级链接target设置为_self的效果注意,这时单击浏览器窗口中的“后退”按钮可以返回单击之前的页面,即5-3.htm 页面。 (2)_blank:表示链接的对象将在一个新的窗口中打开。【例5.4】 target属性设置为_blank示例。修改例5.3的超级链接代码为关于我...... 当鼠标指针单击超级链接文本时,将会新打开一个浏览器窗口并显示aboutme.htm 页面,如图5.6所示,上面是鼠标指针单击超级链接之前的浏览器窗口,下面是单击之后的浏览器窗口。 (3)_new:将链接的文档载入一个新的窗口。 (4)_parent:将链接的文档加载到该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架,则所链接的文档加载到整个浏览器窗口。 (5)_top:将链接的文档载入整个浏览器窗口,从而删除所有框架。 88 网页设计与制作（第4 版）图5.6 超级链接target设置为_blank的效果 4.其他属性 (1)onmouseover:与onclick类似,在鼠标指针移到链接点上时被触发。 (2)onmouseout:对应的事件在鼠标指针移出链接点后被触发。 (3)onclick:对应一个事件,当链接点被单击后将触发这个事件,执行对应的子程序。【例5.5】 onmouseover属性示例。链接例5.5设定了onmouseover参数。当鼠标指针移到这个链接上时,弹出一个警告对话框,显示“鼠标悬停效果演示!”文字,如图5.7所示。图5.7 超级链接onmouseover属性演示 5.2 绝对路径与相对路径网络上每一个文件都有自己的存放位置和路径,理解一个文件与要链接的文件之间的路径关系是创建链接的根本。根据参考对象的不同,网络资源的路径一般分为绝对路径和第5 章　超级链接 89 相对路径两种。理解绝对路径与相对路径的概念,对于设计网页中的超级链接是非常有帮助的。如果设置超级链接时使用了错误的文件路径,就会导致浏览器无法打开指定的文件,或做好的网页在本地机器上可以正常浏览,而把页面上传到其他机器(如服务器)上就会出现无法显示文件或图片等错误。下面学习什么是绝对路径和相对路径。 5.2.1 绝对路径使用计算机时,如果要找到某个文件,首先必须知道此文件的具体位置(计算机磁盘上的存储路径)。例如,路径E:/myweb/news/index.html,说明index.html文件在E 盘的 myweb目录下的news子目录中。类似于这样完整地描述本地文件位置的路径就是磁盘绝对路径。由于网站在本地制作测试完毕后需要发布在Web服务器上,而大多情况下,发布者并不能选择服务器磁盘位置,这样网站发布到Web服务器之后,会由于路径问题而导致无法打开超级链接文件。这也就是为什么当把A 计算机上制作的网站复制到B计算机上时,某些页面无法浏览的原因。因此,制作超级链接时,不能采用磁盘绝对路径。网页制作时,有时使用一种称为URL的绝对路径表示方法。绝对路径提供所链接文档的完整URL,其中包括所使用的协议(如对于网页面,通常为http://),例如,https:// tieba.baidu.com/index.html。对于图像资源,完整的URL 可能类似于https://www.edu. cn/rd/gao_xiao_cheng_guo/gao_xiao_zi_xun/202105/W020210527350171249780.jpg。必须使用绝对路径,才能链接到其他服务器上的文档或资产。 5.2.2 相对路径制作网站时,需要访问的文件往往在同一网站内,由于同一网站下的每个网页都在同一地址下,因此,不需要为每个链接输入完整的地址,只确定当前文件与站点根目录之间的相对路径就可以了。相对路径是以当前文件所在路径为起点(参照),进行相对文件的查找。一个相对路径不包括协议和主机地址信息,它的路径与当前文件的访问协议和主机名相同,甚至有相同的目录路径。因此,相对路径通常只包含文件夹名和文件名,甚至只有文件名。可以用相对路径指向与源文件位于同一服务器或同文件夹中的文件。此时,浏览器链接的目标文件处在同一服务器或同一文件夹下。 . 如果链接到同一目录下,则只需输入要链接文件的名称。 . 要链接到下级目录中的文件,只需先输入目录名,然后加“/”,再输入文件名。 . 要链接到上级目录中的文件,则先输入“../”,再输入文件名。相对路径的用法: herf="shouey.html" shouey.html 是本地当前路径下的文件 herf="web/shouey.html" shouey.html 是本地当前路径下web 子目录下的文件 herf="../shouey.html" shouey.html 是本地当前目录的上一级子目录下的文件 herf="../../shouey.html" shouey.html 是本地当前目录的上两级子目录下的文件下面举例说明: 90 网页设计与制作（第4 版）假设newsinfo.html文件和index.html文件的位置关系,如图5.8所示。图5.8 相对路径使用在index.html中加入newsinfo.html超级链接的代码应该这样写: newsinfo.html 其完整的代码参见例5.6。【例5.6】相对路径示例。 newsinfo.html 反之,在newsinfo.html中加入index.html超级链接的代码应该这样写: index.html 链接本地机器上的文件时,应该使用相对路径,这样,不仅在本地机器环境下适合,就是上传到网络或其他系统下,也不需要进行多少更改就能准确链接。 5.2.3 创建超级链接在Dreamweaver中创建超级链接十分简单,首先要确定超级链接的源(起始)。超级链接的源可以是文字、图像或其他对象。选定超级链接的源之后,可以通过以下方法设置链接。方法一:直接在“属性”面板的链接栏输入要链接的目标。如图5.9所示,要链接到中国教育网,则在“链接”栏输入中国教育网的网址https:// www.edu.cn/。图5.9 在属性面板直接输入要链接的对象方法二:如果要链接在本站点的其他文件,还可以单击“链接”栏旁边的文件夹图标,如图5.10所示。第 5 章　超级链接图5.通过文件夹图标制作超级链接 10 这样可以打开如图5.选择文件” 在此对话框中使用浏览方式选择需要链接到的网页文件。 11 所示的“ 对话框, 图5.“选择文件”对话框 11 方法三:如果要链接本站点的其他文件,还可以通过拖动“属性”面板中“链接”栏的“ 向文件”图标, 如图5.观,(指) 操作简单。直接指向要链接的目标网页文件, 12 所示。这种方法更加形象直图5.在“属性”面板直接拖曳“指向文件”图标指向要链接的对象 12 92 网页设计与制作（第4 版） 5.3 使用Dreamweaver制作各种超级链接本节主要介绍各种典型超级链接的具体制作方法和步骤,链接的设置均可以通过“属性”面板来完成。 5.3.1 内部链接所谓内部链接,指的是在同一网站内部,不同的html页面或者资源之间的链接关系。在建立网站内部链接时,要明确哪个是主链接文件(即当前页),哪个是被链接文件。制作内部链接的具体步骤如下。首先,在“设计”视图中通过鼠标拖曳选中需要制作超级链接的文本,然后在“属性”面板中单击源文件旁边的文件夹图标选择链接文件夹。在“选择文件”对话框中,这里选择news 文件夹下的newsinfo.html文件。完成上述步骤以后,在“设计”视图中单击超级链接文字,在“属性”面板中可以设置此超级链接的目标,如图5.13所示,在下拉列表框中选择即可。图5.13 设置内部链接的目标最后,保存对网页文件的操作,按F12键在浏览器中预览网页效果。上述操作所产生的源代码可以在“代码”视图下查看。超级链接的代码为新闻 5.3.2 外部链接外部链接指的是跳转到当前网站外部,与其他网站中的网页或其他元素之间的链接关系。例如,常见的“友情链接”就采用了外部链接。最常用的外部链接格式是。制作外部链接时,在“设计”视图中选择需要制作外部链接的对象,然后在“属性”面板中的“链接”栏直接输入链接目标地址,如图5.14所示。在“代码”视图下可以看到源代码为友情链接:新浪网 5.3.3 锚记链接通常,浏览器显示网页时,如果访问的网页内容比较多,必将导致页面很长。浏览时需要不断地拖动浏览器的滚动条,才能看到网页下部的内容,既费时,又费力。超级链接中有第5 章　超级链接 93 图5.14 制作外部链接一种称为锚记(或者“锚点”)的链接,其功能类似书签,能帮助访问者快速定位到页面中感兴趣的部分。因此,超级链接中的锚记链接也称作书签链接。制作时需要分两步完成:首先,在网页中任意选定位置,超级链接标签的name属性用于定义锚的名称,一个页面可以定义多个锚;然后制作超级链接,通过设置超级链接的 href属性可以根据name跳转到对应的锚。注意,在锚名称前面要加“#”符号。 1.跳到本页面的锚记链接第一步:制作锚记。打开需要制作锚记的页面,在“设计”视图下,让鼠标指标停留在需要插入锚记的位置, 选中需设置“锚记”的位置,切换到“代码”视图,输入。“chap1” 是锚记名称。锚记名称可以是字母、数字等,尽量做到“见名知意”。本例中,将网页“正文” 部分的“六月二十九爪哇海上(1)”制作成锚点。设置锚点后,“设计”视图的相应位置处会出现一个金色书签的图标,其效果如图5.15所示。图5.15 插入锚记后的效果从“代码”视图中可以看到锚记的HTML源代码: 六月二十九爪哇海上(1) 第二步:制作锚记链接。锚记链接即链接到网页锚记的超级链接。首先选中要制作超级链接的对象,例如单击 book_big.html网页中“目录”部分的“六月二十九爪哇海上(1)”文字,将本网页的正文部分的“六月二十九爪哇海上(1)”内容展示在最佳位置。下面通过两种方法实现。