超链接的基本概念
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3
5.1.2 超链接的路径
超链接的路径是URL地址 按目标端点所处位置的不同， 超链接的路径是URL地址。按目标端点所处位置的不同， 地址。 超链接的路径分为绝对路径、 超链接的路径分为绝对路径、相对路径和基于根目录 的路径。下面以如图5.1所示站点的目录结构为例 所示站点的目录结构为例， 的路径。下面以如图5.1所示站点的目录结构为例，介 绍这几种路径的含义。假设网址是www.test.com， 绍这几种路径的含义。假设网址是www.test.com， web是网站的根目录 index.htm是主页 web是网站的根目录，index.htm是主页。 是网站的根目录， 是主页。 1. 绝对路径 如果路径是一个完整的URL地址， URL地址 如果路径是一个完整的URL地址，则这种链接路径就称 为绝对路径。其特点是， 为绝对路径。其特点是，路径同链接的源端点所处的 位置无关。在图5.1所示站点中 所示站点中， 位置无关。在图5.1所示站点中，要创建指向 Introduction目录下 Introduction目录下index1.htm文件的链接，其绝对 目录下index1.htm文件的链接 文件的链接， 路径为 http://www.test.com/Introduction/index1.htm。 http://www.test.com/Introduction/index1.htm。如 果要创建指向benkesheng目录下的 目录下的jiaoxuejihua.htm 果要创建指向benkesheng目录下的jiaoxuejihua.htm 文档的链接，绝对路径为图5.1一个网站的目录结构 文档的链接，绝对路径为图5.1一个网站的目录结构
2
超链接按源端点区分为有文本超链接、图像超链接和表 超链接按源端点区分为有文本超链接、 单超链接。 单超链接。文本超链接就是利用文本为源端点构建的 超链接。在浏览器中， 超链接。在浏览器中，文本超链接的锚点一般显示为 下方带有下划线的文字；图像超链接的源端点是图像； 下方带有下划线的文字；图像超链接的源端点是图像； 表单超链接的源端点可能是菜单或按钮等表单对象。 表单超链接的源端点可能是菜单或按钮等表单对象。 超链接按目标端点区可以分为外部链接、内部链接、 超链接按目标端点区可以分为外部链接、内部链接、局 部链接和Email链接 链接。 部链接和Email链接。外部链接是链接到本站点之外的 站点或文档，利用这种链接， 站点或文档，利用这种链接，可以跳转到其他的网站 内部链接的目标端点是本站点中的其他文档， 上。内部链接的目标端点是本站点中的其他文档，利 用这种链接，可以跳转到本站点其他的页面上。 用这种链接，可以跳转到本站点其他的页面上。局部 链接的目标端点是文档中的某个位置，如文档中间、 链接的目标端点是文档中的某个位置，如文档中间、 末尾、开头或某个指定的位置， 末尾、开头或某个指定的位置，也可以是其他文档中 的某一指定位置。 Email链接的目标端点是一个 链接的目标端点是一个Email 的某一指定位置。 Email链接的目标端点是一个Email 地址，单击这种链接，可以启动电子邮件程序， 地址，单击这种链接，可以启动电子邮件程序，书写 邮件并发送到指定的地址。 邮件并发送到指定的地址。
8
未访问链接的文本颜色： 表示正常显示下超链接的文本颜 未访问链接的文本颜色： 色。 已访问链接的文本颜色： 已访问链接的文本颜色： 表示已经单击并正确链接过的超 链接的颜色，就是说， 链接的颜色，就是说，对已访问过的超链接可以使用另 一种颜色显示。 一种颜色显示。 正在访问的链接的文本颜色： 表示单击以后，正在链接时， 正在访问的链接的文本颜色： 表示单击以后，正在链接时， 超链接显示的颜色。通常链接的网页很快就显示出来了， 超链接显示的颜色。通常链接的网页很快就显示出来了， 所以，平时不容易看到它的效果。 所以，平时不容易看到它的效果。 默认状态下， 默认状态下，多数浏览器将未访问的链接文本颜色显示为 蓝色。 蓝色。可以利用页面属性来改变超链接的各种状态的颜 色。
பைடு நூலகம்
例如，在图5.1所示的站点中 如果希望在tuan.htm文档 所示的站点中， 例如，在图5.1所示的站点中，如果希望在tuan.htm文档 中创建指向dang.htm文件的链接 文件的链接， 中创建指向dang.htm文件的链接，路径可以直接写为 dang.htm。 dang.htm。如果源端点和目标端点不位于同一个目录 则只需要将目录的相对关系表达出来。 下，则只需要将目录的相对关系表达出来。从 dang.htm到jigou.htm的链接路径写 dang.htm到jigou.htm的链接路径写 为../administration/jigou.htm，其中“../”表示上一级 ../administration/jigou.htm，其中“../” 目录。从dang.htm到jiaoxuejihua.htm的相对链接路径 目录。 dang.htm到jiaoxuejihua.htm的相对链接路径 ../../Education/benkesheng/jiaoxuejihua.htm， Education/benkesheng/jiaoxuejihua.htm 为../../Education/benkesheng/jiaoxuejihua.htm，其 中多个“../”符号可以表示更高的上级目录。 中多个“../”符号可以表示更高的上级目录。如果链接 指向的文档位于当前目录的子级目录中， 指向的文档位于当前目录的子级目录中，可以直接输入 目录名称和文档名称。例如， Index1.htm到 目录名称和文档名称。例如，从Index1.htm到 dang.htm的相对链接路径为 dang.htm的相对链接路径为party/dang.htm。 的相对链接路径为party/dang.htm。 利用相对目录的优点在于：如果站点的结构和文件的相对 利用相对目录的优点在于： 位置不变，链接就不会出错。将整个网站移植到另一个 位置不变，链接就不会出错。 地址的网站中，不需要对文档中的链接路径做任何修改。 地址的网站中，不需要对文档中的链接路径做任何修改。 但相对路径也有缺点：如果修改了站点的结构， 但相对路径也有缺点：如果修改了站点的结构，或是移 7 动了文档，则文档中的链接关系就会失效。 动了文档，则文档中的链接关系就会失效。
第5章
超 链 接
5.1 超链接的基本概念 5.2 创建超链接 思考与练习
1
5.1 超链接的基本概念
5.1.1 什么是超链接 浏览网页时，移动鼠标，指向某些文本或图像， 浏览网页时，移动鼠标，指向某些文本或图像，光 标即会变成小手的形状，这时单击鼠标， 标即会变成小手的形状，这时单击鼠标，就会打 开另一个页面，这就是超链接。 开另一个页面，这就是超链接。 超链接是网页中由一个地方跳转到另一个地方、网 超链接是网页中由一个地方跳转到另一个地方、 网站或文件的指针， 页、网站或文件的指针，跳转的起点称为源端点 或简称源、 锚点， 或简称源、锚、锚点，跳转的终点即跳转到的页 面称为目标端点或简称目标、目的、目标锚。 面称为目标端点或简称目标、目的、目标锚。超 链接指出了源端点、 链接指出了源端点、目标端点以及从源端点到目 标端点的路径即地址。 标端点的路径即地址。
9
5.2 创建超链接
5.2.1 指向页面的超链接
【例5.1】创建文本超链接 5.1】 选中要作为链接的文字（ 5.2）。 ① 选中要作为链接的文字（图5.2）。 在属性面板（ 5.2） Link(链接 链接) ② 在属性面板（图5.2）的Link(链接)后的文本框中输入链接 的路径，即目标端点的URL，可以是绝对路径， 的路径，即目标端点的URL，可以是绝对路径，也可以是 相对路径，可以是网站间的链接，也可以是站内链接。 相对路径，可以是网站间的链接，也可以是站内链接。如 果是局部链接，可以单击Link文本框右边的文件夹图标 文本框右边的文件夹图标， 果是局部链接，可以单击Link文本框右边的文件夹图标， 打开Select File(选择文件 对话框（ 5.3）， 选择文件) ），从磁盘中选 打开Select File(选择文件)对话框（图5.3），从磁盘中选 择链接的文件。在该对话框中，打开Relative To（相对于） 择链接的文件。在该对话框中，打开Relative To（相对于） 下拉列表，可以指定URL路径的类型 Document（文档） 路径的类型。 下拉列表，可以指定URL路径的类型。Document（文档） 表示使用相对路径， Root（站点根目录） 表示使用相对路径，Site Root（站点根目录）表示使用基 于根目录的路径。 URL文本框中显示当前选中文件的 于根目录的路径。在URL文本框中显示当前选中文件的 URL，也可以在其中对URL进行编辑 URL，也可以在其中对URL进行编辑。 进行编辑。
3. 基于根目录的路径 基于根目录的路径可以看作一种特殊的相对路径， 基于根目录的路径可以看作一种特殊的相对路径，只不过 路径不是相对于源端点的， 路径不是相对于源端点的，而是相对于本网站的根目录 的相对路径。通常用一个斜线“ 表示根目录， 的相对路径。通常用一个斜线“/”表示根目录，所有基 于根目录的路径都从该斜线开始。 于根目录的路径都从该斜线开始。 在图5.1 所示站点中， 在图5.1 所示站点中，到index1.htm 的基于根目录的路径 Introduction/index.htm， dang.htm的基于根目 为/Introduction/index.htm，到dang.htm的基于根目 录的路径为/Introduction/party/dang.htm。 录的路径为/Introduction/party/dang.htm。 基于根目录的链接路径与源端点所在的位置无关。 基于根目录的链接路径与源端点所在的位置无关。也就是 只要源端点在本站点内，不管源端点在哪个文件中， 说，只要源端点在本站点内，不管源端点在哪个文件中， 都可以使用以上的路径正确地链接到指定文件。 都可以使用以上的路径正确地链接到指定文件。 5.1.3 超链接的颜色 为了更清晰地表示超链接， 为了更清晰地表示超链接，特别是文本超链接以及它们的 链接状态， 链接状态，在网页中可以对超链接及它们的不同状态使 用不同的颜色显示。 用不同的颜色显示。
4
图5.1
5
http://www.test.com/Education/benkesheng/jiaoxueji hua.htm。如果希望在文档中链接主页， hua.htm。如果希望在文档中链接主页，可以不指定主 页文件名，而只用http://www.test.com。 页文件名，而只用http://www.test.com。 绝对路径的好处是同链接的源端点无关。 绝对路径的好处是同链接的源端点无关。目标网站的地 址不变，无论源端点如何移动， 址不变，无论源端点如何移动，都可以正常实现跳转 而不会发生错误。 而不会发生错误。 如果目标端点在其他网站上，就必须使用绝对路径。 如果目标端点在其他网站上，就必须使用绝对路径。而 如果目标在本网站上（ 如果目标在本网站上（源端点和目标端点是同一个网 站内的网页），则会给移植和测试带来不便。因此， 站内的网页），则会给移植和测试带来不便。因此， ），则会给移植和测试带来不便 对内部链接和局部链接最好不要用绝对路径。 对内部链接和局部链接最好不要用绝对路径。 2. 相对路径 为了避免绝对路径的缺陷， 为了避免绝对路径的缺陷，对于在本站点之中的链接来 使用相对路径是一个很好的方法。 说，使用相对路径是一个很好的方法。相对路径是目 标端点同源端点之间的相对位置， 标端点同源端点之间的相对位置，它的参考点是源端 点所在位置，与网站的名称、地址、 点所在位置，与网站的名称、地址、以及根目录的位 置和名称无关。 置和名称无关。 6
5.1.2 超链接的路径
超链接的路径是URL地址 按目标端点所处位置的不同， 超链接的路径是URL地址。按目标端点所处位置的不同， 地址。 超链接的路径分为绝对路径、 超链接的路径分为绝对路径、相对路径和基于根目录 的路径。下面以如图5.1所示站点的目录结构为例 所示站点的目录结构为例， 的路径。下面以如图5.1所示站点的目录结构为例，介 绍这几种路径的含义。假设网址是www.test.com， 绍这几种路径的含义。假设网址是www.test.com， web是网站的根目录 index.htm是主页 web是网站的根目录，index.htm是主页。 是网站的根目录， 是主页。 1. 绝对路径 如果路径是一个完整的URL地址， URL地址 如果路径是一个完整的URL地址，则这种链接路径就称 为绝对路径。其特点是， 为绝对路径。其特点是，路径同链接的源端点所处的 位置无关。在图5.1所示站点中 所示站点中， 位置无关。在图5.1所示站点中，要创建指向 Introduction目录下 Introduction目录下index1.htm文件的链接，其绝对 目录下index1.htm文件的链接 文件的链接， 路径为 http://www.test.com/Introduction/index1.htm。 http://www.test.com/Introduction/index1.htm。如 果要创建指向benkesheng目录下的 目录下的jiaoxuejihua.htm 果要创建指向benkesheng目录下的jiaoxuejihua.htm 文档的链接，绝对路径为图5.1一个网站的目录结构 文档的链接，绝对路径为图5.1一个网站的目录结构
2
超链接按源端点区分为有文本超链接、图像超链接和表 超链接按源端点区分为有文本超链接、 单超链接。 单超链接。文本超链接就是利用文本为源端点构建的 超链接。在浏览器中， 超链接。在浏览器中，文本超链接的锚点一般显示为 下方带有下划线的文字；图像超链接的源端点是图像； 下方带有下划线的文字；图像超链接的源端点是图像； 表单超链接的源端点可能是菜单或按钮等表单对象。 表单超链接的源端点可能是菜单或按钮等表单对象。 超链接按目标端点区可以分为外部链接、内部链接、 超链接按目标端点区可以分为外部链接、内部链接、局 部链接和Email链接 链接。 部链接和Email链接。外部链接是链接到本站点之外的 站点或文档，利用这种链接， 站点或文档，利用这种链接，可以跳转到其他的网站 内部链接的目标端点是本站点中的其他文档， 上。内部链接的目标端点是本站点中的其他文档，利 用这种链接，可以跳转到本站点其他的页面上。 用这种链接，可以跳转到本站点其他的页面上。局部 链接的目标端点是文档中的某个位置，如文档中间、 链接的目标端点是文档中的某个位置，如文档中间、 末尾、开头或某个指定的位置， 末尾、开头或某个指定的位置，也可以是其他文档中 的某一指定位置。 Email链接的目标端点是一个 链接的目标端点是一个Email 的某一指定位置。 Email链接的目标端点是一个Email 地址，单击这种链接，可以启动电子邮件程序， 地址，单击这种链接，可以启动电子邮件程序，书写 邮件并发送到指定的地址。 邮件并发送到指定的地址。
8
未访问链接的文本颜色： 表示正常显示下超链接的文本颜 未访问链接的文本颜色： 色。 已访问链接的文本颜色： 已访问链接的文本颜色： 表示已经单击并正确链接过的超 链接的颜色，就是说， 链接的颜色，就是说，对已访问过的超链接可以使用另 一种颜色显示。 一种颜色显示。 正在访问的链接的文本颜色： 表示单击以后，正在链接时， 正在访问的链接的文本颜色： 表示单击以后，正在链接时， 超链接显示的颜色。通常链接的网页很快就显示出来了， 超链接显示的颜色。通常链接的网页很快就显示出来了， 所以，平时不容易看到它的效果。 所以，平时不容易看到它的效果。 默认状态下， 默认状态下，多数浏览器将未访问的链接文本颜色显示为 蓝色。 蓝色。可以利用页面属性来改变超链接的各种状态的颜 色。
பைடு நூலகம்
例如，在图5.1所示的站点中 如果希望在tuan.htm文档 所示的站点中， 例如，在图5.1所示的站点中，如果希望在tuan.htm文档 中创建指向dang.htm文件的链接 文件的链接， 中创建指向dang.htm文件的链接，路径可以直接写为 dang.htm。 dang.htm。如果源端点和目标端点不位于同一个目录 则只需要将目录的相对关系表达出来。 下，则只需要将目录的相对关系表达出来。从 dang.htm到jigou.htm的链接路径写 dang.htm到jigou.htm的链接路径写 为../administration/jigou.htm，其中“../”表示上一级 ../administration/jigou.htm，其中“../” 目录。从dang.htm到jiaoxuejihua.htm的相对链接路径 目录。 dang.htm到jiaoxuejihua.htm的相对链接路径 ../../Education/benkesheng/jiaoxuejihua.htm， Education/benkesheng/jiaoxuejihua.htm 为../../Education/benkesheng/jiaoxuejihua.htm，其 中多个“../”符号可以表示更高的上级目录。 中多个“../”符号可以表示更高的上级目录。如果链接 指向的文档位于当前目录的子级目录中， 指向的文档位于当前目录的子级目录中，可以直接输入 目录名称和文档名称。例如， Index1.htm到 目录名称和文档名称。例如，从Index1.htm到 dang.htm的相对链接路径为 dang.htm的相对链接路径为party/dang.htm。 的相对链接路径为party/dang.htm。 利用相对目录的优点在于：如果站点的结构和文件的相对 利用相对目录的优点在于： 位置不变，链接就不会出错。将整个网站移植到另一个 位置不变，链接就不会出错。 地址的网站中，不需要对文档中的链接路径做任何修改。 地址的网站中，不需要对文档中的链接路径做任何修改。 但相对路径也有缺点：如果修改了站点的结构， 但相对路径也有缺点：如果修改了站点的结构，或是移 7 动了文档，则文档中的链接关系就会失效。 动了文档，则文档中的链接关系就会失效。
第5章
超 链 接
5.1 超链接的基本概念 5.2 创建超链接 思考与练习
1
5.1 超链接的基本概念
5.1.1 什么是超链接 浏览网页时，移动鼠标，指向某些文本或图像， 浏览网页时，移动鼠标，指向某些文本或图像，光 标即会变成小手的形状，这时单击鼠标， 标即会变成小手的形状，这时单击鼠标，就会打 开另一个页面，这就是超链接。 开另一个页面，这就是超链接。 超链接是网页中由一个地方跳转到另一个地方、网 超链接是网页中由一个地方跳转到另一个地方、 网站或文件的指针， 页、网站或文件的指针，跳转的起点称为源端点 或简称源、 锚点， 或简称源、锚、锚点，跳转的终点即跳转到的页 面称为目标端点或简称目标、目的、目标锚。 面称为目标端点或简称目标、目的、目标锚。超 链接指出了源端点、 链接指出了源端点、目标端点以及从源端点到目 标端点的路径即地址。 标端点的路径即地址。
9
5.2 创建超链接
5.2.1 指向页面的超链接
【例5.1】创建文本超链接 5.1】 选中要作为链接的文字（ 5.2）。 ① 选中要作为链接的文字（图5.2）。 在属性面板（ 5.2） Link(链接 链接) ② 在属性面板（图5.2）的Link(链接)后的文本框中输入链接 的路径，即目标端点的URL，可以是绝对路径， 的路径，即目标端点的URL，可以是绝对路径，也可以是 相对路径，可以是网站间的链接，也可以是站内链接。 相对路径，可以是网站间的链接，也可以是站内链接。如 果是局部链接，可以单击Link文本框右边的文件夹图标 文本框右边的文件夹图标， 果是局部链接，可以单击Link文本框右边的文件夹图标， 打开Select File(选择文件 对话框（ 5.3）， 选择文件) ），从磁盘中选 打开Select File(选择文件)对话框（图5.3），从磁盘中选 择链接的文件。在该对话框中，打开Relative To（相对于） 择链接的文件。在该对话框中，打开Relative To（相对于） 下拉列表，可以指定URL路径的类型 Document（文档） 路径的类型。 下拉列表，可以指定URL路径的类型。Document（文档） 表示使用相对路径， Root（站点根目录） 表示使用相对路径，Site Root（站点根目录）表示使用基 于根目录的路径。 URL文本框中显示当前选中文件的 于根目录的路径。在URL文本框中显示当前选中文件的 URL，也可以在其中对URL进行编辑 URL，也可以在其中对URL进行编辑。 进行编辑。
3. 基于根目录的路径 基于根目录的路径可以看作一种特殊的相对路径， 基于根目录的路径可以看作一种特殊的相对路径，只不过 路径不是相对于源端点的， 路径不是相对于源端点的，而是相对于本网站的根目录 的相对路径。通常用一个斜线“ 表示根目录， 的相对路径。通常用一个斜线“/”表示根目录，所有基 于根目录的路径都从该斜线开始。 于根目录的路径都从该斜线开始。 在图5.1 所示站点中， 在图5.1 所示站点中，到index1.htm 的基于根目录的路径 Introduction/index.htm， dang.htm的基于根目 为/Introduction/index.htm，到dang.htm的基于根目 录的路径为/Introduction/party/dang.htm。 录的路径为/Introduction/party/dang.htm。 基于根目录的链接路径与源端点所在的位置无关。 基于根目录的链接路径与源端点所在的位置无关。也就是 只要源端点在本站点内，不管源端点在哪个文件中， 说，只要源端点在本站点内，不管源端点在哪个文件中， 都可以使用以上的路径正确地链接到指定文件。 都可以使用以上的路径正确地链接到指定文件。 5.1.3 超链接的颜色 为了更清晰地表示超链接， 为了更清晰地表示超链接，特别是文本超链接以及它们的 链接状态， 链接状态，在网页中可以对超链接及它们的不同状态使 用不同的颜色显示。 用不同的颜色显示。
4
图5.1
5
http://www.test.com/Education/benkesheng/jiaoxueji hua.htm。如果希望在文档中链接主页， hua.htm。如果希望在文档中链接主页，可以不指定主 页文件名，而只用http://www.test.com。 页文件名，而只用http://www.test.com。 绝对路径的好处是同链接的源端点无关。 绝对路径的好处是同链接的源端点无关。目标网站的地 址不变，无论源端点如何移动， 址不变，无论源端点如何移动，都可以正常实现跳转 而不会发生错误。 而不会发生错误。 如果目标端点在其他网站上，就必须使用绝对路径。 如果目标端点在其他网站上，就必须使用绝对路径。而 如果目标在本网站上（ 如果目标在本网站上（源端点和目标端点是同一个网 站内的网页），则会给移植和测试带来不便。因此， 站内的网页），则会给移植和测试带来不便。因此， ），则会给移植和测试带来不便 对内部链接和局部链接最好不要用绝对路径。 对内部链接和局部链接最好不要用绝对路径。 2. 相对路径 为了避免绝对路径的缺陷， 为了避免绝对路径的缺陷，对于在本站点之中的链接来 使用相对路径是一个很好的方法。 说，使用相对路径是一个很好的方法。相对路径是目 标端点同源端点之间的相对位置， 标端点同源端点之间的相对位置，它的参考点是源端 点所在位置，与网站的名称、地址、 点所在位置，与网站的名称、地址、以及根目录的位 置和名称无关。 置和名称无关。 6