5.1 网页链接路径(课件）-高二《网页设计与制作》同步教学（中国人民大学出版社）

第5章 超级链接 教学任务： 绝对路径、相对路径及站点根目录相对路径的概念。 利用超级链接来实现文档之间的跳转，其中包括文本链接、图像链接、锚点链接、电子邮件链接、空链接等各种链接的创建与属性设置方法。 用CSS定义链接文本状态。 鼠标经过图像与导航条的创建与链接设置。 教学重点与难点： 创建各种常用的超级链接；管理超级链接；给链接添加提示；修改链接目标；定义链接样式等。 相对路径与绝对路径的定义与区别。 超级链接（Hyperlink）在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。超级链接又简称为超链接。所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序等。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。因此，超链接根据使用对象的不同可以分为文本链接、图像链接、锚点连接、空链接、电子邮件链接等。 5.1 网页链接路径 在网页制作中，设置超链接有三种表示方式： (1)绝对路径。 (2)相对路径（相对于文档）。 (3)站点根目录相对路径（基于根文件夹）。 在正确创建超链接之前，我们有必要先来学习一下路径。 5.1.1绝对路径（Absolute Path） 大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：D:/mysite/music/123.mp3，我们就知道123.mp3文件是在D盘的mysite文件夹下的music子文件夹中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似于http://www.jxlsxy.com/imgs/123.jpg来确定文件位置的方式也是绝对路径。 5.1.2相对路径（Relative Path） 相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利。下面举实例详解： 　　一、例如在本地硬盘有如下两文件，它们要互做超链接，如图5-1所示。 　　G:\site\index.htm 　　G:\site\web\article\01.htm index.htm要想链接到01.htm这个文件，正确的链接应该是：<a href=web/article/01.htm>链接文字</a>，这是标准的相对路径。 　　反过来，01.htm要想链接到index.htm这个文件，在01.htm文件里面应该写上这句：<a href=../../index.htm>返回首页</a>。这里的../表示向上一级。 因此在相当路径中我们使用“../”来表示上一级文件夹，“../../”表示上上级的文件夹，以此类推。下级文件夹则用“/..”表示。 5.1.3站点根目录相对路径 站点根目录相对路径描述从站点的根文件夹到文档的路径。如果在处理使用多个服务器的大型 Web 站点，或者在使用承载多个站点的服务器，则可能需要使用这些路径。不过，如果您不熟悉此类型的路径，最好坚持使用文档相对路径。 站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹。例如，/article/index.htm 是文件 (index.htm) 的站点根目录相对路径，该文件位于站点根文件夹的article子文件夹中。 如果您需要经常在 Web 站点的不同文件夹之间移动 HTML 文件，那么站点根目录相对路径通常是指定链接的最佳方法。移动包含站点根目录相对链接的文档时，不需要更改这些链接，因为链接是相对于站点根目录的，而不是文档本身；例如，如果某 HTML 文件对相关文件（如图像）使用站点根目录相对链接，则移动 HTML 文件后，其相关文件链接依然有效。 但是，如果移动或重命名由站点根目录相对链接所指向的文档，则即使文档之间的相对路径没有改变，也必须更新这些链接。例如，如果移动某个文件夹，则必须更新指向该文件夹中文件的所有站点根目录相对链接。（如果使用【文件】面板移动或重命名文件，则 Dreamweaver 将自动更新所有相关链接。） $$