1、网站开发与设计,1,三、超级链接与图像地图,网站开发与设计,网站开发与设计,2,要点,认识并理解超级链接掌握如何创建超级链接掌握管理链接掌握创建图像地图和使用导航条,网站开发与设计,3,超级链接概述（一）,超级链接创建与管理的方法超级链接由两个端点（也称锚）及一个方向构成。通常将开始位置的端点称作源端点（或源锚），而将目标位置的端点称作目标端点（或目标锚），链接就是由源端点指向目标端点的一种跳转。目标端点可以是任意的网络资源。超文本（Hypertext）和超链接（Hyperlink）,网站开发与设计,4,超级链接概述（二）,每个网页都有一个唯一的地址，称作统一资源定位器 (URL) 链接的路径
2、绝对路径：在链接中使用完整的 URL地址 相对路径：表述源端点同目标端点之间的相互位置 基于根目录的路径：所有的路径都是从站点的根目录开始,网站开发与设计,5,图例,创建demo目录下的chapter1.htm文档的链接，则可以使用如下的绝对路径：http:/ 在demo目录下创建指向chapter5.htm文档的链接，可以使用如下的相对路径：chapter5.htm。创建指向testsystem目录中的reading.htm 文档的链接，则可以使用如下的基于根目录的路径：/testsystem/reading.htm。,网站开发与设计,6,创建超级链接(一）,链接到其他文档或文件（在文档中可
3、链接到html文件、图形、影片、PDF 或声音文件）：如图所示：选中“北京风光”文本，然后在属性面板的“链接”下拉列表中输入文件名及其所在相对路径：bjfg.htm”，创建一个到文件bjfg .htm 的链接，在“目标”下拉列表中选择“_blank”,网站开发与设计,7,创建超级链接(二）,命名锚记链接：此类链接跳转至文档内的特定位置示例：选好插入点，点击插入面板组中常用面板上的“命名锚记”按钮，弹出如图所示的对话框。在其中的“锚记名称”文本框中输入名称“songqingling”，单击“确定”按钮，这时在选中的插入点位置就出现了一个锚的标志。,网站开发与设计,8,创建超级链接(三）,电子邮件
4、链接：此类链接新建一个收件人地址已经填好的空白电子邮件 在“文档”窗口的 “设计”视图中，将插入点放在希望出现电子邮件链接的位置，或者选择要作为电子邮件链接出现的文本或图像。选择“插入”栏中的“常用”选项卡，然后单击“插入电子邮件链接”按钮。出现“电子邮件链接”对话框如图。完成此对话框的相关内容，单击“确定”即可插入电子邮件链接。,网站开发与设计,9,创建超级链接(四）,空链接和脚本链接：此类链接使您能够在对象上附加行为，或者创建执行脚本代码的链接。空链接是未指派的链接。 空链接设置方法：在属性面板中的链接选项中输入代码“javascript:;”在“链接”文本框中键入 javascript:
5、alert (This link leads to the index)，可生成这样一个链接：单击该链接时，会显示一个含有消息 This link leads to the index 的 JavaScript 警告框。,网站开发与设计,10,管理链接,启用链接管理 使用站点地图,网站开发与设计,11,使用站点地图添加链接,在站点地图中选择一个 HTML 页面，选择“站点”菜单下“链接到已有文件”，在弹出的“选择HTML文件”对话框中选择目标文件；或在站点地图中选择一个 HTML 页面，出现“点到文件”图标，将此图标拖动到想要链接的对象上（可以是“站点文件”视图中的文件、打开的 Dreamwe
6、averMX 文档，也可以是桌面上打开文档中的命名锚记）。,网站开发与设计,12,使用站点地图更改链接,在站点地图中，选择要更改的链接所指向的页面（以便当前链接到此页面的文档指向其他页面），然后选择“站点” 菜单下“改变链接”，或右击，然后从上下文菜单中选择“改变链接”。通过浏览找到希望链接指向的文件，或者键入 URL，单击“确定”。,网站开发与设计,13,使用站点地图删除链接,在站点地图中选择该页，然后选择“站点” 菜单下“移除链接”，或者在站点地图中选定该页，右击，然后从上下文菜单中选择“移除链接”。移除链接不会删除该文件，但会从指向该链接的页面上的 HTML 源代码中删除该链接。,网站开
7、发与设计,14,使用站点地图打开链接源,在站点地图中选择一个文件，然后选择“站点” 菜单下“打开链接源”，右击，然后从上下文菜单中选择“打开链接源”。在“文档”窗口中打开属性检查器和含有此链接的源文件，同时该链接以高亮显示。,网站开发与设计,15,使用站点地图在整个站点范围内更改链接,除了当移动或重命名文件时让 Dreamweaver MX自动更新链接外，我们还可以手动更改所有链接（包括电子邮件链接、FTP 链接、空链接和脚本链接），以指向其他位置。若要在整个站点范围内更改链接，则在“站点”面板的“本地”视图中选择一个文件（如果更改的是电子邮件链接、FTP 链接、空链接或脚本链接，则不需要选择
8、文件）。 选择“站点”菜单下“改变站点范围的链接”。出现“更改整个站点链接”对话框 ，完成此对话框的相关内容。单击“确定”。,网站开发与设计,16,创建图像地图,图像地图是作为导航设备使用的图像。使用图像地图，可以在单个图像中创建多个热点（可单击的区域）并使每一个热点链接到一个不同的要打开的 URL 或文件。也可以设置链接文档的打开位置 。,网站开发与设计,17,使用导航条,导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。,网站开发与设计,18,上机指导,目的：熟悉超级链接设置的基本操作命令与操作方法。要求：制作一个应用
9、超级链接的网页（效果如下页图所示）。操作前准备：使用Dreamweaver MX建立自己的站点，仔细学习相关理论知识，包括如何在网页中添加指向其他页面的超级链接、为图片添加超级链接以及设置页面属性和文字的排版等。,网站开发与设计,19,网站开发与设计,20,上机练习,新建一个主页，页面属性设置如下：标题为“上机练习”，背景为#FFFFCC，访问过的链接为#993300，链接为#0000FF，活动链接为#FF0000。然后在页内填加内容，设置相应的超级链接（完成接下来的项目），完成后效果如下页图所示。在页面顶端设置一个命名锚记链接，用来快速返回到页面顶端；在介绍文字的标题处分别插入两个命名锚记链
10、接，设置一个返回到页面顶端的链接（使用命名锚记）。填加网页内容，标题设置大小为“6”，居中对齐。其他文字为默认。插入图片设置为右对齐（图片及文本内容由老师提供）。加入一个“友情链接：今日中国”的链接，用来在一个新的窗口打开“今日中国”网站（http:/）。添加“请联系我”内容，设置一个电子邮件链接到你自己的邮箱。填加一个空链接，用来进行行为方面的设置（在以后的章节我们会具体应用）。练习管理所建链接。,网站开发与设计,21,网站开发与设计,22,【课后习题】,超级链接主要有哪几种？如何设置超级链接？ 如何管理超级链接？利用上机指导与上机练习熟悉超级链接的创建和管理方法。如何创建图像地图？利用图像地图，请设计一组所在单位的平面图示意说明网页。,
