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

《网页设计基础教程与上机指导第版使用超链接.ppt》由会员分享，可在线阅读，更多相关《网页设计基础教程与上机指导第版使用超链接.ppt（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、http:/网页设计基础教程与上机指导第版使用超链接 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望http:/教学提示和教学目标教学提示和教学目标n教学提示：超链接是网页中最重要、最根本的元素之一。为了教学提示：超链接是网页中最重要、最根本的元素之一。为了建立起网页之间的联系必须使用超链接，正是因为有了网页之建立起网页之间的联系必须使用超链接，正是因为有了网页之间的超链接才形成了这纷繁复杂的网络世界。网页中的链接可间的超链接才形成了这纷繁复杂的网络世界。网页中的

2、链接可以分为文本超链接、电子邮件超链接、图像超链接、图像热点以分为文本超链接、电子邮件超链接、图像超链接、图像热点超链接、下载文件超链接和锚点超链接等。本章就来讲述如何超链接、下载文件超链接和锚点超链接等。本章就来讲述如何建立各个页面之间的超链接。建立各个页面之间的超链接。n教学目标：教学目标：熟悉超链接的基本知识熟悉超链接的基本知识掌握创建电子邮件超链接掌握创建电子邮件超链接掌握创建图像热点链接掌握创建图像热点链接掌握创建下载文件链接掌握创建下载文件链接掌握创建锚点链接网页掌握创建锚点链接网页掌握链接的检查与测试掌握链接的检查与测试http:/4.1 超链接的基本知识超链接的基本知识n超链接

3、是从一个网页或文件到另一个网页或文件的连接，通超链接是从一个网页或文件到另一个网页或文件的连接，通过超链接可以将链接指向图像文件、多媒体文件，电子邮件过超链接可以将链接指向图像文件、多媒体文件，电子邮件地址可执行程序。当网站访问者单击超链接时，浏览器将根地址可执行程序。当网站访问者单击超链接时，浏览器将根据目标的类型执行相应的操作。据目标的类型执行相应的操作。n要正确的创建超链接，就必须了解超链接与被链接文档之间要正确的创建超链接，就必须了解超链接与被链接文档之间的路径，每一个网页都有一个惟一的地址，称为统一资源定的路径，每一个网页都有一个惟一的地址，称为统一资源定位符位符(URL)。然而，当

4、在网页中创建内部链接时，一般不会。然而，当在网页中创建内部链接时，一般不会指定链接文档的完整指定链接文档的完整URL，而是指定一个相对路径，而是指定一个相对路径(当前文当前文档或站点根文件夹的路径档或站点根文件夹的路径)。n4.1.1 绝对路径绝对路径n4.1.2 相对路径相对路径n4.1.3 根目录相对路径根目录相对路径http:/4.1.1 绝对路径绝对路径n绝对路径是包括服务器规范在内的完全路径。通过绝对路径，绝对路径是包括服务器规范在内的完全路径。通过绝对路径，不管源文件在什么位置，都可以非常精确地将其找到，除非不管源文件在什么位置，都可以非常精确地将其找到，除非源文件的位置发生变化，

5、否则链接不会失败。源文件的位置发生变化，否则链接不会失败。n采用绝对路径的好处是，它同链接的源文件无关。只要网站采用绝对路径的好处是，它同链接的源文件无关。只要网站的地址不变，则无论网页文档在站点中被如何移动，都可以的地址不变，则无论网页文档在站点中被如何移动，都可以正常实现链接而不会发生错误。另外，如果希望将超链接指正常实现链接而不会发生错误。另外，如果希望将超链接指向到其他站点上的文件，就必须使用绝对路径。向到其他站点上的文件，就必须使用绝对路径。n采用绝对路径的缺点是链接不利于测试，如果在站点中使用采用绝对路径的缺点是链接不利于测试，如果在站点中使用绝对地址，要想测试链接是否有效，就必须

6、在绝对地址，要想测试链接是否有效，就必须在Internet服务服务器端对链接进行测试。绝对路径另一个缺点是不利于站点的器端对链接进行测试。绝对路径另一个缺点是不利于站点的移植，例如一个重要的站点，通常在几个地址上创建镜像，移植，例如一个重要的站点，通常在几个地址上创建镜像，要将网页文档在这些镜像站点之间移植，就必须对站点中每要将网页文档在这些镜像站点之间移植，就必须对站点中每一个使用绝对路径的链接进行修改。一个使用绝对路径的链接进行修改。http:/4.1.2 相对路径相对路径n相对路径对于大多数的本地链接来说，是最相对路径对于大多数的本地链接来说，是最适用的路径。文档相对路径还可用来链接到适

7、用的路径。文档相对路径还可用来链接到其他的文件夹中的文档，方法是利用文件夹其他的文件夹中的文档，方法是利用文件夹层次结构，指定从当前文档到所链接的文档层次结构，指定从当前文档到所链接的文档的路径。文档相对路径的基本思想是省略掉的路径。文档相对路径的基本思想是省略掉对于当前文档和所链接的文档都相同的绝对对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。部分，而只提供不同的路径部分。http:/4.1.3 根目录相对路径根目录相对路径n为了避免绝对路径的缺陷，对于站点中的链接来说，使用相为了避免绝对路径的缺陷，对于站点中的链接来说，使用相对链接就是一个很好的方法。对链接就是

8、一个很好的方法。n相对链接可以表述源端点同目标端点之间的相互位置，它同相对链接可以表述源端点同目标端点之间的相互位置，它同源端点的位置密切相联。如果链接中源端点和目标端点位于源端点的位置密切相联。如果链接中源端点和目标端点位于同一个目录下，则在链接路径中只需要指明目标端点的文档同一个目录下，则在链接路径中只需要指明目标端点的文档名称就可以。如果链接指向的文档位于当前目录的子级目录名称就可以。如果链接指向的文档位于当前目录的子级目录中，则可以直接输入目录的名称和目录的位置。如果链接指中，则可以直接输入目录的名称和目录的位置。如果链接指向的文档没有位于当前目录的子级目录中，则可以利用向的文档没有位

9、于当前目录的子级目录中，则可以利用“.”符号来表示当前位置的父级目录，利用多个符号来表示当前位置的父级目录，利用多个“.”符符号表示更高的父级目录，从而构建出目录的相对位置。号表示更高的父级目录，从而构建出目录的相对位置。n使用相对链接的好处在于，如果站点的结构和文档的固定位使用相对链接的好处在于，如果站点的结构和文档的固定位置不变，那么链接就不会出错，可以将整个网站移植到另一置不变，那么链接就不会出错，可以将整个网站移植到另一个地址的网络服务器中，而不需要修改文档中的链接路径。个地址的网络服务器中，而不需要修改文档中的链接路径。http:/4.2 链接到文件链接到文件n用用Dreamweav

10、er 8创建链接非常简单方便，创建链接非常简单方便，只要选中要设置成链接的文字或图像，然后只要选中要设置成链接的文字或图像，然后在【属性】面板中的【链接】文本框中输入在【属性】面板中的【链接】文本框中输入相应的相应的URL路径就可以创建链接。路径就可以创建链接。n4.2.1 使用【属性】面板定义超链接使用【属性】面板定义超链接n4.2.2 使用【浏览文件】按钮指定链接到的文件使用【浏览文件】按钮指定链接到的文件http:/4.2.1 使用【属性】面板定义超链接使用【属性】面板定义超链接n在文档中选择文本或图像，然后在【属性】在文档中选择文本或图像，然后在【属性】面板的【链接】文本框中输入链接的

11、文件名，面板的【链接】文本框中输入链接的文件名，在【目标】下拉列表框中选择网页打开的方在【目标】下拉列表框中选择网页打开的方式，如图式，如图4.1所示。所示。http:/4.2.2 使用【浏览文件】按钮使用【浏览文件】按钮指定链接到的文件指定链接到的文件n在在【属性】面板中【属性】面板中单击【链接】文本单击【链接】文本框右侧的【浏览文框右侧的【浏览文件】按钮，弹出【件】按钮，弹出【选择文件】对话框，选择文件】对话框，在对话框中选择一在对话框中选择一个文件，输入文档个文件，输入文档的路径和文件名，的路径和文件名，如图如图4.2所示，则创所示，则创建了一个到该指定建了一个到该指定文件的链接。文件的

12、链接。http:/4.3 创建超链接创建超链接n超链接简称链接，是页面与页面之间的关联超链接简称链接，是页面与页面之间的关联路径。通过单击链接，可以从一个页面跳转路径。通过单击链接，可以从一个页面跳转到另一个页面。到另一个页面。n4.3.1 创建下载文件的超链接创建下载文件的超链接n4.3.2 创建电子邮件超链接创建电子邮件超链接n4.3.3 创建图像热点链接创建图像热点链接n4.3.4 创建锚点链接创建锚点链接http:/4.3.1 创建下载文件的超链接创建下载文件的超链接n如果要在网站中提供如果要在网站中提供资料下载，就需要为资料下载，就需要为文件提供下载链接。文件提供下载链接。如果超链接

13、指向的不如果超链接指向的不是一个网页文件，而是一个网页文件，而是其他文件例如是其他文件例如zip、mp3、exe文件等，文件等，单击链接的时候就会单击链接的时候就会下载文件。下载文件。http:/4.3.2 创建电子邮件超链接创建电子邮件超链接n电子邮件地址作为超链接目标与其他链接目标不同。电子邮件地址作为超链接目标与其他链接目标不同。当用户在网页中单击电子邮件地址的超链接时，将当用户在网页中单击电子邮件地址的超链接时，将会打开操作系统中默认邮件管理器的新邮件窗口，会打开操作系统中默认邮件管理器的新邮件窗口，提示用户输入信息并将该信息传送到指定的邮件地提示用户输入信息并将该信息传送到指定的邮件

14、地址。址。http:/4.3.3 创建图像热点链接创建图像热点链接n当需要对一张图像的特定部位进行链接时就需要用当需要对一张图像的特定部位进行链接时就需要用到热点链接。当用户单击某个热点时，会链接到相到热点链接。当用户单击某个热点时，会链接到相应的网页，矩形热点主要针对图像轮廊较规则，且应的网页，矩形热点主要针对图像轮廊较规则，且呈方形的图像；椭圆形热点主要针对圆形规则的轮呈方形的图像；椭圆形热点主要针对圆形规则的轮廊；不规则多边形热点则针对复杂的轮廊外形。廊；不规则多边形热点则针对复杂的轮廊外形。http:/4.3.4 创建锚点链接创建锚点链接n使用锚点链接可以链接到网页中不同的位置。使用锚

15、点链接可以链接到网页中不同的位置。http:/4.4 链接检查与测试链接检查与测试n一般网站中有很多链接在网站发布前需要测试，如果对每个一般网站中有很多链接在网站发布前需要测试，如果对每个链接都进行手工测试，则会浪费很多时间，使用链接都进行手工测试，则会浪费很多时间，使用Dreamweaver 8可以对整个站点的链接进行快速检查可以对整个站点的链接进行快速检查.(1)选择【站点】选择【站点】|【检查站点范围的链接】命令，打开【检查站点范围的链接】命令，打开如图如图4.19所示的【链接检查器】面板。所示的【链接检查器】面板。(2)单击面板上的【断掉的链接】列表框中的文档，在其单击面板上的【断掉的链接】列表框中的文档，在其后面会出现一个【选择文件】按钮，单击【选择文件】后面会出现一个【选择文件】按钮，单击【选择文件】按钮，即可自动修复断掉的链接。按钮，即可自动修复断掉的链接。