第4章 网页超链接与导航

《第4章 网页超链接与导航》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、《网页设计》课程WPSOFFICE计算机与通信系网页超链接与导航目录CONTENTS网页超链接概述案例：图像地图《网页设计》课程网页超链接与导航网页导航概述案例：用CSS设计制作网页导航案例：用CSS设计制作网页导航使用浏览器浏览网页时，当移动鼠标到页面的某些位置，鼠标指针会变成一只“手形”，表明该位置是一个超链接。在超链接处单击鼠标左键，可以直接跳转到与这个超链接相连的网页或Internet网站上去，从而在不输入URL地址的情况下访问相关网页。通过超链接，使网站内的网页串联形成一个有机整体；也是通过超链

2、接，在网站之间架起沟通的桥梁，使整个互联网形成一个有机整体。网页超链接与导航《网页设计》课程一、网页超链接概述1．认识超链接所谓超链接是指从某个网页元素指向一个目标的连接关系。这个链接目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一幅图像、一个电子邮件地址、一个文件、甚至是一个应用程序。在一个网页中用来创建超链接的元素，可以是一段文字，或是一幅图像等。当浏览者单击设置了超链接的文字或图像后，链接目标将显示在浏览器中，并根据目标的类型打开或运行。一、网页超链接概述1．认识超链接超链接有以下不同

3、的分类方式：按照链接路径的不同，网页中超链接主要分为内部链接、局部链接和外部链接。按照目标对象的不同，网页中的超链接可以分为文档链接、锚点链接、电子邮件链接、脚本链接、空链接等。一、网页超链接概述2．超链接路径创建超链接时，超链接路径的设置非常重要，如果设置不正确，将不能正确完成跳转功能。超链接路径分为绝对路径和相对路径两大类。一、网页超链接概述重点绝对路径：大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：D:/mysite/m

4、usic/123.mp3，我们就知道123.mp3文件是在D盘的mysite文件夹下的music子文件夹中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似于http://www.jxlsxy.com/imgs/123.jpg来确定文件位置的方式也是绝对路径。一、网页超链接概述缺点:不利于站点的移植和本地测试相对路径：相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利。

5、下面举实例详解：如在本地硬盘有如下两文件，它们要互做超链接，如图5-1所示。G:sitewebarticle1.htmG:siteindex.htm一、网页超链接概述index.htm要想链接到01.htm这个文件，正确的链接应该是：链接文字，这是标准的相对路径。反过来，01.htm要想链接到index.htm这个文件，在01.htm文件里面应该写上这句：返回首页。这里的../表

6、示向上一级。因此在相当路径中我们使用“../”来表示上一级文件夹，“../../”表示上上级的文件夹，以此类推。下级文件夹则用“/..”表示。一、网页超链接概述相对路径：在HTML中使用相对路径常分为两类：相对当前文档、相对站点根目录。站点根目录相对路径描述从站点的根文件夹到文档的路径。如果在处理使用多个服务器的大型Web站点，或者在使用承载多个站点的服务器，则可能需要使用这些路径。不过，如果您不熟悉此类型的路径，最好坚持使用文档相对路径。站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹。例如

7、，/article/index.htm是文件(index.htm)的站点根目录相对路径，该文件位于站点根文件夹的article子文件夹中。一、网页超链接概述一、网页超链接概述使用“插入”面板的常用选项卡制作电子邮件链接效果；使用“属性”面板为文字制作下载文件链接效果，修改链接样式。自学案例—实木地板网页2．创建各类超链接文档链接锚点链接电子邮件链接空链接脚本链接一、网页超链接概述案例1设计制作过节乐网页图4-1过节乐网页效果文档链接一、网页超链接概述首先选中要创建超链接的文字或图像，创建方法有以下几种：（

8、1）选择“插入→超级链接”菜单命令，或者单击“插入”面板“常用”类别中的“超链接”图标按钮，打开“超级链接”对话框，从中设置文本链接目标和链接目标打开的方式。Dw自动添加选中文本多采用相对路径，先保存设置超链接标题文档链接一、网页超链接概述目标：指定链接目标打开的窗口，其中，“_blank”表示在新窗口中打开，“_new”也表示在新窗口中打开，“_parent”表示在上级窗口中打开，“_self”默认“_self”，表示在当前