网页中的超级链接

《网页中的超级链接》由会员分享，可在线阅读，更多相关《网页中的超级链接（69页珍藏版）》请在金锄头文库上搜索。

1、第6章 网页中的超级链接,在主页制作中，大家对链接的作用并不陌生，可以这样说，链接是主页的灵魂是网页的核心。有了它，就能够轻而易举地实现互联网上的信息访问、资源共享。在此，作为超文本标记语言（HTML）可以链接到其他的网页、图像、多媒体、电子邮件地址、可下载的文件等。可以说只要浏览器能够显示的内容，都可以从一个HTML文件中得到。我们只所以能在网络世界恣意畅游，页面之间的链接功不可没。而对于网页制作者来说，链接看似简单却并不容易。 本章对网页中的链接进行一个综合的介绍，以期让大家对它有一个全面而深入的理解。对于链接在HTML 中的写法，在这里就不作过多讲解，有兴趣的读者可参考有关资料学习。,6

2、.1 超级链接概述,超级链接在通过网页浏览获取信息中有如此重要的作用，所以要想实现一个科学合理的链接，就应学习超级链接的相关知识并熟练掌握实现的技术。,6.1.1 超级链接的定义,所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。能合理、协调地把网站中的各个元素以及网站中的页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。 超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为链接的目标端点，同样，超级链接也是网页

3、中最重要、最基本的元素之一。 而在一个网页中用来作超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。,6.1.2 超链接的类型,1. 根据超链接的链接路径分 通常情况下将超链接分为以下三种： （1）绝对URL超链接也称为绝对路径。页面之间的链接是用统一资源定位符URL(United Resource Location)来表示。 （2）相对URL的超链接，又称为相对路径。 （3）同一网页的超链接。,2. 根据超链接目标位置的不同分 （1）内部链接：指在同一站点内部，不同页面之间的超链接。 （2）锚记链接：网页

4、内部的链接。通常情况下，锚记链接用于链接到网页内部某个特定的位置。 （3）外部链接：站点外部的链接，是网页与因特网中某个目标网页的链接。 （4）E-mail链接：指链接到电子邮箱的链接。单击该链接可以用于发送电子邮件。 （5）可执行文件链接：通常又称为下载链接，单击该链接可以运行可执行文件，可以用于下载文件或或在线运行可执行文件。 超链接源与目标路径概括如图6-1所示。,图6-1 链接源与目标路径,6.1.3 内部、外部与脚本链接,常规的链接包括内部超链接、外部超链接和脚本链接。下面介绍各个链接的操作方法。3.脚本超链接 就是通过脚本的方法来控制链接。其主要用来执行计算、表单验证和其他处理。

5、1.内部超链接 内部超链接是指目标端点内部的超链接，其设置非常灵活。,6.2 关于链接路径,链接是有路径的，深入理解路径的含意，根据网站的不同需要选择不同的路径，对创建网站非常重要。,6.2.1 绝对路径,绝对路径提供链接文档的完整的URL，包括所使用的协议，比如对于Web页来说，通常使用http:/，其中http（Hypertext Transfer Protocol）就超文本传输协议。例如，http:/www.xawl.org/cms/data/html/doc/2012-12/21/25126/index.html就是一个绝对路径。 尽管本地链接（即到同一站点文档的链接）也可以使用绝对路

6、径链接，但最好不要采用这种方式，因为一旦将此站点移动到其它域，则所有本地绝对路径链接都将断开。 绝对路径也会出现在尚未保存的网页上，在没有保存的网页上插入图像或添加链接，Dreamweaver会暂时使用绝对路径。 当插入图像（非链接）时，如果使用图像的绝对路径，而图像又驻留在远程服务器而不在本地硬盘驱动器上，则将无法在文档窗口中查看该图像，此时，必须在浏览器中预览该文档才能看到，只要情况允许，对于图像，就要使用文档或站点根目录相对路径。,6.2.2 相对路径,文档的相对路径，例如data/html/doc/2012-12/21/25126/index.html。 相对路径对于绝大多数Web站点

7、的本地链接，是最全适的路径。相对路径还可以需要站点内移动文件时，提供更大的灵活性。 在当前文档与所要链接的文档处于同一文件夹内，而且在继续保持这种状态的情况下，文档相对路径非常有用。 文档相对路径还可以用来链接到其他文件夹中的文档，方法是利用文件夹层次结构，指定从当前文档所链接的文档的路径。 文档相对路径，是省略掉了当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。如图6-2所示我们建立的一个站点的内部结构。,图6-2 站点结构,如果成组移动一组文件，例如移动整个文件夹时，该文件夹内所有文件保持彼此间的相对路径不变，此时不需要更新文件间的文档相对链接。如果，移动含有文档相对

8、链接的单个文件或者移动文档相对链接到的单个文件时，则必须更新这些链接,6.2.3 根路径,站点根目录相对路径，例如/cms/data/html/doc/2012-12/21/25126/index.html。即紧跟在网站域名后。 站点根目录相对路径提供从站点的根文件夹到文档的路径，在处理使用多个服务器的大型Web站点，或者在承载有多个不同站点的服务器，则可能需要使用这个类型的路径，如果不太熟悉这个类型的路径，最好使用文档相对路径为妥。 站点根目录相对路径以一个正斜扛“/”开始，正斜扛表示站点根文件夹。比如/lwjun/index.html是文件index.html的站点根目录相对路径，该文件位

9、于站点根文件夹的lwjun子文件夹中。 在有些Web站点中，需要经常在不同文件夹之间移动HTML文件，在这种情况下，站点根目录相对路径通常是指定链接的最佳方法。 如果移动或重命名根目录相对链接所链接的文档，即使文档彼此之间的相对路径没有改变，仍必须更新这些链接。例如，如果移动某个文件夹，则指向该文件夹中文件的所有根目录相对链接都必须更新。,6.3 创建超链接的技术方法,创建超链接的方法并不复杂，主要有使用“属性”面板创建超链接、使用指向文件图标创建链接和使用菜单创建链接，下面这些方法作一介绍。,6.3.1 使用“属性”面板创建超链接,首先，在网页中选择准备创建链接的对象，在菜单栏中，选择“窗口

10、”“属性”菜单项，在“属性”面板“链接”后面的文本框中，输入准备链接的路径，即可完成使用“属性”面板创建链接的操作。如图6-3所示。,图6-3 “属性”面板,6.3.2 使用指向文件图标创建链接,首先，在网页中选择准备创建链接的对象，在菜单栏中，选择“窗口”“属性”菜单项，在“属性”面板中，单击“指向文件”按钮 ，单击并拖动到站点窗口的目标文件上，释放鼠标左键即可完成创建链接的操作。如图6-4 所示。,图6-4 图标创建链接,6.3.3 使用菜单创建链接,首先，在网页中选择准备创建链接的文本，选择“插入”“超级链接”菜单项，弹出“超级链接”对话框，在“链接”文本框中输入链接的目标，或者单击“链

11、接”文本框，选择相应的链接目标，单击“确定”按钮，即可完成使用菜单创建链接的操作。如图6-5（a）、（b）所示,图6-5 菜单操作,图6-5 创建链接,（a）,（b）,6.4 各种类型链接的创建,在网页中常见的超链接主要包括文本超链接、图像超链接、E-mail链接、锚链接、空链接、脚本链接等。,6.4.1 创建文本超链接,文本超链接是网页文件中最常用的链接，单击文本链接将激发文本链接所连接的文件，使用文本链接创建连接的文件对象可以是网页、图像等。 （1）启动Dreamweaver CS5，打开或建立一个网页。打开如图5-6所示的网站页面。,图5-6 创建链接的网页页面,实现通过单击网页中的文本

12、“3.大雁塔”实现网页跳转相应的内容网页。实现方法如下： （1）在网页中选择“3.大雁塔”文本，如图6-5所示。 （2）除了可以通过上节所讲的超链接方法来实现外，可以通过“插入”面板的操作方式来实现。如图5-6所示。,图5-6“插入”面板,图5-7 超链接设置,（3）在单击如图5-6所示的“插入”“常用”“超级链接”弹出如图5-7所示“超级链接”对话框。在相应的网站中选择要链接的文件（如网页），本例选择的是“旅游景点”网页文件。并进行相应的设置。 目标：定义浏览器在打开目标的文档或目录时的方式，在框架网页中，用户可以将某个框架前的ID作为链接的目标，定义在该框架中打开链接。默认有4种目标与文本

13、的“属性”检查器中的的目标类型相同。 经过设置会看到“属性”面板会发生相应的变化，当然也可以在属性面板完成相应设置。如图6-8所示。,图6-8 “属性”面板变化,经过设置确认后，链接文本显示会出现如图6-9所示的效果。一般还可以对链接后的文本的显示颜色等进行设置，在下节讲,图6-9 链接文本显示变化,（4）按F12键运行，在浏览页面中，单击已经设置的链接文本。跳转到如图6-9所示的页面，可看到相应的内容。,图6-9 链接打开的目标页面,6.4.2 文本链接的状态,文本在链接后的状态可以通过设置链接的颜色来表示，文本链接一般有3种状态： 未单击的状态。即在鼠标未单击时的默认状态。 单击后的状态。

14、即在鼠标单击链接后的状态。 鼠标悬浮在文本链接上的状态。 下面对三种状态的设置作一介绍。 （1）先打开或建立一个网页。 （2）在网页中设置一个文本（“西安”）超链接，如图6-10所示。,图6-10 设置超链接,图6-11 “属性”面板设置,（3）在如图6-11所示的“属性”面板中，单击“页面属性”按钮。 （4）在弹出的“页面属性”对话框中，选择“分类”列表下的“链接（CSS）”选项，如图6-12所示。,图6-12 页面属性设置,（5）在该对话框中，可对链接文本进行设置，更改“链接颜色”、“变换图像链接”和“已访问链接”颜色以及“下划线样式”的设置。如图6-13所示。在确定后，在网页编辑窗口中，

15、原来链接文本“西安”由蓝色变成了红色。,图6-13 设置实现,（6）保存文档。按F12键，可在浏览窗口观察相应的操作效果： 当鼠标停留到链接文本时，变成绿色，如图6-14所示。 当鼠标单击链接文本时变成紫色； 当单击完成链接后，变成所设置的浅黄色。,图6-14 浏览效果图,6.4.3 下载文件链接,大家在上网时，经常会遇到下载文件链接，单击它会弹出一个下载提示框，下载链接在软件下载网站和源代码下载网站中应用的比较多，下载链接的创建方式和一般的链接创建方法基本相同，只是所链接的内容是一个软件文件或者压缩文件，而不是图像或者网页。如图6-15所示，是在本机安装了相关的下载工具，单击下载链接后常出现

16、的下载界面,在网站中创建下载链接的方法如下： （1）打开或新建一个网页，在网页中输入并选中要创建链接的文本，如图6-16所示,图6-16 创建链接文本,（2）在“属性”面板单击“指向文件”按钮，并拖动至如图6-17所示的“本地文件”中要下载的文件上，当释放后就会创建文本与下载文件之间的链接，如图6-17所示。在“属性”面板的“链接”文本框中就会出现链接文件名，同时链接文本颜色会发生变化。,图6-17 下载链接创建,（3）保存网页。按F12运行网页，如图6-18所示。 （4）单击“单击此处”，弹出如图6-19的文件下载对话 （5）然后将文件“保存”到相应的存储器中。,图6-18 网页浏 览页面,图6-19 文件下载,6.4.4 创建电子邮件链接,电子邮件链接是网页中经常用到的一种方法，单击电子邮电链接对象，不是跳转到一个相应的页面或下载文件页面。而是自动启动计算机上默认的电子邮件收发软件，比如常见的Outlook Express等，其作用是方便网页浏览者书写电子邮件，并发送到指定的用户信箱中去。但是对于Windows 7操作系统来说，它并没有安装默认的邮件收