互联网教学课件超链接ppt培训教学课件

第5章 超 链 接 5.1 超链接的基本概念 5.2 创建超链接 思考与练习 1 1 5.1 超链接的基本概念 5.1.1 什么是超链接 浏览网页时，移动鼠标，指向某些文本或图像，光标 即会变成小手的形状，这时单击鼠标，就会打开另 一个页面，这就是超链接。 超链接是网页中由一个地方跳转到另一个地方、网页 、网站或文件的指针，跳转的起点称为源端点或简 称源、锚、锚点，跳转的终点即跳转到的页面称为 目标端点或简称目标、目的、目标锚。超链接指出 了源端点、目标端点以及从源端点到目标端点的路 径即地址。 2 2 超链接按源端点区分为有文本超链接、图像超链接和表单 超链接。文本超链接就是利用文本为源端点构建的超链 接。在浏览器中，文本超链接的锚点一般显示为下方带 有下划线的文字；图像超链接的源端点是图像；表单超 链接的源端点可能是菜单或按钮等表单对象。 超链接按目标端点区可以分为外部链接、内部链接、局部 链接和Email链接。外部链接是链接到本站点之外的站 点或文档，利用这种链接，可以跳转到其他的网站上。 内部链接的目标端点是本站点中的其他文档，利用这种 链接，可以跳转到本站点其他的页面上。局部链接的目 标端点是文档中的某个位置，如文档中间、末尾、开头 或某个指定的位置，也可以是其他文档中的某一指定位 置。 Email链接的目标端点是一个Email地址，单击这 种链接，可以启动电子邮件程序，书写邮件并发送到指 定的地址。 3 3 5.1.2 超链接的路径 超链接的路径是URL地址。按目标端点所处位置的不同， 超链接的路径分为绝对路径、相对路径和基于根目录的 路径。下面以如图5.1所示站点的目录结构为例，介绍 这几种路径的含义。假设网址是，web 是网站的根目录，index.htm是主页。 1. 绝对路径 如果路径是一个完整的URL地址，则这种链接路径就称为 绝对路径。其特点是，路径同链接的源端点所处的位置 无关。在图5.1所示站点中，要创建指向Introduction 目录下index1.htm文件的链接，其绝对路径为 /Introduction/index1.htm。如 果要创建指向benkesheng目录下的jiaoxuejihua.htm 文档的链接，绝对路径为图5.1一个网站的目录结构 4 4 图5.1 5 5 /Education/benkesheng/jiaoxueji hua.htm。如果希望在文档中链接主页，可以不指定主 页文件名，而只用。 绝对路径的好处是同链接的源端点无关。目标网站的地址 不变，无论源端点如何移动，都可以正常实现跳转而不 会发生错误。 如果目标端点在其他网站上，就必须使用绝对路径。而如 果目标在本网站上（源端点和目标端点是同一个网站内 的网页），则会给移植和测试带来不便。因此，对内部 链接和局部链接最好不要用绝对路径。 2. 相对路径 为了避免绝对路径的缺陷，对于在本站点之中的链接来说 ，使用相对路径是一个很好的方法。相对路径是目标端 点同源端点之间的相对位置，它的参考点是源端点所在 位置，与网站的名称、地址、以及根目录的位置和名称 无关。 6 6 例如，在图5.1所示的站点中，如果希望在tuan.htm文档 中创建指向dang.htm文件的链接，路径可以直接写为 dang.htm。如果源端点和目标端点不位于同一个目录 下，则只需要将目录的相对关系表达出来。从 dang.htm到jigou.htm的链接路径写为 /administration/jigou.htm，其中“/”表示上一级目录 。从dang.htm到jiaoxuejihua.htm的相对链接路径为 /Education/benkesheng/jiaoxuejihua.htm，其中 多个“/”符号可以表示更高的上级目录。如果链接指向 的文档位于当前目录的子级目录中，可以直接输入目录 名称和文档名称。例如，从Index1.htm到dang.htm的 相对链接路径为party/dang.htm。 利用相对目录的优点在于：如果站点的结构和文件的相对 位置不变，链接就不会出错。将整个网站移植到另一个 地址的网站中，不需要对文档中的链接路径做任何修改 。但相对路径也有缺点：如果修改了站点的结构，或是 移动了文档，则文档中的链接关系就会失效。 7 7 3. 基于根目录的路径 基于根目录的路径可以看作一种特殊的相对路径，只不过 路径不是相对于源端点的，而是相对于本网站的根目录 的相对路径。通常用一个斜线“/”表示根目录，所有基于 根目录的路径都从该斜线开始。 在图5.1 所示站点中，到index1.htm 的基于根目录的路径 为/Introduction/index.htm，到dang.htm的基于根目 录的路径为/Introduction/party/dang.htm。 基于根目录的链接路径与源端点所在的位置无关。也就是 说，只要源端点在本站点内，不管源端点在哪个文件中 ，都可以使用以上的路径正确地链接到指定文件。 5.1.3 超链接的颜色 为了更清晰地表示超链接，特别是文本超链接以及它们的 链接状态，在网页中可以对超链接及它们的不同状态使 用不同的颜色显示。 8 8 未访问链接的文本颜色： 表示正常显示下超链接的文本颜 色。 已访问链接的文本颜色： 表示已经单击并正确链接过的超 链接的颜色，就是说，对已访问过的超链接可以使用另 一种颜色显示。 正在访问的链接的文本颜色： 表示单击以后，正在链接时 ，超链接显示的颜色。通常链接的网页很快就显示出来 了，所以，平时不容易看到它的效果。 默认状态下，多数浏览器将未访问的链接文本颜色显示为 蓝色。可以利用页面属性来改变超链接的各种状态的颜 色。 9 9 5.2 创建超链接 5.2.1 指向页面的超链接 【例5.1】创建文本超链接 选中要作为链接的文字（图5.2）。 在属性面板（图5.2）的Link(链接)后的文本框中输入链接 的路径，即目标端点的URL，可以是绝对路径，也可以是 相对路径，可以是网站间的链接，也可以是站内链接。如 果是局部链接，可以单击Link文本框右边的文件夹图标， 打开Select File(选择文件)对话框（图5.3），从磁盘中选 择链接的文件。在该对话框中，打开Relative To（相对于 ）下拉列表，可以指定URL路径的类型。Document（文 档）表示使用相对路径，Site Root（站点根目录）表示使 用基于根目录的路径。在URL文本框中显示当前选中文件 的URL，也可以在其中对URL进行编辑。 1010 图5.2 1111 图5.3 1212 在属性面板上的Target（目标）下拉列表中，可以指定 链接文档在哪个框架集中被显示。 _blank： 表示在新窗口中显示链接指向的页面。 _self： 表示在当前文档的框架集中显示被链接页面。 _parent： 表示在当前页面的父级框架集中显示被链接页 面。 _top： 表示在链接所在的完整窗口中显示链接页面。 默认情况下，在当前文档的框架集中显示被链接页面，如 果没有使用框架结构，则在当前浏览器窗口显示被链接 页面。 按照图5.2和图5.3的选择，创建链接后的页面中“秋夕”下 面带有下划线(图5.4(a)。用浏览器浏览该网页，单击“ 秋夕”便可在当前窗口显示网页tans_qiuxi.htm（图 5.4(b)）。 1313 图5.4 1414 注意： 如果在属性面板Link后的文本框中输入 ，则单击秋夕后会链接到 清华大学的主页上。这说明，链接的提示文字与链接的 页面在内容上没有任何关系，提示文字仅仅是一种提示 ，就像一个人的名字一样，叫张三和叫李四都可以是同 一个人。 提示： 如果超链接指向的文档不是一个HTML文件，那么 单击链接产生的操作也不相同。如果链接的文件是gif、 jpg或png等能被浏览器识别的图像文件，则仍然会在浏 览器的窗口中载入并显示它们。如果链接的文件是浏览 器不能识别的，如带有zip扩展名的压缩文件或带有exe 扩展名的可执行文件，则浏览器会打开该类文件下载对 话框，提示用户是否要下载该文件。在网页中可以通过 这种方式为用户提供下载文件的服务。 1515 5.2.2 指向页面段落的超链接 超链接不但可以指向页面文件，还可以指向指定页面内的 指定位置，这个位置需要起个名字，称为命名锚。命名 锚可以在文档中指定的位置上创建链接的目标端点，通 过对文档中指定位置的命名，允许利用链接打开目标文 档时，直接跳转到相应的命名位置上。使用命名锚，不 仅可以跳转到当前文档中的指定位置，还可以跳转到其 他文档的指定位置。要建立指向页面段落的链接，首先 要为目标端点起一个名字，即创建命名锚。 【例5.2】创建命名锚 将插入点放置到要创建命名锚的文字前，或选中要指定 命名锚的文本（图5.5）； 1616 图5.5 1717 打开Insert菜单，选择Named Anchor（命名锚）命令 ，打开Invisibles（不可见）对象面板，单击Insert Named Anchor（插入命名锚）按钮，或按组合键 Ctrl+Alt+A，打开Insert Named Anchor(插入命名锚) 对话框； 在Anchor Name(锚名称)后的文本框中输入锚的名字， 它可以是任何文本，可以与锚点的内容相同，也可以不 同，最好意义要明确。如果先前选中了文字，则选中的 文字会出现在该Anchor Name（锚名称）文本框中； 单击OK按钮，确定操作，一个锚就被插入到文档相应 的位置上。如果激活了文档窗口中对不可见元素的显示 特性（使用Edit|Preferences|Invisible Elements命令 ），则可以在文档窗口中看到锚标记 (图5.5)； 1818 如果要修改锚点的位置，可以将该锚标记作为普通的文 字在文档中拖动。单击相应的锚标记，可以在属性面板 中修改锚的名称（见图5.6）。要删除命名锚，单击命名 锚标记后按Del 键。 提示： 建立命名锚后在HTML中标记如下，王熙凤 ，其中是命名锚标记。 在文档中定义了锚只是在目标位置做了一个记号，要到达 这个位置，还需要建立源端点到目标的链接。 1919 图5.6 2020 【例5.3】链接命名锚 选中要作为链接提示的文字，它与命名锚点可以不是同 一个文件，如刚才建立锚点的文件为honglouren1.htm ，现在源端点在honglouren.htm中； 在属性面板的Link（链接）文本框中，输入锚名称及相 应前缀。 如果要链接的目标锚不在当前文档中，则先输入该文档的 URL地址和文件名称，然后输入“#”号，再输入锚名称 。如要链接当前目录下honglouren1.htm文档中的“王 熙凤”锚位置，则需要输入honglouren1.htm#王熙凤（ 见图5.7）。 2121 图5.7 2222 如果要链接的目标锚位于当前文档，则可以在属性面板的 Link文本框中，直接输入“#”号，然后再输入链接的锚 名称。如果要在honglouren1.htm文件中链接命名锚“ 王熙凤”，则输入“#王熙凤”即可。 浏览文件honglouren1.htm，单击“王熙凤”，链接到 honglouren1.htm（图5.8、图5.9）。 注意: 图5.8的状态栏中显示了链接地址。 提示： 命名锚的链接(或者说到文档段落的链接)首先要命 名一个锚点，然后在源端点处创建链接。链接地址中除 URL地址（绝对或相对）外，后面要紧跟“”和命名锚 名称。 2323 图5.8 2424 图5.9 2525 注意： 在使用命名锚时，需要遵循如下的一些准则。 一篇文档中锚的名称是惟一的，不允许在同一篇文档中出 现相同的锚名称。 锚名称的大小写应一致，如名为HongLou的锚和名为 honglou的锚不允许出现在同一篇文档中。 在链接锚时，引用的锚名称的大小写应严格一致，例如， 如果锚的名称是#HongLou，而链接中指向的锚是 #Honglou，链接将不一定成功。 5.2.3 电子邮件的超链接 【例5.4】创建电子邮件超链接 选中要作为超链接的文字（图5.10）； 2626 图5.10 2727 打开Insert菜单，选择Email Link（Email链接）命令 ，或是在Common对象面板上单击Insert Email Link（ 插入Email链接）按钮。打开Insert Email Link（插入 Email链接）对话框（见图5.10）； 如果在步骤中选定了作为链接的文字，则在Text（文 本）文本框中会出现选中的文字，也可以在这里修改要 作为链接的文字； 在E-Mail文本框中，键入需要的Email地址。 图5.11是设置Email链接后的页面效果和单击后的效果。 提示： 插入Email链接时，不必选定文字，但应把插入点放在要 设置Email链接的地方，提示文字可以在Insert Email Link（插入Email链接）对话框的Text文本框中输入； 2828 图5.11 2929 在显示效果上，Email链接与链接到页面的链接没有任何不同 ，所以，一般都在文本前加一