Dreamweaver网页设计与制作教程课件第4章 超级链接及其使用.ppt

第4章超级链接及其使用第1章网页设计与制作概述第3章图像及其他媒体内容提要超级链接的概念和路径知识。创建超级链接的基本方法。从HTML角度理解超级链接。第1章网页设计与制作概述第4章超级链接及其应用4.1超级链接及其应用4.1.1超级链接概述超级链接是指从一个网页（源文档）指向一个目标的连接关系,这个目标可以是另一个网页（目标文档）,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。本质上超级链接属于一个网页的一部分，它是一种允许浏览者同其他网页或站点之间进行连接的元素。只有各个网页链接在一起后，才能真正构成一个网站。每个网页都有一个唯一的地址，称作统一资源定位器（URL），我们通过网页的URL将这些网页链接在一起。但是，同一个网站下的每一个网页都属于同一个地址之下，这种情况下不需要为每一个链接都输入完全的地址，只要确定当前文档同其它文档或根目录之间的相对路径关系就可以。因此，链接路径一般有三种类型，分别为绝对路径、相对路径、根目录相对路径。第1章网页设计与制作概述第4章超级链接及其应用4.1超级链接及其应用4.1.1超级链接概述1.绝对路径绝对路径提供所链接文档的完整URL地址，而且包括所使用的协议类型，比如/，就是一个绝对路径，所使用的协议类型是http。使用绝对路径时要确保绝对路径有效，比如/view/c74634f69e31433239689332.html，当这个URL地址不存在了，浏览器用户访问时就会报错。要链接其它服务器上的文档，必须使用绝对路径；本地链接也可使用绝对路径链接，但尽量不要采用这种方式，因为一旦此站点变更域名或改变地址，则所有本地绝对路径链接都将断开。对本地链接最好使用相对路径，以提供更大的灵活性。2.相对路径相对路径是指省略相对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。比如E：\F1\index.html链接到E:\F1\F2\about.html，可以把E:\F1\去掉，只用F2\about.html表示链接路径。当要链接到与当前文档处于同一文件夹中的文档时，只需输入文件名。比如要从yb.html链接到cc.html（两个文件在同一文件夹“JL”中，且目录深度相同），则其相对路径为cc.htm。当要链接到当前文档所在文件夹的子文件夹的文档时，先要有子文件夹名称，然后跟符号“/”，在加文件名。比如要从index.html链接到cc.htm（两个文件在同一文件夹“F1”中，index.html处于父目录中，而cc.htm处于子目录JL中），则其相对路径为JL/cc.html。当要链接到当前文档所在文件夹的父文件夹的文档时，在文档名前要加“../”。比如要从cc.htm链接到index.html（两个文件在同一文件夹“F1”中，index.html处于父目录中，而cc.htm处于子目录JL中），则其相对路径为../index.html。3.站点根目录相对路径站点根目录相对路径是指从站点的根文件夹到文档的路径。当在处理承载有多个不同站点的服务器时，要考虑使用这种类型的路径。站点根目录相对路径以一个正斜杠“/”开始，该正斜杠表示站点根文件夹。比如，/F1/index.html是文件的站点根目录相对路径，该文件位于站点根文件夹的F1子文件夹中。第1章网页设计与制作概述第4章超级链接及其应用4.1超级链接及其应用4.1.2设置超级链接的方法1.使用属性面板链接到文档属性面板文件夹图标和“链接”文本框可用于创建从图像、对象或文本到其它文档或文件的链接。执行以下操作：（1）在“文档”窗口的“设计”视图中选择要进行链接的文本或图像。（2）然后执行下列操作之一：单击“属性”面板“链接”文本框右侧的文件夹图标，出现“选择文件对话框”，如图4.1所示。通过浏览选择一个文件，此时在URL文本框中显示了目标文档的路径。使用“选择HTML文件”对话框中的“相对于”弹出菜单，指示该路径是文档相对路径还是根目录相对路径，然后单击“选择”。第1章网页设计与制作概述第4章超级链接及其应用4.1超级链接及其应用4.1.2设置超级链接的方法1.使用属性面板链接到文档属性面板文件夹图标和“链接”文本框可用于创建从图像、对象或文本到其它文档或文件的链接。执行以下操作：（1）在“文档”窗口的“设计”视图中选择要进行链接的文本或图像。（2）然后执行下列操作之一：单击“属性”面板“链接”文本框右侧的文件夹图标，出现“选择文件对话框”，如图4.1所示。通过浏览选择一个文件，此时在URL文本框中显示了目标文档的路径。使用“选择