第4章 网页超链接与导航

《第4章 网页超链接与导航》由会员分享，可在线阅读，更多相关《第4章 网页超链接与导航（65页珍藏版）》请在文档大全上搜索。

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

2、页元素指向一个目标的连接关系。这个链接目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一幅图像、一个电子邮件地址、一个文件、甚至是一个应用程序。在一个网页中用来创建超链接的元素，可以是一段文字，或是一幅图像等。当浏览者单击设置了超链接的文字或图像后，链接目标将显示在浏览器中，并根据目标的类型打开或运行。一、网页超链接概述网页设计课程超链接有以下不同的分类方式：按照链接路径的不同，网页中超链接主要分为内部链接、局部链接和外部链接。按照目标对象的不同，网页中的超链接可以分为文档链接、锚点链接、电子邮件链接、脚本链接、空链接等。一、网页超链接概述网页设计课程创建超链接时，超链接路径的设置

3、非常重要，如果设置不正确，将不能正确完成跳转功能。超链接路径分为绝对路径和相对路径两大类。一、网页超链接概述网页设计课程大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：D:/mysite/music/123.mp3，我们就知道123.mp3文件是在D盘的mysite文件夹下的music子文件夹中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似于http:/ G:siteindex.htm 一、网页超链接概述网页设计课程index.htm要想

4、链接到01.htm这个文件，正确的链接应该是：链接文字，这是标准的相对路径。反过来，01.htm要想链接到index.htm这个文件，在01.htm文件里面应该写上这句：返回首页。这里的./表示向上一级。因此在相当路径中我们使用“./”来表示上一级文件夹，“././”表示上上级的文件夹，以此类推。下级文件夹则用“/.”表示。一、网页超链接概述网页设计课程在HTML中使用相对路径常分为两类：相对当前文档、相对站点根目录。站点根目录相对路径描述从站点的根文件夹到文档的路径。如果在处理使用多个服务器的大型 Web 站点，或者在使用承载多个站点的服务器，则可能需要使用这些路径。不过，如果您不熟悉此类型

5、的路径，最好坚持使用文档相对路径。站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹。例如，/article/index.htm 是文件 (index.htm) 的站点根目录相对路径，该文件位于站点根文件夹的article子文件夹中。一、网页超链接概述网页设计课程一、网页超链接概述 使用“插入”面板的常用选项卡制作电子邮件链接效果；使用“属性”面板为文字制作下载文件链接效果，修改链接样式。自学案例实木地板网页网页设计课程文档链接锚点链接电子邮件链接空链接脚本链接一、网页超链接概述 案例1 设计制作过节乐网页图4-1 过节乐网页效果网页设计课程一、网页超链接概述首先选中要创建超链接的文

6、字或图像，创建方法有以下几种：（1）选择“插入超级链接”菜单命令，或者单击“插入”面板“常用”类别中的“超链接”图标按钮 ，打开“超级链接”对话框，从中设置文本链接目标和链接目标打开的方式。Dw自动添加选中文本多采用相对路径，先保存设置超链接标题网页设计课程一、网页超链接概述目标：目标：指定链接目标打开的窗口，其中，“_blank”表示在新窗口中打开，“_new”也表示在新窗口中打开，“_parent”表示在上级窗口中打开，“_self”默认“_self”，表示在当前窗口中打开，“_top”表示在顶层窗口中打开。 （2）在“属性”面板“HTML”类别中的“链接”文本框中直接输入路径，或者单击“

7、链接”后面的“浏览文件”按钮 ，在打开的对话框中选择目标文件创建超链接。 （3）在“属性”面板中，将“链接”后面的“指向文件”图标按钮 拖曳到“文件”面板中的目标文件上创建链接。 （4）按住键，拖曳鼠标指针到“文件”面板中的“目标文件”上创建链接。网页设计课程一、网页超链接概述提示：创建超链接的目标文件不仅可以是网页文件，还可以是其他类型文件，如图像文件、音频文件、视频文件、文本文件等。单击超链接，目标文件将在浏览器中打开，如果目标文件需要其他应用程序打开，则单击超链接后会弹出“下载文件”对话框，询问用户打开或者保存。提示：修改超链接的操作步骤与创建超链接相同。若删除超链接，只要选定超链接对象

8、，将“属性”面板“链接”下拉框中的内容删除即可。 网页设计课程一、网页超链接概述锚点链接的功能是：单击超链接对象后，可以跳转到本页面或其他页面中的指定位置，即命名锚记处。锚点超链接通常用于长篇文章、技术文档等内容的网页中。创建锚点链接分为建立命名锚记和创建指向命名锚记的超链接两部分。网页设计课程一、网页超链接概述将鼠标光标定位在要设置命名锚记的位置，选择“插入命名锚记”菜单命令，或者单击“插入”面板“常用”类别中的“命名锚记”图标按钮 ，或者按下组合键，均能弹出“命名锚记”对话框，在对话框中输入命名锚记的名称。选中要设置锚点链接的文本或图像，在“属性”面板的“链接”框中，输入一个“#”字符和命

9、名锚记名称，或将“指向文件”图标按钮拖曳到命名锚记处。提示：以“其他页面的路径#锚点名称”网页设计课程一、网页超链接概述使用电子邮件链接，可以方便地打开浏览器默认的邮件处理程序进行发送电子邮件操作，收件人地址即为电子邮件链接指定的邮箱地址。选中要设置电子邮件超链接的文本，选择“插入电子邮件链接”菜单命令，或者单击“插入”面板“常用”类别中的“电子邮件链接”图标按钮 ，弹出“电子邮件链接”对话框，在“电子邮件”文本框中输入收件人的电子邮箱地址，单击【确定】按钮完成电子邮件超链接的创建。网页设计课程一、网页超链接概述空链接是未指派的链接，主要用于向页面上的对象或文本附加行为。 选中要设置空链接的文

10、本，在“属性”面板的“链接”框中输入“#”或“javascript:;”。 例如，可以为空链接添加事件来设置主页。 设为主页网页设计课程一、网页超链接概述脚本链接能执行JavaScript代码或调用JavaScript函数。它的作用广泛，能够在不离开当前Web页面的情况下为访问者提供有关某项的附加信息，还可用于在访问者单击特定项时，执行计算、验证表单和完成其他处理任务等。 例如，将网页加入收藏夹。javascript:window.external.addFavorite(http:/,过节乐);网页设计课程文档链接锚点链接电子邮件链接空链接脚本链接一、网页超链接概述 案例1 设计制作过节乐网

11、页图6-1 过节乐网页效果网页设计课程选择“修改页面属性”菜单命令，或单击“属性”面板上的【页面属性】按钮，打开“页面属性”对话框，选择“链接（CSS）”类别，在其中设置链接的字体、大小、链接状态的颜色、以及下画线样式等。一、网页超链接概述p 默认超链接的样式为链接文本带有下画线，链接前文本为蓝色；链接活动过程为红色；链接后变为暗紫色。网页设计课程CSS样式可以设置超链接不同状态的样式，为此CSS定义了4种伪类：“a:link”设置超链接对象正常显示的样式，即未访问前的样式；“a:visited”设置超链接对象已访问后的样式；“a:hover”设置超链接对象变换时的样式，即鼠标悬停在超链接文本