4.1　创建常用网页链接文件

本节主要向读者介绍创建常用网页链接的方法，主要包括创建E-mail链接、图像热点链接、下载文件链接、锚点链接、脚本链接以及空链接等。用户在学习这些链接的创建方法之前，应首先了解超链接的基本概念内容。

（1）绝对路径：指包括服务器规范在内的完全路径，通过使用http://表示。使用绝对路径时，只要目标文档的位置不发生变化，不论源文件存放在任何位置都可以精确地找到。在链接中使用绝对路径时，只要网站的地址不变，无论文档在站点中如何移动，都可以保证正常跳转不会出错。但采用绝对路径不利于网站的测试和移植。

（2）相对路径：包含了URL的每一部分，而相对路径省略了当前文档和被链接文档的绝对URL中相同的部分，只留下不同的部分。相对路径是以当前文档所在位置为起点到被链接文档经过的路径，它是用于本地链接最合适的路径。要在Dreamweaver中使用相对路径，最好将文件保存到一个已经建好的本地站点根目录中。

（3）根目录相对路径：与绝对路径非常相似，只省去了绝对路径中带有协议的部分。它具有绝对路径的源端点位置无关性，又解决了绝对路径测试时的麻烦，可以在本地站点中而不是在Internet中进行测试。

（4）目标端点。链接指向按目标端点可分为以下4种：

①内部链接：链接指向的是同一个站点的其他文档和对象的链接。

②外部链接：链接指向的是不同站点的其他文档和对象的链接。

③锚点链接：链接指向的是同一个网页或不同网页中命名锚点的链接。

④E-mail链接：链接指向的是一个用于填写和发送电子邮件的弹出窗口的链接。

图4-1所示为单击相应的超链接进入的网页页面效果。

4.1.1　链接的含义

在设置存储Web站点文档的Dreamweaver站点和创建HTML页面之后，需要创建文档到文档的链接。Dreamweaver提供多种创建链接的方法，可创建到文档、图像、多媒体文件或可下载软件的链接。可以建立到文档内任意位置的任何文本或图像的链接，包括标题、列表、表、绝对定位的元素（AP元素）或框架中的文本或图像。

链接的创建与管理有几种不同的方法。有些Web设计者喜欢在工作时创建一些指向尚未建立的页面或文件的链接；而另一些设计者则倾向于首先创建所有的文件和页面，然后再添加相应的链接。

另一种管理链接的方法是创建占位符页面，在完成所有站点页面之前可在这些页面中添加和测试链接。了解从作为链接起点的文档到作为链接目标的文档或资产之间的文件路径对于创建链接至关重要。每个网页都有唯一的地址，称为统一资源定位器（URL）。不过，在创建本地链接（即从一个文档到同一站点上另一个文档的链接）时，通常不指定作为链接目标文档的完整URL，而是指定一个始于当前文档或站点根文件夹的相对路径。

网页中有以下3种类型的链接路径：

（1）绝对路径，如http://www.adobe.com/support/dreamweaver/contents.html。

（2）文档相对路径，如dreamweaver/contents.html。

（3）站点根目录相对路径，如/support/dreamweaver/contents.html。

使用Dreamweaver CS6，可以方便地选择要为链接创建的文档路径的类型。

4.1.2　创建E-mail链接

在网页中有时需要将某些电子邮件地址显示出来，如网站维护人员的电子邮件地址等，供用户非常方便地向该地址发送邮件。

素材文件　　光盘\素材\第4章\4.1.2\index.html

效果文件　　光盘\效果\第4章\4.1.2\index.html

视频文件　　光盘\视频\第4章\4.1.2　创建E-mail链接.mp4

步骤01　单击“文件”|“打开”命令，打开一个网页文档，如图4-2所示。

步骤02　选择需要设置电子邮件链接的内容，如图4-3所示。

步骤03　单击“插入”|“电子邮件链接”命令，如图4-4所示。

步骤04　弹出“电子邮件链接”对话框，在“电子邮件”文本框中输入相应的邮件地址，如图4-5所示。

步骤05　单击“确定”按钮，即可添加电子邮件链接，在“属性”面板中可以查看链接的地址，如图4-6所示。

步骤06　按【F12】键保存网页，打开IE浏览器即可看到邮件链接的效果，如图4-7所示。

4.1.3　创建图像热点链接

热点链接是指在一幅图像中定义若干个区域（称为热区），在每个区域中设定一个不同的超链接。选中插入的图像，使用图像“属性”面板中的“地图”文本框和“热点工具”按钮，为图像创建客户端映像地图，如图4-8所示。

可以定义以下3种图像地图热点区域：

（1）单击“矩形热点工具”按钮：在图像上拖动，创建一个矩形热点。

（2）单击“圆形热点工具”按钮：在图像上拖动，创建一个圆形热点。

（3）单击“多边形热点工具”按钮：在图像上拖动，即可创建一个不规则多边形热点。

创建完毕，单击“属性”面板中“地图”文本框下面的“指针热点工具”按钮，光标恢复到原来的状态。

素材文件　　光盘\素材\第4章\4.1.3\index.html

效果文件　　光盘\效果\第4章\4.1.3\index.html

视频文件　　光盘\视频\第4章\4.1.3　创建图像热点链接.mp4

步骤01　单击“文件”|“打开”命令，打开一个网页文档，选择需要创建热点的图像，如图4-9所示。

步骤02　在“属性”面板中，单击“矩形热点工具”按钮，如图4-10所示。

步骤03　将光标置于图像上，单击左键拖动鼠标绘制一个矩形热点，释放鼠标左键后，弹出提示信息框，单击“确定”按钮，即可显示矩形热点区域，如图4-11所示。

步骤04　在“属性”面板“链接”文本框的右侧，单击“浏览文件”按钮，如图4-12所示。

步骤05　弹出“选择文件”对话框，选择相应的链接文件，如图4-13所示。

步骤06　单击“确定”按钮，即可添加链接，如图4-14所示。

步骤07　按【F12】键保存网页后，打开IE浏览器，将鼠标指针移动到图片上，如图4-15所示。

步骤08　单击创建了热点链接的图片，即可跳转到相应页面，如图4-16所示。

4.1.4　创建下载文件链接

如果要在网页中提供下载资料，就需要为文件提供下载链接。如果超链接指向的不是一个网页文件而是其他文件，如zip、mp3以及exe文件等，单击该链接时就会下载该文件。

素材文件　　光盘\素材\第4章\4.1.4\index.html

效果文件　　光盘\效果\第4章\4.1.4\index.html

学习目标　　光盘\视频\第4章\4.1.4　创建下载文件链接.mp4

步骤01　单击“文件”|“打开”命令，打开一个网页文档，选择需要创建下载文件链接的文本，如图4-17所示。

步骤02　打开“属性”面板，单击“链接”文本框后面的“浏览文件”按钮，如图4-18所示。

步骤03　弹出“选择文件”对话框，选择相应的文件，如图4-19所示。

步骤04　单击“确定”按钮，在“属性”面板的“目标”列表框中选择_blank选项，如图4-20所示。

步骤05　按【F12】键保存网页文档后，在打开的IE浏览器中预览网页，如图4-21所示。

步骤06　单击“下载OO空间客户端”超链接，在窗口下方将提示打开或保存文件，如图4-22所示，单击“保存”按钮，即可开始下载文件。

说明

在网页文件中，当光标移动到文本或图像上方时，光标有时会变成手形状，出现这种形状的光标，就说明当前光标所在位置的文本或图像已应用了链接。

4.1.5　创建锚点链接

超链接除了可以链接到一个文件外，也可以链接到网页中的任意位置，这种链接称为锚点链接。当页面中的内容较多，用户在页面的某个分项内容的小标题上设置锚点链接，即可快速跳转到自己所需的页面中。

素材文件　　光盘\素材\第4章\4.1.5\index.html

效果文件　　光盘\效果\第4章\4.1.5\index.html

视频文件　　光盘\视频\第4章\4.1.5　创建锚点链接.mp4

步骤01　单击“文件”|“打开”命令，打开一个网页文档，如图4-23所示。

步骤02　在网页文档中，将鼠标的光标定位于需要插入命名锚记的位置，如图4-24所示。

步骤03　单击“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入“maoji”，如图4-25所示。

步骤04　单击“确定”按钮，即可在光标处插入一个命名锚记，如图4-26所示。

步骤05　在页面中选择要创建命名锚记的文字，然后在其“属性”面板的“链接”文本框中输入“#maoji”，如图4-27所示。

步骤06　按【F12】键保存网页文档，在打开的IE浏览器中预览网页，单击页面中创建了锚记链接的文字，如图4-28所示。

说明

在网上下载文件时，单击相关的下载链接后，网页会自动跳转至页面下方的下载专区，该方式就是运用了锚点链接。

步骤07　执行操作后，即可跳转到页面中插入锚记的位置，如图4-29所示。

4.1.6　创建脚本链接

脚本链接用于执行JavaScript代码或调用JavaScript函数。该功能非常有用，能够在不离开当前网页的情况下为浏览者提供有关某项的附加信息。脚本链接还可用于在浏览者单击特定项时，执行计算、表单验证和其他处理任务。

在网页文档中，选择需要创建脚本链接的文本，如图4-30所示。在“属性”面板的“链接”文本框中，输入“Java cript：windows.Close（）”，该脚本表示可以将窗口退出，如图4-31所示。

按【F12】键保存网页文档后，在打开的IE浏览器中预览网页，如图4-32所示。单击“关闭网页”超链接，即可退出网页窗口，如图4-33所示。

4.1.7　创建空链接

在Dreamweaver CS6中，空链接是未指派的链接，空链接用于向页面上的对象或文本附加行为。例如，可向空链接附加一个行为，以便在指针滑过该链接时会交换图像或显示绝对定位的元素（AP元素）效果。

在“文档”窗口的“设计”视图中，选择文本、图像或对象，在“属性”面板中，在“链接”文本框中输入“javascript：；”（javascript一词后依次接一个冒号和一个分号）即可，如图4-34所示。