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