第6章 网页中的超级链接

图6-1 链接源与目标路径
6.1.3 内部、外部与脚本链接
• 常规的链接包括内部超链接、外部超链接和脚本链接。下 面介绍各个链接的操作方法。3.脚本超链接 • 就是通过脚本的方法来控制链接。其主要用来执行计算、 表单验证和其他处理。 • 1.内部超链接 • 内部超链接是指目标端点内部的超链接，其设置非常灵活。
（a） 图6-5 创建链接
（b）
6.4 各种类型链接的创建
• 在网页中常见的超链接主要包括文本超链 接、图像超链接、E-mail链接、锚链接、空 链接、脚本链接等。
6.4.1 创建文本超链接
• 文本超链接是网页文件中最常用的链接， 单击文本链接将激发文本链接所连接的文 件，使用文本链接创建连接的文件对象可 以是网页、图像等。 • （1）启动Dreamweaver CS5，打开或建 立一个网页。打开如图5-6所示的网站页面。
6.2 关于链接路径
• 链接是有路径的，深入理解路径的含意， 根据网站的不同需要选择不同的路径，对 创建网站非常重要。
6.2.1 绝对路径
• 绝对路径提供链接文档的完整的URL，包括所使用的协议， 比如对于Web页来说，通常使用http:/，其中http （Hypertext Transfer Protocol）就超文本传输协议。 例如，http://www.xawl.org/cms/data/html/doc/201212/21/25126/index.html就是一个绝对路径。 • 尽管本地链接（即到同一站点文档的链接）也可以使用绝 对路径链接，但最好不要采用这种方式，因为一旦将此站 点移动到其它域，则所有本地绝对路径链接都将断开。 • 绝对路径也会出现在尚未保存的网页上，在没有保存的网 页上插入图像或添加链接，Dreamweaver会暂时使用绝对 路径。 • 当插入图像（非链接）时，如果使用图像的绝对路径，而 图像又驻留在远程服务器而不在本地硬盘驱动器上，则将 无法在文档窗口中查看该图像，此时，必须在浏览器中预 览该文档才能看到，只要情况允许，对于图像，就要使用 文档或站点根目录相对路径。
图6-17 下载链接创建
• （3）保存网页。按F12运行网页，如图6-18所示。 • （4）单击“单击此处”，弹出如图6-19的文件下载对话 • （5）然后将文件“保存”到相应的存储器中。
图6-8 “属性”面板变化
• 经过设置确认后，链接文本显示会出现如图6-9所示的效 果。一般还可以对链接后的文本的显示颜色等进行设置， 在下节讲
图6-9 链接文本显示变化
• （4）按F12键运行，在浏览页面中，单击已经设置的链接 文本。跳转到如图6-9所示的页面，可看到相应的内容。
图6-9 链接打开的目标页面
• 2. 根据超链接目标位置的不同分 • （1）内部链接：指在同一站点内部，不同页面之 间的超链接。 • （2）锚记链接：网页内部的链接。通常情况下， 锚记链接用于链接到网页内部某个特定的位置。 • （3）外部链接：站点外部的链接，是网页与因特 网中某个目标网页的链接。 • （4）E-mail链接：指链接到电子邮箱的链接。单 击该链接可以用于发送电子邮件。 • （5）可执行文件链接：通常又称为下载链接，单 击该链接可以运行可执行文件，可以用于下载文 件或或在线运行可执行文件。 • 超链接源与目标路径概括如图6-1所示。
6.3 创建超链接的技术方法
• 创建超链接的方法并不复杂，主要有使用 “属性”面板创建超链接、使用指向文件 图标创建链接和使用菜单创建链接，下面 这些方法作一介绍。
6.3.1 使用“属性”面板创建超链接
• 首先，在网页中选择准备创建链接的对象， 在菜单栏中，选择“窗口”→“属性”菜 单项，在“属性”面板“链接”后面的文 本框中，输入准备链接的路径，即可完成 使用“属性”面板创建链接的操作。如图 6-3所示。
图6-2 站点结构
• 如果成组移动一组文件，例如移动整个文件夹时，该文件 夹内所有文件保持彼此间的相对路径不变，此时不需要更 新文件间的文档相对链接。如果，移动含有文档相对链接 的单个文件或者移动文档相对链接到的单个文件时，则必 须更新这些链接
6.2.3 根路径
• 站点根目录相对路径，例如/cms/data/html/doc/201212/21/25126/index.html。即紧跟在网站域名后。 • 站点根目录相对路径提供从站点的根文件夹到文档的路径， 在处理使用多个服务器的大型Web站点，或者在承载有多 个不同站点的服务器，则可能需要使用这个类型的路径， 如果不太熟悉这个类型的路径，最好使用文档相对路径为 妥。 • 站点根目录相对路径以一个正斜扛“/”开始，正斜扛表 示站点根文件夹。比如/lwjun/index.html是文件 index.html的站点根目录相对路径，该文件位于站点根文 件夹的lwjun子文件夹中。 • 在有些Web站点中，需要经常在不同文件夹之间移动HTML 文件，在这种情况下，站点根目录相对路径通常是指定链 接的最佳方法。 • 如果移动或重命名根目录相对链接所链接的文档，即使文 档彼此之间的相对路径没有改变，仍必须更新这些链接。 例如，如果移动某个文件夹，则指向该文件夹中文件的所 有根目录相对链接都必须更新。
图6-13 设置实现
• （6）保存文档。按F12键，可在浏览窗口观察相应的操作 效果： • 当鼠标停留到链接文本时，变成绿色，如图6-14所示。 • 当鼠标单击链接文本时变成紫色；
• 当单击完成链接后，变成所设置的浅黄色。
图6-14 浏览效 果图
6.4.3 下载文件链接
• 大家在上网时，经常会遇到下载文件链接，单击它会弹出 一个下载提示框，下载链接在软件下载网站和源代码下载 网站中应用的比较多，下载链接的创建方式和一般的链接 创建方法基本相同，只是所链接的内容是一个软件文件或 者压缩文件，而不是图像或者网页。如图6-15所示，是在 本机安装了相关的下载工具，单击下载链接后常出现的下 载界面
图5-7 超链接设置
• （3）在单击如图5-6所示的“插入”→“常用”→“超级 链接”弹出如图5-7所示“超级链接”对话框。在相应的网 站中选择要链接的文件（如网页），本例选择的是“旅游 景点”网页文件。并进行相应的设置。 • 目标：定义浏览器在打开目标的文档或目录时的方式，在 框架网页中，用户可以将某个框架前的ID作为链接的目标， 定义在该框架中打开链接。默认有4种目标与文本的“属性” 检查器中的的目标类型相同。 • 经过设置会看到“属性”面板会发生相应的变化，当然也 可以在属性面板完成相应设置。如图6-8所示。
6.3.3 使用菜单创建链接
• 首先，在网页中选择准备创建链接的文本， 选择“插入”→“超级链接”菜单项，弹 出“超级链接”对话框，在“链接”文本 框中输入链接的目标，或者单击“链接” 文本框，选择相应的链接目标，单击“确 定”按钮，即可完成使用菜单创建链接的 操作。如图6-5（a）、（b）所示
图6-5 菜单操作
6.4.2 文本链接的状态
• 文本在链接后的状态可以通过设置链接的颜色来表示，文 本链接一般有3种状态： • 未单击的状态。即在鼠标未单击时的默认状态。 • 单击后的状态。即在鼠标单击链接后的状态。 • 鼠标悬浮在文本链接上的状态。 • 下面对三种状态的设置作一介绍。 • （1）先打开或建立一个网页。 • （2）在网页中设置一个文本（“西安”）超链接，如图 6-10所示。
第6章 网页中的超级链接
• 在主页制作中，大家对链接的作用并不陌生，可以这样说， 链接是主页的灵魂是网页的核心。有了它，就能够轻而易 举地实现互联网上的信息访问、资源共享。在此，作为超 文本标记语言（HTML）可以链接到其他的网页、图像、多 媒体、电子邮件地址、可下载的文件等。可以说只要浏览 器能够显示的内容，都可以从一个HTML文件中得到。我们 只所以能在网络世界恣意畅游，页面之间的链接功不可没。 而对于网页制作者来说，链接看似简单却并不容易。 • 本章对网页中的链接进行一个综合的介绍，以期让大家对 它有一个全面而深入的理解。对于链接在HTML 中的写法， 在这里就不作过多讲解，有兴趣的读者可参考有关资料学 习。
图6-3 “属性”面板
6.3.2 使用指向文件图标创建链接
• 首先，在网页中选择准备创建链接的对象，在菜单栏中， 选择“窗口”→“属性”菜单项，在“属性”面板中，单 击“指向文件”按钮 ，单击并拖动到站点窗口的目标文 件上，释放鼠标左键即可完成创建链接的操作。如图6-4 所示。
图6-4 图标创建链接
图6-10 设置超链接
图6-11 “属性”面板设置
• （3）在如图6-11所示的“属性”面板中，单击“页面属 性”按钮。 • （4）在弹出的“页面属性”对话框中，选择“分类”列 表下的“链接（CSS）”选项，如图6-12所示。
图6-12 页面属性设置
• （5）在该对话框中，可对链接文本进行设置，更改“链接 颜色”、“变换图像链接”和“已访问链接”颜色以及 “下划线样式”的设置。如图6-13所示。在确定后，在网 页编辑窗口中，原来链接文本“西安”由蓝色变成了红色。
6.1.2 超链接的类型
• 1. 根据超链接的链接路径分 • 通常情况下将超链接分为以下三种： • （1）绝对URL超链接也称为绝对路径。页面之间的链接是 用统一资源定位符URL(United Resource Location)来表 示。 • （2）相对URL的超链接，又称为相对路径。 • （3）同一网页的超链接。
6.1 超级链接概述
• 超级链接在通过网页浏览获取信息中有如此重要的作用， 所以要想实现一个科学合理的链接，就应学习超级链接的 相关知识并熟练掌握实现的技术。
6.1.1 超级链Βιβλιοθήκη Baidu的定义
• 所谓的超链接是指从一个网页指向一个目标的连接关系， 这个目标可以是另一个网页，也可以是相同网页上的不同 位置，还可以是一个图片、一个电子邮件地址、一个文件， 甚至是一个应用程序。能合理、协调地把网站中的各个元 素以及网站中的页面通过超级链接构成了一个有机整体， 使浏览者能快速地访问到想要访问的页面。 • 超链接由源端点和目标端点两部分组成，其中设置了链接 的一端称为源端点，跳转到的页面或对象称为链接的目标 端点，同样，超级链接也是网页中最重要、最基本的元素 之一。 • 而在一个网页中用来作超链接的对象，可以是一段文本或 者是一个图片。当浏览者单击已经链接的文字或图片后， 链接目标将显示在浏览器上，并且根据目标的类型来打开 或运行。
6.2.2 相对路径
• 文档的相对路径，例如data/html/doc/201212/21/25126/index.html。 • 相对路径对于绝大多数Web站点的本地链接，是最全适的 路径。相对路径还可以需要站点内移动文件时，提供更大 的灵活性。 • 在当前文档与所要链接的文档处于同一文件夹内，而且在 继续保持这种状态的情况下，文档相对路径非常有用。 • 文档相对路径还可以用来链接到其他文件夹中的文档，方 法是利用文件夹层次结构，指定从当前文档所链接的文档 的路径。 • 文档相对路径，是省略掉了当前文档和所链接的文档都相 同的绝对URL部分，而只提供不同的路径部分。如图6-2所 示我们建立的一个站点的内部结构。
图5-6 创建链接的网页页面
• 实现通过单击网页中的文本“3.大雁塔”实现网页跳转相 应的内容网页。实现方法如下： • （1）在网页中选择“3.大雁塔”文本，如图6-5所示。 • （2）除了可以通过上节所讲的超链接方法来实现外，可
以通过“插入”面板的操作方式来实现。如图5-6所示。
图5-6“插入”面板
• 在网站中创建下载链接的方法如下： • （1）打开或新建一个网页，在网页中输入并选中要创建
链接的文本，如图6-16所示
图6-16 创建链接文本
• （2）在“属性”面板单击“指向文件”按钮，并拖动至 如图6-17所示的“本地文件”中要下载的文件上，当释放 后就会创建文本与下载文件之间的链接，如图6-17所示。 在“属性”面板的“链接”文本框中就会出现链接文件名， 同时链接文本颜色会发生变化。