超链接设置.docx

超链接设置.docx

《超链接设置.docx》由会员分享，可在线阅读，更多相关《超链接设置.docx（13页珍藏版）》请在冰豆网上搜索。

超链接设置

教案

《网页设计与制作》教案序号：

5

本次课程备课笔记

网页链接

超链接是WWW的魅力所在。

为了把Internet上众多分散的网站和网页联系起来，构成一个有机的整体，就要在网页上加入链接。

通过简单地点击网页上的链接，用户就可以在信息海洋中尽情遨游。

超链接的分类，如图2.26所示。

下面将通过一些小例子讲述锚记链接、站点链接、图形热点链接等内容，同时结合【文件】面板，介绍一些创建链接的高级技巧。

图2.26超链接的种类

一、相对路径和绝对路径

先看最传统的链接创建方法。

如果要给文字或图像创建链接，应先将文字或图像选中，直接在如图2.27所示的【链接】下拉列表框中输入要链接的网页文件路径和名字即可。

图2.27链接下拉列表

单击【属性】面板中链接框旁的【浏览文件】图标，打开【选择文件】对话框，从中选择要链接的网页也可创建链接。

【选择文件】对话框下面有【相对于】下拉列表框，里面有【文档】和【站点根目录】两项，如图2.28所示。

【文档】表示以文档相对路径方式链接；【站点根目录】表示以根绝对路径方式链接。

相对路径与绝对路径是非常重要的概念，一定要掌握它们之间的区别。

1.绝对路径

绝对路径是包括服务器协议（在本例中为HTTP协议）的完全路径，比如“网虫乐园——软件大观园”，绝对路径为“

图2.28【选择文件】对话框

2.相对路径

相对路径又可分为与根目录相对的路径和与文档相对的路径两种。

在本地磁盘上编辑网页时，需要选定一个文件夹来定义本地站点，模拟服务器上的根文件夹，系统就根据这个文件夹来确定所有链接的本地文件位置，而根相对路径中的根就是指这个文件夹。

提示：

根相对路径（也称相对根目录）的路径以“/”开头，路径是从当前站点的根目录开始计算。

例如D盘myweb目录就是名为“myweb”的站点，这时“/index.htm”路径就表示文件位置为D:

\myweb\index.htm。

根相对路径适用于链接内容需频繁更换的文件，这样即使站点中的文件被移动了，其链接仍可以生效。

如果目录结构过深，在引用根目录下的文件时，用根相对路径会更好些。

例如某一个网页文件中引用根目录下img目录中的一个图，在当前网页中用文档相对路径表示为：

“../../../../../img/a.gif”，而用根相对路径只要表示为“/img/a.gif”即可，其关系如图2.29所示。

图2.29相对路径与绝对路径

注意：

在预览文件时，用根相对路径链接的内容在本地浏览器中不会显示出来。

这是因为浏览器不承认站点的根文件夹为服务器。

文档相对路径是指包含当前文档的文件夹，也就是以当前网页所在文件夹为基础开始计算路径。

例如，当前网页所在位置为D:

\myweb\mypic，那么“a.htm”就表示D:

\myweb\mypic\a.htm。

“../a.htm”相当于D:

\myweb\a.htm，其中“../”表示当前文件夹的上一级文件夹。

“img/a.gif”是指D:

\myweb\mypic\img\a.gif，其中“img/”意思是当前文件夹下名为img的文件夹。

文档相对路径是最简单的路径，一般多用于文档保存在同一文件夹中或者拥有相同的上层目录的情况。

二、制作链接

1．创建文字链接

以文字作为媒体的链接称为文字链接，是网页中最常用的链接方式，具有制作简单和维护简便的特点。

Dreamweaver中，在文档窗口选择文本或图片后，可以用下列方法之一建立超链接。

●用链接属性面板上【链接文本框】的

按钮拖动到所要链接的对象。

●在【链接文本框】中单击文件夹按钮查找相关的链接等。

●使用【修改】|【创建链接】命令来制作到某个文件的链接。

●选择插入栏中的【常用】选项卡，单击

按钮，通过弹出的【超级链接】对话框进行设置。

2．使用指向文件图标创建链接

在【属性】面板的链接框旁有一个【指向文件】图标

，称为文件定位图标，利用这个图标可以迅速创建超链接。

使用【指向文件】图标创建链接的具体方法如下：

（1）在文件窗口内选中要创建超链接的文字，例如选中图中的“网页编程”。

（2）用鼠标拖动【属性】面板上的【指向文件】图标

，鼠标指针从图标处引出一条线。

图2.30创建链接

（3）拖动文件定位图标到【文件】面板上的网页文件上时，文件外显示一个黑框，表示可以创建链接。

（4）将鼠标指针移到所对应的文件上，释放鼠标，链接就完成了，如图2.30所示。

技巧：

制作链接也不一定非得用【指向文件】图标，Shift键也可以帮助用户直接创建链接。

只要选中编辑窗口中的文字或图形，然后按Shift键，再拖动鼠标选取的项目到【文件】面板中，同样可以快速创建超链接。

3．创建图形热点链接

在图2.31所示的网页中，单击网页上的各个椭圆环，会弹出不同的窗口。

图2.31创建图形热点链接

它的制作其实很简单，在图形中创建一些热点（也称为影像地图），并在每个热点上建立相应的链接就行了。

创建图形热点链接的方法如下：

（1）在文档中插入1幅可做热点链接的图。

选中该图片，可以看到【属性】面板的左下部有创建热点工具的几个按钮，分别为矩形工具、圆形工具和多边形工具，如图2.32所示。

图2.32【属性】面板中创建热点工具的按钮

（2）单击【属性】面板中的【椭圆到热点工具】按钮，然后在图片上单击鼠标并进行拖动，画出一个矩形，最好比图中的字大一点。

释放鼠标后，热点创建完毕，呈浅蓝色。

（3）单击【属性】面板中的【指针热点工具】按钮

，调整热点的位置，使它刚好将图中的字遮盖。

（4）用鼠标拖动【属性】面板上的【链接】文本框右侧的【指向文件图标】到【文件】面板上的网页文件上，然后释放鼠标创建一个热点链接。

（5）用同样方法，可以给其他几个图片创建热点链接。

所有热点创建完成之后的网页如图2.33所示。

图2.33创建热点

4．创建链接到命名锚记

命名锚记是指标记在文档中指定的特定位置的标志。

例如一个文档有很多要点，滚动条下翻好几页才能看到。

这时可以在其他页的相关主题里添加命名锚记，在第一页里加上这些命名锚记的链接，如果想看这个文档的其他部分，单击这些链接，就可以直接跳到指定的位置上，而不需拉动滚动条去查找所要阅读的内容。

使用命名锚记，可以跳转到当前文档或者其他文档的标记位置上，特别适用于多页面分类。

做命名锚记首先要设置一个锚记，然后建立到锚记的超链接。

设置锚记的方法如下：

（1）在文档窗口中，把光标置于要设置锚记的位置。

（2）打开【插入】面板，单击【常用】面板上的【命名锚记】按钮

，如图2.34所示。

图2.34设置锚记

（3）在弹出的对话框中输入锚记名字，如图2.35所示。

单击【确定】按钮完成设置。

图2.35命名锚记

注意：

锚记的名称只能用英文，且区分大小写。

锚记属于不可见元素（InvisibleElements），如果锚记标记没有出现在插入点，选择【查看】|【可视化助理】|【不可见元素】命令，就会显示不可见元素。

（4）重复上面的步骤可以设置多个锚记。

（5）接下来就是建立锚记链接。

在文档窗口中选择要建立链接的载体，在【属性】面板上的链接文本框中输入：

“#+锚记名”，如图2.36所示。

图2.36建立锚记链接

提示：

如果要指向不同的网页，在链接文本框中需输入“URL+#+锚记名”。

5．创建E-mail链接

选择对象面板上的【常用】选项，然后单击

按钮。

打开对话框，输入文本和E-mail地址即可建立链接。

或者直接选择文本在【属性检查器】中输入mail-to:

Dreamewaver@。

单击E-mail链接可启动用户的E-mail客户端软件，如OutlookExpress或者Foxmail，并创建空白的新邮件，供浏览者撰写内容与网站联系人联络。

6．无址链接

无址链接是只具有链接的外观，不会跳转到其他任何位置上的链接。

例如在多数的浏览器中，图像是不能识别onMouseOver事件的，对此，必须使用无址链接使普通图像变成图像链接。

而在DreamweaverMX2004中的交换图像行为，其实就是通过自动调用无址链接来实现的。

无址链接的设置步骤如下：

（1）选定文档窗口中的文本或图像对象。

（2）在属性检查器中的【链接】文本框里输入“#”，如图2.37所示。

图2.37链接文本框

7．脚本链接

脚本链接是指可执行JavaScript（或VBScript）代码或调用JavaScript（或VBScript）函数。

对于在不离开当前页面的情况下为用户提供更多的信息是很有帮助的。

脚本链接还可以用于用户单击执行计算、身份认证、表单以及其他处理的任务。

提示：

要验证链接的正确性，需要对链接进行测试以检查错误。

在DreamweaverMX2004窗口中，选择【文件】|【在浏览中预览】|iexplore命令，在IE浏览器中预览网页并测试链接。

三、预览链接效果

建立了链接之后，可以在浏览器中预览链接效果。

如图2.38所示，当鼠标滑过图中的文字“网页编程”时，浏览器的左下角即显示出链接地址，单击鼠标时，即可打开该页面。

图2.38在浏览器中预览链接效果

在网页中创建链接

链接（也称为超链接）是网页的灵魂，也正是网络的魅力所在。

为了把Internet上众多的网站和网页联系起来，构成一个有机的整体，就要在网页上加入链接。

通过点击网页上的链接，我们才能在网络信息的海洋中尽情遨游。

一个网站若是没有链接，就像一朵没有绿叶衬托的红花，平淡无味，功能尽失。

恰当的链接可以使网站增加不少色彩。

下面通过本次实训，将学会如何建立文本和图像的超链接，如何建立各种特殊链接，掌握导航条的建立方式等各种超链接的知识。

详见实训五。

实训五在网页中创建链接

实训目的和要求

一、实训目的

1．了解网页中几种不同的链接方式。

2．掌握几种链接的具体创建方法。

二、实训要求

1．掌握图像热点链接的创建方法。

2．掌握锚点链接的创建方法。

3．掌握邮件链接的创建方法。

4．掌握无址链接的创建方法。

三、时间分配

2课时

四、环境要求

DreamweaverMX2004

五、内容提要:

1．建立一个本地站点。

2．将给定素材和网页文件复制到新建文件夹中。

3．打开给定的网页并在其中创建链接。

4．保存网页。

5．建立被链接的其他网页。

6．预览网页。

六、教学重点与难点

1．图像的热点链接。

2．创建锚点链接。

实训内容与步骤

一、准备工作

在C盘或其他盘新建一个文件夹，作为站点文件夹。

输入你想要的站点名称，这里输入myweb5。

在此文件夹中复制给定的一个图像文件夹images和一个网页文件sx5.htm。

二、建立本地站点

用已学方法建立本地站点。

三、打开并编辑给定的网页文件

1．双击打开给定的网页sx5.htm，如图5.1所示。

图5.1给定网页内容

2．建立图像热点链接。

选中网页上方图像，利用属性面板中的热点工具在图像上建立两个热点，如图5.2所示。

从左到右两个热点分别链接到sx5-1.htm和sx5-2.htm文件（两个文件可稍后建立）。

图5.2图像热点及锚点位置

3．插入命名锚记。

将光标放在网页标题“教育天地”后，选择【插入】|【命名锚记】命令，在输入对话框中输入锚记“A0”。

依此方法在网页右侧文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”处分别插入命名锚记，依次为A1～A7。

如图5.2所示。

4．创建锚点链接。

分别创建左列目录文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”与右列命名锚记A1～A7的锚点链接。

然后再将各段下方的文本“返回”与标题处锚记A0建立锚点链接。

5．创建无址链接。

选中网页上方文本“教师篇”，在属性面板的链接栏中输入“#”即可。

6．创建邮件链接。

选中网页最后一行文本“联系”，然后在属性面板的链接栏中输入“mailto:

abc@”即可。

如图5.3所示

图5.3网页最后一行内容及邮件链接

四、保存网页

选择【文件】|【保存】命令，将此网页保存在站点中。

五、建立其他网页

1．新建一张网页，输入“名人看教育”，保存在站点中文件名为sx5-1.htm。

2．再新建一张网页，输入“教育话题”，保存在站点中文件名为sx5-2.htm。

六、站点测试

再次双击打开sx5.htm文件，按F12键在浏览器中预览，单击建立的每个链接，以测试超链接是否都能够正确跳转。