3.4 超链接

3.4.1 基本概念

超链接是网页设计中非常重要的部分，它可以将互联网上众多的网站和网页联系起来，使畅游网络变得便捷。

1．超链接的定义

超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是文本、图像、电子邮件地址、文件等，甚至是一个应用程序。超链接是连接网页之间的桥梁。

超链接由源端点和目标端点两部分组成，其中设置链接的一端为源端点，跳转到的页面或对象为目标端点。如单击图3-34中的“新闻”超链接则打开图3-35所示的页面，在这个超链接中，图3-34百度首页的“新闻”为源端点，而图3-35中的百度新闻页面为目标端点。

2．超链接类型

按链接路径的不同，超链接分为内部链接和外部链接。内部链接的目标端点位于站点内部，通常使用相对路径。外部链接的目标端点位于其他网站中（本站点之外），通常使用绝对路径。

绝对路径：链接中使用完整的URL地址，这种链接路径称为绝对路径。一般用于链接外部网站或外部资源，如http://www.baidu.com。

相对路径：以链接源端点所在位置为参考基础而建立的路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称为相对。一般用于同站点内不同文件之间的链接。其中，“../”表示上一层目录；“./”为当前目录，一般书写时可省略。

按使用对象的不同，超链接分为文本链接、图像链接、电子邮件链接、热点链接、空链接、下载链接、锚记链接等。

3.4.2 设置超链接

1．创建超链接

创建超链接的常用方法有以下几种。

1）在“属性”面板的“链接”文本框中直接输入要链接对象的路径。

2）单击“链接”文本框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。

3）单击并拖动“链接”文本框右侧的“指向文件”按钮到“文件”面板的文件上。

“属性”面板中的“链接”文本框下方的“目标”表示打开链接文档的方式，默认是在当前窗口中打开链接网页。表3-2为目标列表中各个选项的含义。

2．取消超链接

当创建的超链接错误或不需要的时候可以取消超链接。选中已设置为超链接的对象，删除“属性”面板中“链接”文本框中的内容即可取消超链接。

3.4.3 常用超链接

常用的超链接主要有文本链接、图像链接、热点链接、电子邮件链接、下载链接、空链接、锚记链接等。

1．文本链接、图像链接

文本链接是以文本为对象的超级链接，链接的源端点是文本。图像链接是以图像为对象的超级链接，链接的源端点是图像。这两种链接是网页中最常见、最简单的链接方式。

要创建文本链接、图像链接，首先选定需设置链接的文本或图像，然后根据3.4.2中提到的创建超链接的方法设置链接路径，最后选择链接的目标窗口。

例3-1 在网站“book”中创建相关的文本和图像链接。

素材所在位置：……\素材\课堂案例\案例素材\No3\book\……

效果所在位置：……\素材\课堂案例\案例效果\No3\book\……

步骤：

1)打开Dreamweaver CS6创建站点，在“文件”面板中双击打开“index.html”文件，如图3-36所示。

2)选定图3-37所示的文本“书籍分类”，单击“属性”面板中“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择网页文件“type.html”，单击“确定”按钮；或直接在“链接”文本框中输入“type.html”。

3)选定图3-38所示的图像“新书排行榜”，在“属性”面板中单击并拖动“链接”文本框右侧的“指向文件”按钮到“文件”面板的“new.html”来实现图像链接。同理，可为图像“热门作者”创建到“author.html”的链接。

2．热点链接

热点链接又称为热区链接或图像映射，就是使用热点工具将一张图片划分为多个区域，并为这些区域分别设置链接。

要创建热点链接，首先选定图像，利用图3-39所示的“属性”面板上的热点工具绘制热区，然后为绘制的热区设置链接路径，最后选择链接目标窗口。

热点工具有矩形热点工具、圆形热点工具和多边形热点工具，利用这些工具在选定的图像上单击并拖动鼠标即可绘制出热点区域。

例3-2 在网站“book”中创建热点链接。

素材所在位置：……\素材\课堂案例\案例素材\No3\book\……

效果所在位置：……\素材\课堂案例\案例效果\No3\book\……

步骤：

1)打开Dreamweaver CS6并创建站点，在“文件”面板中双击打开“type.html”文件。

2)选定图像“s5.jpg”，利用热点工具在“书籍分类”图像上绘制矩形热区，在“属性”面板的“链接”文本框中直接输入“game.html”，如图3-40所示。

提示：

图像链接是图像作为一个整体的链接；而热点链接却可以根据需要选择图像的一部分或某些区域进行链接。

3．电子邮件链接

使用电子邮件链接可以方便地给网站管理者发送邮件。单击网页中的电子邮件链接可打开“Outlook Express”的“新邮件”窗口，即可书写邮件。

创建电子邮件链接，首先需选定设置邮件链接的对象，然后在“链接”文本框中以“mailto:电子邮件地址”格式输入内容，或选择菜单“插入”→“电子邮件链接”命令，在打开的对话框中设置链接，如图3-41所示。

例3-3 在网站“book”中为文件“index.html”版权区域的“联系我们”创建电子邮件链接。

素材所在位置：……\素材\课堂案例\案例素材\No3\book\……

效果所在位置：……\素材\课堂案例\案例效果\No3\book\……

步骤：

1)打开Dreamweaver CS6并创建站点，在“文件”面板中双击打开“index.html”文件。

2)如图3-42所示，选定版权区域的“联系我们”，在“属性”面板的“链接”文本框内直接输入“mailto:bookshop@126.com”。

4．下载链接

下载链接是指单击某链接时会打开一个“文件下载”对话框（或自动启动下载工具），通过在该对话框中单击“打开”或“保存”按钮，可以打开或下载文件。

通常，文件的格式是EXE、ZIP、RAR类型时，浏览器无法直接打开，便可通过下载链接实现。

例3-4 在网站“book”中为文件“type.html”内的“电子图书”部分创建下载链接。

素材所在位置：……\素材\课堂案例\案例素材\No3\book\……

效果所在位置：……\素材\课堂案例\案例效果\No3\book\……

步骤：

1)打开Dreamweaver CS6并创建站点，在“文件“面板中双击打开“type.html”文件。

2)如图3-43所示，选定“电子图书”部分“中国的历史”下方的文本“下载”，在“属性”面板上单击并拖动“链接”文本框右侧的“指向文件”按钮到“文件”面板的“Ebook.rar”来实现下载链接。

5．空链接

空链接用来激活页面中的对象或文本，只有链接的形式，而没有具体的链接内容。要创建空链接，首先选中需设置空连接的对象，然后在“链接”文本框中输入“#”即可。

【练习】在网站“book”中为文件“index.html”导航区的文本“排行榜”创建空链接。

6．锚记链接

该链接的目标端点是网页中的命名锚点，利用这种链接可以跳转到当前网页中某一指定的位置上。

要创建锚记链接，首先需创建命名锚记，也就是在网页中设置位置标记，并为其命名。然后选中链接对象，在“链接”文本框中输入“#锚点名”。

例3-5 在网站“book”中为文件“index.html”底部的“TOP”创建锚记链接，单击“TOP”后使网页返回页面顶端。

素材所在位置：……\素材\课堂案例\案例素材\No3\book\……

效果所在位置：……\素材\课堂案例\案例效果\No3\book\……

步骤：

1)打开Dreamweaver CS6并创建站点，在“文件”面板中双击打开“index.html”文件。

2)将光标置于“index.html”页面左上角，选择菜单“插入”→“命名锚记”命令，在图3-44所示的“命名锚记”对话框内输入锚记名称“abc”，单击“确定”按钮后发现页面左上角出现了锚记符号，如图3-45所示。

3)选定页面底部文本“TOP”，在“属性”面板文本框内输入“#abc”即实现锚记链接，如图3-46所示。