第六讲 超级链接
当用户定义了一个 Dreamweaver站点
并创建了 HTML页面之后,一定希望在
各文档之间创建链接关系,以实现正
常的网站链接功能。 Dreamweaver系
统提供了多种方法创建超级链接,例
如,文字链接、图象链接、锚点链接、
电子邮件( E-mail)链接、插入 FLASH
对象、按钮的链接等等。下面介绍关
于网站链接的有关知识。
主要内容:
一、文档位置与路径
二、站点地图
三、介绍使用 Dreamweaver MX创建
各种链接的方法 (在介绍各种方法的
同时顺便举例说明 )
四、测试链接 (在浏览器中进行 )
五、本节小结
六、作业
文档位置与路径
在创建链接之前首先应该了解链接
文档之间的的文件路径,因为链接的
目标是创建链接的基础。每一个 Web
页面 都有一个 唯一的地址,称做 URL
( Uniform Resource Locator)。但
是,当我们创建本地链接(链接文档
在同一站点中)时,一般不需要指定
链接文件的完全 URL地址,而是指定
一个相对的路径。
一般常见的有 3种链接路径:
? 绝对路径:是包含服务器协议(对于大多数网页
来说是超文本传输协议,http://)开始到文档的
完全路径。例如:
http://www.macromedia.com/support/dreamwe
aver/contents.html。
? 相对路径:是指在 同一站点 下的文档和当前文档
所在的文件夹相对的路径。例如:
dreamweaver/contents.html
? 基于站点根目录相对路径:提供一个从站点根目
录文件夹开始到文档的路径。它使用, /”符号作
为前导符,它代表站点的根目录。例如:
/support/dreamweaver/contents.html
关于使用文档链接路径的几点说明:
1、如果链接文档在另一个服务器上,就必须使
用绝对路径。
2、如果插入一个远程服务器上的图像文件,也
必须使用绝对路径。而这样在文档中查看不到
插入图像的内容,必须通过浏览器进行预览。
3、如果链接文档在本地计算机的另一个站点,
就必须使用基于站点根目录的路径使用, /”为
前导符。
4、如果链接的各个文档在同一站点中,可以使
用相对路径。 (重点掌握相对路径的表示)
相对路径表示的特例:
? 要链接同一目录下的文件,只输入文件名
就可以。
? 要链接当前文档目录的子(下一级)目录
中的文档,要提供子目录的名称,然后加
上, /”,然后加上文件名。
? 要链接到当前文档目录的父(上一级)目
录中的文件,要在文件名之前加上,,./”,
其中,,.”表示当前目录的上一级目录。
下面来看一个例子,在本地机上创建了一个
站点,站点根文件夹是 chm。
chm (站点根文件夹)
index.htm (主页)
support
contents.htm
hours.htm
resources
tips.htm
catalog.htm
当前文







构※
举例:如图所示
当前站点结构。
当前文档
contents.htm
product
在上图中,要在当前文档 contents.htm链接到其它的
文档上,有以下几种情况:
? 链接到 hours.htm文件上,这两个文件 位于同一目录
下,则文件名就是相对路径, hours.htm”。
? 链接到 tips.htm文件上,该文件 位于下一级子目录
,resources”中,则相对路径为:
resources/tips.htm,,/”表示下降一个目录层级。
? 链接到 index.htm主页文件,该文件 位于当前文档的
父目录中,则相对路径为,../index.htm,,../”表
示移动到上一级目录层级。
? 链接到 catalog.htm,该文件 位于当前文档的父目录
中的另外一个子目录中,相对路径
为,../products/catalog.htm.
站点地图
一)、什么是站点地图?
定义:站点地图用于以链接图标视觉地图的形
式查看 Dreamweaver 站点的本地文件夹;
注意,1,站点地图仅适用于本地站点。
2、可以将站点地图保存为图像。
3、创建站点地图,先要设置主页。
二)、如何使用站点地图
1、在站点地图中创建和修改链接 。
创建链接的方法:
使用站点地图和, 点到文件, 图标链接文档:
1)展开, 站点, 面板,然后通过按下, 站点地
图, 图标并选择, 地图, 和, 文件,,同时
显示, 站点文件, 和, 站点地图, 视图。
2)在站点地图中选择一个 HTML 文件。
3)在该文件旁边出现, 点到文件, 图标。
4)拖动, 点到文件, 图标,并指向站点地图中
另一个文件,或者指向, 站点文件, 视图中
的某个本地文件。
5)释放鼠标按钮。
6)名称为所链接文件名称的超文本链接被置于
所选 HTML 文件的底部。
修改链接的方法:
1)在站点地图中,选择要更改的链接的页面,选择
,站点, /“更改链接, 。
2)通过浏览找到希望链接指向的文件,或者键入
URL,单击, 确定, 。
删除链接的方法:
在站点地图中选择该页,然后选择, 站点, /“删除链
接,,删除链接不会删除该文件,但会从指向该链
接的页面上的 HTML 源代码中删除该链接。
2、查看站点地图中的另一分支,请执行以下操作:
选择要查看的页,然后选择, 视图, /“作为根查看, 。
网站中链接有多种形式,如链接到文件或
HTML文档上、链接到同一窗口的指定位置
上、链接到 E-mail信箱上等,下面就介绍使
用 Dreamweaver创建链接各种方法。
一、文字链接
在文档内创建文字链接的操作步骤:
1)、选择要创建链接的文字;
2)、在属性面板对话框中的链接( Link)
文本框中输入要进行链接的路径,或者单
击文件夹图标 进行浏览选择文档。
创建链接
注意:为文字创建了链接以后,属性面板中的
【 目标 】 下拉列表是可用状态,有 4个选项:
? -blank:表示打开一个新的浏览器窗口,在新
窗口中显示链接所指向的网页文档内容。
? -parent:回到上一级(父框架或称为父窗口)
的浏览器窗口,显示链接所指向的网页文档内
容。(在框架中应用)
? -self:在当前的的浏览器窗口显示链接所指向
的网页文档内容。此目标为默认值,因此通常
不需要指定它。
? -top:在整个浏览器窗口中载入所链接的文档,
也就是说,整个浏览器窗口来显示链接所指向
的网页文档内容。
二、图像链接
在文档中给图像添加链接,使其指向其他
的网页或者文档,这就是图像超级链接。
操作步骤:
1)、在文档窗口中选定图像。
2)、然后在属性面板对话框中的链接
( Link)文本框中输入要进行链接的路径,
或者单击文件夹图标 进行浏览选择文
档。
注意:图像链接不像文本链接那样,会发生
许多提示性变化,图像本身不会发生改变,
只是鼠标指针指向链接时变成, 手, 形。
三、电子邮件链接
每一个网站都会有一个或者一个以上的电子
邮箱,用来收取用户的反馈信息。创建电子
邮件( E-mail)的链接与一般的文本链接不
同,创建的方法有以下两种:
方法一,在属性面板中创建,操作步骤如下:
1)、选定文档窗口中的文本或图像等对象。
2)、在属性面板对话框中的链接( Link)文
本框中输入, mailto:邮箱地址, ( mailto
是电子邮件链接中的关键字)
方法二:利用插入栏中的常用面板进行添
加 E-mail。操作步骤如下:
1)、选定文档中要添加电子邮件链接的
文本。
2)、单击插入栏中的常用面板中的插入
电子邮件按钮,打开如下对话框:
pschm888@163.com
3),【 文本 】 栏中显示的是我们在文档中所
选定的文本,【 E-mail】 栏内必须输入邮箱
的地址(注意:地址必须完整,不能有任何
的错误,否则无法正常发送信息)。
4)、输入邮箱地址后,确认无误,则单击
,确定, 按钮,一个电子邮件链接就创建好
了。
★ 电子邮件链接的功能,在网页中点击带, 电
子邮件, 的文本,将自动启动浏览器的端的
电子邮件管理软件并 创建一个新邮件,并自
动在收件人的地址栏中设置网站的 E-mail地
址,浏览者按这个地址发送反馈意见。
四、锚点链接(命名标签链接)
问题的提出,有时网页的内容很长,需要
上下拖动滚动条来查看文档内容,经常会
为了找其中一个主题,不得不将整个文档
内容浏览一遍,这样,就很浪费时间。利
用 Dreamweaver中的锚点功能,可以避免
以上的麻烦,可以准确快速地找到文档中
的主题信息。
具体的思路是,事先在文档中制做标记,
然后创建链接指向这个标记,当点击这个
链接,就可以达到目的。
创建锚点链接的操作步骤:
1)、打开需要加入锚点的文档。
2)、光标单击要进行命名锚(记)点的位置。
3)、单击, 插入, 菜单中的, Named Anchor”
(命名锚(记)点)命令;(或单击插入栏中的
常用面板中的选择 按钮)。弹出以下对话框:
4)、在上面的对话框中输入锚点的名称。(注意:
取名时可以使用所有的数字和英文字母,但不支
持中文命名,同时,命名有区分大小写的。)单
击, 确定, 按钮。
[以上 4步是命名锚点,下面两步是创建指向锚点的
链接。 ]
5)、在文档中选定要创建链接的文本或图像。
6)、在属性面板中的, Link”域中输入符号, #”和
锚点名称(书签名)。
说明,如果要把选定的文本或者图像,链接到同一
文件夹下的其他网页文档中的, 锚点名, 则需要
输入, 文件名,htm#锚点名, 。
五、鼠标经过图像的链接
1、创建鼠标经过图像的链接需准备图像的两
种状态(应先准备大小相同的两幅图像):
? 原始状态:在网页中的正常显示状态。
? 变换图像:当鼠标指针经过或者按一下图像
按钮时的变化图像。
2、创建鼠标经过图像的链接的操作步骤:
1)、将光标移至要添加按钮的位置。
2)、单击, 插入栏, 中的常用面板中的
按钮,打开, 插入鼠标经过图像, 对话框,
如下图所示。
3)、分别在上面的对话框中输入图像的文件名、两
个状态的图像文件的路径;在 【 按下时,前往的
URL】 栏内输入指向网页的路径名,然后单击, 确
定, 按钮,则完成了设置工作。
其它选项,如果您希望图像预先载入浏览器的缓存中,
以便用户将鼠标指针滑过图像时不发生延迟,请选
择, 预先载入图像, 选项(选定);在, 替代文本,
中,输入描述该图像的文本。(可选)
六、热区链接
热区链接(或称为图像热点、或图像映射)
指的是在单幅图像中建立多个不同的超级
链接。创建的方法:
1)、在文档中选中一幅图像。
2)、打开属性面板,选择不同的工具(方形、
圆形、多边形)创建热点,并分别在链接
框中输入每个热点的 URL,在 Alt框中可以输
入中文,以提示的方式在浏览器中显示。
3)、重复以上步骤定义完所有的热点。
七、空链接
1、什么是空链接? ------所谓空链接是未指定
链接对象的链接。
2、空链接有什么作用? ------使用空链接通常
是为了激活页面中的文本或对象,一旦文本
或对象被激活,就可以给它附加一个行为动
作,生产特殊的效果,例如:当鼠标移过该
链接时,交换一幅图像或显示一个层等。
3、创建空链接的操作方法:
1)、在档窗口中选择一段文本或一幅图像。
2)、在, 属性, 面板中的, 链接, 栏中输入
,#”。
八、其他类型的链接创建
1、插入 Flash文本
插入 Flash文本功能是 Dreamweaver 4以上版本的新
增功能,我们不必在 Flash软件中制作动画,而是可
以直接使用, 插入 Flash文本, 功能,就能够直接插
入具有动画效果的文本了,但注意,它不支持中文 。
具体的操作步骤如下:
1)、把光标移到要插入 Flash文本的位置。
2)、单击, 插入, 栏中的, 媒体, 面板中的 按
钮,打开, 插入 Flash文本, 对话框,如下图:
在此窗口中
输入文本
3)、在上图的, 文本, 窗口中输入文本,
并将下方的, 显示字体, 复选框勾选,
回在窗口中显示相应的字体。
4)、然后分别设置文本的字体、大小、颜
色、翻转颜色和排列方式等项。(注意
,颜色, 和, 翻转颜色, 两项非常关键,
Flash文本的变换主要体现在颜色的变化
上,因此这两项的颜色要有明显的对比
和反差,不能选取近似的颜色。)
5)、在, 链接, 栏内设置文本所指向的网
页或文档。
6)、设置完其他的参数,单击, 确定, 按
钮,关闭对话框,Flash文本就添加到网
页中。
2、插入 Flash按钮
此项功能也是 Dreamweaver4以上版本新
增的。直接利用 Dreamweaver添加 Flash
动画按钮,而不必在 Flash软件中制作动
画,便可将 Flash按钮插入到网页中。
具体操作步骤:
1)、把光标移到要插入 Flash按钮的位置。
2)、单击, 插入, 栏中的, 媒体, 面板中
的 按钮,打开插入, Flash按钮, 对
话框,如下图所示。
3)、在上图的对话框的 【 样式 】 下拉列表
中选择需要的按钮。
4)、在 【 按钮文本 】 栏内输入需要在按钮
中显示的文字 (同样不支持中文) 。
5)、在 【 链接 】 栏内输入该按钮指向的网
页文档的路径,一般采用相对路径。
6)、设置完其他的参数,单击, 确定, 按
钮,关闭对话框,Flash按钮就添加到网
页中。
3、创建跳转菜单
跳转菜单是文档中的一种下拉菜单,在下
拉菜单中列出各种能够链接到其它文档的选
项。
创建跳转菜单的操作步骤:
1)、打开一个文档,将光标定位到插入跳转
菜单的位置。
2)、选择, 插入栏, 中的, 表单, 面板中的
跳转菜单( Jump Menu)命令按钮,打
开插入跳转菜单对话框,如下图所示:
插入跳转菜单对话框
3)、单击 按钮,添加一个菜单项目。
4)、选择菜单项目,使用 这两个按
钮调整该菜单项目在列表中的位置。
5)、在, 文字, 框中输入菜单项目的内容。
6)、在, 选择时,前往的 URL”的文本框中
设置该菜单项目链接的文件。
7)、在, 打开 URL”下拉列表中选择打开文
档的位置。
8)、选择, 选项中的第一个复选框,,将
添加一个, 前往, 按钮。
9)、选择第二个复选框,在改变 URL时选
择菜单的第一个选项。
10)、设置完毕单击, OK”确定。
4、创建导航条链接
网站中经常使用导航条,通常显示在网站
的各个页面中,浏览者可以随时能够利
用它链接到其他的页面。
导航条的元素是图像,所以在创建导航
条之前,应该先创建一系列的图像,以
显示导航条元素的状态。可以将导航条
中的元素看作是一个按钮,因为单击它
时会打开另外一个页面。
导航条元素可以包含四种状态。(所以每
个元素对应有四个图像)
创建导航条的操作方法:
1)、打开一个文档,将光标定位到插入导航
条的位置。
2)、选择, 插入栏, 的导航条( Navigation
Bar)命令按钮,打开插入导航条对话
框,如下图所示:
3)、按照图中的参数进行设置,设置完成后
单击, OK”按钮,导航条插入即完成。
与链接有关的内容就介绍这么多,
大家将这些基本的功能掌握了,
就可以保证制作的网页具有良好
的关联性。
本节小结
本节主要知识点 1:超级链接( Link)。
所谓超级链接,简称链接,是页面与页面之
间一个单向的关联关系,通过点击链接,我
们可以从一个页面跳到另一个页面。
知识点 2:文档位置与路径。通过准确判断
文档的位置,从而使用正确的路径。
知识点 3:创建链接。
重点熟练掌握网页中的文字、图像链接、锚
点链接、邮件链接、热区链接、鼠标经过图
像、插入 Flash文本、插入 Flash按钮、空链接、
跳转菜单链接等。
作业
1、自拟主题创建若干个网页(其中有一
个是主页,其它是分支网页)。
2、在以上的网页中创建实现以下的链接
功能,并在浏览器中测试链接效果:
文字、图像链接、锚点链接、邮件链
接、热区链接、鼠标经过图像、插入
Flash文本、插入 Flash按钮、插入跳转
菜单。