网页设计与制作课件第五章.ppt

第5章 超级链接的使用;本章学习目标 ;5.1 创建超级链接 ;有三种类型的链接路径： ?????1、? 绝对地址 绝对路径由http://、ftp://等开始的，它不仅提供所链接文档的完整 URL，而且包括所使用的协议（如对于 Web服务为http://，FTP服务为ftp://）。 注意： 尽管对本地链接（即到同一站点内文档的链接）也可使用绝对路径链接，但不建议采用这种方式，因为一旦将此站点移动到其它服务器，则所有本地绝对路径链接都将断开。对本地链接使用相对路径还能在需要在站点内移动文件时，提供更大的灵活性。 ;2、相对地址 相对地址是由文件名及其扩展名组成的，并且假设URL指向位于同一台WEB服务器上的文件。 例如，假设一个站点的结构如图5-1-1所示： ;创建从booklist1.htm到其它文件的链接，如下所示 (1) 要从 booklist1.htm 链接到booklist2.htm （两个文件在同一文件夹中），文件名就是相对路径：booklist2.htm或 ./booklist2.htm。其中./ 表示在同一文件夹中。 (2) 若要链接到 book1.htm（在名为 book1 的子文件夹中），可使用相对路径 book1/book1.htm。每个正斜杠 (/) 表示在文件夹层次结构中下移一级。 ;?(3) 若要链接到 index.html （在父文件夹中，booklist1.htm 向上一级），可使用相对路径../index.htm。每个 ../ 表示在文件夹层次结构中上移一级。 (4) 若要链接到 picture1.htm（在父文件夹的其它子文件夹中），可使用相对路径../mypictures/picture1.htm。其中 ../ 向上移至父文件夹； mypictures/ 向下移至 mypictures子文件夹中。 ;???? 3、站点根目录相对路径 站点根目录相对路径以一个正斜杠(/)开始，该正斜杠表示站点根文件夹。例如， /mybooks/ booklist1.htm 是文件 (booklist1.htm) 的站点根目录相对路径，该文件位于站点根文件夹的 mybooks子文件夹中。 在某些 Web 站点中，需要经常在不同文件夹之间移动 HTML 文件，在这种情况下，站点根目录相对路径通常是指定链接的最佳方法。移动含有根目录相对链接的文档时，不需要更改这些链接 。 ;在一个文档中可以创建几种类型的链接： 链接到其它文档或文件（如图形、影片、PDF 或声音文件）的链接。 命名锚记链接，此类链接跳转至文档内的特??位置。 电子邮件链接，此类链接新建一个收件人地址已经填好的空白电子邮件。 空链接和脚本链接，此类链接使您能够在对象上附加行为，或者创建执行 JavaScript 代码的链接。 注意：创建链接之前，一定要清楚文档相对路径、站点根目录相对路径以及绝对路径的工作方式。 ;5.1.2 实例：创建超级链接 1、实例创意 下面以实例制作一个简单网页，实例中只用到简单的几个页面元素，主要有表格、文本和图片。各个文件的文件名及位置如图5-1-2如示。 ;2．制作步骤 （1）定义本书素材source目录下的文件夹5-1-2为本地站点目录。 （2）创建链接 创建超级链接有多种方法，本节将分别介绍几种不同 方式来完成超级链接的创建。 多数情况下，创建链接在【属性】面板中完成，也可以通过主菜单“【插入】→【超级链接】”来完成。 打开根目录下的index.htm文件并选择“【窗口】→【属性】”菜单命令，打开【属性】面板，如图5-1-3所示。 ; ;方法一： 选择页面上方文字“语言学习”，然后单击属性面板上“链接”文本框右侧的文件夹图标，弹出“选择文件”对话框，选择“learnlanguage.htm”文件，在对话框“相对于”中选择“文档”，单击“确定”按钮关闭对话框，如图5-1-4所示。 ;完成上述步骤，属性面板相应各项设置如图5-1-5所示。 ;在“超级链接”对话框中，设置以下选项： ?? 文本：显示在页面中的文字。 ??? 链接：所要链接的目标文档。 ????目标：为打开的窗口类型（详见本例最后一段）。 ????标题：为鼠标置于链接文字上方时所出现的提示。 效果如图5-1-7所示。 ;方法三： 打开属性面板，选择“链接(L)”右边的“指向文件”图标“”，拖动该图标至站点目录下的“learnlanguage.htm”文件，即可自动生成链接。如图5-1-8所示。 ; 如果同时打开两个或以上编辑窗口，则只需将“指向文件”图标直接拖动至目标窗口的任意位置即可自动生成链接。如图5-1-9所示。 ;方法