网页超链接与导航.

第6章网页超链接与导航《网页设计与制作案例教程》（第2版）本章学习内容6.1案例1设计制作过节乐网页6.2案例2图像地图——设计国家地理网站页面6.3学习任务：网页导航概述6.4案例3用CSS设计制作网页导航6.5实训设计制作点点星空网站页面《网页设计与制作案例教程》（第2版）6.1案例1设计制作过节乐网页学习目标：认识超链接，掌握各类超链接的作用与创建方法，并设置其CSS样式。知识要点：超链接的分类，路径的设置，创建文档链接、锚点链接、电子邮件链接、空链接和脚本链接的方法，用CSS设置超链接样式的方法。案例效果如图6-1所示，请单击页面上的超链接，观察链接效果。《网页设计与制作案例教程》（第2版）6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）图6-1过节乐网页效果《网页设计与制作案例教程》（第2版）6.1.1超链接概述1．认识超链接所谓超链接是指从某个网页元素指向一个目标的连接关系。这个链接目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一幅图像、一个电子邮件地址、一个文件、甚至是一个应用程序。在一个网页中用来创建超链接的元素，可以是一段文字，或是一幅图像等。当浏览者单击设置了超链接的文字或图像后，链接目标将显示在浏览器中，并根据目标的类型打开或运行。6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）超链接有以下不同的分类方式：按照链接路径的不同，网页中超链接主要分为内部链接、局部链接和外部链接。按照目标对象的不同，网页中的超链接可以分为文档链接、锚点链接、电子邮件链接、脚本链接、空链接等。2．超链接路径创建超链接时，超链接路径的设置非常重要，如果设置不正确，将不能正确完成跳转功能。超链接路径分为绝对路径和相对路径两大类。6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）6.1.2创建各类超链接1．文档链接首先选中要创建超链接的文字或图像，创建方法有以下几种：（1）选择“插入→超级链接”菜单命令，或者单击“插入”面板“常用”类别中的“超链接”图标按钮，打开“超级链接”对话框，从中设置文本链接目标和链接目标打开的方式。6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）“超级链接”对话框各项含义如下。文本：设置要创建超链接的文本。链接：指定链接目标对象的路径，可以直接输入，也可以通过单击后面的【浏览】按钮，打开“选择文件”对话框进行选择。6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）目标：指定链接目标打开的窗口，其中，“_blank”表示在新窗口中打开，“_new”也表示在新窗口中打开，“_parent”表示在上级窗口中打开，“_self”表示在当前窗口中打开，“_top”表示在顶层窗口中打开。默认“_self”。标题：设置超链接的标题。在浏览器中，当鼠标置于超链接文本上时，将在鼠标后出现一个黄色的浮动框，并显示超链接标题的名称。6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）（2）在“属性”面板“HTML”类别中的“链接”文本框中直接输入路径，或者单击“链接”后面的“浏览文件”按钮，在打开的对话框中选择目标文件创建超链接。（3）在“属性”面板中，将“链接”后面的“指向文件”图标按钮拖曳到“文件”面板中的目标文件上创建链接。（4）按住Shift键，拖曳鼠标指针到“文件”面板中的“目标文件”上创建链接。6.1案例1设计制作过节乐网页6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）提示：创建超链接的目标文件不仅可以是网页文件，还可以是其他类型文件，如图像文件、音频文件、视频文件、文本文件等。单击超链接，目标文件将在浏览器中打开，如果目标文件需要其他应用程序打开，则单击超链接后会弹出“下载文件”对话框，询问用户打开或者保存。提示：修改超链接的操作步骤与创建超链接相同。若删除超链接，只要选定超链接对象，将“属性”面板“链接”下拉框中的内容删除即可。《网页设计与制作案例教程》（第2版）2．锚点链接锚点链接的功能是：单击超链接对象后，可以跳转到本页面或其他页面中的指定位置，即命名锚记处。锚点超链接通常用于长篇文章、技术文档等内容的网页中。创建锚点链接分为建立命名锚记和创建指向命名锚记的超链接两部分。6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）（1）创建命名锚记。将鼠标光标定位在要设置命名锚记的位置，选择“插入→命名锚记”菜单命令，或者单击“插入”面板“常用”类别中的“命名锚记”图标按钮，或者按下Ctrl+Alt+A组合键，均能弹出“命名锚记”对话框，在对话框中输入命名锚记的名称。（2）创建指向命名锚记的超链接。选中要设置锚点链接的文本或图像，在“属性”面板的“链接”框中，输入一个“#”字符和命名锚记名称，或将“指向文件”图标按钮拖曳到命名锚记处。6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）3．电子邮件链接使用电子邮件链接，可以方便地打开浏览器默认的邮件处理程序进行发送电子邮件操作，收件人地址即为电子邮件链接指定的邮箱地址。选中要设置电子邮件超链接的文本，选择“插入→电子邮件链接”菜单命令，或者单击“插入”面板“常用”类别中的“电子邮件链接”图标按钮，弹出“电子邮件链接”对话框，在“电子邮件”文本框中输入收件人的电子邮箱地址，单击【确定】按钮完成电子邮件超链接的创建。6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）4．空链接空链接是未指派的链接，主要用于向页面上的对象或文本附加行为。选中要设置空链接的文本，在“属性”面板的“链接”框中输入“#”或“javascript:;”。例如，可以为空链接添加事件来设置主页。ahref=#onClick=this.style.behavior='url(#default#homepage)';this.setHomePage(');设为主页/a6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）5．脚本链接脚本链接能执行JavaScript代码或调用JavaScript函数。它的作用广泛，能够在不离开当前Web页面的情况下为访问者提供有关某项的附加信息，还可用于在访问者单击特定项时，执行计算、验证表单和完成其他处理任务等。例如，将网页加入收藏夹。javascript:window.external.addFavorite(过节乐);6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）6.1.3用CSS设置超链接样式选择“修改→页面属性”菜单命令，或单击“属性”面板上的【页面属性】按钮，打开“页面属性”对话框，选择“链接（CSS）”类别，在其中设置链接的字体、大小、链接状态的颜色、以及下画线样式等。6.1案例1设计制作过节乐网页《网页设计与制作案例教程》（第2版）CSS样式可以设置超链接不同状态的样式，为此CSS定义了4种伪类：“a:link”设置超链接对象正常显示的样式，即未访问前的样式；“a:visited”设置超链接对象已访问后的样式；“a:hover”设置超链接对象变换时的样式，即鼠标悬停在超链接文本上的样式；“a:active”设置超链接对象活动链接时的样式，即单击超链接并释放超链接之前的样式，此过程时间非常短，通常效果不明显。6.1案例1设计制作过节乐网页6.2案例2图像地图——设计国家地理网站页面学习目标：掌握创建图像地图的方法。知识要点：图像地图的功能，图像地图的创建。案例效果如图6-14所示，单击山东、辽宁、湖南省地图区域，分别打开链接的网页。《网页设计与制作案例教程》（第2版）6.2案例2图像地图——设计国家地理网站页面《网页设计与制作案例教程》（第2版）图6-14国家地理页面效果《网页设计与制作案例教程》（第2版）所谓图像地图是指已被分为多个区域的图像，这些区域称为热点。当用户单击某个热点时，会显示其链接的目标文件。选中要设置热点的图像，单击“属性”面板左下角的热点工具图标按钮，在图像上拖动创建热点。可以选定【指针热点工具】图标按钮，拖动热点区域的位置或调整热点区域的大小。绘制一个不规则形状的热点区域时，需要在图像上各个转折点单击一下，最后单击【指针热点工具】按钮封闭此形状。6.2案例2图像地图——设计国家地理网站页面《网页设计与制作案例教程》（第2版）6.3学习任务：网页导航概述本节学习任务认识网页导航，了解其主要作用、分类与方向。6.3.1网页导航作用网页导航的目的是使网站的层次结构以一种有条理的方式清晰展示，引导用户毫不费力地找到所需信息，让用户在浏览网站过程中不至迷失。定位显示位置。展现网站架构。显示品牌形象。影响公司业绩。《网页设计与制作案例教程》（第2版）6.3学习任务：网页导航概述6.3.2网页导航分类1．水平栏导航水平栏导航是最流行的网站导航设计模式之一，它常用于网站的主导航菜单，用于显示网站的内容分类。水平栏导航设计模式有时设有下拉菜单，当鼠标移到某个菜单项上时，会弹出对应的二级子导航项。《网页设计与制作案例教程》（第2版）6.3学习任务：网页导航概述2．垂直栏导航垂直导航也是当前最通用的模式之一。垂直导航常与子导航菜单一起使用，也可以单独使用。垂直导航多用于包含很多链接的网站主导航。《网页设计与制作案例教程》（第2版）6.3学习任务：网页导航概述3．选项卡导航选项卡导航几乎可以设计成用户想要的任何样式，如逼真的、有手感的标签，圆滑的标签，以及简单的方边标签等。选项卡导航对用户有积极的心理效应，但不太适用于链接很多的情况。《网页设计与制作案例教程》（第2版）6.3学习任务：网页导航概述4．菜单导航菜单导航主要有弹出式菜单和下拉菜单两种。弹出式菜单（一般与垂直栏导航一起使用）和下拉菜单（一般与水平栏导航一起使用）是构建健壮的导航系统的良好方法。它使得网站整体上看起来很整洁，而且使得深层章节很容易被访问。《网页设计与制作案例教程》（第2版）6.3学习任务：网页导航概述5．面包屑导航面包屑导航是二级导航的一种形式，辅助网站的主导航系统。面包屑对于多级别、具有层次结构的网站特别有用，它可以帮助访客了解到当前自己在整个网站中所处的位置。如果访客希望返回到某一级，只需要单击相应的面包屑导航项即可。《网页设计与制作案例教程》（第2版）6.3学习任务：网页导航概述6．标签导航标签经常被用于博客和新闻网站，它们常常被组织成一个标签云，导航项可能按字母顺序排列，或者按流行程度排列。标签导航也多用于二级导航，可以提高网站的可发现性和探索性。《网页设计与制作案例教程》（第2版）6.3学习任务：网页导航概述7．页脚导航页脚导航通常用于次要导航，而且通常用于放置其他地方都没有的导航项。页脚导航一般使用文字链接，偶尔带有图标。《网页设计与制作案例教程》（第2版）6.3学习任务：网页导航概述8．个性化导航有些网页的导航以体现网站的个性为主，不拘一格，采用各种样式力求使网站与众不同，如图标样式的导航、气泡样式的导航、三维样式的导航，以及JavaScript动画导航等。《网页设计与制作案例教程》（第2版）6.3学习任务：网页导航概述6.3.3网页导航方向1．横向导航横向导航是网页导航，尤其是网页主导航采用最多的形式，而且主导航的项目个数通常在5～12个。对于有非常复杂的信息结构且有很多模块组成的网站来说，横向的导航应该使用水平栏导航和下拉菜单导航相结合的方式进行构建。《网页设计与制作案例教程》（第2版）6.3学习任务：网页导航概述2．纵向导航纵向导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。由于纵向导航菜单可以不受页面限制，所以可以含有很多链接，但是需要注意，纵向导航太长时可能将用户淹没。3．不规则导航不规则导航打破了网页由表格排版造成的“横平竖直”的