PDF《超级链接》

第5章超级链接超级链接是 Internet 的核心技术,通过超级链接将各个独立的网页文件及其他资源 链接起来,形成一个网络.

网站往往由多个页面构成,如果页面之间彼此是独立的,那 么网页就好比是孤岛,这样的网站是无法运行的.为了建立起网页之间的联系,必须使 用超级链接.本章主要学习超级链接及属性的设置,以及锚记链接、邮箱链接、空链接、 下载文件链接等不同链接样式的超级链接的制作方法. 5.1 超级链接概述 浏览网页时,某些网页中有些文字是蓝色(也可以自己设置成其他颜色) ,这些文字 下面还可能有一条下画线.当移动鼠标指针到这些文字上时,鼠标指针就会变成一只手 的形状,此时单击,就可以直接跳到与这些文字相链接的网页或 WWW 网站上去,如图5.1 所示. 图5.1 超级链接示例 超级链接在本质上属于一个网页的一部分,它是一种允许网页同其他网页或站点之 间进行链接的元素,是网页中最重要、最根本的元素之一.各个网页链接在一起后,才 能真正构成一个网站.访问者通过单击超级链接对象,就可以从一个网页跳转到目标对 象.这个目标对象可以是另一个网页,也可以是相同网页上的不同位置,还可以是图片、 电子邮件地址、文件、动画甚至是应用程序. 网页设计与制作(第3版)

100 5.1.1 超级链接的分类 超级链接中由于单击而引起跳转的对象称为超级链接的载体,跳转到的对象称为链 接目标.超级链接通常有两种分类方式. 方式一:按链接载体的特点,把链接分为文本链接与图像链接两大类. 文本链接:用文本作为链接载体,简单实用. 图像链接:用图像作为链接载体,能使网页美观、生动活泼,它既可以是指向单 个模板的链接,也可以是根据图像不同的区域建立的多个链接. 方式二:按链接目标分类,可以将超级链接分为以下几种类型. 内部链接:链接目标是本站点的其他文档,用以实现在本站点内跳转. 外部链接:链接到本站点之外的其他站点或文档,通过这种链接可以跳转到其他 站点. 锚点链接:连接到同一网页或不同网页中指定位置的链接,例如网页的顶部、底 部或者其他特定位置. E-mail 链接:目标是一个电子邮件地址. 执行文件链接:链接网站中可执行的程序,常用于下载在线执行. ?提示:超链接还可以分为动态超级链接和静态超级链接.动态超级链接指的是 可以通过改变 HTML 代码来实现动态变化的超级链接.例如,可以实现将鼠标移动到 某个文字链接上,文字就会像动画一样动起来或改变颜色的效果;

也可以实现鼠标移 到图片上,图片就产生反色或朦胧等的效果.而静态超级链接,顾名思义,就是没有 动态效果的超级链接. 5.1.2 超级链接标签 HTML 语言中使用标签来表示一个超级链接, 字母标签中的 a 为英文单词 anchor (锚)的首字母.有了标签的存在,才有了今天丰富多彩的互联网,超级链接标签 是HTML 语言中非常重要的一个标签. HTML 超级链接标签代表一个链接点,它的作用是把当前位置的文本或图片连 接到其他的页面、文本或图像,这已众所周知,但关于它的语法结构可能有点鲜为人知, 而要用活它则必须了解其语法结构. 标签的基本语法: 产生超级链接的文字 访问者在浏览网页时, 单击 产生超级链接的文字 就可以打开属性 href 设置的 超 级链接的目标文件 . 【例5.1】 到网页的超级链接. 点击访问首页 第5章超级链接

101 上面的语句将产生一个相同文件夹下的超级链接,链接的文件名为 index.html.没 有特定声明的情况下, 点击访问首页 这几个字通常有下画线, 并且显示成蓝色的文字, 如图 5.2 所示. 图5.2 例5.1 的显示效果 对于标签,除了 href 属性之外,还有很多参数需要根据实际情况加以设置,以 实现不同的链接效果.下面详细介绍超级链接标签的几个常用属性及其用法. 1.href 属性 href 是hypertext reference 的缩略词,用于设定超级链接目标文件的地址(即链接地 址) .通常链接地址必须为 URL 地址,如果没有给出具体路径,则为默认路径,和当前 页的路径相同. 2.title 属性 很多情况下, 超级链接的文字不足以描述所要链接的内容, 超级链接标签提供了 title 属性,能很方便地给浏览者做出提示.title 属性的值即为提示内容,当浏览者的光标停 留在超级链接上时,会在超级链接的附近显示 title 属性设置的提示信息,这样不会影响 页面排版的整洁. 【例5.2】 超级链接的提示信息. Think Pad X220 当鼠标移到 Think Pad X220 这个链接上时,提示信息为 笔记本参数指标 ,如图5.3 所示. 3.target 属性 target 用于设置链接对象的显示方式,即指定打开链接的窗口.在默认情况下,超级 链接打开新页面的方式是自我覆盖.根据浏览者的不同需要,读者可以指定超级链接打 开新窗口的其他方式.超级链接标签提供了 target 属性进行设置,取值分别为以下

5 个. 网页设计与制作(第3版)

102 图5.3 例5.2 的浏览器效果 (1)_self:表示链接的对象在当前窗口打开,为默认设置,一般不需要设置. 【例5.3】 在当前窗口打开链接对象. 关于我...... 图5.4 为例 5.3 的初始页面,当鼠标单击超链接文本时,如图 5.5 所示,将会在当前 浏览器窗口打开并显示 aboutme.htm 页面,覆盖浏览器窗口原来显示的页面.注意,这 时候单击浏览器窗口的 后退 按钮可以返回单击之前的页面,即5-3.htm 页面. 图5.4 例5.3 的初始页面 图5.5 超级链接 target 设置为_self 的效果 第5章超级链接

103 (2)_blank:表示链接的对象将在一个新的窗口中打开. 【例5.4】 在新窗口中打开链接对象. 修改例 5.3 的超级链接代码为 关于我...... 当鼠标单击超级链接文本时,将会新打开一个浏览器窗口并显示 aboutme.htm 页面,如图5.6 所示,下面是鼠标单击超级链接之前的浏览器窗口,上面是单击之后的浏览器窗口. 图5.6 超级链接 target 设置为_blank 的效果 (3)_new:始终在同一个新的窗口打开链接的对象. (4)_ parent:表示链接的对象在上一级窗口打开,一般使用框架技术的网页会经常 使用,具体使用方法请参考第

9 章的内容. (5)_top:表示链接的对象在浏览器的整个窗口中打开,忽略任何框架.具体使用 方法请参考第

9 章的内容. 4.其他属性 onmouseover:与onclick 类似,在鼠标移到链接点上时被触发. onmouseout:对应的事件在鼠标移出链接点后被触发. onclick:对应于一个事件,当链接点被单击后将触发这个事件,执行对应的子 程序. 【例5.5】 设置 onmouseover 属性. 链接 例5.5 设定了 onmouseover 参数.当鼠标移到这个链接上时,弹出一个警告对话框, 并在对话框中显示 鼠标悬停效果演示! 文字,如图 5.7 所示. 网页设计与制作(第3版)

104 图5.7 超级链接 onmouseover 属性演示 标签还有许多其他的属性,如name、type 等,但一般情况下使用几率比较小, 本书不做介绍. 5.2 绝对路径与相对路径 网络上每一个文件都有自己的存放位置和路径,理解一个文件与要链接的文件之间 的路径关系是创建链接的根本.根据参考对象的不同,网络资源的路径一般分为绝对路 径、相对路径两种. 理解绝对路径与相对路径的概念,对于设计网页中的超级链接是非常有帮助的.如 果设置超级链接时使用了错误的文件路径,就会导致浏览器无法打开指定的文件,或做 好的网页在本地机器上可以正常浏览,而把页面上传到其他机器(如服务器)上就会出 现无法显示文件或图片等错误. 下面学习什么是绝对路径和相对路径. 5.2.1 绝对路径 使用计算机时,如果要找到某个文件,首先必须知道此文件的具体位置(计算机磁 盘上的存储路径) .例如,路径 E:/mysite/news/index.html,说明 index.html 文件是在 E 盘的mysite 目录下的 news 子目录中.类似于这样完整地描述文件位置的路径就是绝对路 径.由于网站在本地制作测试完毕后需要发布在 Web 服务器上,而大多数情况下,发布 者并不能选择服务器磁盘位置.这样,网站发布到 Web 服务器之后,就会由于路径问题 导致无法打开超级链接文件. 这也就是为什么当把 A 计算机上制作的网站复制到 B 计算 机上的时候,某些页面无法浏览的原因.因此,制作超级链接时,不建议采用绝对路径. 网页制作时,可以使用一种称为 URL 的路径表示方法.例如,在网站中以类似 http://www.xxx.xxx的格式来确定文件位置的方式.这种方式常用于友情链接等需要跳转 到其他站点的情况. 5.2.2 相对路径 制作网站时,需要访问的文件往往在同一个网站内,由于同一个网站下的每一个网 第5章超级链接

105 页都位于同一个地址之下,因此,不需要为每一个链接输入完整的地址,只需要确定当 前文件与站点根目录之间的相对路径就可以了. 相对路径是以当前文件所在路径为起点(参照) ,进行相对文件的查找.一个相对路 径不包括协议和主机地址信息,它的路径与当前文件的访问协议和主机名相同,甚至有 相同的文件夹.因此,相对路径通常只包含文件夹名和文件名,甚至只有文件名.可以 用相对路径指向与源文件位于同一服务器或同一文件夹中的文件.此时,浏览器链接的 目标文件处在同一服务器或同一文件夹下. 如果链接到同一文件夹下,则只需输入要链接文件的名称. 要链接到下级文件夹中的文件.只需先输入文件夹名,然后加 / ,再输入文件名. 要链接到上一级文件夹中文件,则先输入 ../ ,再输入文件名. 相对路径的用法: herf= shouey.html shouey.html 是本地当前路径下的文件 herf= web/shouey.html ........