第9章超链接

1、在这一章我们引入一个新的概念在这一章我们引入一个新的概念超链接超链接（HyperlinkHyperlink）。在网页设计中，超链接的应用非常）。在网页设计中，超链接的应用非常广泛，熟练地应用超链接是设计网页的基本要求。本广泛，熟练地应用超链接是设计网页的基本要求。本章主要讲解的内容是超链接的基本知识，各种超链接章主要讲解的内容是超链接的基本知识，各种超链接的操作方法，以及检查和修复网页中的超链接。的操作方法，以及检查和修复网页中的超链接。超链接是超链接是WebWeb页中最吸引人的部分。页中最吸引人的部分。InternetInternet之所以之所以如此受到人们的欢迎，很大程度上是由于在网页中使

2、如此受到人们的欢迎，很大程度上是由于在网页中使用了大量的超级链接。在介绍使用用了大量的超级链接。在介绍使用Dreamweaver CS4Dreamweaver CS4在文档中创建超链接之前，我们先来了解一些关于超在文档中创建超链接之前，我们先来了解一些关于超链接的基本概念和基本知识。链接的基本概念和基本知识。超链接是指从一个对象指向另一个对象的指针超链接是指从一个对象指向另一个对象的指针，它，它可以是网页中的一段文字也可以是一张图片，甚至可以是网页中的一段文字也可以是一张图片，甚至可以是图片中的某一部分。它允许我们同其它网页、可以是图片中的某一部分。它允许我们同其它网页、站点、图片、文件等进行

3、连接，从而使站点、图片、文件等进行连接，从而使InternetInternet上上的信息构成一个有机的整体。的信息构成一个有机的整体。根据链接方式的不同超链接可分为：根据链接方式的不同超链接可分为：绝对路径连接、绝对路径连接、相对路径连接相对路径连接两种。而根据链接对象的不同超链接两种。而根据链接对象的不同超链接又可分为：又可分为：超文本链接、命名锚链接、图像链接、超文本链接、命名锚链接、图像链接、电子邮件链接、热区链接，空链接等电子邮件链接、热区链接，空链接等。相对路径与绝对路径作为超链接的两种基本连接方式相对路径与绝对路径作为超链接的两种基本连接方式是十分重要的也是容易混淆的，要想熟练运用

4、超链接是十分重要的也是容易混淆的，要想熟练运用超链接我们首先就的弄清什么相对路径什么是绝对路径，它我们首先就的弄清什么相对路径什么是绝对路径，它们的区别在哪里。们的区别在哪里。1 1绝对路径绝对路径绝对路径：绝对路径：指明目标端点所在具体位置的完整指明目标端点所在具体位置的完整URLURL地地址的址的链接链接路径。路径。2 2相对路径相对路径相对路径：指明目标端点与源端点之间相对位置关系相对路径：指明目标端点与源端点之间相对位置关系的路径称为相对路径。的路径称为相对路径。超文本链接是最普通、最简单的一种超链接。在超文本链接是最普通、最简单的一种超链接。在Dreamweaver Dreamwea

5、ver 中根据链接目标的不同，中根据链接目标的不同，超文本链接超文本链接可以分为与本地网页文档的链接、与外部网页的链接、可以分为与本地网页文档的链接、与外部网页的链接、空链接等空链接等几种类型。下面将逐一介绍。几种类型。下面将逐一介绍。与本地网页文档的链接与本地网页文档的链接，是最常见的超文本链接类型。，是最常见的超文本链接类型。通过创建与文档的链接，可以将本地站点的一个个单通过创建与文档的链接，可以将本地站点的一个个单独的文档连接起来，形成网站。独的文档连接起来，形成网站。步骤步骤1 1选中页面中的文字或图像，在属性面板中单击选中页面中的文字或图像，在属性面板中单击“链接链接”文本框右文本框

6、右侧的文件夹图标，以通过浏览选择一个文件侧的文件夹图标，以通过浏览选择一个文件步骤步骤2 2从从“目标目标”下拉菜单中，选择文档的打开位置。下拉菜单中，选择文档的打开位置。_blank :_blank :新打开的空窗口新打开的空窗口_parent_parent：如果是嵌套的框架，则在父框架中打开。：如果是嵌套的框架，则在父框架中打开。_self_self：会在当前网页所在的窗口或框架中打开。：会在当前网页所在的窗口或框架中打开。_top_top：会在完整的浏览器窗口中打开。：会在完整的浏览器窗口中打开。创建与外部网页的链接。具体操作步骤如下：创建与外部网页的链接。具体操作步骤如下：（1 1）选

7、中要创建链接的文本）选中要创建链接的文本“沈阳理工大学沈阳理工大学”；在；在“属性检属性检查器查器”的的“链接链接”文本框中直接输入文本框中直接输入URLURL地址地址“http:/”http:/”，“目标目标”下拉列表框中选择下拉列表框中选择“_blank”_blank” 。（2 2）保存文件，在浏览器中预览时，单击文本）保存文件，在浏览器中预览时，单击文本“沈阳理工沈阳理工大学大学”，就会在新窗口中打开沈阳理工大学网站的主页。，就会在新窗口中打开沈阳理工大学网站的主页。空链接是指未指定目标文档的链接空链接是指未指定目标文档的链接。使用空链接可以为。使用空链接可以为页面上的对象或文本附加行为

8、。具体操作步骤如下：页面上的对象或文本附加行为。具体操作步骤如下：（1 1）选中要创建链接的文本；在）选中要创建链接的文本；在“属性检查器属性检查器”，“链接链接”文本框中直接输入文本框中直接输入 “#”#” 。（2 2）保存文件，在浏览器中预览时，显示为超文本链接）保存文件，在浏览器中预览时，显示为超文本链接的样式，单击后不会跳转到别的页面。的样式，单击后不会跳转到别的页面。当用户浏览一个当用户浏览一个内容较多的网页内容较多的网页时，查找信息会浪费时，查找信息会浪费大量的时间。在这种情况下，可以在网页中创建锚链大量的时间。在这种情况下，可以在网页中创建锚链接，放在页面顶部作为书签。锚实质上就

9、是在文件中接，放在页面顶部作为书签。锚实质上就是在文件中命名的位置或文本范围，锚链接起到的作用就是在文命名的位置或文本范围，锚链接起到的作用就是在文档中定位。单击锚链接，就会跳转到页面中指定的位档中定位。单击锚链接，就会跳转到页面中指定的位置。置。在创建锚链接之前，首先要在页面中创建锚点：在创建锚链接之前，首先要在页面中创建锚点：将光标定位在要设置标记的位置；将光标定位在要设置标记的位置；插入栏命名锚记输入锚记名称（注意：区分大插入栏命名锚记输入锚记名称（注意：区分大小写）小写）创建到命名锚记的链接：创建到命名锚记的链接：选择要创建链接的文本或图像选择要创建链接的文本或图像1.1.在属性面板的

10、链接文本框中，键入号和锚记名称。在属性面板的链接文本框中，键入号和锚记名称。电子邮件链接是一种特殊的链接，在网页中单击这种电子邮件链接是一种特殊的链接，在网页中单击这种链接，不是跳转到其他网页中，而是会自动启动电脑链接，不是跳转到其他网页中，而是会自动启动电脑中的中的Outlook ExpressOutlook Express或其他或其他E-mailE-mail程序，允许书写程序，允许书写电子邮件，并发送到指定的地址。电子邮件，并发送到指定的地址。创建方法：创建方法：选中文本和图像选中文本和图像插入栏常用电子邮件链接输入邮件地址插入栏常用电子邮件链接输入邮件地址或在属性面板的链接栏中直接输入或

11、在属性面板的链接栏中直接输入: :mailto:邮件地址邮件地址 如如mailto:mailto: 。在在Dreamweaver CS4Dreamweaver CS4中，除了可以给文本添加超链接，中，除了可以给文本添加超链接，还可以给图像添加超链接。图像的超链接包括为整张还可以给图像添加超链接。图像的超链接包括为整张图像创建超链接和在图像上创建热区两种方式。图像创建超链接和在图像上创建热区两种方式。这种应用方式很普遍，在网页中经常会用到。当鼠标这种应用方式很普遍，在网页中经常会用到。当鼠标移到设置了链接的图像上时，会变成移到设置了链接的图像上时，会变成“手型手型”；单击图；单击图像，会跳转到指

12、定的页面。像，会跳转到指定的页面。在在Dreamweaver CS4Dreamweaver CS4中，除了为整张图像创建超链接中，除了为整张图像创建超链接外，还可以在一张图像上创建多个链接区域，这些区外，还可以在一张图像上创建多个链接区域，这些区域可以是矩形、圆形或者多变形。这些链接区域就叫域可以是矩形、圆形或者多变形。这些链接区域就叫做热区。当单击图像上的热区时，就会跳转到热区所做热区。当单击图像上的热区时，就会跳转到热区所链接的页面上。链接的页面上。创建方法：创建方法：1.创建热区创建热区 属性面板属性面板中中“矩形热点工具矩形热点工具”、“椭圆形热点工具椭圆形热点工具”、“多边形热点工具

13、多边形热点工具”可以创建矩形、椭圆形、多边形热区可以创建矩形、椭圆形、多边形热区2.创建超级链接创建超级链接 选中热区选中热区单击单击“属性属性”面板中面板中“链接链接”后的浏览按钮后的浏览按钮导航条由一个或多个图像组成，其显示根据用户的动导航条由一个或多个图像组成，其显示根据用户的动作而改变。因此，在使用导航条命令之前，应首先创建一作而改变。因此，在使用导航条命令之前，应首先创建一个用于导航条的图像集。根据鼠标的动作，导航条中的图个用于导航条的图像集。根据鼠标的动作，导航条中的图像通常有以下像通常有以下4 4种状态。种状态。l状态图像：状态图像：尚未单击时所显示的初始图像。尚未单击时所显示的初始图像。l鼠标经过图像：鼠标经过图像：当光标从图像上经过时出现的图像。当光标从图像上经过时出现的图像。l按下图像：按下图像：单击导航条图像时显示的图像。单击导航条图像时显示的图像。l按下时鼠标经过图像：按下时鼠标经过图像：单击图像后，当鼠标指针滑过该图像时显单击图像后，当鼠标指针滑过该图像时显示的图像。示的图像。 方法：方法： 1、将光标放到要插入导航条的位置；、将光标放到要插入导航条的位置； 2、【选择插入选择插入】|【图像对象图像对象】|【导航条导航条】命令命令 ； 3、或选择、或选择【插入插入】|【常用常用】|【图像图像】|【导航条导航条】命令。命令。