网页制作(第3章).docVIP

第3章 超级链接 【学习目标】 （1）了解超级链接的功能 （2）掌握基本链接的制作和使用 （3）熟悉特殊链接的制作和使用 （4）掌握图像热区链接 超级链接（Hyperlink）能够实现页面与页面之间的跳转，通过超级链接将每一个单独的页面组成一个整体，从而有机地将网站中的每个页面联系起来。本章将详细介绍超级链接的基本知识及各种链接的制作。 3.1插入基本链接 基本链接分为内部链接、外部链接、E-mail链接、锚点链接和脚本链接，在学习使用Dreamweaver CS4在文档中创建这些基本链接之前，我们先来了解下超级链接的基本概念。 3.1.1超级链接的基本概念 超级链接是从一个对象指向另一个对象的指针，可以为网页中的一段文字创建超级链接，也可以为整张图片、甚至是图片中的某一部分创建超级链接。超级链接允许我们同其他站点、网页、图片、文件进行链接，从而使Internet上的信息构成一个有机整体。 3.1.2内部链接与外部链接 1.内部链接 内部链接是与本地网页文件的链接，通常用于在本地站点中的文档间建立链接，下面我们就来学习如何创建内部链接，具体步骤如下： 第1步 在页面中选择要插入内部链接的文本，如图3-1所示。 图3-1 选择链接文本 第2步 在【属性】栏中单击【链接】文本框后面的【浏览文件】按钮，如图3-2所示。 图3-2 单击【浏览文件】按钮 第3步 在弹出的【选择文件】对话中，选择需要链接的文件ga.html，如图3-3所示。 图3-3 选择链接文件 第4步 单击【确定】按钮，在【目标】下拉列表中选择在何处打开链接的页面，下拉列表选项的意义如下： “_blank”：在新窗口中打开。 “_parent”：在文档的父框架集中打开，是针对框架集的。 “_self”：在同一窗口中打开。 “_top”：在整个窗口打开，也是针对框架集的。 这里选择“_blank”，如图3-4所示。 图3-4 设置属性 第5步 完成内部链接制作，插入内部链接后的文本下方出现下划线，并且字体颜色变成蓝色，表示链接创建成功，如图3-5所示。 图3-5 超级链接的效果 2.外部链接 外部链接是与其他网站的网页或者图像的链接，下面我们就来学习如何创建外部链接，具体步骤如下： 第1步 在页面中选择需要插入外部链接的文本，如图3-6示。 图3-6选择链接文本 第2步 在【属性】栏中的【链接】文本框中输入链接地址，如图3-6所示。 图3-6 输入外部链接地址 第3步 完成外部链接制作。 除了在【属性】栏中设置超链接，还可以通过【超级链接】对话框来设置超链接。首先选择需要创建超链接的文本或图片，然后单击菜单【插入】|【超级链接】，或者在【插入】面板中选择【超级链接】选项，如图3-7所示，都可以打开【超级链接】对话框，如图3-8所示。在此对话框的【链接】文本框中输入地址，或者单击文件夹图标，在打开的【选择文件】对话中选择目标文件。然后在【目标】下拉列表中选择页面的打开方式。 图3-7 【超级链接】选项 图3-8 【超级链接】对话框 3.1.3 E-mail链接 E-mail链接在网页中经常被使用到，用户点击该链接时，默认会自动启动电脑中的Outlook Express，用户可以在弹出的窗口中书写电子邮件，并发送到目的地址。创建E-mail链接的具体步骤如下： 第1步 在页面中选择需要插入E-mail链接的文本，如图3-9所示。 图3-9 选择要插入E-mail链接的文本 第2步 在【属性】栏中的【链接】文本框中输入“mailto：”，再输入链接的E-mail地址kevin2010@，如图3-10所示。 图3-10 输入E-mail地址 注：单击【插入】|【电子邮件链接】命令菜单，也可以插入E-mail链接，如图3-11所示。 3-11 【电子邮件链接】对话框 第3步 完成E-mail链接制作完成，预览网页，单击“联系我们”，默认会启动Outlook Express，如图3-12所示。 图3-12 Outlook Express 3.1.4锚点链接 当一个网页内容较多时，用户查找信息会浪费很多时间，在这种情况下，可以在网页中创建锚链接，放在页面的顶端作为书签，单击锚链接，就会跳到页面中指定的位置。创建锚链接分为创建锚点和建立锚点链接两个过程，下面分别进行介绍。 1.创建锚点 在创建锚链接之前，首先要在页面相应位置创建锚点，具体步骤如下： 第1步 将光标放在页面中要插入锚点的位置，即“机务工程系”，如图3-13所示。 图3-13 插入锚点的位置 第2步 单击【插入】|【命名锚记】菜单，弹出【命名锚记】对话框，在“锚记名称”文本框中输入“1”，单击【确定】按钮，如图3-14所示。 图3-14 “命名标记”对话框 第3步 完成锚点创建，