超链接的基本概念.ppt

1、1,第5章 超 链 接,5.1 超链接的基本概念 5.2 创建超链接 思考与练习,2,5.1 超链接的基本概念,5.1.1 什么是超链接 浏览网页时，移动鼠标，指向某些文本或图像，光标即会变成小手的形状，这时单击鼠标，就会打开另一个页面，这就是超链接。 超链接是网页中由一个地方跳转到另一个地方、网页、网站或文件的指针，跳转的起点称为源端点或简称源、锚、锚点，跳转的终点即跳转到的页面称为目标端点或简称目标、目的、目标锚。超链接指出了源端点、目标端点以及从源端点到目标端点的路径即地址。,3,超链接按源端点区分为有文本超链接、图像超链接和表单超链接。文本超链接就是利用文本为源端点构建的超链接。在浏览

2、器中，文本超链接的锚点一般显示为下方带有下划线的文字；图像超链接的源端点是图像；表单超链接的源端点可能是菜单或按钮等表单对象。 超链接按目标端点区可以分为外部链接、内部链接、局部链接和Email链接。外部链接是链接到本站点之外的站点或文档，利用这种链接，可以跳转到其他的网站上。内部链接的目标端点是本站点中的其他文档，利用这种链接，可以跳转到本站点其他的页面上。局部链接的目标端点是文档中的某个位置，如文档中间、末尾、开头或某个指定的位置，也可以是其他文档中的某一指定位置。 Email链接的目标端点是一个Email地址，单击这种链接，可以启动电子邮件程序，书写邮件并发送到指定的地址。,4,5.1.

3、2 超链接的路径 超链接的路径是URL地址。按目标端点所处位置的不同，超链接的路径分为绝对路径、相对路径和基于根目录的路径。下面以如图5.1所示站点的目录结构为例，介绍这几种路径的含义。假设网址是，web是网站的根目录，index.htm是主页。 1. 绝对路径 如果路径是一个完整的URL地址，则这种链接路径就称为绝对路径。其特点是，路径同链接的源端点所处的位置无关。在图5.1所示站点中，要创建指向Introduction目录下index1.htm文件的链接，其绝对路径为,5,图5.1,6, 绝对路径的好处是同链接的源端点无关。目标网站的地址不变，无论源端点如何移动，都可以正常实现跳转而不会发

4、生错误。 如果目标端点在其他网站上，就必须使用绝对路径。而如果目标在本网站上（源端点和目标端点是同一个网站内的网页），则会给移植和测试带来不便。因此，对内部链接和局部链接最好不要用绝对路径。 2. 相对路径 为了避免绝对路径的缺陷，对于在本站点之中的链接来说，使用相对路径是一个很好的方法。相对路径是目标端点同源端点之间的相对位置，它的参考点是源端点所在位置，与网站的名称、地址、以及根目录的位置和名称无关。,7,例如，在图5.1所示的站点中，如果希望在tuan.htm文档中创建指向dang.htm文件的链接，路径可以直接写为dang.htm。如果源端点和目标端点不位于同一个目录下，则只需要将目录

5、的相对关系表达出来。从dang.htm到jigou.htm的链接路径写为./administration/jigou.htm，其中“./”表示上一级目录。从dang.htm到jiaoxuejihua.htm的相对链接路径为././Education/benkesheng/jiaoxuejihua.htm，其中多个“./”符号可以表示更高的上级目录。如果链接指向的文档位于当前目录的子级目录中，可以直接输入目录名称和文档名称。例如，从Index1.htm到dang.htm的相对链接路径为party/dang.htm。 利用相对目录的优点在于：如果站点的结构和文件的相对位置不变，链接就不会出错。将整

6、个网站移植到另一个地址的网站中，不需要对文档中的链接路径做任何修改。但相对路径也有缺点：如果修改了站点的结构，或是移动了文档，则文档中的链接关系就会失效。,8,3. 基于根目录的路径 基于根目录的路径可以看作一种特殊的相对路径，只不过路径不是相对于源端点的，而是相对于本网站的根目录的相对路径。通常用一个斜线“/”表示根目录，所有基于根目录的路径都从该斜线开始。 在图5.1 所示站点中，到index1.htm 的基于根目录的路径为/Introduction/index.htm，到dang.htm的基于根目录的路径为/Introduction/party/dang.htm。 基于根目录的链接路径与

7、源端点所在的位置无关。也就是说，只要源端点在本站点内，不管源端点在哪个文件中，都可以使用以上的路径正确地链接到指定文件。 5.1.3 超链接的颜色 为了更清晰地表示超链接，特别是文本超链接以及它们的链接状态，在网页中可以对超链接及它们的不同状态使用不同的颜色显示。,9,未访问链接的文本颜色： 表示正常显示下超链接的文本颜色。 已访问链接的文本颜色： 表示已经单击并正确链接过的超链接的颜色，就是说，对已访问过的超链接可以使用另一种颜色显示。 正在访问的链接的文本颜色： 表示单击以后，正在链接时，超链接显示的颜色。通常链接的网页很快就显示出来了，所以，平时不容易看到它的效果。 默认状态下，多数浏览

8、器将未访问的链接文本颜色显示为蓝色。可以利用页面属性来改变超链接的各种状态的颜色。,10,5.2 创建超链接,5.2.1 指向页面的超链接 【例5.1】创建文本超链接 选中要作为链接的文字（图5.2）。 在属性面板（图5.2）的Link(链接)后的文本框中输入链接的路径，即目标端点的URL，可以是绝对路径，也可以是相对路径，可以是网站间的链接，也可以是站内链接。如果是局部链接，可以单击Link文本框右边的文件夹图标，打开Select File(选择文件)对话框（图5.3），从磁盘中选择链接的文件。在该对话框中，打开Relative To（相对于）下拉列表，可以指定URL路径的类型。Docume

9、nt（文档）表示使用相对路径，Site Root（站点根目录）表示使用基于根目录的路径。在URL文本框中显示当前选中文件的URL，也可以在其中对URL进行编辑。,11,图5.2,12,图5.3,13, 在属性面板上的Target（目标）下拉列表中，可以指定链接文档在哪个框架集中被显示。 _blank： 表示在新窗口中显示链接指向的页面。 _self： 表示在当前文档的框架集中显示被链接页面。 _parent： 表示在当前页面的父级框架集中显示被链接页面。 _top： 表示在链接所在的完整窗口中显示链接页面。 默认情况下，在当前文档的框架集中显示被链接页面，如果没有使用框架结构，则在当前浏览器窗

10、口显示被链接页面。 按照图5.2和图5.3的选择，创建链接后的页面中“秋夕”下面带有下划线(图5.4(a)。用浏览器浏览该网页，单击“秋夕”便可在当前窗口显示网页tans_qiuxi.htm（图5.4(b)）。,14,图5.4,15,注意： 如果在属性面板Link后的文本框中输入，则单击秋夕后会链接到清华大学的主页上。这说明，链接的提示文字与链接的页面在内容上没有任何关系，提示文字仅仅是一种提示，就像一个人的名字一样，叫张三和叫李四都可以是同一个人。 提示： 如果超链接指向的文档不是一个HTML文件，那么单击链接产生的操作也不相同。如果链接的文件是gif、jpg或png等能被浏览器识别的图像文

11、件，则仍然会在浏览器的窗口中载入并显示它们。如果链接的文件是浏览器不能识别的，如带有zip扩展名的压缩文件或带有exe扩展名的可执行文件，则浏览器会打开该类文件下载对话框，提示用户是否要下载该文件。在网页中可以通过这种方式为用户提供下载文件的服务。,16,5.2.2 指向页面段落的超链接 超链接不但可以指向页面文件，还可以指向指定页面内的指定位置，这个位置需要起个名字，称为命名锚。命名锚可以在文档中指定的位置上创建链接的目标端点，通过对文档中指定位置的命名，允许利用链接打开目标文档时，直接跳转到相应的命名位置上。使用命名锚，不仅可以跳转到当前文档中的指定位置，还可以跳转到其他文档的指定位置。要

12、建立指向页面段落的链接，首先要为目标端点起一个名字，即创建命名锚。 【例5.2】创建命名锚 将插入点放置到要创建命名锚的文字前，或选中要指定命名锚的文本（图5.5）；,17,图5.5,18, 打开Insert菜单，选择Named Anchor（命名锚）命令，打开Invisibles（不可见）对象面板，单击Insert Named Anchor（插入命名锚）按钮，或按组合键Ctrl+Alt+A，打开Insert Named Anchor(插入命名锚)对话框； 在Anchor Name(锚名称)后的文本框中输入锚的名字，它可以是任何文本，可以与锚点的内容相同，也可以不同，最好意义要明确。如果先前选

13、中了文字，则选中的文字会出现在该Anchor Name（锚名称）文本框中； 单击OK按钮，确定操作，一个锚就被插入到文档相应的位置上。如果激活了文档窗口中对不可见元素的显示特性（使用Edit|Preferences|Invisible Elements命令），则可以在文档窗口中看到锚标记 (图5.5)；,19, 如果要修改锚点的位置，可以将该锚标记作为普通的文字在文档中拖动。单击相应的锚标记，可以在属性面板中修改锚的名称（见图5.6）。要删除命名锚，单击命名锚标记后按Del 键。 提示： 建立命名锚后在HTML中标记如下，王熙凤 ，其中是命名锚标记。 在文档中定义了锚只是在目标位置做了一个记号

14、，要到达这个位置，还需要建立源端点到目标的链接。,20,图5.6,21,【例5.3】链接命名锚 选中要作为链接提示的文字，它与命名锚点可以不是同一个文件，如刚才建立锚点的文件为honglouren1.htm，现在源端点在honglouren.htm中； 在属性面板的Link（链接）文本框中，输入锚名称及相应前缀。 如果要链接的目标锚不在当前文档中，则先输入该文档的URL地址和文件名称，然后输入“#”号，再输入锚名称。如要链接当前目录下honglouren1.htm文档中的“王熙凤”锚位置，则需要输入honglouren1.htm#王熙凤（见图5.7）。,22,图5.7,23,如果要链接的目标锚

15、位于当前文档，则可以在属性面板的Link文本框中，直接输入“#”号，然后再输入链接的锚名称。如果要在honglouren1.htm文件中链接命名锚“王熙凤”，则输入“#王熙凤”即可。 浏览文件honglouren1.htm，单击“王熙凤”，链接到honglouren1.htm（图5.8、图5.9）。 注意: 图5.8的状态栏中显示了链接地址。 提示： 命名锚的链接(或者说到文档段落的链接)首先要命名一个锚点，然后在源端点处创建链接。链接地址中除URL地址（绝对或相对）外，后面要紧跟“”和命名锚名称。,24,图5.8,25,图5.9,26,注意： 在使用命名锚时，需要遵循如下的一些准则。 一篇文

16、档中锚的名称是惟一的，不允许在同一篇文档中出现相同的锚名称。 锚名称的大小写应一致，如名为HongLou的锚和名为honglou的锚不允许出现在同一篇文档中。 在链接锚时，引用的锚名称的大小写应严格一致，例如，如果锚的名称是#HongLou，而链接中指向的锚是#Honglou，链接将不一定成功。 5.2.3 电子邮件的超链接 【例5.4】创建电子邮件超链接 选中要作为超链接的文字（图5.10）；,27,图5.10,28, 打开Insert菜单，选择Email Link（Email链接）命令，或是在Common对象面板上单击Insert Email Link（插入Email链接）按钮。打开Ins

17、ert Email Link（插入Email链接）对话框（见图5.10）； 如果在步骤中选定了作为链接的文字，则在Text（文本）文本框中会出现选中的文字，也可以在这里修改要作为链接的文字； 在E-Mail文本框中，键入需要的Email地址。 图5.11是设置Email链接后的页面效果和单击后的效果。 提示： 插入Email链接时，不必选定文字，但应把插入点放在要设置Email链接的地方，提示文字可以在Insert Email Link（插入Email链接）对话框的Text文本框中输入；,29,图5.11,30,在显示效果上，Email链接与链接到页面的链接没有任何不同，所以，一般都在文本前加一个邮箱样子的图像以作提示； 在文档窗口中选中带链接的文本，可以在属性面板的Link文本框中修改Email地址（图5.12）。 注意： 邮件地址前要有前缀mailto：，也可删除地址从而删除链接。 可以直接使用属性面板像建立页面链接一样建立Email链接，但要注意Email地址前要加mailto:。而利用对象按钮建立则不要mailto； 在属性面板的链接（Link）栏中输入mailto:?subject=请教问题可以建立带有Email主题“请教问题”的链接。 注意： 在浏览器中单击Email链接后出现的“新邮件”窗口不是浏览器带有的，而是Outlook或其他电子邮件软件的。如果用户没有