给文本和图像添加超链接

实验7 给文本和图像添加超链接

实验要求

通过实验，理解链接的概念。熟悉掌握如何给文本和图像添加超链接，如何添加邮件链接和创建锚记链接。

说明：站点是由繁复的链接组成的。因为媒体的其他元素都可以按另一种形式进行

复制，但是如果没有了链接，也就不会有万维网。通常，网页设计者需要为短语、单词或者一个图片设置链接，链接到想要到达的地址。一旦用户创建了链接，就可以在浏览器中预览它，实现在网络上的跳转。

对应知识点：

●给文本和图像添加超级链接

●添加邮件链接

●创建锚记链接

对应《Macromedia Dreamweaver MX 2004 标准教程》第6章的内容。

实验课时：2课时

实验素材

图像和文字制作完成的网页（可在本书配套光盘exp7\sucai07文件夹中找到相关素材）。

实验步骤

1.启动Dreamweaver MX 2004程序，选择菜单“文件” “打开”命令，弹出“打开”

对话框。在对话框中，选择本书配套光盘exp7/sucai07文件夹中的网页文件page07.htm。

如图7-1所示。

2.单击“按钮”，打开网页文件编辑窗口。如图7-2所示。

图７－１“打开”对话框

图７－２page07.htm网页编辑窗口

说明：此网页主要使用图像和文件制作完成。其中大量使用了表格布局，读者可以打开网页进行分析，回顾关于图像、文本等实验的学习。

3.首先需要创建本地站点。选择菜单“站点”→“管理站点”命令，打开“管理站点”对

话框。选择“新建”→“站点”命令，打开“站点定义”对话框。

4.在对话框“站点名称”编辑框中输入“广西行”，单击“本地根文件夹”和“默认文件

夹”后面的文件夹，选择网页和图像的位置，确定后如图7-3所示。

5.单击“确定”按钮，返回“管理站点”对话框。新建站点名称“广西行”显示在站点列

表中。如图7-4所示。

图7-3“站点定义”对话框

图7-4“管理站点”对话框

图7-5 文件面板

6.单击“完成”按钮，本地站点创建完成。

Dreamweaver MX 2004将自动打开“文件”面板，

定位到当前站点下。如图7-5所示。

7.在打开的“page07.htm”文件上制作文字链接。拖动鼠标，选中“我们的宗旨”图像下

的第1个小标题“关于广西的介绍”。

8.单击属性面板“链接”编辑框右侧的“指向文件”按钮，拖动鼠标时从“指向文件”

图标上会延伸出一条直线，当定位到需要链接的文件（page07-2.htm）后，释放鼠标按钮。文件名和路径信息就会自动显示在“链接”文本框内。如图7-6所示。

图7-6 使用“指向文件”按钮制作文本连接

文件夹，因为现在它们都必须清楚地显示在文件面板上。当然，用户可以指向另一个打开的Dreamweaver窗口中的一个文件，或者同一个窗口中另一个框架中的文件。如果用户需要的链接是一个命名锚，它位于页面的底部。则Dreamweaver 会自动滚动来寻找它。用户

甚至可以指向另一个页面的命名锚。

9.当然，用户也可以单击“浏览文件”按钮

选择需要链接的文件“page07-2.htm”。

如图7-7所示。

10.单击“确定”按钮，文件路径和名称显示

在“链接”文件框内。

用户可以改变文档链接的颜色和下滑线状态，在前面实验关于“页面属性”中已有介绍。单击属性面板上的“页面属性”按钮，在“链接”框内可以设置链接的颜色和下划线等状态。如7-8所示。

11.双击“推出单位”下的第1个名称，选中文字。在属性面板“链接”编辑框内输入此单

位的网址（这里假设为）。在目标下下拉列表中选择"-black"选项。

如图7-9所示。

图7-8在“页面属性”连接框内设置连接状态

图7-9制作网站链接

图7-10制作电子邮件连接

说明需要注意在制作网站链接时，需要在网址前面加上”http://”。在”目标”下拉列表中有4个选项分别为：-blank在新的未命名的窗口中显示被连接的文档；-parent：在父框架集中显示被连接的文档；-self这是系统默认的设置，是在与该连接相同的框架和窗口中显示

被连接的文档；-top在整个浏览器窗口中显示被连接的文档，同时删除原浏览窗口中的内容。12。在网页的右下方的”联系方式”栏目中，创建E-mail(电子邮件)连接。拖动鼠标选中E-mail地址，在属性面板“连接”编辑框中输入“mailto:guangxixing@”。如图7-10所示。

说明电子邮件链接用来方便浏览者与网站设计者之间的沟通。当浏览者点击电子邮件

链接时，系统自动打开浏览器默认的电子邮件处理程序。还有一

种创建电子邮件链接的方式，在常用面板上，单

击“电子邮件链接”按钮，打开“电子邮件链接”

对话框。在其中输入“文本”（显示在网页中的

文字）和“E-mail”（电子邮件地址），确定后

即可完成电子邮件链接。如图7-11所示。

13. 图像的链接方法与文本类似，例如，用户可选中“我们的宗旨”图像，在属性面板“链接”编辑框内输入“page07-3.htm”，即可完成图像链接。

说明在设置图像链接时需要注意，属性面板中的“边框”项通常设置为0，这是因为如果边框属性存在的话，链接图像通常会显示一个蓝色边框，有可能影响图像效果。14. 在“我们的宗旨”第1条标题处右击，显示快捷菜单，选择“打开链接页面”命令，即可跳转到链接的网页“page07-2.htm”。

说明应用锚点链接可以将文档中的文本或图像链接到同一文档的其它位置，也可以链接到不同文档中指定的位置，使浏览者能够迅速浏览指定的位置。在创建锚点链接前，要先设置锚点。

15. 打开page07-2.htm之后，将光标定位在“景点推荐”内容部分的标题前，单常用面板

的“命名锚记”按钮，在“命名锚记”对话框的“锚记名称”编辑框中输入“锚记1”，如图7-12所示。

16. 单击“确定”按钮，在标题前显示一个锚记图标，如图7-13所示。

17. 制作第1行“景点推荐”标题锚记链接。选中“景点推荐”标题名称，在属性面板“链接”编辑框内输入“#锚记1”。

说明选中锚记图标，在其属性面板呵以修改锚记名称。

图7-12“命名锚记”对话框