《给文本和图像添加超链接.doc》由会员分享，可在线阅读，更多相关《给文本和图像添加超链接.doc（10页珍藏版）》请在金锄头文库上搜索。
1、实验7 给文本和图像添加超链接实验要求通过实验，理解链接的概念。熟悉掌握如何给文本和图像添加超链接，如何添加邮件链接和创建锚记链接。 说明：站点是由繁复的链接组成的。因为媒体的其他元素都可以按另一种形式进行复制，但是如果没有了链接，也就不会有万维网。通常，网页设计者需要为短语、单词或者一个图片设置链接，链接到想要到达的地址。一旦用户创建了链接，就可以在浏览器中预览它，实现在网络上的跳转。 对应知识点：给文本和图像添加超级链接添加邮件链接创建锚记链接对应Macromedia Dreamweaver MX 2004 标准教程第6章的内容。实验课时：2课时实验素材图像和文字制作完成的网页（可在本书配
2、套光盘exp7sucai07文件夹中找到相关素材）。实验步骤1. 启动Dreamweaver MX 2004程序，选择菜单“文件”“打开”命令，弹出“打开”对话框。在对话框中，选择本书配套光盘exp7/sucai07文件夹中的网页文件page07.htm。如图7-1所示。2. 单击“按钮”，打开网页文件编辑窗口。如图7-2所示。图“打开”对话框图page07.htm网页编辑窗口 说明：此网页主要使用图像和文件制作完成。其中大量使用了表格布局，读者可以打开网页进行分析，回顾关于图像、文本等实验的学习。3. 首先需要创建本地站点。选择菜单“站点”“管理站点”命令，打开“管理站点”对话框。选择“新建
3、”“站点”命令，打开“站点定义”对话框。4. 在对话框“站点名称”编辑框中输入“广西行”，单击“本地根文件夹”和“默认文件夹”后面的文件夹，选择网页和图像的位置，确定后如图7-3所示。5. 单击“确定”按钮，返回“管理站点”对话框。新建站点名称“广西行”显示在站点列表中。如图7-4所示。图7-3“站点定义”对话框 图7-4“管理站点”对话框 图7-5 文件面板6. 单击“完成”按钮，本地站点创建完成。Dreamweaver MX 2004将自动打开“文件”面板，定位到当前站点下。如图7-5所示。7. 在打开的“page07.htm”文件上制作文字链接。拖动鼠标，选中“我们的宗旨”图像下的第1个
4、小标题“关于广西的介绍”。8. 单击属性面板“链接”编辑框右侧的“指向文件”按钮 ，拖动鼠标时从“指向文件”图标上会延伸出一条直线，当定位到需要链接的文件（page07-2.htm）后，释放鼠标按钮。文件名和路径信息就会自动显示在“链接”文本框内。如图7-6所示。图7-6 使用“指向文件”按钮制作文本连接 说明：通过“指向文件”图标 ，用户就不用为了查找一个文件而浏览一个又一个的文件夹，因为现在它们都必须清楚地显示在文件面板上。当然，用户可以指向另一个打开的Dreamweaver窗口中的一个文件，或者同一个窗口中另一个框架中的文件。如果用户需要的链接是一个命名锚，它位于页面的底部。则Dream
5、weaver 会自动滚动来寻找它。用户甚至可以指向另一个页面的命名锚。9. 当然，用户也可以单击“浏览文件”按钮 ，打开“选择文件”对话框。在其中选择需要链接的文件“page07-2.htm”。如图7-7所示。10. 单击“确定”按钮，文件路径和名称显示在“链接”文件框内。 说明：文本链接通常是蓝色并加有下滑线。用户可以改变文档链接的颜色和下滑线状态，在前面实验关于“页面属性”中已有介绍。单击属性面板上的“页面属性”按钮，在“链接”框内可以设置链接的颜色和下划线等状态。如7-8所示。11. 双击“推出单位”下的第1个名称，选中文字。在属性面板“链接”编辑框内输入此单位的网址（这里假设为）。在目
6、标下下拉列表中选择-black选项。 如图7-9所示。图7-8在“页面属性”连接框内设置连接状态图7-9制作网站链接图7-10制作电子邮件连接 说明 需要注意在制作网站链接时，需要在网址前面加上”http:/”。在”目标”下拉列表中有4个选项分别为：-blank在新的未命名的窗口中显示被连接的文档；-parent：在父框架集中显示被连接的文档；-self这是系统默认的设置，是在与该连接相同的框架和窗口中显示被连接的文档；-top在整个浏览器窗口中显示被连接的文档，同时删除原浏览窗口中的内容。12。在网页的右下方的”联系方式”栏目中，创建E-mail(电子邮件)连接。拖动鼠标选中E-mail地址
7、，在属性面板“连接”编辑框中输入“mailto:”。如图7-10所示。 说明 电子邮件链接用来方便浏览者与网站设计者之间的沟通。当浏览者点击电子邮件链接时，系统自动打开浏览器默认的电子邮件处理程序。还有一种创建电子邮件链接的方式，在常用面板上，单击“电子邮件链接”按钮，打开“电子邮件链接”对话框。在其中输入“文本”（显示在网页中的文字）和“E-mail”（电子邮件地址），确定后即可完成电子邮件链接。如图7-11所示。13. 图像的链接方法与文本类似，例如，用户可选中“我们的宗旨”图像，在属性面板“链接”编辑框内输入“page07-3.htm”，即可完成图像链接。 说明 在设置图像链接时需要注意
8、，属性面板中的“边框”项通常设置为0，这是因为如果边框属性存在的话，链接图像通常会显示一个蓝色边框，有可能影响图像效果。14. 在“我们的宗旨”第1条标题处右击，显示快捷菜单，选择“打开链接页面”命令，即可跳转到链接的网页“page07-2.htm”。 说明 应用锚点链接可以将文档中的文本或图像链接到同一文档的其它位置，也可以链接到不同文档中指定的位置，使浏览者能够迅速浏览指定的位置。在创建锚点链接前，要先设置锚点。15. 打开page07-2.htm之后，将光标定位在“景点推荐”内容部分的标题前，单 常用面板的“命名锚记”按钮 ，在“命名锚记”对话框的“锚记名称”编辑框中输入“锚记1”，如图
9、7-12所示。16. 单击“确定”按钮，在标题前显示一个锚记图标，如图7-13所示。17. 制作第1行“景点推荐”标题锚记链接。选中“景点推荐”标题名称，在属性面板“链接”编辑框内输入“#锚记1”。 说明 选中锚记图标，在其属性面板呵以修改锚记名称。图7-12“命名锚记”对话框图标题前显示锚记图标图7-14 制作锚记链接 说明 如果是同一文档的链接，格式是：#锚记名。如果是同一文件夹中不同文档的链接，格式是：filename.html#锚记名。18. 根据以上步骤制作其他三个栏目的锚记链接。完成后选择菜单“文件”“保存全部”命令，保存打开的两个网页。浏览网页效果如图7-15所示。图7-15（续）实验作业模仿1.准备三张制作好的网页，放置在同一文件夹。（可在本书配套光盘素材内找到）2.创建站点“广西行”。3.创建文本链接。4.创建图像链接。5.创建网站链接。6.创建电子邮件链接。7.在网面page07-2.htm中创建锚记链接。创作1.制作几个内容相关的网页。2.在网页之间创建相关链接。3.在网页中添加电子邮件链接。4.在一个内容比较多的网页中进行内容分类，并创建锚记链接。5.可参考本书配套光盘exp7site07文件夹中的网页链接变化。网页效果如图7-16图7-17所示。 实验报告实验名称姓 名班级分组实 验 室实验时间： 年 月 日实验步骤序 号步 骤操作要领实验结果
