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

在网页中建立各种超级链接实训目标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）创建外部超级链接外部超级链接：链接目标在网站之外，即与网站之外的文件链接；如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail 链接、锚点链接、多媒体文件链接、空链接等 （3）创建空链接和脚本链接空链接是一个未指定目标的链接，在属性面板中的“链接”栏中输入一个数值符“#”即可。

☞ 为“未来通讯”文本创建空链接： 提示：在网页中选定文本“未来通讯”，在“属性”面板的链接文本框中输入“#”，这样即创建了一个空链接，如下图：☞ 为“close ”文本创建脚本链接 提示：（1） 打开“未来都市”网页（ex4_city.html ）；（2）选定“close”文本，在“属性”面板的“链接”文本框中输入“javascript:self.close()”或“javascript:window.close()”，如图：（4）创建E-mail超级链接如果希望浏览者在浏览网页时，只要浏览者单击E-mail链接时，就会在浏览端自动打开浏览器默认的E-mail处理程序，收件人的地址将会被E-mail超链接中的指定地址自动装入，无需浏览者输入，就需要创建电子邮件链接。

提示：（1）选定“联系我们”文本；（2）在“属性”面板上的“链接”文本框中输入自己的邮箱（注：没有邮箱的同学可以使用另一种方法：选常用工具栏，选择文本，单击电子邮件链接，在E-mail 处直接输入邮箱地址，可不用输入mailto: 如下图：创建E-mail 链接有几种方法？（5）设置链接颜色在网页index.html 中，设置链接颜色，方法如下： （1） 点击“页面属性”按钮，打开“页面属性”；（2）在对话框的“分类”列表框中选择“链接”，设置右边各项选项，如下图：当鼠标移上去才会显示下划线（3）预览网页，可以看到，仅当鼠标移上链接文本时才会显示下划线，同时注意观察文本颜色的变化；任务二、创建锚点链接锚点链接：可以链接到网页中某个特定位置的链接。

什么是锚点？锚点也可以理解成为一种超级链接，只不过它是网页内部的超级链接（注意不是网站内部）。

比如我们有一个网页很长很长，而且里面的内容，可以分为N个部分。

这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。

锚记，也称为书签或锚点，用来标记文档中的特定位置，使用其可以跳转到当前文档或其他文档中的标记位置，免去浏览者翻阅网页寻找信息的麻烦。

在网页中加入锚记包括两方面的工作，一是在网页中创建锚记，另一个就是为锚记建立链接。

1．设计目标：锚点链接article1锚点如图所示。

在浏览器中预览该页面时，单击首页的某个小标题，便会跳转到该页面的相应文章处。

在该文章的末尾单击“Go Top”时，又可以返回到首页处。

以便继续选择感兴趣的文章浏览。

2．预览效果：当用户点击页面上任意一个标题时，鼠标自动跳转到页面上文章所在位置；页面效果请参实训三课件中的“实训\result”文夹中的ex4_city.html文件。

3．创建步骤第1步：标记锚点位置：将插入点放在正文“一、从超大城市到巨型城市”之前；● 在菜单栏中选择“插入/命名锚点”命令（如下图左），打开“命名锚点”对话框（如下图右），输入锚点名称后，点击“确定”；● 插入锚点后的页面鼠标放此处●按照上述方法，分别在其余每篇文章的标题前插入命名锚点（锚点名分别为article2、article3、article4、article5）。

第2步：创建锚点链接●选定页首目录中“一、从超大城市到巨型城市”文本；●在“属性”面板中的“链接”文本框中输入“#article1”(article1是锚点名称)。

●按照上述方法，分别将目录中的其余文本链接到文章前的相应锚点article2、article3、article4、article5。

●预览网页，观察效果；第3步：设置返回页首链接Array●选定正文中的“Go Top”;●在“属性”面板的链接文本框中输入“●预览网页，观察效果；第4步：关闭窗口●选定正文中的“Close”;●在“属性”面板的链接文本框中输入“javascript:self.close()”;●预览网页，观察效果；在链接锚记时，应注意以下事项：①在#和锚记名之间不要留有空格，否则链接会失败。

②在不同文件夹中为锚记创建链按时，其文件名后缀必定是“.htm”，而不能写成“.html”，否则链接也会失败。

③符号#必须是半角符号，而不能为全角符号。

任务三、创建热区链接所谓热区只是对图像圈定了一个范围，在这个范围内可添加链接。

什么是热区链接？在图像上设置超级链接的区域；1．设计目标制作一个浏览效果如下图所示的效果。

当鼠标移上图像的不同组成部分时，就会显示出相应的说明文字，单击鼠标将会跳转到对应的网页。

页面效果请参见“实训\result”文件夹下的ex4_hotspot.html文件。

2．制作步骤第1步：为img4_map.jpg 图像制作热区 ● 将页面index.html 另存为ex4_hotspot.html ；●在页面上插入一幅图片img4_map.jpg ，取代原来是图像和部分文字，如下图：● 点击插入的图像，在“属性”面板左下角选取图像工具，在图像中绘制热区；如下图：第2步：为每个热区添加说明文字和制作超级链接● 鼠标点击“未来都市”所在热区（此时热区四周出现四个小方块） ● 在属性面板上设置链接、目标、替换三个选项；第3步：用同样的方法为其它两个热区添加说明文字和制作超链接；注意：热区是不可复制的只能一个一个绘制，如果希望绘制的热区大小、对齐位置一致，可利用标签检查器。

方法：选择第一个热区在标签检查器把coords 中的参数记下，再选择第二个热区在标签检查器把coords 中的参数改一下。

coords 中的第一个参数为当前热区的水平位置，第二个参数为当前热区的垂直位置，第三个参数为当前热区大小。

任务四、 制作导航栏所谓导航条其实是鼠标经过图像的一个组合，由多个鼠标经过图像排列而成 1．设计目标制作一个浏览效果如“实训\result\webpages ”文件夹下的ex4_bar.html 文件所示。

未来都市2．页面分析在这个导航栏中共有4个元素（按钮），每个元素由4个图像构成，其中一个图像用于正常显示状态，另一个图像用于鼠标移上时的状态，还有两个图像分别用于单击元素后的状态及鼠标移到被点击过的元素上时的状态。

为此制作这个导航栏一共需要16个图像（“img4_11.jpg~img4_44.jpg”）。

3．制作步骤（1）打开创建热区后的网页文件（ex4_hotspot.html）,将插入点定位于热区的下一行；（2）打开“插入导航条”对话框：在菜单栏中选择“插入/图像对象/导航条”命令（或在常用工具栏中单击“图像：导航条”按钮），如下图：（3）分别点击下面框中的四个浏览按钮，选择需要的图像；在“按下时，前往的URL”选项右边点击“浏览”按钮，选择链接的网页文件；然后点击确定；（3） 至此，完成了导航条的第1个元素的设置；单击图中左上角的“+”，继续完成后面设置；（4） 保存并浏览，观察效果；注意：导航条插入后在属性面板检查目标文本框中是否已选_blank，否侧预览时看不到第3、第4种效果。

实训总结本实训介绍了网页中链接的应用和各种链接的创建方法。

常见的超级链接有以下几种类型： 内部链接：在同一网站文件之间的链接。

外部链接：不同网站文件之间的链接。

锚点链接：同一网页或不同网页的指定位置的链接。

E-mail链接：电子邮件的链接。

热区链接：是指在一张图像上添加多个链接。

导航条制作。