最新第五讲超链接网页制作ppt模版课件

《最新第五讲超链接网页制作ppt模版课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

第5章超链接5.1超链接的基本概念5.2创建超链接思考与练习1 5.1超链接的基本概念5.1.1什么是超链接浏览网页时，移动鼠标，指向某些文本或图像，光标即会变成小手的形状，这时单击鼠标，就会打开另一个页面，这就是超链接。超链接是网页中由一个地方跳转到另一个地方、网页、网站或文件的指针，跳转的起点称为源端点或简称源、锚、锚点，跳转的终点即跳转到的页面称为目标端点或简称目标、目的、目标锚。超链接指出了源端点、目标端点以及从源端点到目标端点的路径即地址。2 超链接按源端点区分为有文本超链接、图像超链接和表单超链接。文本超链接就是利用文本为源端点构建的超链接。在浏览器中，文本超链接的锚点一般显示为下方带有下划线的文字；图像超链接的源端点是图像；表单超链接的源端点可能是菜单或按钮等表单对象。超链接按目标端点区可以分为外部链接、内部链接、局部链接和Email链接。外部链接是链接到本站点之外的站点或文档，利用这种链接，可以跳转到其他的网站上。内部链接的目标端点是本站点中的其他文档，利用这种链接，可以跳转到本站点其他的页面上。局部链接的目标端点是文档中的某个位置，如文档中间、末尾、开头或某个指定的位置，也可以是其他文档中的某一指定位置。Email链接的目标端点是一个Email地址，单击这种链接，可以启动电子邮件程序，书写邮件并发送到指定的地址。3 5.1.2超链接的路径超链接的路径是URL地址。按目标端点所处位置的不同，超链接的路径分为绝对路径、相对路径和基于根目录的路径。下面以如图5.1所示站点的目录结构为例，介绍这几种路径的含义。假设网址是www.test.com，web是网站的根目录，index.htm是主页。1.绝对路径如果路径是一个完整的URL地址，则这种链接路径就称为绝对路径。其特点是，路径同链接的源端点所处的位置无关。在图5.1所示站点中，要创建指向Introduction目录下index1.htm文件的链接，其绝对路径为http://www.test.com/Introduction/index1.htm。如果要创建指向benkesheng目录下的jiaoxuejihua.htm文档的链接，绝对路径为图5.1一个网站的目录结构4 图5.15 http://www.test.com/Education/benkesheng/jiaoxuejihua.htm。如果希望在文档中链接主页，可以不指定主页文件名，而只用http://www.test.com。绝对路径的好处是同链接的源端点无关。目标网站的地址不变，无论源端点如何移动，都可以正常实现跳转而不会发生错误。如果目标端点在其他网站上，就必须使用绝对路径。而如果目标在本网站上（源端点和目标端点是同一个网站内的网页），则会给移植和测试带来不便。因此，对内部链接和局部链接最好不要用绝对路径。2.相对路径为了避免绝对路径的缺陷，对于在本站点之中的链接来说，使用相对路径是一个很好的方法。相对路径是目标端点同源端点之间的相对位置，它的参考点是源端点所在位置，与网站的名称、地址、以及根目录的位置和名称无关。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 3.基于根目录的路径基于根目录的路径可以看作一种特殊的相对路径，只不过路径不是相对于源端点的，而是相对于本网站的根目录的相对路径。通常用一个斜线“/”表示根目录，所有基于根目录的路径都从该斜线开始。在图5.1所示站点中，到index1.htm的基于根目录的路径为/Introduction/index.htm，到dang.htm的基于根目录的路径为/Introduction/party/dang.htm。基于根目录的链接路径与源端点所在的位置无关。也就是说，只要源端点在本站点内，不管源端点在哪个文件中，都可以使用以上的路径正确地链接到指定文件。5.1.3超链接的颜色为了更清晰地表示超链接，特别是文本超链接以及它们的链接状态，在网页中可以对超链接及它们的不同状态使用不同的颜色显示。8 未访问链接的文本颜色：表示正常显示下超链接的文本颜色。已访问链接的文本颜色：表示已经单击并正确链接过的超链接的颜色，就是说，对已访问过的超链接可以使用另一种颜色显示。正在访问的链接的文本颜色：表示单击以后，正在链接时，超链接显示的颜色。通常链接的网页很快就显示出来了，所以，平时不容易看到它的效果。默认状态下，多数浏览器将未访问的链接文本颜色显示为蓝色。可以利用页面属性来改变超链接的各种状态的颜色。9 5.2创建超链接5.2.1指向页面的超链接【例5.1】创建文本超链接①选中要作为链接的文字（图5.2）。②在属性面板（图5.2）的Link(链接)后的文本框中输入链接的路径，即目标端点的URL，可以是绝对路径，也可以是相对路径，可以是网站间的链接，也可以是站内链接。如果是局部链接，可以单击Link文本框右边的文件夹图标，打开SelectFile(选择文件)对话框（图5.3），从磁盘中选择链接的文件。在该对话框中，打开RelativeTo（相对于）下拉列表，可以指定URL路径的类型。Document（文档）表示使用相对路径，SiteRoot（站点根目录）表示使用基于根目录的路径。在URL文本框中显示当前选中文件的URL，也可以在其中对URL进行编辑。10 图5.211 图5.312 ③在属性面板上的Target（目标）下拉列表中，可以指定链接文档在哪个框架集中被显示。_blank：表示在新窗口中显示链接指向的页面。_self：表示在当前文档的框架集中显示被链接页面。_parent：表示在当前页面的父级框架集中显示被链接页面。_top：表示在链接所在的完整窗口中显示链接页面。默认情况下，在当前文档的框架集中显示被链接页面，如果没有使用框架结构，则在当前浏览器窗口显示被链接页面。按照图5.2和图5.3的选择，创建链接后的页面中“秋夕”下面带有下划线(图5.4(a))。用浏览器浏览该网页，单击“秋夕”便可在当前窗口显示网页tans_qiuxi.htm（图5.4(b)）。13 图5.414 注意：如果在属性面板Link后的文本框中输入http://www.tsinghua.edu.cn，则单击秋夕后会链接到清华大学的主页上。这说明，链接的提示文字与链接的页面在内容上没有任何关系，提示文字仅仅是一种提示，就像一个人的名字一样，叫张三和叫李四都可以是同一个人。提示：如果超链接指向的文档不是一个HTML文件，那么单击链接产生的操作也不相同。如果链接的文件是gif、jpg或png等能被浏览器识别的图像文件，则仍然会在浏览器的窗口中载入并显示它们。如果链接的文件是浏览器不能识别的，如带有zip扩展名的压缩文件或带有exe扩展名的可执行文件，则浏览器会打开该类文件下载对话框，提示用户是否要下载该文件。在网页中可以通过这种方式为用户提供下载文件的服务。15 5.2.2指向页面段落的超链接超链接不但可以指向页面文件，还可以指向指定页面内的指定位置，这个位置需要起个名字，称为命名锚。命名锚可以在文档中指定的位置上创建链接的目标端点，通过对文档中指定位置的命名，允许利用链接打开目标文档时，直接跳转到相应的命名位置上。使用命名锚，不仅可以跳转到当前文档中的指定位置，还可以跳转到其他文档的指定位置。要建立指向页面段落的链接，首先要为目标端点起一个名字，即创建命名锚。【例5.2】创建命名锚①将插入点放置到要创建命名锚的文字前，或选中要指定命名锚的文本（图5.5）；16 图5.517 ②打开Insert菜单，选择NamedAnchor（命名锚）命令，打开Invisibles（不可见）对象面板，单击InsertNamedAnchor（插入命名锚）按钮，或按组合键Ctrl+Alt+A，打开InsertNamedAnchor(插入命名锚)对话框；③在AnchorName(锚名称)后的文本框中输入锚的名字，它可以是任何文本，可以与锚点的内容相同，也可以不同，最好意义要明确。如果先前选中了文字，则选中的文字会出现在该AnchorName（锚名称）文本框中；④单击OK按钮，确定操作，一个锚就被插入到文档相应的位置上。如果激活了文档窗口中对不可见元素的显示特性（使用Edit|Preferences|InvisibleElements命令），则可以在文档窗口中看到锚标记(图5.5)；18 ⑤如果要修改锚点的位置，可以将该锚标记作为普通的文字在文档中拖动。单击相应的锚标记，可以在属性面板中修改锚的名称（见图5.6）。要删除命名锚，单击命名锚标记后按Del键。提示：建立命名锚后在HTML中标记如下，

王熙凤