在 Dreamweaver 中，如何在网页中或网页之间链接文件、文档或特定元素。

优质

小牛编辑

153浏览

2023-12-01

了解如何设置网页之间的导航。在 Dreamweaver 中链接文件和文档，更新、更改和测试链接。

创建链接之前，一定要清楚绝对路径、文档相对路径以及站点根目录相对路径的工作方式。在一个文档中可以创建几种类型的链接：

到其他文档或文件（如图形、影片、PDF 或声音文件）的链接。
命名锚点链接，此类链接跳转至文档内的特定位置。
电子邮件链接，此类链接新建一封空白电子邮件，其中填有收件人的地址。
空链接和脚本链接，此类链接用于向对象附加行为或创建执行 JavaScript 代码的链接。

可使用属性检查器和“指向文件”图标创建从图像、对象或文本到其他文档或文件的链接。

Dreamweaver 使用文档相对路径创建站点中其他页面的链接。还可让 Dreamweaver 使用站点根目录相对路径创建新链接。

注意:应始终先保存新文件，然后再创建文档相对路径，因为没有确切起点，文档相对路径即无效。如果在保存文件之前创建文档相对路径，则 Dreamweaver 将临时使用以 file:// 开头的绝对路径，直至保存该文件；保存该文件后，Dreamweaver 将 file:// 路径转换为相对路径。

向链接中附加 JavaScript 脚本行为

可为文档中的任何链接附加行为。在文档中插入链接元素时，有如下几种行为可供选择：

设置状态栏文本

确定消息的文本，并将其显示在浏览器窗口左下部的状态栏中。例如，您可以使用此行为在状态栏中说明链接的目标，而不是显示与之关联的 URL。

打开浏览器窗口

在一个新窗口中打开 URL。您可以指定新窗口的属性（包括其名称和大小）和特性（它是否可以调整大小、是否具有菜单栏等）。

跳转菜单

编辑跳转菜单。可更改菜单列表、指定其他链接文件或者更改打开所链接文档的浏览器位置。

使用属性检查器链接到文档

可以使用属性检查器的文件夹图标或“链接”框创建从图像、对象或文本到其他文档或文件的链接。

在“文档”窗口的“设计”视图中选择文本或图像。
打开属性检查器（“窗口”>“属性”），然后执行下列操作之一：
- 单击“链接”框右侧的文件夹图标，浏览到并选择一个文件。
  指向所链接的文档的路径显示在 URL 框中。使用“选择文件”对话框中的“相对于”弹出菜单，使路径成为文档相对路径或根目录相对路径，然后单击“确定”。您选择的路径类型只适用于当前链接。（您可以针对该站点更改“相对于”框的默认设置。）
- 在“链接”框中键入文档的路径和文件名。
  若要链接到站点内的文档，请输入文档相对路径或站点根目录相对路径。若要链接到站点外的文档，请输入包含协议（如 http://）的绝对路径。此种方法可用于输入尚未创建的文件的链接。
从“目标”下拉列表中，选择文档的打开位置：
- _blank 将链接的文档载入一个新的、未命名的浏览器窗口。
- _parent 将链接的文档加载到该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档加载到整个浏览器窗口。
- _self 将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。
- _top 将链接的文档载入整个浏览器窗口，从而删除所有框架。
- _new 将链接文档载入一个新的窗口。

使用“指向文件”图标链接文档

在“文档”窗口的“设计”视图中选择文本或图像。
以下列两种方法之一创建链接：
- 拖动属性检查器中“链接”框右侧的“指向文件”图标（目标图标），指向当前文档中的可见锚点、另一个打开文档中的可见锚点、分配有唯一 ID 的元素或“文件”面板中的文档。
- 按住 Shift 键拖动所选内容，使其指向当前文档中的可见锚点、另一打开的文档中的可见锚点、分配了唯一 ID 的元素或“文件”面板中的文档。
注意:仅当您的文档在“文档”窗口中未最大化时，才能链接到另一打开的文档。要平铺文档，请选择“窗口”>“排列”>“层叠”或“窗口”>“排列”>“平铺”。指向打开的文档时，该文档在您作出选择时移至屏幕前台。

使用“超链接”命令添加链接

通过“超链接”命令，可创建到图像、对象或另一文档或文件的文本链接。

将插入点放在文档中希望出现链接的位置。
执行下列操作之一以显示“超链接”对话框：
- 选择“插入”>“超链接”。
- 在“插入”面板的“常用”类别中，单击“超链接”按钮。
在“文本”字段中，输入链接的文本。
从“链接”下拉菜单中，选择要链接到的文件的名称。您还可以单击文件夹图标以浏览到要链接到的文件。
在“目标”弹出菜单中选择一个窗口（应在该窗口中打开该文件）或键入其名称。
当前文档中所有已命名框架的名称都显示在此弹出列表中。如果指定的框架不存在，所链接的页面会在一个新窗口中打开，该窗口使用您所指定的名称。也可选用下列保留目标名：
- _blank 将链接的文件载入新的未命名浏览器窗口。
- _parent 将链接的文件加载到含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。
- _self 将链接的文件加载到该链接所在的同一框架或窗口中。此目标是默认的，所以通常不需要指定它。
- _top 将链接的文件加载到整个浏览器窗口中，因而会删除所有框架。
- _new 将链接文档载入一个新窗口。
在“Tab 键索引”框中，输入 Tab 顺序的编号。
在“标题”框中，输入链接的标题。
在“访问键”框中，输入可用来在浏览器中选择该链接的等效键盘键（一个字母）。
单击“确定”。

设置新链接的相对路径

默认情况下，Dreamweaver 使用文档相对路径创建指向站点中其他页面的链接。要改用站点根目录相对路径，必须先通过选择本地根文件夹，在 Dreamweaver 中定义本地文件夹以充当服务器上文档根目录的等效目录。Dreamweaver 使用此文件夹确定文件的站点根目录相对路径。

选择“站点”>“管理站点”。
在“管理站点”对话框中，在列表中双击您的站点。
在“站点设置”对话框中，展开“高级设置”并选择“本地信息”类别。
选择“文档”或“站点根目录”选项，从而设置新链接的相对路径。
单击“确定”后，更改此设置将不会转换现有链接的路径。该设置仅适用于用 Dreamweaver 创建的新链接。
单击“保存”。
新路径设置只适用于当前站点。

链接到文档中的特定位置

通过首先创建命名锚点，可使用属性检查器链接到文档的特定部分。命名锚点使您可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚点的链接，这些链接可快速将访问者带到指定位置。

创建到命名锚点的链接的过程分为两步。首先，创建命名锚点，然后创建到该命名锚点的链接。

创建锚点

在“文档”窗口中，选择并突出显示要设置为锚点的项目。
打开属性检查器并检查所选项目是否具有 ID。如果 ID 字段为空，请添加 ID。例如，锚点。
创建锚点
添加 ID 后，请注意代码所发生的更改。id="<ID name>" 已插入您选择的代码中。
添加用于链接的锚点

链接回锚点

在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像。
在属性检查器的“链接”框中，键入一个数字符号 (#) 和锚点名称。例如，若要链接到当前文档中名为“top”的锚点，请键入 #top。若要链接到同一文件夹内其他文档中的名为“top”的锚点，请键入 filename.html#top。
注意:锚点名称区分大小写。

使用指向文件方法链接到命名锚点

打开包含对应命名锚点的文档。
注意:如果您未看到锚点，可从“设计”视图中，选择“视图”>“设计视图选项”>“可视化助理”>“不可见元素”以使锚点可见。
在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像。（如果这是其他打开文档，则必须切换到该文档。）
执行下列操作之一：
- 单击属性检查器中“链接”框右侧的“指向文件”图标（目标图标），然后将它拖到要链接到的锚点上：可以是同一文档中的锚点，也可以是其他打开文档中的锚点。
- 在“文档”窗口中，按住 Shift 将所选文本或图像拖至要链接到的锚点：可以是同一文档中的锚点，也可以是另一打开的文档中的锚点。

创建电子邮件链接

单击电子邮件链接时，该链接将打开一个新的空白信息窗口（使用的是与用户浏览器相关联的邮件程序）。在电子邮件消息窗口中，“收件人”框自动更新为显示电子邮件链接中指定的地址。

使用“插入电子邮件链接”命令创建电子邮件链接

在“文档”窗口的“设计”视图中，将插入点放在希望出现电子邮件链接的位置，或者选择要作为电子邮件链接出现的文本或图像。
执行下列操作之一，插入该链接：
- 选择“插入”>“电子邮件链接”。
- 在“插入”面板的“常用”类别中，单击“电子邮件链接”按钮。
在“文本”框中，键入或编辑电子邮件的正文。
在“E-mail”框中，键入电子邮件地址，然后单击“确定”。

使用属性检查器创建电子邮件链接

在“文档”窗口的“设计”视图中选择文本或图像。
在属性检查器的“链接”框中，键入 mailto:，后跟电子邮件地址。
在冒号与电子邮件地址之间不能键入任何空格。

自动填充电子邮件的主题行

如上所述，使用属性检查器创建电子邮件链接。
在属性检查器的“链接”框中，在电子邮件地址后添加 ?subject=，并在等号后输入一个主题。在问号和电子邮件地址结尾之间不能键入任何空格。
完整输入如下所示：
mailto:someone@yoursite.com?subject=Mail from Our Site

创建空链接和脚本链接

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

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

创建空链接

在“文档”窗口的“设计”视图中选择文本、图像或对象。
在属性检查器中，在“链接”框中键入 javascript:;（javascript 一词后依次接一个冒号和一个分号）。

创建脚本链接

在“文档”窗口的“设计”视图中选择文本、图像或对象。
在属性检查器的“链接”框中，键入 javascript:，后跟一些 JavaScript 代码或一个函数调用。（在冒号与代码或调用之间不能键入空格。）

自动更新链接

移动或重命名本地站点内的文档时，Dreamweaver 可更新来自和指向该文档的链接。在将整个站点（或其中完全独立的一个部分）存储在本地磁盘上时，此项功能最适用。Dreamweaver 直到将本地文件放在远程服务器上或将其存回远程服务器后才更改远程文件夹中的文件。

为了加快更新过程，Dreamweaver 可创建缓存文件，从中存储有关本地文件夹中所有链接的信息。在添加、更改或删除本地站点上的链接时，该缓存文件以不可见的方式进行更新。

启用自动链接更新

选择“编辑”>“首选参数”(Windows) 或“Dreamweaver”>“首选参数”(Macintosh)。
在“首选参数”对话框中，从左侧的“类别”列表中选择“常规”。
在“常规”首选参数的“文档选项”部分，从“移动文件时更新链接”弹出菜单中选择一个选项。
总是
每当移动或重命名选定文档时，自动更新起自和指向该文档的所有链接。
从不
在您移动或重命名选定文档时，不自动更新起自和指向该文档的所有链接。
提示
显示一个对话框，列出此更改影响到的所有文件。单击“更新”可更新这些文件中的链接，而单击“不更新”将保留原文件不变。
单击“确定”。

为站点创建缓存文件

选择“站点”>“管理站点”。
选择一个站点，然后单击“编辑”。
在“站点设置”对话框中，展开“高级设置”并选择“本地信息”类别。
在“本地信息”类别中，选择“启用缓存”。
启动 Dreamweaver 后首次更改或删除指向本地文件夹中文件的链接时，Dreamweaver 提示加载缓存。如果单击“是”，则 Dreamweaver 加载缓存，并更新所有指向刚刚更改的文件的链接。如果单击“否”，则将更改记入缓存，但 Dreamweaver 不加载缓存或更新链接。
在大型站点上加载缓存可能耗时几分钟，因为 Dreamweaver 必须通过比较本地站点上文件的时间戳与缓存中记录的时间戳，判断缓存是否为最新。如果没有在 Dreamweaver 之外更改任何文件，则显示“停止”按钮时，可放心地单击该按钮。

重新创建缓存

在“文件”面板中，选择“站点”>“高级”>“重建站点缓存”。

在整个站点范围内更改链接

除移动或重命名文件时让 Dreamweaver 自动更新链接之外，还可手动更改所有链接（包括电子邮件链接、FTP 链接、空链接和脚本链接），使其指向其他某处。

此选项最适用于删除其他文件所链接到的某个文件，不过也可以将它用于其他用途。例如，您可能已经在整个站点内将“本月电影”一词链接到 /movies/july.html。而到了 8 月 1 日，则必须将那些链接更改为指向 /movies/august.html。

在“文件”面板的“本地”视图中选择一个文件。
注意:如果更改的是电子邮件链接、FTP 链接、空链接或脚本链接，则不需要选择文件。
选择“站点”>“站点选项”>“更改整个站点链接”。
在“更改整个站点链接”对话框中完成下列选项：
更改所有的链接
单击文件夹图标，浏览到并选择要取消链接的目标文件。如果更改的是电子邮件链接、FTP 链接、空链接或脚本链接，请键入要更改的链接的完整文本。
链接到
单击文件夹图标，浏览到并选择要链接到的新文件。如果更改的是电子邮件链接、FTP 链接、空链接或脚本链接，请键入替换链接的完整文本。
单击“确定”。
Dreamweaver 更新任何链接到所选文件的文档，其中沿用已在文档中使用的路径格式（例如，如果旧路径相对于文档，则新路径也相对于文档），使这些文档指向新文件。
在整个站点范围内更改某个链接后，所选文件变为孤立文件（即本地硬盘上没有任何文件指向该文件）。这时可安全地删除该文件，而不会破坏本地 Dreamweaver 站点中的任何链接。
注意:由于在本地进行这些更改，因此必须手动删除远程文件夹中相应的孤立文件，然后放入或存回任何其中链接已更改的文件；否则，站点访问者将看不到这些更改。

在 Dreamweaver 中测试链接

链接在 Dreamweaver 内不活动，即无法通过在“文档”窗口中单击链接，打开所链接的文档。

执行下列操作之一：
- 右键单击链接并选择“打开链接页面”。
- 按住 Ctrl (Windows) 或 Command (Macintosh) 双击该链接。
注意:链接的文档必须位于本地磁盘上。