网页设计基础教程与上机指导第版使用超链接ppt课件

1、http:/教学提示和教学目的教学提示和教学目的4.1 超链接的根本知识超链接的根本知识4.2 链接到文件链接到文件4.3 创建超链接创建超链接 4.4 链接检查与测试链接检查与测试http:/n教学提示：超链接是网页中最重要、最根本的元素之一。为教学提示：超链接是网页中最重要、最根本的元素之一。为了建立起网页之间的联络必需运用超链接，正是由于有了网了建立起网页之间的联络必需运用超链接，正是由于有了网页之间的超链接才构成了这纷繁复杂的网络世界。网页中的页之间的超链接才构成了这纷繁复杂的网络世界。网页中的链接可以分为文本超链接、电子邮件超链接、图像超链接、链接可以分为文本超链接、电子邮件超链接、

2、图像超链接、图像热点超链接、下载文件超链接和锚点超链接等。本章就图像热点超链接、下载文件超链接和锚点超链接等。本章就来讲述如何建立各个页面之间的超链接。来讲述如何建立各个页面之间的超链接。n教学目的：教学目的：n熟习超链接的根本知识熟习超链接的根本知识n掌握创建电子邮件超链接掌握创建电子邮件超链接n掌握创建图像热点链接掌握创建图像热点链接n掌握创建下载文件链接掌握创建下载文件链接n掌握创建锚点链接网页掌握创建锚点链接网页n掌握链接的检查与测试掌握链接的检查与测试http:/n超链接是从一个网页或文件到另一个网页或文件的衔接，经超链接是从一个网页或文件到另一个网页或文件的衔接，经过超链接可以将链

3、接指向图像文件、多媒体文件，电子邮件过超链接可以将链接指向图像文件、多媒体文件，电子邮件地址可执行程序。当网站访问者单击超链接时，阅读器将根地址可执行程序。当网站访问者单击超链接时，阅读器将根据目的的类型执行相应的操作。据目的的类型执行相应的操作。n要正确的创建超链接，就必需了解超链接与被链接文档之间要正确的创建超链接，就必需了解超链接与被链接文档之间的途径，每一个网页都有一个独一的地址，称为一致资源定的途径，每一个网页都有一个独一的地址，称为一致资源定位符位符(URL)。然而，当在网页中创建内部链接时，普通不会。然而，当在网页中创建内部链接时，普通不会指定链接文档的完好指定链接文档的完好UR

4、L，而是指定一个相对途径，而是指定一个相对途径(当前文当前文档或站点根文件夹的途径档或站点根文件夹的途径)。 n4.1.1 绝对途径绝对途径n4.1.2 相对途径相对途径n4.1.3 根目录相对途径根目录相对途径http:/n绝对途径是包括效力器规范在内的完全途径。经过绝对途径，绝对途径是包括效力器规范在内的完全途径。经过绝对途径，不论源文件在什么位置，都可以非常准确地将其找到，除非不论源文件在什么位置，都可以非常准确地将其找到，除非源文件的位置发生变化，否那么链接不会失败。源文件的位置发生变化，否那么链接不会失败。n采用绝对途径的益处是，它同链接的源文件无关。只需网站采用绝对途径的益处是，它

5、同链接的源文件无关。只需网站的地址不变，那么无论网页文档在站点中被如何挪动，都可的地址不变，那么无论网页文档在站点中被如何挪动，都可以正常实现链接而不会发生错误。另外，假设希望将超链接以正常实现链接而不会发生错误。另外，假设希望将超链接指向到其他站点上的文件，就必需运用绝对途径。指向到其他站点上的文件，就必需运用绝对途径。n采用绝对途径的缺陷是链接不利于测试，假设在站点中运用采用绝对途径的缺陷是链接不利于测试，假设在站点中运用绝对地址，要想测试链接能否有效，就必需在绝对地址，要想测试链接能否有效，就必需在Internet效效力器端对链接进展测试。绝对途径另一个缺陷是不利于站点力器端对链接进展测

6、试。绝对途径另一个缺陷是不利于站点的移植，例如一个重要的站点，通常在几个地址上创建镜像，的移植，例如一个重要的站点，通常在几个地址上创建镜像，要将网页文档在这些镜像站点之间移植，就必需对站点中每要将网页文档在这些镜像站点之间移植，就必需对站点中每一个运用绝对途径的链接进展修正。一个运用绝对途径的链接进展修正。http:/n相对途径对于大多数的本地链接来说，是最相对途径对于大多数的本地链接来说，是最适用的途径。文档相对途径还可用来链接到适用的途径。文档相对途径还可用来链接到其他的文件夹中的文档，方法是利用文件夹其他的文件夹中的文档，方法是利用文件夹层次构造，指定从当前文档到所链接的文档层次构造，

7、指定从当前文档到所链接的文档的途径。文档相对途径的根本思想是省略掉的途径。文档相对途径的根本思想是省略掉对于当前文档和所链接的文档都一样的绝对对于当前文档和所链接的文档都一样的绝对URL部分，而只提供不同的途径部分。部分，而只提供不同的途径部分。http:/n为了防止绝对途径的缺陷，对于站点中的链接来说，运用相为了防止绝对途径的缺陷，对于站点中的链接来说，运用相对链接就是一个很好的方法。对链接就是一个很好的方法。n相对链接可以表述源端点同目的端点之间的相互位置，它同相对链接可以表述源端点同目的端点之间的相互位置，它同源端点的位置亲密相联。假设链接中源端点和目的端点位于源端点的位置亲密相联。假设

8、链接中源端点和目的端点位于同一个目录下，那么在链接途径中只需求指明目的端点的文同一个目录下，那么在链接途径中只需求指明目的端点的文档称号就可以。假设链接指向的文档位于当前目录的子级目档称号就可以。假设链接指向的文档位于当前目录的子级目录中，那么可以直接输入目录的称号和目录的位置。假设链录中，那么可以直接输入目录的称号和目录的位置。假设链接指向的文档没有位于当前目录的子级目录中，那么可以利接指向的文档没有位于当前目录的子级目录中，那么可以利用用“.符号来表示当前位置的父级目录，利用多个符号来表示当前位置的父级目录，利用多个“.符符号表示更高的父级目录，从而构建出目录的相对位置。号表示更高的父级目

9、录，从而构建出目录的相对位置。n运用相对链接的益处在于，假设站点的构造和文档的固定位运用相对链接的益处在于，假设站点的构造和文档的固定位置不变，那么链接就不会出错，可以将整个网站移植到另一置不变，那么链接就不会出错，可以将整个网站移植到另一个地址的网络效力器中，而不需求修正文档中的链接途径。个地址的网络效力器中，而不需求修正文档中的链接途径。http:/n用用Dreamweaver 8创建链接非常简一方便，创建链接非常简一方便，只需选中要设置成链接的文字或图像，然后只需选中要设置成链接的文字或图像，然后在【属性】面板中的【链接】文本框中输入在【属性】面板中的【链接】文本框中输入相应的相应的UR

10、L途径就可以创建链接。途径就可以创建链接。 n4.2.1 运用【属性】面板定义超链接运用【属性】面板定义超链接n4.2.2 运用【阅读文件】按钮指定链接到的运用【阅读文件】按钮指定链接到的文件文件http:/n在文档中选择文本或图像，然后在【属性】在文档中选择文本或图像，然后在【属性】面板的【链接】文本框中输入链接的文件名，面板的【链接】文本框中输入链接的文件名，在【目的】下拉列表框中选择网页翻开的方在【目的】下拉列表框中选择网页翻开的方式，如图式，如图4.1所示。所示。http:/n在【属性】面板中在【属性】面板中单击【链接】文本单击【链接】文本框右侧的【阅读文框右侧的【阅读文件】按钮，弹出

11、件】按钮，弹出【选择文件】对话【选择文件】对话框，在对话框中选框，在对话框中选择一个文件，输入择一个文件，输入文档的途径和文件文档的途径和文件名，如图名，如图4.2所示，所示，那么创建了一个到那么创建了一个到该指定文件的链接。该指定文件的链接。 http:/n超链接简称链接，是页面与页面之间的关联超链接简称链接，是页面与页面之间的关联途径。经过单击链接，可以从一个页面跳转途径。经过单击链接，可以从一个页面跳转到另一个页面。到另一个页面。 n4.3.1 创建下载文件的超链接创建下载文件的超链接n4.3.2 创建电子邮件超链接创建电子邮件超链接n4.3.3 创建图像热点链接创建图像热点链接n4.3

12、.4 创建锚点链接创建锚点链接http:/n假设要在网站中提供假设要在网站中提供资料下载，就需求为资料下载，就需求为文件提供下载链接。文件提供下载链接。假设超链接指向的不假设超链接指向的不是一个网页文件，而是一个网页文件，而是其他文件例如是其他文件例如zip、mp3、exe文件等，文件等，单击链接的时候就会单击链接的时候就会下载文件。下载文件。 http:/n电子邮件地址作为超链接目的与其他链接目的不同。电子邮件地址作为超链接目的与其他链接目的不同。当用户在网页中单击电子邮件地址的超链接时，将当用户在网页中单击电子邮件地址的超链接时，将会翻开操作系统中默许邮件管理器的新邮件窗口，会翻开操作系统

13、中默许邮件管理器的新邮件窗口，提示用户输入信息并将该信息传送到指定的邮件地提示用户输入信息并将该信息传送到指定的邮件地址。址。 单击【常用】插入栏中的【电子邮件链接】按钮，在弹出的【电子邮件链接】对话框中也可以创建电子邮件链接。 提 示 http:/n当需求对一张图像的特定部位进展链接时就需求用当需求对一张图像的特定部位进展链接时就需求用到热点链接。当用户单击某个热点时，会链接到相到热点链接。当用户单击某个热点时，会链接到相应的网页，矩形热点主要针对图像轮廊较规那么，应的网页，矩形热点主要针对图像轮廊较规那么，且呈方形的图像；椭圆形热点主要针对圆形规那么且呈方形的图像；椭圆形热点主要针对圆形规

14、那么的轮廊；不规那么多边形热点那么针对复杂的轮廊的轮廊；不规那么多边形热点那么针对复杂的轮廊外形。外形。 对于复杂的热点图形可以选择多边形工具来进行绘制。 提 示 http:/n运用锚点链接可以链接到网页中不同的位置。运用锚点链接可以链接到网页中不同的位置。 【锚记名称】可以是数字或英文、或中英文混合，最好要区分大小写，同一个网页中可以有无数个，但不能有相同的两个锚记名称。 提 示 http:/n普通网站中有很多链接在网站发布前需求测试，假设对每个普通网站中有很多链接在网站发布前需求测试，假设对每个链接都进展手工测试，那么会浪费很多时间，运用链接都进展手工测试，那么会浪费很多时间，运用Dreamweaver 8可以对整个站点的链接进展快速检查可以对整个站点的链