4.1 定义链接

超链接（Hyper Link），也称网页链接，它是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是网页上的某个位置，还可以是一张图片、一个电子邮件地址、一个文件，甚至是一个应用程序。在一个网页中用来超链接的对象，可以是一段文本或者是一张图片，当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型打开或运行。详细介绍请扫码了解。

视频讲解

4.1.1 实战演练：使用属性面板

线上阅读

使用属性面板定义链接的方法如下。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，选择编辑窗口中的Logo图像。

第3步，选择【窗口】|【属性】命令，打开属性面板，然后执行如下任一操作。

（1）单击【链接】文本框右边的【选择文件】按钮，在打开的【选择文件】对话框中浏览并选择一个文件，如图4.1所示。在【相对于】下拉列表中选择【文档】选项（设置相对路径）或【站点根目录】选项（设置根路径），然后单击【确定】按钮。

图4.1 【选择文件】对话框

当设置【相对于】下拉列表中的选项后，Dreamweaver CC把该选项设置为以后定义链接的默认路径类型，直至改变该项选择为止。

（2）在属性面板的【链接】文本框中，输入要链接文件的路径和文件名，如图4.2所示。

图4.2 在属性面板中定义链接

第4步，选择被链接文件的载入目标。在默认情况下，被链接文件打开在当前的窗口或框架中。要使被链接的文件显示在其他地方，需要从属性面板的【目标】下拉列表中选择一个选项，如图4.3所示。

图4.3 定义链接的目标

☑ _blank：将被链接文件载入新的未命名浏览器窗口中。

☑ _parent：将被链接文件载入父框架集或包含该链接的框架窗口中。

☑ _self：将被链接文件载入与该链接相同的框架或窗口中。

☑ _top：将被链接文件载入整个浏览器窗口并删除所有框架。

4.1.2 实战演练：使用代码定义链接

在【代码】视图下可以直接输入HTML代码定义链接。

1. 文本链接

使用<a>标记定义文本链接的方法如下：

     <a href="index.html" title="返回首页" accesskey="t" target="_blank">唯品会</a>

其中，href属性用来设置目标文件的地址，target属性相当于Dreamweaver属性面板中的【目标】选项设置，当属性值等于_blank，表示在新窗口中打开。除此之外还包括其他3种：_parent、_self和_top。

2. 图像链接

图像链接与文本链接基本相同，都是用<a>标记实现，唯一的差别就在于<a>属性设置。例如：

     <a href="index.html" target="_blank"><img src="images/logo.png" border="0" /></a>

从实例代码中可以看出，图像链接在<a>标记中多了<img>标记，该标记设置链接图像的属性。