了解如何设置网页之间的导航。 在 Dreamweaver 中链接文件和文档,更新、更改和测试链接。
创建链接之前,一定要清楚绝对路径、文档相对路径以及站点根目录相对路径的工作方式。 在一个文档中可以创建几种类型的链接:
- 链接到其它文档或文件(如图形、影片、PDF 或声音文件)的链接。
- 命名锚点链接,此类链接跳转至文档内的特定位置。
电子邮件链接,此类链接新建一个已填好收件人地址的空白电子邮件。
空链接和脚本链接,此类链接用于在对象上附加行为,或者创建执行 JavaScript 代码的链接。
属性检查器和“指向文件”图标可用于创建从图像、对象或文本到其它文档或文件的链接。
Dreamweaver 使用文档相对路径创建站点中其他页面的链接。 还可让 Dreamweaver 使用站点根目录相对路径创建新链接。
应始终先保存新文件,然后再创建文档相对路径,因为没有确切起点,文档相对路径即无效。 如果在保存文件之前创建文档相对路径,则 Dreamweaver 将临时使用以 file:// 开头的绝对路径,直至保存该文件;保存该文件后,Dreamweaver 将 file:// 路径转换为相对路径。
向链接中附加 JavaScript 行为
可为文档中的任何链接附加行为。 在文档中插入链接元素时,有如下几种行为可供选择:
设置状态栏文本
确定消息的文本,并将其显示在浏览器窗口左下部的状态栏中。 例如,您可以使用此行为在状态栏中说明链接的目标,而不是显示与之关联的 URL。
打开浏览器窗口
在一个新窗口中打开 URL。 您可以指定新窗口的属性(包括其名称和大小)和特性(它是否可以调整大小、是否具有菜单栏等)。
跳转菜单
编辑跳转菜单。 可以更改菜单列表、指定其他链接文件或者更改打开所链接文档的浏览器位置。
使用属性检查器链接到文档
可以使用属性检查器的文件夹图标或“链接”框创建从图像、对象或文本到其他文档或文件的链接。
单击“链接”框右侧的文件夹图标
,浏览到并选择一个文件。指向所链接的文档的路径显示在 URL 框中。 使用“选择文件”对话框中的“相对于”弹出菜单,使路径成为文档相对路径或根目录相对路径,然后单击“确定”。 您选择的路径类型只适用于当前链接。 (您可以针对该站点更改“相对于”框的默认设置。)
在“链接”框中键入文档的路径和文件名。
若要链接到站点内的文档,请输入文档相对路径或站点根目录相对路径。 若要链接到站点外的文档,请输入包含协议(如 http://)的绝对路径。 此种方法可用于输入尚未创建的文件的链接。
从“目标”下拉列表中,选择文档的打开位置:
- _blank 将链接的文档载入一个新的、未命名的浏览器窗口。
- _parent 将链接的文档加载到该链接所在框架的父框架或父窗口。 如果包含链接的框架不是嵌套框架,则所链接的文档加载到整个浏览器窗口。
- _self 将链接的文档载入链接所在的同一框架或窗口。 此目标是默认的,所以通常不需要指定它。
- _top 将链接的文档载入整个浏览器窗口,从而删除所有框架。
- _new 将链接文档载入一个新窗口。
使用“指向文件”图标链接文档
拖动属性检查器中“链接”框右侧的“指向文件”图标
(目标图标),指向当前文档中的可见锚点、另一个打开文档中的可见锚点、分配有唯一 ID 的元素或“文件”面板中的文档。按 Shift 键并拖动所选内容,指向当前文档中的可见锚点、另一个打开文档中的可见锚点、分配有唯一 ID 的元素或者“文件”面板中的文档。
仅当您的文档在“文档”窗口中未最大化时,才能链接到另一打开的文档。 要平铺文档,请选择“窗口”>“排列”>“层叠”或“窗口”>“排列”>“平铺”。 如果指向打开的文档,则在进行选择时,该文档移至屏幕的最前面。
使用“超链接”命令添加链接
“超链接”命令可以创建到图像、对象或其它文档或文件的文本链接。
执行下列操作之一以显示“超链接”对话框:
选择“插入”>“超链接”。
在“插入”面板的“常用”类别中,单击“超链接”按钮。
在"文本"字段中,输入链接的文本。
\n从"链接"下拉菜单中,选择要关联的文件名称。您还可以单击文件夹图标
以浏览到要链接到的文件。
当前文档中所有已命名框架的名称都显示在此弹出列表中。 如果指定的框架不存在,所链接的页面会在一个新窗口中打开,该窗口使用您所指定的名称。 也可选用下列保留目标名:
- _blank 将链接的文件载入新的未命名浏览器窗口。
- _parent 将链接的文件加载到含有该链接的框架的父框架集或父窗口中。 如果包含链接的框架不是嵌套的,则链接文件加载到整个浏览器窗口中。
- _self 将链接的文件加载到该链接所在的同一框架或窗口中。 此目标是默认的,所以通常不需要指定它。
- _top 将链接的文件加载到整个浏览器窗口中,因而会删除所有框架。
- _new 将链接文档载入一个新窗口。
创建指向 Word 或 Excel 文档的链接
您可以将指向 Microsoft Word 或 Excel 文档的链接插入到现有页面中。
在“设计”视图中,打开希望显示链接的页面。
将文件从当前位置拖放到 Dreamweaver 页面中,可将链接放在任何位置。 此时将显示“插入文档”对话框。
选择“创建链接”,然后单击“确定”。
如果您要链接的文档位于站点根文件夹以外,Dreamweaver 将提示您将文档复制到站点根文件夹中。
通过将文档复制到站点根文件夹中,可以确保发布网站时该文档可用。
当您将页面上传到 Web 服务器时,请确保同时上传 Word 或 Excel 文件。您的页面现在包含指向 Word 或 Excel 文档的链接。 链接文本是链接的文件的名称;如果愿意,您可以在“文档”窗口中更改链接文本。
设置新链接的相对路径
默认情况下,Dreamweaver 使用文档相对路径创建指向站点中其他页面的链接。 要改用站点根目录相对路径,必须先通过选择本地根文件夹,在 Dreamweaver 中定义本地文件夹以充当服务器上文档根目录的等效目录。 Dreamweaver 使用此文件夹确定文件的站点根目录相对路径。
单击“确定”后,更改此设置将不会转换现有链接的路径。 该设置仅适用于通过 Dreamweaver 创建的新链接。
新路径设置只适用于当前站点。
链接到文档中的特定位置
通过首先创建命名锚点,可使用属性检查器链接到文档的特定部分。 命名锚点使您可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。 然后可以创建到这些命名锚点的链接,这些链接可快速将访问者带到指定位置。
创建到命名锚点的链接的过程分为两步。 首先,创建命名锚点,然后创建到该命名锚点的链接。
创建锚点
在“文档”窗口中,选择并突出显示要设置为锚点的项目。
打开属性检查器并检查所选项目是否具有 ID。 如果 ID 字段为空,请添加 ID。 例如,锚点。
添加 ID 后,请注意代码所发生的更改。 id="<ID name>" 已插入您选择的代码中。
链接回锚点
锚点名称区分大小写。
使用指向文件方法链接到命名锚点
如果您未看到锚点,可从“设计”视图中,选择“视图”>“设计视图选项”>“可视化助理”>“不可见元素”以使锚点可见。
单击属性检查器中“链接”框右侧的“指向文件”图标
(目标图标),然后将它拖到要链接到的锚点上:可以是同一文档中的锚点,也可以是其它打开文档中的锚点。在“文档”窗口中,按住 Shift,从所选文本或图像拖动到要链接到的锚点:可以是同一文档中的锚点,也可以是其它打开文档中的锚点。
创建电子邮件链接
单击电子邮件链接时,该链接将打开一个新的空白信息窗口(使用的是与用户浏览器相关联的邮件程序)。 在电子邮件消息窗口中,“收件人”框自动更新为显示电子邮件链接中指定的地址。
使用“插入电子邮件链接”命令创建电子邮件链接
选择“插入”>“电子邮件链接”。
在“插入”面板的“常用”类别中,单击“电子邮件链接”按钮。
使用属性检查器创建电子邮件链接
在冒号与电子邮件地址之间不能键入任何空格。
自动填充电子邮件的主题行
完整输入如下所示:
mailto:someone@yoursite.com?subject=Mail from Our Site
创建空链接和脚本链接
空链接是未指派的链接。 空链接用于向页面上的对象或文本附加行为。 例如,可向空链接附加一个行为,以便在指针滑过该链接时会交换图像或显示绝对定位的元素(AP 元素)。
脚本链接 执行 JavaScript 代码或调用 JavaScript 函数。它非常有用,能够在不离开当前网页面的情况下为访问者提供有关某项的附加信息。 脚本链接还可用于在访问者单击特定项时,执行计算、验证表单和完成其他处理任务。
创建空链接
创建脚本链接
自动更新链接
移动或重命名本地站点内的文档时,Dreamweaver 可更新来自和指向该文档的链接。 在将整个站点(或其中完全独立的一个部分)存储在本地磁盘上时,此项功能最适用。 Dreamweaver 直到将本地文件放在远程服务器上或将其存回远程服务器后才更改远程文件夹中的文件。
为了加快更新过程,Dreamweaver 可创建缓存文件,从中存储有关本地文件夹中所有链接的信息。 在添加、更改或删除本地站点上的链接时,该缓存文件以不可见的方式进行更新。
启用自动链接更新
总是
每当移动或重命名选定文档时,自动更新起自和指向该文档的所有链接。
从不
在您移动或重命名选定文档时,不自动更新起自和指向该文档的所有链接。
提示
显示一个对话框,列出此更改影响到的所有文件。 单击“更新”可更新这些文件中的链接,而单击“不更新”将保留原文件不变。
为站点创建缓存文件
启动 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 中),同时双击选中的链接。
链接的文档必须驻留在本地磁盘上。