4.2 定义链接

使用Dreamweaver CC定义链接非常方便快捷，只要选中要定义链接的文字或图像，然后在【属性】面板的【链接】文本框中输入相应的URL路径即可。当然Dreamweaver CC还提供了更多方法，下面结合案例进行具体说明。

4.2.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 定义链接的目标

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

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

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

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

4.2.2 实战演练：使用指向文件图标

使用指向文件图标可以快速定义指向站点文件面板中的一个文件或者图像文件。

【操作步骤】

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

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

第3步，在【属性】面板中拖动【链接】文本框右边的【指向文件】按钮可以快速定义链接。拖动鼠标时会出现一条带箭头的细线，指示要拖动的位置，指向文件后只需释放鼠标，即会自动生成链接，如图4.4所示。

图4.4 拖动【指向文件】图标创建文件链接

4.2.3 实战演练：使用超链接对话框

使用【Hyperlink】对话框可以不用在网页中选中对象，更详细地定义链接属性，如指定链接文本、标题、访问键和索引键等。

【操作步骤】

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

第2步，把光标置于需要显示Logo的图像位置。

第3步，选择【插入】｜【Hyperlink】命令，打开【Hyperlink】对话框，然后按如下说明进行设置，如图4.5所示。

图4.5 设置【Hyperlink】对话框

（1）【文本】文本框：定义链接显示的文本，可以是HTML文本。例如，这里设置为“<img src="images/logo.png" border=0 />”，即显示为Logo图像。

（2）【链接】文本框：定义链接到的路径，最好输入相对路径而不是绝对路径，如index.html。

（3）【目标】下拉列表框：定义链接的打开方式，包括4个选项，可参见4.2.1节介绍。

（4）【标题】文本框：定义链接的标题，如“网站LOGO”。

（5）【访问键】文本框：设置键盘快捷键，按键盘上的快捷键将选中链接，然后按Enter键就可以快速访问链接。例如，这里设置为“h”。

（6）【Tab键索引】文本框：设置在网页中用Tab键选中这个链接的顺序，例如，这里设置为1。

第4步，设置完毕，单击【确定】按钮，即可向网页中插入一个带有Logo标志的链接。切换到【代码】视图，可以看到自动生成的HTML代码：

4.2.4 实战演练：使用快捷菜单

【操作步骤】

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

第2步，在编辑窗口中右击Logo图像，从弹出的快捷菜单中选择【创建链接】命令，如图4.6所示。

图4.6 使用快捷菜单命令

第3步，在打开的【选择文件】对话框中浏览并选择一个文件，然后单击【确定】按钮即可，具体设置可参阅4.2.1节说明。

4.2.5 实战演练：使用拖曳定义链接

这是一种比较随意、快捷的操作方法。

【操作步骤】

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

第2步，在编辑窗口中单击Logo图像，选择要定义链接的对象。

第3步，按住Shift键，在选定的对象上拖动鼠标指针，要注意在拖动时会出现指向文件图标。拖动鼠标到文件中的锚点或者【文件】面板中另一个文件，最后释放鼠标即可，如图4.7所示。

图4.7 直接拖动定义链接

4.2.6 实战演练：在代码中定义链接

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

1．文本链接

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

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

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

2．图像链接

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

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

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