第 6 章链接和导航

第 6 章链接和导航 冉启斌

本章学习目标 6.4 6.2 6.1 超链接简介创建超链接创建导航栏 6.3 管理超链接

6.1超链接简介 超链接是从一个网页或文件到另一个网页或文件的连接，通过超链接可以将链接指向图像文件、多媒体文件，电子邮件地址或可执行程序。当网站访问者单击超链接时，浏览器将根据目标的类型执行相应的操作。

6.1.1绝对路径 绝对路径是被链接文档的完整路径，包括使用的传输协议（如对于 Web 页，通常使用 http://），例如http://www.nhxx.org就是一个绝对路径。绝对路径包含的是具体地址，如果目标文件被移动，则链接无效。从当前浏览的网页链接到其他网站的网页时，必须使用绝对路径。

6.1.2相对路径 文档相对路径的基本思想是省略掉对于当前文档和所链接的文档都相同的绝对 URL 部分，而只提供不同的路径部分。例如，假设一个站点的结构如图6-1所示：图6-1站点文件目录

返回 6.1.3站点根目录相对路径 • 站点根目录相对路径提供从站点的根文件夹到文档的路径，站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹。例如，/support/tips.html 是文件 (tips.html) 的站点根目录相对路径，该文件位于站点根文件夹的 support 子文件夹中。

6.2创建超链接 • 网络上的每个网页都有一个惟一的地址，称作统一资源定位器（URL），正是因为每个网页都有自己的URL，同一站点中的网页与网页、不同站点与站点之间才能相互建立关联。dreamweaver cs中可以为对象、文本或图像创建超链接。锚记用于创建超文本链接的HTML标签称，也可以称A标签。使用<a href>----</a>标签可以创建链接到其他文档和文件的链接，以及链接到单个文档特定位置的链接。在一个文档中可以创建向种类型的链接：链接到其他文档或文件（如图形、影片或声音文件）的链接；命名锚记链接；空链接和脚本链接等等。

6.2.1链接文档和文件 • 使用属性面板的文件夹图标或链接文本框链接文档 • 在Dreamweaver MX的文档编辑窗口中选中要创建超链接的文本或图像。 • 单击“窗口”→“属性”选项，在Dreamweaver MX中出现如图6-2所示属性面板（一般来说，Dreamweaver MX文档中默认存在”属性”面板） • 图6-2属性对话框 • 在“链接”文本框中可以直接键入文档的路径和文件名，或单击“链接”文本框右侧的文件夹图标，以通过浏览选择要链接的文件。弹出如图6-3所示的“选择文件夹”的对话框。 • 图6-3选择文件对话框

6.2.1链接文档和文件 • 使用图标链接文档 • 在文档编辑窗口选中要创建超链接的文本或图像。 • 拖动“属性”面板中“链接”文本框右侧的图标，然后指向另一个已打开文档中的可见锚记，或指向“站点”面板的一个文档。 • “链接”文本框将自动更新，显示该链接。

6.2.1链接文档和文件 • 从已打开文档中的选定内容创建链接 • 在文档编辑窗口中选择文本。 • 在下Shift键，从选定内容处于开始拖动。指向其他打开的文档中的可见锚记，也可以指向“站点”面板中的一个文档。 • 使用图标链接文档及从已打开文档中的选定内容创建链接，只有当“文档”窗口中的文档未最大化时，才能链接到打开的文档。如果指向打开的文档，则在进行选择时，该文档移运载屏幕的最前面（否则无未法链接到要链接的文档）

返回 6.2.1链接文档和文件使用HTML链接文档用HTML创建超链接需要使用〈A〉----〈/A〉标记符（结束标记符〈/A〉不能省略），在〈A〉-----〈/A〉之间可以用任何可单击的对象（例如文字或图像）作为超链接的链接源。它的最基本属性是href，用于指定链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。例如： • 使用文字链接：<A href= “--/index.htm ” target = “_parent”> 站点首页<A.> • 使用图片链接：<A href= ” website .htm ” target=”_blank”><IMG border =0 height = 113 src=”image. File / picture .jpg “ width = 146></A>

6.3管理超链接 将整个站点（或其中完全独立的一个部分）存储在本地硬盘上，当在本地站点内移动或便命名文档时，Dreamweaver MX可以不更改远程文件夹中的文件，自动更新起自以及指向文档的链接。

6.3.1启用链接管理 • 选择“编辑”菜单中的“参数选择”选项，弹出如图6-25所示“参数选择”对话框。图6-25首选参数对话框 • 在分类列表中选择常规参数选项。在文档选项部分，“移动文件更新链接”提示中选择“总是”或“提示”。参数说明： “总是”：表示每当移动或重命名选定文档时，Dreamweaver MX将会自动更新起自和指向总是或提示。 “提示”：Dreamweaver MX将首先显示一个对话框，列出此更改影响到的所有文件。单击“更新”可更新这些文件中的链接，而单击“不更新”将保留文件不变。 • 单击“确定” 按钮完成链接管理设置

返回 6.3.2使用站点缓存 • 选择“站点”菜单中的“编辑站点”选项，弹出如图6-26所示“编辑站点”对话框。图6-26管理站点对话框 • 选择此对话框中的按钮，弹出 “wangye站点定义为”对话框。 • 选择“高级”选项，在分类列表中选择“本地信息”，如图6-27所示。图6-27定义站点 • 选中 “启用缓存”复选，单击“确认”铵钮完成站点缓存设置。

6.4创建导航栏 导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。使用“插入导航条”命令之前，须首先为各个导航项目的显示状态创建一组图像。（可将导航条项目视为按钮，因为单击它时，导航条项目将用户带到其它页面。

6.4.1插入导航栏 • 选择“插入”→ “交互式图像”→“导航条”选项；或直接单击“插入”面板中“常用”选项的图标，弹出如图6-28所示的“插入导航条”对话框。图6-28导航条对话框 • 在“项目名称”文本框中，键入导航栏项目的名称。每一个项目都对应一个按钮，该按钮具有一组状态图像，最多只有四种状态。项目名称在“导航条项目”列表中显示。用箭头按钮▲向上或使用▼在列表中向下排列项目的导航条中的位置。 • 单击按钮，依资助选择状态图像、鼠标经过状态、按下状态以及按下时鼠标经过图像各个状态时显示的图像。 “状态图像”为必需项，其他图像状态选项为可选项。

6.4.1插入导航栏 • 在“替换文本”文本框中，输入当浏览不支持导航栏项目的描述性名称。替换文本将替代图像出现在应显示图像的位置。 • 选择 “预先载入图像”复选框，可在载入页面时下载图像。若未使用此选项，当用户鼠标指针滑过鼠标经过图像时可能会能会出现延迟现象。 • 选择 “页面载入时就显示“鼠标按下图像”复选框，可在显示页面时，以按下状态显示所选导航栏项目，而不是以默认的一般状态显示。 • 在“插入”弹出式菜单中，可选择在文档中导航栏项目的样式，是垂直插入还是水平插入。 • “使用表格”复选框，可以表的形式插入导航栏项目。 • 完成导航栏项目的放置后，单击 “确定”按钮。

返回 6.4.2编辑导航栏 • 在创建好导航栏的基础上，单击“修改”菜单中的“导航条”选项，弹出如图6-29所示的“修改导航条”对话框。图6-29修改导航条 • 其修改导航栏窗口与创建导航栏窗口相同。在“导航栏项目”列表中，选择要编辑的项目。根据需要进行更改。 • 完成导航栏项目的修改后，单击“确定”按钮。

第 6 章 链接和导航