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

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

1、教学提示和教学目标教学提示：超链接是网页中最重要、最根本的元素之一。为了建立起网页之间的联系必须使用超链接，正是因为有了网页之间的超链接才形成了这纷繁复杂的网络世界。网页中的链接可以分为文本超链接、电子邮件超链接、图像超链接、图像热点超链接、下载文件超链接和锚点超链接等。本章就来讲述如何建立各个页面之间的超链接。教学目标：熟悉超链接的基本知识掌握创建电子邮件超链接掌握创建图像热点链接掌握创建下载文件链接掌握创建锚点链接网页掌握链接的检查与测试第1页/共15页4.1 超链接的基本知识超链接是从一个网页或文件到另一个网页或文件的连接，通过超链接可以将链接指向图像文件、多媒体文件，电子邮件地址可执行

2、程序。当网站访问者单击超链接时，浏览器将根据目标的类型执行相应的操作。要正确的创建超链接，就必须了解超链接与被链接文档之间的路径，每一个网页都有一个惟一的地址，称为统一资源定位符(URL)。然而，当在网页中创建内部链接时，一般不会指定链接文档的完整URL，而是指定一个相对路径(当前文档或站点根文件夹的路径)。4.1.1 绝对路径4.1.2 相对路径4.1.3 根目录相对路径第2页/共15页4.1.1 绝对路径绝对路径是包括服务器规范在内的完全路径。通过绝对路径，不管源文件在什么位置，都可以非常精确地将其找到，除非源文件的位置发生变化，否则链接不会失败。采用绝对路径的好处是，它同链接的源文件无关

3、。只要网站的地址不变，则无论网页文档在站点中被如何移动，都可以正常实现链接而不会发生错误。另外，如果希望将超链接指向到其他站点上的文件，就必须使用绝对路径。采用绝对路径的缺点是链接不利于测试，如果在站点中使用绝对地址，要想测试链接是否有效，就必须在Internet服务器端对链接进行测试。绝对路径另一个缺点是不利于站点的移植，例如一个重要的站点，通常在几个地址上创建镜像，要将网页文档在这些镜像站点之间移植，就必须对站点中每一个使用绝对路径的链接进行修改。第3页/共15页4.1.2 相对路径相对路径对于大多数的本地链接来说，是最适用的路径。文档相对路径还可用来链接到其他的文件夹中的文档，方法是利用

4、文件夹层次结构，指定从当前文档到所链接的文档的路径。文档相对路径的基本思想是省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。第4页/共15页4.1.3 根目录相对路径为了避免绝对路径的缺陷，对于站点中的链接来说，使用相对链接就是一个很好的方法。相对链接可以表述源端点同目标端点之间的相互位置，它同源端点的位置密切相联。如果链接中源端点和目标端点位于同一个目录下，则在链接路径中只需要指明目标端点的文档名称就可以。如果链接指向的文档位于当前目录的子级目录中，则可以直接输入目录的名称和目录的位置。如果链接指向的文档没有位于当前目录的子级目录中，则可以利用“.”符号来表示

5、当前位置的父级目录，利用多个“.”符号表示更高的父级目录，从而构建出目录的相对位置。使用相对链接的好处在于，如果站点的结构和文档的固定位置不变，那么链接就不会出错，可以将整个网站移植到另一个地址的网络服务器中，而不需要修改文档中的链接路径。第5页/共15页4.2 链接到文件用Dreamweaver 8创建链接非常简单方便，只要选中要设置成链接的文字或图像，然后在【属性】面板中的【链接】文本框中输入相应的URL路径就可以创建链接。4.2.1 使用【属性】面板定义超链接4.2.2 使用【浏览文件】按钮指定链接到的文件第6页/共15页4.2.1 使用【属性】面板定义超链接在文档中选择文本或图像，然后

6、在【属性】面板的【链接】文本框中输入链接的文件名，在【目标】下拉列表框中选择网页打开的方式，如图4.1所示。第7页/共15页4.2.2 使用【浏览文件】按钮指定链接到的文件在【属性】面板中单击【链接】文本框右侧的【浏览文件】按钮，弹出【选择文件】对话框，在对话框中选择一个文件，输入文档的路径和文件名，如图4.2所示，则创建了一个到该指定文件的链接。第8页/共15页4.3 创建超链接超链接简称链接，是页面与页面之间的关联路径。通过单击链接，可以从一个页面跳转到另一个页面。4.3.1 创建下载文件的超链接4.3.2 创建电子邮件超链接4.3.3 创建图像热点链接4.3.4 创建锚点链接第9页/共1

7、5页4.3.1 创建下载文件的超链接如果要在网站中提供资料下载，就需要为文件提供下载链接。如果超链接指向的不是一个网页文件，而是其他文件例如zip、mp3、exe文件等，单击链接的时候就会下载文件。第10页/共15页4.3.2 创建电子邮件超链接电子邮件地址作为超链接目标与其他链接目标不同。当用户在网页中单击电子邮件地址的超链接时，将会打开操作系统中默认邮件管理器的新邮件窗口，提示用户输入信息并将该信息传送到指定的邮件地址。第11页/共15页4.3.3 创建图像热点链接当需要对一张图像的特定部位进行链接时就需要用到热点链接。当用户单击某个热点时，会链接到相应的网页，矩形热点主要针对图像轮廊较规

8、则，且呈方形的图像；椭圆形热点主要针对圆形规则的轮廊；不规则多边形热点则针对复杂的轮廊外形。第12页/共15页4.3.4 创建锚点链接使用锚点链接可以链接到网页中不同的位置。第13页/共15页4.4 链接检查与测试一般网站中有很多链接在网站发布前需要测试，如果对每个链接都进行手工测试，则会浪费很多时间，使用Dreamweaver 8可以对整个站点的链接进行快速检查.(1)选择【站点】|【检查站点范围的链接】命令，打开如图4.19所示的【链接检查器】面板。(2)单击面板上的【断掉的链接】列表框中的文档，在其后面会出现一个【选择文件】按钮，单击【选择文件】按钮，即可自动修复断掉的链接。第14页/共15页感谢您的观看！第15页/共15页