网页超链接与导航ppt课件.pptVIP

《网页设计》课程;目录 CONTENTS;使用浏览器浏览网页时，当移动鼠标到页面的某些位置，鼠标指针会变成一只“手形”，表明该位置是一个超链接。在超链接处单击鼠标左键，可以直接跳转到与这个超链接相连的网页或Internet网站上去，从而在不输入URL地址的情况下访问相关网页。通过超链接，使网站内的网页串联形成一个有机整体；也是通过超链接，在网站之间架起沟通的桥梁，使整个互联网形成一个有机整体。 ;1．认识超链接 所谓超链接是指从某个网页元素指向一个目标的连接关系。这个链接目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一幅图像、一个电子邮件地址、一个文件、甚至是一个应用程序。在一个网页中用来创建超链接的元素，可以是一段文字，或是一幅图像等。当浏览者单击设置了超链接的文字或图像后，链接目标将显示在浏览器中，并根据目标的类型打开或运行。 ;1．认识超链接 超链接有以下不同的分类方式： 按照链接路径的不同，网页中超链接主要分为内部链接、局部链接和外部链接。 按照目标对象的不同，网页中的超链接可以分为文档链接、锚点链接、电子邮件链接、脚本链接、空链接等。;2．超链接路径 创建超链接时，超链接路径的设置非常重要，如果设置不正确，将不能正确完成跳转功能。超链接路径分为绝对路径和相对路径两大类。;绝对路径： 大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：D:/mysite/music/123.mp3，我们就知道123.mp3文件是在D盘的mysite文件夹下的music子文件夹中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似于/imgs/123.jpg来确定文件位置的方式也是绝对路径。 ;相对路径： 相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利。下面举实例详解： 如在本地硬盘有如下两文件，它们要互做超链接，如图5-1所示。 　G:\site\web\article\01.htm G:\site\index.htm ;index.htm要想链接到01.htm这个文件，正确的链接应该是：a href=web/article/01.htm链接文字/a，这是标准的相对路径。 反过来，01.htm要想链接到index.htm这个文件，在01.htm文件里面应该写上这句：a href=../../index.htm返回首页/a。这里的../表示向上一级。 因此在相当路径中我们使用“../”来表示上一级文件夹，“../../”表示上上级的文件夹，以此类推。下级文件夹则用“/..”表示。;相对路径： 在HTML中使用相对路径常分为两类：相对当前文档、相对站点根目录。站点根目录相对路径描述从站点的根文件夹到文档的路径。如果在处理使用多个服务器的大型 Web 站点，或者在使用承载多个站点的服务器，则可能需要使用这些路径。不过，如果您不熟悉此类型的路径，最好坚持使用文档相对路径。 站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹。例如，/article/index.htm 是文件 (index.htm) 的站点根目录相对路径，该文件位于站点根文件夹的article子文件夹中。;一、网页超链接概述;2．创建各类超链接 文档链接 锚点链接 电子邮件链接 空链接 脚本链接;文档链接;文档链接;文档链接;锚点链接;锚点链接;电子邮件链接;空链接;脚本链接;2．创建各类超链接 文档链接 锚点链接 电子邮件链接 空链接 脚本链接;3．用CSS设置超链接样式 选择“修改→页面属性”菜单命令，或单击“属性”面板上的【页面属性】按钮，打开“页面属性”对话框，选择“链接（CSS）”类别，在其中设置链接的字体、大小、链接状态的颜色、以及下画线样式等。;3．用CSS设置超链接样式 CSS样式可以设置超链接不同状态的样式，为此CSS定义了4种伪类： “a:link”设置超链接对象正常显示的样式，即未访问前的样式； “a:visited”设置超链接对象已访问后的样式； “a:hover”设置超链接对象变换时的样式，即鼠标悬停在超链接文本上的样式； “a:active”设置超链接对象活动链接时的样式，即单击超链接并释放超链接之前的样式，此过程时间非常短，通常效果不明显。;目录 CONTENTS;加强身体锻炼 ;所谓图像地图是指已被分为多个区域的图像，这些区域称为热点。当用户单击某个热点时，会显示其链接的目标文件。 选中要设置热点的图像，单击“属性”面板左下角的热点工具图标按钮，在图像上拖动创建热点。 可以选定【指针热点工具】图