[在网页中建立各种超级链接.docVIP

在网页中建立各种超级链接 实训目标 1．掌握内部、外部超级链接的创建方法； 2．掌握E-mail链接的创建方法； 3．掌握锚点链接的制作方法； 4．掌握链接颜色的设置方法； 5．了解图像映射的制作方法； 6．了解跳转菜单、翻转图像实例、导航栏的制作方法。 实训内容 准备工作 本实训所需的网页及图象文件均在实训二课件的“实训\materials”文件夹下。 1、解压文件 解压文件“实训二 在网页中建立各种超级链接.rar”，请将“课堂实训”文件夹中的“materials”文件夹复制到D盘根目录下，并将其重命名为“future”。 2．新建站点 新建网站“畅想未来”，将站点和个人文件夹future建立一一对应的关系。 任务一、在网页中建立各种超级链接 设计目标 在实训一完成的index.htm页面中，制作一个具有超级链接的网页。其浏览效果见“实训\result”文件夹中的index4.html文件所示。当鼠标移到栏目标题文本上时就会变成手形，同时在浏览器下方的状态栏中显示链接地路径，单击时便会跳转到相应的链接内容。 2、页面分析 该页面包含了内部超级链接、外部超级链接、空链接和脚本链接、Email超级链接等。 页面效果请参见实训二课件中“实训\result”文件夹下的index4.html文件。 3．制作步骤 说明：请在完成下面操作前，先将所有的素材文件放置在对应的文件夹下； 在Dreamweaver中本地站点future中打开index.html页面，依次按照下述内容在页面中创建各种超级链接。 （1）创建内部超级链接 内部超级链接：就是在同一个站点内的不同页面之间建立超级链接关系； 为“未来都市”文本创建超级链接 在网页中选定文本“未来都市”，在“属性“面板中单击“浏览文件”，在打开的“选择文件”对话框中选择需要的网页文件（ex4_city.html）； 在“目标”选择框中选择“_blank”，以确保在新的浏览窗口中打开连接文件； 使用相同的方法分别为“未来旅游”和“科幻小说”创建超级链接；对应的网页文件分别为ex4_travel.html、ex4_novel.html； 什么是相对地址、绝对地址？两者有何区别？ （2）创建外部超级链接 外部超级链接：链接目标在网站之外，即与网站之外的文件链接； 将“友情链接”文本链接到“Google”网站。 如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等 （3）创建空链接和脚本链接 空链接是一个未指定目标的链接，在属性面板中的“链接”栏中输入一个数值符“#”即可。 为“未来通讯”文本创建空链接： 提示： 在网页中选定文本“未来通讯”，在“属性”面板的链接文本框中输入“#”，这样即创建了一个空链接，如下图： 为“close”文本创建脚本链接 提示： 打开“未来都市”网页（ex4_city.html）； 选定“close”文本，在“属性”面板的“链接”文本框中输入“javascript:self.close()”或“javascript:window.close()”，如图： （4）创建E-mail超级链接 如果希望浏览者在浏览网页时，只要浏览者单击E-mail链接时，就会在浏览端自动打开浏览器默认的E-mail处理程序，收件人的地址将会被E-mail超链接中的指定地址自动装入，无需浏览者输入，就需要创建电子邮件链接 。 提示： 选定“联系我们”文本； 在“属性”面板上的“链接”文本框中输入自己的邮箱（注：没有邮箱的同学可以使用 “mailto:teach_ie@163.com”。 运行网页，单击“联系我们”，就会出现如下图： 另一种方法：选常用工具栏，选择文本，单击电子邮件链接，在E-mail处直接输入邮箱地址，可不用输入mailto: 如下图： 创建E-mail链接有几种方法？ （5）设置链接颜色 在网页index.html中，设置链接颜色，方法如下： 点击“页面属性”按钮，打开“页面属性”； 在对话框的“分类”列表框中选择“链接”，设置右边各项选项，如下图： （3）预览网页，可以看到，仅当鼠标移上链接文本时才会显示下划线，同时注意观察文本颜色的变化； 任务二、 创建锚点链接 锚点链接：可以链接到网页中某个特定位置的链接。 什么是锚点？锚点也可以理解成为一种超级链接，只不过它是网页内部的超级链接（注意不是网站内部）。比如我们有一个网页很长很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。 锚记，也称为