网页中的超级链接.ppt

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

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

2、 超级链接概述超级链接概述超级链接在通过网页浏览获取信息中有如此重要的作用，所以要想实现一个科学合理的链接，就应学习超级链接的相关知识并熟练掌握实现的技术。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。相对路

7、径对于绝大多数Web站点的本地链接，是最全适的路径。相对路径还可以需要站点内移动文件时，提供更大的灵活性。在当前文档与所要链接的文档处于同一文件夹内，而且在继续保持这种状态的情况下，文档相对路径非常有用。文档相对路径还可以用来链接到其他文件夹中的文档，方法是利用文件夹层次结构，指定从当前文档所链接的文档的路径。文档相对路径，是省略掉了当前文档和所链接的文档都相同的绝对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，打开或建立

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

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

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

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

16、5所示，是在本机安装了相关的下载工具，单击下载链接后常出现的下载界面 在网站中创建下载链接的方法如下：（1）打开或新建一个网页，在网页中输入并选中要创建链接的文本，如图6-16所示 图6-16 创建链接文本（2）在“属性”面板单击“指向文件”按钮，并拖动至如图6-17所示的“本地文件”中要下载的文件上，当释放后就会创建文本与下载文件之间的链接，如图6-17所示。在“属性”面板的“链接”文本框中就会出现链接文件名，同时链接文本颜色会发生变化。 图6-17 下载链接创建（3）保存网页。按F12运行网页，如图6-18所示。（4）单击“单击此处”，弹出如图6-19的文件下载对话 （5）然后将文件“保存

17、”到相应的存储器中。图6-18 网页浏览页面图6-19 文件下载6.4.4 创建电子邮件链接创建电子邮件链接电子邮件链接是网页中经常用到的一种方法，单击电子邮电链接对象，不是跳转到一个相应的页面或下载文件页面。而是自动启动计算机上默认的电子邮件收发软件，比如常见的Outlook Express等，其作用是方便网页浏览者书写电子邮件，并发送到指定的用户信箱中去。但是对于Windows 7操作系统来说，它并没有安装默认的邮件收发客户端，需要用户自己下载并安装邮件客户端，并将其设置为默认的电子邮电收发客户端。下面简要介绍一下创建的过程。（1）打开或创建一个网页。如图6-20所示。图6-20 创建的网

18、页（2）选中网页中的文本，选择“插入”“电子邮件链接”弹出，如图6-22所示的电子邮件链接对话框。图6-21 邮电链接菜单（3）在如图6-22中的“电子邮件”文本框中填写电子邮件的地址。（4）保存网页。并在浏览器中运行，效果如图6-23所示。（5）单击浏览页面中的“请单击此处”，出现邮件发送界面，输入相应信息发送邮件 图6-22 邮电链接设置图6-23 浏览器显示效果6.5 图像超链接图像超链接在浏览网页时，网页上经常会有以图像方式来实现链接的，尤其是以广告或产品介绍应用最为广泛，比如在购物网站上，其产品往往是以图片的方式显示的，当单击该图片时就会弹出相应介绍或购买的网页及其内容。6.5.1

19、图像超链接图像超链接图像超链接与文本超链接的实现方法基本相同，实际只要将超链接的文本换成图像就是了，简单介绍如下：（1）打开如图6-24所示页面 图6-24 图像链接设置（2）选中网页中的图像，在“属性”面板中的“链接”如前所讲的相似方式设置链接文件，同时也可对图像本身进行相应处理。（3）保存网页。按F12键运行。效果如图6-25所示。图6-25 浏览效果6.5.2 鼠标经过图像链接鼠标经过图像链接在浏览网页时，经常能够发现当鼠标经过一个图像时，这幅图像就会变成另一幅图像，但当鼠标离开时则又恢复为原来的图像，这样的设计对提高了网页的动态变化效果，提高浏览者的注意力和兴趣都有非常好的效果。出现这

20、种链接的效果，并不复杂，实际上它是由两幅图像组成的，即有主图像（首次加载页面时显示的图像）和次图像（鼠标指针经过主图时显示的图像）。但应当注意的是这两个图像的大小应当相等，如果两个图像的大小不同时，Dreamweaver 就会将第二个图像的大小调整为和第一张图像相匹配的大小。具体操作如下：（1）在所建立的网站不准备好两幅大小相等的图像。（2）在网站中新建一个网页，并进行相应的菜单操作，如图6-26所示。图6-26 操作菜单（2）在弹出的如图6-27所示对话框中，分别单击“原始图像”、“鼠标经过图像”文本框后的“浏览”分别选择相对应的图像文件 图6-27 鼠标经过图像设置（3）确定后，会在页面中

21、出现类似与运行浏览（如图6-28）所示效果。图6-28 插入图像效果（4）在浏览状态下，当鼠标移动到如图6-28所示图像时就会出现如图6-29所示的效果 图6-29 交替效果6.5.3 创建锚记链接创建锚记链接创建命名锚记（简称锚点）就是在文档中设置位置标签，并给该位置设置一个名称，以便引用。通过创建锚点，可以使链接指向当前文档或者不同文档中的指定位置。锚点常常被用来实现到特定的主题或者文档顶部的跳转链接，使访问者能够快速浏览到选定的位置，加快信息检索速度。创建锚点链接，要设置一个命名锚点，该命名锚点就是链接目标。操作如下：（1）打开或新一个网页。如图6-30所示，将定鼠标定位在网页中第一行文

22、本的起始位置，选择“插入”“命名锚记”。图6-30 锚记命令操作（2）在如图6-31所示的“命名锚记”对话框的“锚记名称”文本框中输入“锚记”名称。（3）在输入名称确定后，在网页鼠标定位位置出现如图6-32所示的锚记标志。图6-31 命令锚记对话框图6-32 锚记标记（4）然后选择如图6-33网页中的文本，如“反回顶部”，并在“属性”面板的“链接”文本框中输入“#（英文半角下输入）锚记”后，按回车键即刻链接设置。图6-33 创建锚记链接（5）保存网页。按F12键，在浏览页面中，单击“反回顶部”，网页中内容会自动移动到锚记标志所定位的行，如本网页中的第一行。这种通过锚记链接的方式实现在网页中的跳

23、转在浏览的网页比较长内容比较多的情况下非常方便。 图6-34 浏览效果6.5.4 创建空链接创建空链接所谓的空链接，就是指未指定对象的链接，用来向页面中的对象或文本附加行为，可用来设置空链接的对象包括：文本、图像、热点链接等。实现方法如下：（1）打开或创建一个网页，如图6-35所示。图6-35 空链接设置（2）在“属性”面板的“链接”文本框中输入“#”，然后按回车键即可。（3）保存页面文件。按F12键运行，在浏览的页面中单击链接文本，不发生任何跳转行为。6.5.5 创建脚本链接创建脚本链接一般脚本链接可用来执行计算、表单验证和其他处理。下面介绍下脚本链接的实现方法。（1）打开或创建一个网页文件

24、，如图3-36所示，选择链接文本“关闭”，在“属性”面板的“链接”文本框中输入“javascript:window.close()”，然后按回车键。图6-36 脚本链接设置（2）保存网页文件。按F12键运行，在浏览器单击“关闭”会弹出如图6-37所示的对话框。如果单击“是”则关闭浏览网页窗口。图6-37 实现浏览效果6.6 管理超链接管理超链接前面各节主要讲了如何建立各种超链接，在Dreamweaver CS5中，可以实现对超链接的管理，即可以对超链接进行检查或自动更新链接。6.6.1 自动更新链接自动更新链接每当在本地站点内移动或重命名文档时，Dreamweaver都可更新起自以及指向该文档

25、的链接，在将整个站点或其中完全独立的一个部分存储在本地磁盘上时，此项功能最适用，Dreamweaver不更改远程文件夹中的文件，除非将这些本地文件放在或者存回到远程服务器上。 为了加快更新过程，在Dreamweaver中可创建一个缓存文件，用来存储本地文件夹中所有链接的信息，在添加、更改或删除本地站点上的链接时，该缓存文件以不见的方式进行更新。下面具本来介绍。在已经打开或新的Dreamweaver CS5窗口中，选择“编辑”“首选参数”命令，则弹出“首选参数”对话框，如图6-38所示。图6-38 首选参数操作“分类”列表框中选择“常规”选项，在“文档选项”区域中单击展开“移动文件时更新链接”的

26、下拉按钮，选择不同的选项，即进入不同的设置。各称其参数如下：总是：每当移动或重命名选定文档时，自动更新起自和指向该文档的所有链接。从不：移动或重命名选定文档时，不自动更新起自和指向该文档的所有链接。提示：显示一个对话框，列出此更改影响到的所有文件。单击“更新”按钮可更新这些文件中的链接，在单击“不更新”按钮时将保留原文件不变。6.6.2 在站点范围内更改链接在站点范围内更改链接除了当移动或重命名文件时通过Dreamweaver自动更改链接以外，还可以通过手动的方式更改所有链接，比如电子邮件、FTP链接、脚本链接和空链接，从而使其指向其他位置。下面对方法作一介绍。（1）在打开的网页文件窗口的“文

27、件”面板的“本地文件”区域中选择一个文件，如图6-39所示。图6-39 选择网页文件（2）在菜单栏选择“站点”“改变站点范围的链接”命令，如图6-40所示。图6-40 选择命令操作（2）在弹出的“更改所有的链接”对话框的“变成新链接”文本框，输入或通过浏览选择准备链接的文件。如图6-41所示 。图6-40 输入选择链接文件6.6.3 检查站点中的链接错误检查站点中的链接错误在Dreamweaver CS5中，还可以对站点中的链接的错误进行检查，通过检查链接的错误，保证网页设计的正确性，对于大型的链接非常多的复杂网站来说，链接的正确性、合理性对一个网站的使用效果来说尤为重要，为了避免在设计过程中

28、出现链接上的错误或者不合理，在实现链接之前，应当先对整个网站链接进行设计，比如选择哪种链接方法。最好是预先画出文档之间链接关系图，这样会一目了然，减少链接错误。下面介绍检查站点中的链接错误的操作方法。（1）打开可新建一个网页文件。选择菜单“站点”“检查站点范围的链接”命令。如图6-41所示。图6-41 检查站点菜单（2）在弹出如图6-42所示的“链接检查器”面板，在“显示”选项中包括断掉的链接、外部链接和孤立的文件3个选项，单击其中任何一项就可以检查相应的信息。图6-42链接检查（3）若要关闭“链接检查器”面板，可单击按钮，在弹出的菜单中选择“关闭标签组”即可。如图6-43所示。图6-43 关闭标签组小结小结Dreamweaver的重要功能之一就是网站中的超级链接，它是网站必不可少的组成部分，本章比较详细地介绍了超级链接的相关概念和实现超级链接方法。同时对文本链接、邮件链接、图像链接、脚本链接、热点链接、锚记链接等作了介绍，作为学习者对这些超链接的操作一定认真学习和掌握。