网页超链接与导航
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
3．电子邮件链接 使用电子邮件链接，可以方便地打开浏览器默认 的邮件处理程序进行发送电子邮件操作，收件人地 址即为电子邮件链接指定的邮箱地址。 选中要设置电子邮件超链接的文本，选择“插入 →电子邮件链接”菜单命令，或者单击“插入”面 板“常用”类别中的“电子邮件链接”图标按钮 ， 弹出“电子邮件链接”对话框，在“电子邮件”文 本框中输入收件人的电子邮箱地址，单击【确定】 按钮完成电子邮件超链接的创建。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
6.1.2 创建各类超链接 1．文档链接 首先选中要创建超链接的文字或图像，创建方法 有以下几种： （1）选择“插入→超级链接”菜单命令，或者 单击“插入”面板“常用”类别中的“超链接”图 标按钮 ，打开“超级链接”对话框，从中设置文本 链接目标和链接目标打开的方式。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
提示：创建超链接的目标文件不仅可以是网页文 件，还可以是其他类型文件，如图像文件、音频文 件、视频文件、文本文件等。单击超链接，目标文 件将在浏览器中打开，如果目标文件需要其他应用 程序打开，则单击超链接后会弹出“下载文件”对 话框，询问用户打开或者保存。 提示：修改超链接的操作步骤与创建超链接相同 。若删除超链接，只要选定超链接对象，将“属性 ”面板“链接”下拉框中的内容删除即可。
目标：指定链接目标打开的窗口，其中，“_blank” 表示在新窗口中打开，“ _new ”也表示在新窗口中 打开，“_parent”表示在上级窗口中打开，“_self” 表示在当前窗口中打开，“_top”表示在顶层窗口中 打开。默认“_self”。 标题：设置超链接的标题。在浏览器中，当鼠标置 于超链接文本上时，将在鼠标后出现一个黄色的浮动 框，并显示超链接标题的名称。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
2．锚点链接 锚点链接的功能是：单击超链接对象后，可以跳 转到本页面或其他页面中的指定位置，即命名锚记 处。锚点超链接通常用于长篇文章、技术文档等内 容的网页中。 创建锚点链接分为建立命名锚记和创建指向命名 锚记的超链接两部分。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
4．空链接 空链接是未指派的链接，主要用于向页面上的对 象或文本附加行为。 选中要设置空链接的文本，在“属性”面板的 “链接”框中输入“#”或“javascript:;”。 例如，可以为空链接添加事件来设置主页。
<a href="#" onClick="this.style.behavior= 'url(#default#homepage)'; this.setHomePage('') ;">设为主页</a>
第6章 网页超链接与导航
《网页设计与制作案例教程》（第2版）
本章学习内容
6.1 6.2 6.3 6.4 6.5 案例1 设计制作过节乐网页 案例2 图像地图——设计国家地理网站页面 学习任务：网页导航概述 案例3 用CSS设计制作网页导航 实训 设计制作点点星空网站页面
《网页设计与制作案例教程》（第2版）
6.3 学习任务：网页导航概述
本节学习任务 认识网页导航，了解其主要作用、分类与方向。 6.3.1 网页导航作用 网页导航的目的是使网站的层次结构以一种有条 理的方式清晰展示，引导用户毫不费力地找到所需信 息，让用户在浏览网站过程中不至迷失。 定位显示位置。 展现网站架构。 显示品牌形象。 影响公司业绩。
6.3 学习任务：网页导航概述
2．垂直栏导航 垂直导航也是当前最通用的模式之一。垂直导航 常与子导航菜单一起使用，也可以单独使用。垂直 导航多用于包含很多链接的网站主导航。
《网页设计与制作案例教程》（第2版）
6.3 学习任务：网页导航概述
3．选项卡导航 选项卡导航几乎可以设计成用户想要的任何样式， 如逼真的、有手感的标签，圆滑的标签，以及简单 的方边标签等。选项卡导航对用户有积极的心理效 应，但不太适用于链接很多的情况。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
学习目标：认识超链接，掌握各类超链接的 作用与创建方法，并设置其CSS样式。 知识要点：超链接的分类，路径的设置，创 建文档链接、锚点链接、电子邮件链接、空 链接和脚本链接的方法，用CSS设置超链接 样式的方法。案例效果如图6-1所示，请单 击页面上的超链接，观察链接效果。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
CSS 样式可以设置超链接不同状态的样式，为 此CSS定义了4种伪类： “a:link”设置超链接对象正常显示的样式，即未 访问前的样式； “a:visited”设置超链接对象已访问后的样式； “a:hover”设置超链接对象变换时的样式，即鼠 标悬停在超链接文本上的样式； “a:active”设置超链接对象活动链接时的样式， 即单击超链接并释放超链接之前的样式，此过程时 间非常短，通常效果不明显。
《网页设计与制作案例教程》（第2版）
6.3 学习任务：网页导航概述
8．个性化导航 有些网页的导航以体现网站的个性为主，不拘一 格，采用各种样式力求使网站与众不同，如图标样 式的导航、气泡样式的导航、三维样式的导航，以 及JavaScript动画导航等。
《网页设计与制作案例教程》（第2版）
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
5．脚本链接 脚本链接能执行JavaScript代码或调用 JavaScript函数。它的作用广泛，能够在不离开当 前Web页面的情况下为访问者提供有关某项的附加 信息，还可用于在访问者单击特定项时，执行计算、 验证表单和完成其他处理任务等。 例如，将网页加入收藏夹。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
（2）在“属性”面板“HTML”类别中的“链接” 文本框中直接输入路径，或者单击“链接”后面的 “浏览文件”按钮 ，在打开的对话框中选择目标文 件创建超链接。 （3）在“属性”面板中，将“链接”后面的“指 向文件”图标按钮 拖曳到“文件”面板中的目标文 件上创建链接。 （4）按住<Shift>键，拖曳鼠标指针到“文件” 面板中的“目标文件”上创建链接。
6.3 学习任务：网页导航概述
5．面包屑导航 面包屑导航是二级导航的一种形式，辅助网站的 主导航系统。面包屑对于多级别、具有层次结构的 网站特别有用，它可以帮助访客了解到当前自己在 整个网站中所处的位置。如果访客希望返回到某一 级，只需要单击相应的面包屑导航项即可。
《网页设计与制作案例教程》（第2版）
图6-14 国家地理页面效果
《网页设计与制作案例教程》（第2版）
6.2 案例2 图像地图——设计国家地理网站页面
所谓图像地图是指已被分为多个区域的图像，这 些区域称为热点。当用户单击某个热点时，会显示 其链接的目标文件。 选中要设置热点的图像，单击“属性”面板左下 角的热点工具图标按钮，在图像上拖动创建热点。 可以选定【指针热点工具】图标按钮，拖动热点 区域的位置或调整热点区域的大小。 绘制一个不规则形状的热点区域时，需要在图像 上各个转折点单击一下，最后单击【指针热点工具】 按钮封闭此形状。
《网页设计与制作案例教程》（第2版）
6.3 学习任务：网页导航概述
4．菜单导航 菜单导航主要有弹出式菜单和下拉菜单两种。弹 出式菜单（一般与垂直栏导航一起使用）和下拉菜 单（一般与水平栏导航一起使用）是构建健壮的导 航系统的良好方法。它使得网站整体上看起来很整 洁，而且使得深层章节很容易被访问。
《网页设计与制作案例教程》（第2版）
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
（1）创建命名锚记。 将鼠标光标定位在要设置命名锚记的位置，选择 “插入→命名锚记”菜单命令，或者单击“插入” 面板“常用”类别中的“命名锚记”图标按钮 ，或 者按下 <Ctrl+Alt+A> 组合键，均能弹出“命名锚 记”对话框，在对话框中输入命名锚记的名称。 （2）创建指向命名锚记的超链接。 选中要设置锚点链接的文本或图像，在“属性” 面板的“链接”框中，输入一个“ # ”字符和命名 锚记名称，或将“指向文件”图标按钮拖曳到命名 锚记处。
《网页设计与制作案例教程》（第2版）
பைடு நூலகம்
6.2 案例2 图像地图——设计国家地理网站页面
学习目标：掌握创建图像地图的方法。 知识要点：图像地图的功能，图像地图的创 建。案例效果如图6-14所示，单击山东、 辽宁、湖南省地图区域，分别打开链接的网 页。
《网页设计与制作案例教程》（第2版）
6.2 案例2 图像地图——设计国家地理网站页面
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
超链接有以下不同的分类方式： 按照链接路径的不同，网页中超链接主要分为内 部链接、局部链接和外部链接。 按照目标对象的不同，网页中的超链接可以分为 文档链接、锚点链接、电子邮件链接、脚本链接、 空链接等。 2．超链接路径 创建超链接时，超链接路径的设置非常重要，如 果设置不正确，将不能正确完成跳转功能。超链接 路径分为绝对路径和相对路径两大类。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
“超级链接”对话框各项含义如下。 文本：设置要创建超链接的文本。 链接：指定链接目标对象的路径，可以直接输入， 也可以通过单击后面的【浏览】按钮 ，打开“选择文 件”对话框进行选择。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
3．电子邮件链接 使用电子邮件链接，可以方便地打开浏览器默认 的邮件处理程序进行发送电子邮件操作，收件人地 址即为电子邮件链接指定的邮箱地址。 选中要设置电子邮件超链接的文本，选择“插入 →电子邮件链接”菜单命令，或者单击“插入”面 板“常用”类别中的“电子邮件链接”图标按钮 ， 弹出“电子邮件链接”对话框，在“电子邮件”文 本框中输入收件人的电子邮箱地址，单击【确定】 按钮完成电子邮件超链接的创建。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
6.1.2 创建各类超链接 1．文档链接 首先选中要创建超链接的文字或图像，创建方法 有以下几种： （1）选择“插入→超级链接”菜单命令，或者 单击“插入”面板“常用”类别中的“超链接”图 标按钮 ，打开“超级链接”对话框，从中设置文本 链接目标和链接目标打开的方式。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
提示：创建超链接的目标文件不仅可以是网页文 件，还可以是其他类型文件，如图像文件、音频文 件、视频文件、文本文件等。单击超链接，目标文 件将在浏览器中打开，如果目标文件需要其他应用 程序打开，则单击超链接后会弹出“下载文件”对 话框，询问用户打开或者保存。 提示：修改超链接的操作步骤与创建超链接相同 。若删除超链接，只要选定超链接对象，将“属性 ”面板“链接”下拉框中的内容删除即可。
目标：指定链接目标打开的窗口，其中，“_blank” 表示在新窗口中打开，“ _new ”也表示在新窗口中 打开，“_parent”表示在上级窗口中打开，“_self” 表示在当前窗口中打开，“_top”表示在顶层窗口中 打开。默认“_self”。 标题：设置超链接的标题。在浏览器中，当鼠标置 于超链接文本上时，将在鼠标后出现一个黄色的浮动 框，并显示超链接标题的名称。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
2．锚点链接 锚点链接的功能是：单击超链接对象后，可以跳 转到本页面或其他页面中的指定位置，即命名锚记 处。锚点超链接通常用于长篇文章、技术文档等内 容的网页中。 创建锚点链接分为建立命名锚记和创建指向命名 锚记的超链接两部分。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
4．空链接 空链接是未指派的链接，主要用于向页面上的对 象或文本附加行为。 选中要设置空链接的文本，在“属性”面板的 “链接”框中输入“#”或“javascript:;”。 例如，可以为空链接添加事件来设置主页。
<a href="#" onClick="this.style.behavior= 'url(#default#homepage)'; this.setHomePage('') ;">设为主页</a>
第6章 网页超链接与导航
《网页设计与制作案例教程》（第2版）
本章学习内容
6.1 6.2 6.3 6.4 6.5 案例1 设计制作过节乐网页 案例2 图像地图——设计国家地理网站页面 学习任务：网页导航概述 案例3 用CSS设计制作网页导航 实训 设计制作点点星空网站页面
《网页设计与制作案例教程》（第2版）
6.3 学习任务：网页导航概述
本节学习任务 认识网页导航，了解其主要作用、分类与方向。 6.3.1 网页导航作用 网页导航的目的是使网站的层次结构以一种有条 理的方式清晰展示，引导用户毫不费力地找到所需信 息，让用户在浏览网站过程中不至迷失。 定位显示位置。 展现网站架构。 显示品牌形象。 影响公司业绩。
6.3 学习任务：网页导航概述
2．垂直栏导航 垂直导航也是当前最通用的模式之一。垂直导航 常与子导航菜单一起使用，也可以单独使用。垂直 导航多用于包含很多链接的网站主导航。
《网页设计与制作案例教程》（第2版）
6.3 学习任务：网页导航概述
3．选项卡导航 选项卡导航几乎可以设计成用户想要的任何样式， 如逼真的、有手感的标签，圆滑的标签，以及简单 的方边标签等。选项卡导航对用户有积极的心理效 应，但不太适用于链接很多的情况。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
学习目标：认识超链接，掌握各类超链接的 作用与创建方法，并设置其CSS样式。 知识要点：超链接的分类，路径的设置，创 建文档链接、锚点链接、电子邮件链接、空 链接和脚本链接的方法，用CSS设置超链接 样式的方法。案例效果如图6-1所示，请单 击页面上的超链接，观察链接效果。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
CSS 样式可以设置超链接不同状态的样式，为 此CSS定义了4种伪类： “a:link”设置超链接对象正常显示的样式，即未 访问前的样式； “a:visited”设置超链接对象已访问后的样式； “a:hover”设置超链接对象变换时的样式，即鼠 标悬停在超链接文本上的样式； “a:active”设置超链接对象活动链接时的样式， 即单击超链接并释放超链接之前的样式，此过程时 间非常短，通常效果不明显。
《网页设计与制作案例教程》（第2版）
6.3 学习任务：网页导航概述
8．个性化导航 有些网页的导航以体现网站的个性为主，不拘一 格，采用各种样式力求使网站与众不同，如图标样 式的导航、气泡样式的导航、三维样式的导航，以 及JavaScript动画导航等。
《网页设计与制作案例教程》（第2版）
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
5．脚本链接 脚本链接能执行JavaScript代码或调用 JavaScript函数。它的作用广泛，能够在不离开当 前Web页面的情况下为访问者提供有关某项的附加 信息，还可用于在访问者单击特定项时，执行计算、 验证表单和完成其他处理任务等。 例如，将网页加入收藏夹。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
（2）在“属性”面板“HTML”类别中的“链接” 文本框中直接输入路径，或者单击“链接”后面的 “浏览文件”按钮 ，在打开的对话框中选择目标文 件创建超链接。 （3）在“属性”面板中，将“链接”后面的“指 向文件”图标按钮 拖曳到“文件”面板中的目标文 件上创建链接。 （4）按住<Shift>键，拖曳鼠标指针到“文件” 面板中的“目标文件”上创建链接。
6.3 学习任务：网页导航概述
5．面包屑导航 面包屑导航是二级导航的一种形式，辅助网站的 主导航系统。面包屑对于多级别、具有层次结构的 网站特别有用，它可以帮助访客了解到当前自己在 整个网站中所处的位置。如果访客希望返回到某一 级，只需要单击相应的面包屑导航项即可。
《网页设计与制作案例教程》（第2版）
图6-14 国家地理页面效果
《网页设计与制作案例教程》（第2版）
6.2 案例2 图像地图——设计国家地理网站页面
所谓图像地图是指已被分为多个区域的图像，这 些区域称为热点。当用户单击某个热点时，会显示 其链接的目标文件。 选中要设置热点的图像，单击“属性”面板左下 角的热点工具图标按钮，在图像上拖动创建热点。 可以选定【指针热点工具】图标按钮，拖动热点 区域的位置或调整热点区域的大小。 绘制一个不规则形状的热点区域时，需要在图像 上各个转折点单击一下，最后单击【指针热点工具】 按钮封闭此形状。
《网页设计与制作案例教程》（第2版）
6.3 学习任务：网页导航概述
4．菜单导航 菜单导航主要有弹出式菜单和下拉菜单两种。弹 出式菜单（一般与垂直栏导航一起使用）和下拉菜 单（一般与水平栏导航一起使用）是构建健壮的导 航系统的良好方法。它使得网站整体上看起来很整 洁，而且使得深层章节很容易被访问。
《网页设计与制作案例教程》（第2版）
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
（1）创建命名锚记。 将鼠标光标定位在要设置命名锚记的位置，选择 “插入→命名锚记”菜单命令，或者单击“插入” 面板“常用”类别中的“命名锚记”图标按钮 ，或 者按下 <Ctrl+Alt+A> 组合键，均能弹出“命名锚 记”对话框，在对话框中输入命名锚记的名称。 （2）创建指向命名锚记的超链接。 选中要设置锚点链接的文本或图像，在“属性” 面板的“链接”框中，输入一个“ # ”字符和命名 锚记名称，或将“指向文件”图标按钮拖曳到命名 锚记处。
《网页设计与制作案例教程》（第2版）
பைடு நூலகம்
6.2 案例2 图像地图——设计国家地理网站页面
学习目标：掌握创建图像地图的方法。 知识要点：图像地图的功能，图像地图的创 建。案例效果如图6-14所示，单击山东、 辽宁、湖南省地图区域，分别打开链接的网 页。
《网页设计与制作案例教程》（第2版）
6.2 案例2 图像地图——设计国家地理网站页面
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
超链接有以下不同的分类方式： 按照链接路径的不同，网页中超链接主要分为内 部链接、局部链接和外部链接。 按照目标对象的不同，网页中的超链接可以分为 文档链接、锚点链接、电子邮件链接、脚本链接、 空链接等。 2．超链接路径 创建超链接时，超链接路径的设置非常重要，如 果设置不正确，将不能正确完成跳转功能。超链接 路径分为绝对路径和相对路径两大类。
《网页设计与制作案例教程》（第2版）
6.1 案例1 设计制作过节乐网页
“超级链接”对话框各项含义如下。 文本：设置要创建超链接的文本。 链接：指定链接目标对象的路径，可以直接输入， 也可以通过单击后面的【浏览】按钮 ，打开“选择文 件”对话框进行选择。
《网页设计与制作案例教程》（第2版）
合集下载
第5章 设计超链接和导航菜单 网页设计课件
选择【插入】|【超级链接】命令，打开【超级链接】对话框。
5.2.4 使用快捷菜单
右键单击选中的文字或图像，在打开的快捷菜单中选择【创建链接】命 令，打开【选择文件】对话框，即可定义超链接。
5.2.5 鼠标拖动
按住Shift键，在选定的文本上拖动鼠标指针，在拖动时会出现指向文件 图标。拖动鼠标到文件中的锚点或者【文件】面板中另一个文件，最后 释放鼠标即可。
第5章 设计超链接和 导航菜单
学习要点
•熟悉路径以及URL表示方法 •在网页中插入超链接。 •设置热点地图。 •设计导航菜单。
5.1 超链接概述
5.1.3 根路径
根路径是指从站点根文件夹到被链接文件经由的路径。根路径由前斜杠 开头，它代表站点根文件夹。例如，/news/beijing2005.html就是站点根 文件夹下的news子文件夹中的一个文件（beijing2005.html）的根相对路 径。在网站内链接文件时一般使用根路径的方法，因为在移动一个包含 根相对链接的文件时，无需对原有的链接进行修改。
5.3.5 实战演练：创建下载链接
当被链接的文件不被浏览器解析时，如二进制文件、压缩文件等，便被 浏览器直接下载，到本地计算机中。
5.3.6 实战演练：创建双链接或多重链接
双链接就是在一个超链接中包含两个指定路径，同理多重链接是在一个 超链接中包含多个指定路径。双链接和多重链接在某些时候有特殊的用 处。双链接常用来实现链接时两个框架页面内的内容都改变，多重链接 并不常用，它使一个链接元素链接多个文档。
5.3.3 实战演练：创建脚本链接
脚本链接是一种特殊类型的链接，通过单击带有脚本链接的文本或对象 ，可以执行脚本代码（如JavaScript或VBScript脚本代码等），利用这种 特殊的方法可以实现各种特殊的功能，如使用脚本链接进行确认或验证 表单指定路径的链接。利用空链接可以激活文档中链接文本 或对象。一旦对象或文本被激活，则可以为之添加行为，以实现当鼠标 移动到链接上时进行切换图像或显示分层等动作。有些客户端动作，需 要由超链接来调用，这时就需要用到空链接。
5.2.4 使用快捷菜单
右键单击选中的文字或图像，在打开的快捷菜单中选择【创建链接】命 令，打开【选择文件】对话框，即可定义超链接。
5.2.5 鼠标拖动
按住Shift键，在选定的文本上拖动鼠标指针，在拖动时会出现指向文件 图标。拖动鼠标到文件中的锚点或者【文件】面板中另一个文件，最后 释放鼠标即可。
第5章 设计超链接和 导航菜单
学习要点
•熟悉路径以及URL表示方法 •在网页中插入超链接。 •设置热点地图。 •设计导航菜单。
5.1 超链接概述
5.1.3 根路径
根路径是指从站点根文件夹到被链接文件经由的路径。根路径由前斜杠 开头，它代表站点根文件夹。例如，/news/beijing2005.html就是站点根 文件夹下的news子文件夹中的一个文件（beijing2005.html）的根相对路 径。在网站内链接文件时一般使用根路径的方法，因为在移动一个包含 根相对链接的文件时，无需对原有的链接进行修改。
5.3.5 实战演练：创建下载链接
当被链接的文件不被浏览器解析时，如二进制文件、压缩文件等，便被 浏览器直接下载，到本地计算机中。
5.3.6 实战演练：创建双链接或多重链接
双链接就是在一个超链接中包含两个指定路径，同理多重链接是在一个 超链接中包含多个指定路径。双链接和多重链接在某些时候有特殊的用 处。双链接常用来实现链接时两个框架页面内的内容都改变，多重链接 并不常用，它使一个链接元素链接多个文档。
5.3.3 实战演练：创建脚本链接
脚本链接是一种特殊类型的链接，通过单击带有脚本链接的文本或对象 ，可以执行脚本代码（如JavaScript或VBScript脚本代码等），利用这种 特殊的方法可以实现各种特殊的功能，如使用脚本链接进行确认或验证 表单指定路径的链接。利用空链接可以激活文档中链接文本 或对象。一旦对象或文本被激活，则可以为之添加行为，以实现当鼠标 移动到链接上时进行切换图像或显示分层等动作。有些客户端动作，需 要由超链接来调用，这时就需要用到空链接。
第4章 网页超链接与导航
网页超链接与导航
一、网页超链接概述
《网页设计》课程
✓ 脚本链接
脚本链接能执行JavaScript代码或调用JavaScript函数。它的 作用广泛，能够在不离开当前Web页面的情况下为访问者提供有 关某项的附加信息，还可用于在访问者单击特定项时，执行计算、 验证表单和完成其他处理任务等。
例如，将网页加入收藏夹。 javascript:window.external.addFavorite("","过节 乐");
网页超链接与导航
一、网页超链接概述
《网页设计》课程
1．认识超链接
所谓超链接是指从某个网页元素指向一个目标的连接关系。这个 链接目标可以是另一个网页，也可以是相同网页上的不同位置，还可 以是一幅图像、一个电子邮件地址、一个文件、甚至是一个应用程序。 在一个网页中用来创建超链接的元素，可以是一段文字，或是一幅图 像等。当浏览者单击设置了超链接的文字或图像后，链接目标将显示 在浏览器中，并根据目标的类型打开或运行。
因此在相当路径中我们使用“../”来表示上一级文件夹，“../../”表 示上上级的文件夹，以此类推。下级文件夹则用“/..”表示。
网页超链接与导航
一、网页超链接概述
《网页设计》课程
相对路径：
在HTML中使用相对路径常分为两类：相对当前文档、相对站点 根目录。站点根目录相对路径描述从站点的根文件夹到文档的路径。 如果在处理使用多个服务器的大型 Web 站点，或者在使用承载多个 站点的服务器，则可能需要使用这些路径。不过，如果您不熟悉此类 型的路径，最好坚持使用文档相对路径。
Dw自动添加选中文本
多采用相对路径，先保存
设置超链接标题
网页超链接与导航
第十讲 超级链接与导航栏.
评选出“最佳美工设计”、“最佳网页制作”、“最佳组织协作”、“最佳员工”等奖项。
15
9.总结归纳，引申提高
首先提问学生总结，让学生谈本项目的收获；
教师对本次课的实际意义、重点、难点、容易出错处等及时进行总结。并针对项目的不足之处，进行引申和提高。
小结：本章主要介绍了外部链接、文本形式的内部链接、图片形式的内部链接、电子邮件链接、文件下载链接、锚点链接、空地址链接和图像热点链接的创建方法，同时也熟悉了检查链接的方法。
20
8.成果展示，考核评价
由小组观摩评选出一个优秀设计作品进行成果展示。介绍过程中要求说明设计思路及制作过程中遇到的问题，如何解决问题，同时其他组成员也可提出问题，让设计者解释设计所用的相关技术及特点；
依据项目评价表对作品进行自我评价、小组评价和教师评价，挖掘作品优点，并指出问题所在，给出具体改进及修改意见；
教学环节
时间安排
1.复习提问：
表格、框架和层布局有什么优缺点？
5
2.情境设置，项目引入
情境设置：BZ旅行社想通过“公园游”网页将网站中已有的景点介绍页面链接在一起，请你使用超级链接设计并制作。
通过具体情境引入本次课要学的“超链接”，并展示项目最终效果网页。
5
3.教学目标说明：介绍本次课的项目要求、项目目标、项目重点难点。
（4）测试链接的有效性。
能力目标
（1）创建常用超链接、导航栏
素质目标
培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。
重点
（1）常用超链接的创建方法
难点
（1）图片超链接
课型
讲授型＋操作型
教学方法
任务驱动法、分组讨论法、理论实践一体化
教学手段
15
9.总结归纳，引申提高
首先提问学生总结，让学生谈本项目的收获；
教师对本次课的实际意义、重点、难点、容易出错处等及时进行总结。并针对项目的不足之处，进行引申和提高。
小结：本章主要介绍了外部链接、文本形式的内部链接、图片形式的内部链接、电子邮件链接、文件下载链接、锚点链接、空地址链接和图像热点链接的创建方法，同时也熟悉了检查链接的方法。
20
8.成果展示，考核评价
由小组观摩评选出一个优秀设计作品进行成果展示。介绍过程中要求说明设计思路及制作过程中遇到的问题，如何解决问题，同时其他组成员也可提出问题，让设计者解释设计所用的相关技术及特点；
依据项目评价表对作品进行自我评价、小组评价和教师评价，挖掘作品优点，并指出问题所在，给出具体改进及修改意见；
教学环节
时间安排
1.复习提问：
表格、框架和层布局有什么优缺点？
5
2.情境设置，项目引入
情境设置：BZ旅行社想通过“公园游”网页将网站中已有的景点介绍页面链接在一起，请你使用超级链接设计并制作。
通过具体情境引入本次课要学的“超链接”，并展示项目最终效果网页。
5
3.教学目标说明：介绍本次课的项目要求、项目目标、项目重点难点。
（4）测试链接的有效性。
能力目标
（1）创建常用超链接、导航栏
素质目标
培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。
重点
（1）常用超链接的创建方法
难点
（1）图片超链接
课型
讲授型＋操作型
教学方法
任务驱动法、分组讨论法、理论实践一体化
教学手段
利用超链接和导航按钮的课件设计
优化课件的结构和内容组织
结构
通过合理使用超链接和导航按钮，教师可以 优化课件的结构，使其更加符合学生的认知 规律。例如，按照知识点的重要程度或逻辑 关系来组织内容，使学生能够更加系统地掌 握知识。
内容组织
超链接和导航按钮可以帮助教师更好地组织 课件内容，使其更加丰富、完整。教师可以 根据实际需要，灵活地添加、删除或重组内 容，以满足不同学生的学习需求。
知识点之间的跳转链接
总结词
实现快速的知识点跳转
详细描述
在课件中，每个知识点都可以设置一个跳转链接，学习者可以通过点击链接直接跳转到相关知识点，无需从头开 始学习。
交互式测试题的实现
总结词
提供实时反馈和互动性
详细描述
通过超链接和导航按钮，可以在课件中实现交互式测试题。学习者完成题目后，可以立即查看答案和 解析，有助于加深理解和记忆。
统一性
导航按钮的设计风格应与 课件的整体风格保持一致 ，以提高课件的整体感观 。
可用性
导航按钮应易于操作，响 应速度快，使用户能够顺 利地完成导航操作。
超链接和导航按钮在课件中的作用
增强交互性
超链接和导航按钮的使用 可以增强课件的交互性， 使用户能够更加主动地参 与学习过程。
提高学习效率
通过超链接和导航按钮， 用户可以快速找到所需内 容，提高学习效率。
超链接是网页中用于链接到其他网页或资源的元素。它允许用户通过点击跳转 到指定的位置。
作用
超链接在课件设计中主要用于组织内容，方便用户浏览和获取信息。通过超链 接，可以将课件中的不同部分连接起来，使用户能够快速地跳转到相关内容， 提高学习效率。
导航按钮的设计原则
01
02
03
超链接的基本功能
超链接的基本功能超链接是指在网页中通过点击可以跳转到其他网页或指定位置的文本或图像。
超链接是互联网上信息交流和导航的重要工具，具有以下基本功能。
1. 跳转功能：超链接最基本的功能是跳转到其他网页或指定位置。
通过点击超链接，用户可以方便地访问到相关的内容。
例如，在一篇新闻文章中，可以通过超链接引用相关报道或相关资料，使读者可以自由选择是否深入了解更多信息。
2. 导航功能：超链接在网页中广泛应用于导航菜单和导航栏中。
通过点击导航链接，用户可以快速切换到其他页面或网站，实现网站内部或跨站点的导航。
这种导航功能可以提高用户体验，使用户更加便捷地浏览和获取所需的信息。
3. 参考功能：超链接还可以用于提供参考资料。
在学术论文或技术文档中，可以通过超链接引用其他相关文献或研究成果，方便读者深入了解和查阅相关内容。
这种参考功能可以提高文档的可信度和可读性。
4. 资源共享功能：超链接在互联网资源共享中起到了重要的作用。
通过超链接，用户可以轻松地分享自己喜欢的网页、文章、图片或视频等资源给他人。
这种资源共享功能在社交媒体和社区论坛中尤为常见，用户可以通过超链接将感兴趣的内容分享给朋友或群组。
5. 链接跳转功能：除了跳转到其他网页，超链接还可以实现在同一网页内不同位置的跳转。
通过在页面中插入锚点和相应的超链接，用户可以在页面内部进行快速定位和跳转。
这种链接跳转功能在较长的网页文章中尤为常见，方便读者快速查找和阅读感兴趣的内容。
6. 交互功能：超链接还可以用于实现交互功能。
通过点击超链接，用户可以触发一系列动作或操作，如打开弹窗、播放音频、下载文件等。
这种交互功能在网页设计和应用开发中得到广泛应用，可以提升用户体验和页面的互动性。
7. 错误处理功能：当用户点击超链接时，如果目标网页不存在或无法访问，超链接还可以提供错误处理功能。
通过设置超链接的错误处理机制，可以使用户在出现错误时得到相应的提示或重定向到其他有效的页面，以提高用户的浏览体验。
第06章创建超链接和导航-PPT文档资料
中文版Dreamweaver 8基础与上机实 训
6.2 创 建 链 接
Dreamweaver 8可以为对象、文本或图像创建超链接，以链接到其 他文档或文件，或链接到单个文档的指定位置。当在本地站点内移动或 重命名文档或其他链接文件时，Dreamweaver 可自动更新指向文档的链 接。 创建链接的类型和方法 创建页间超链接 创建页内超链接 创建E-mail链接 创建空链接和脚本链接 创建图形热点链接
中文版Dreamweaver 8基础与上机实 训
第6章 创建超链接和导航
每一个网站实际上都是由众多网页组成的，网页之间通常通过超链接方 式相互建立关联。在Dreamweaver 8中，超链接的范围很广，通过它不仅可 以链接到其他网页，还可以链接到其他图像文件、多媒体文件及下载程序。 本章将主要介绍在Dreamweaver 8中创建和管理各种超链接以及使用导航条 的方法。
中文版Dreamweaver 8基础与上机实 训
通过本章的理论学习和上机实训，读者应了解和掌握以 下内容:
URL的含义
绝对路径与相对路径的概念
Dreamweaver 8中链接的类型 网页间和网页内超链接的创建 在站点地图中管理链接 导航条的创建
中文版Dreamweaver 8基础与上机实 训
中文版Dreamweaver 8基础与上机实 训
绝对路径
绝对路径指包括服务器协议在内的完全路径，比如linkyoume/ dw/ index.htm(此处使用的协议是最常用的HTTP协议)。使用绝对路径与链 接的源端点无关，只要目标站点地址不变，无论文档在站点中如何移动， 都可以正常实现跳转而不会发生错误。如果是要链接当前站点之外的网 页或网站，就必须使用绝对路径。
网页设计与制作项目七 超级链接与导航栏
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动七 超级链接与导航栏
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动七 超级链接与导航栏
还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件 地址”，如下图所示
3.创建完成后，保存页面，按F12预览网页效果。
页面之间的超级链接 【操作步骤】 1．选择“文件”---“打开”命令，打开网页“index.asp”文件，单 击“打开”按钮打开文件。 2．在网页中选中要做超级链接的文字或者图片。 3．在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应 的网页文件就完成了。做好超级链接属性面板出现链接文件显示， 如下图所示
图7-2-2 插入导航条
图7-2-3 选择图像源文件
3．单击状态图像后面的浏览，找到图片1.jpg ，如图7-2-3所示。 4．单击确定，点击鼠标经过图片后面的浏览选择1.jpg如图7-2-4所示。
图7-2-4 插入导航条
5．在下方插入选项中选择水平选项 6．单击最上方的小加号 再添加一个新项目，如图7-2-5所示
通过学习本案例，能够学会超链接的设置，特别是学会 文本的设置、电子邮件的设置、导航栏的设置及创建超链接的 多种方法。
返回
（二）项目分析
项目活动目标：网页各种超链接的设置方法，能够独立 根据操作要求完成。
重点：1.理解超链接的概念 2.掌握几种超链接的设置 3.熟练掌握水平导航条的设置及超链接的设置 难点：多种方法的设置
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动七 超级链接与导航栏
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动七 超级链接与导航栏
还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件 地址”，如下图所示
3.创建完成后，保存页面，按F12预览网页效果。
页面之间的超级链接 【操作步骤】 1．选择“文件”---“打开”命令，打开网页“index.asp”文件，单 击“打开”按钮打开文件。 2．在网页中选中要做超级链接的文字或者图片。 3．在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应 的网页文件就完成了。做好超级链接属性面板出现链接文件显示， 如下图所示
图7-2-2 插入导航条
图7-2-3 选择图像源文件
3．单击状态图像后面的浏览，找到图片1.jpg ，如图7-2-3所示。 4．单击确定，点击鼠标经过图片后面的浏览选择1.jpg如图7-2-4所示。
图7-2-4 插入导航条
5．在下方插入选项中选择水平选项 6．单击最上方的小加号 再添加一个新项目，如图7-2-5所示
通过学习本案例，能够学会超链接的设置，特别是学会 文本的设置、电子邮件的设置、导航栏的设置及创建超链接的 多种方法。
返回
（二）项目分析
项目活动目标：网页各种超链接的设置方法，能够独立 根据操作要求完成。
重点：1.理解超链接的概念 2.掌握几种超链接的设置 3.熟练掌握水平导航条的设置及超链接的设置 难点：多种方法的设置
最基本的网页制作知识 初学者必看l4_超链接及导航.
制作方法
通过“指向文件”图标创建链接 属性面板链接栏输入和文件夹图标创建链接
插入菜单或插入栏创建超链
插入菜单/超级链接 插入栏/常用/超级链接 修改菜单/创建链接
超级链接和相关操作
修改菜单/创建链接或更改链接 修改菜单/移除链接 修改菜单/打开链接页面 修改菜单/链接目标
创建空的脚本链接，在link中输入 javascript: / javascript:void(null)/ # / ###
“打印本页”链接： javascript:self.print() “关闭窗口”链接： javascriptself.close()
其它链接
QQ链接： /msgrd?V=1&Uin=QQ号 &Site=网址&Menu=yes
课后作业
做一个个人简历，E-MAIL要有链接、QQ链接、 个人主页的网址要有链接、要有“打印本 页”“关闭窗口”，还要有不同页面的锚点链 接效果。
超链接及导航
超链接
网站最核心的部分就是超链接，通过超链接主 页文件和各种网络资源组织在一起，形成一个 巨大的信息服务系统。
URL
URL：统方法。
一般格式：协议://IP地址（域名）[：端口]/目 录/文件名
协议：指明访问该资源所采用的协议。如 HTTP为超文本传输协议，该资源为HTML文 件；FTP是文件传输协议，用FTP访问该资源。
链接的目标
在超链的属性面板上“目标”或“修改/链接目标”中设 置
_blank：在新的窗口中打开链接文档，当前窗口不变 _parent：在显示链接的框架的父框架集中打开链接
的文档，同时替换整个框架集 _self：在当前框架中打开链接，同时替换该框架中的
网页设计专业术语
网页设计专业术语〔网页〔制定〕〕专业术语在网页制作过程中经常会碰到一些专业术语，如URL、域名、站点、发布、浏览器、超链接、导航条和表单等。
新希望培训学校我认为只有掌握这些专业术语的含义，才干在制作网页时灵活应用它们。
下面分别介绍这些专业术语。
1 .URLURL的英文全称是Uniform Resource Locator，中文名称为"统一资源定位器'，用来指明通信协议和地址，如.sina 就是一个URL。
其中， ://'表示通信协议为超文本传输协议: 而".sina '是站点名，用于指明网页在Internet上的位置。
因此，URL是提供在Internet上查找信息的标准方法。
2.域名域名就是网站的名称，也是网站的网址。
它与IP地址相对应，所以任何网站的域名都是罕有的的，如.sohu 就是搜狐网站的域名。
域名是由固定网络域名〔管理〕组织在全球进行统一管理的，.用户要获得域名，必须到当地的网络管理机构(一般为当地的电信、网通公司)进行申请，申请成功后便可将网页发布到Internet上。
3.站点站点实际上就是用于管理网页文档的文件夹，档以及与网页有关的素材文件。
这个文件夹内存放着许多互相链接的网页文站点可以小到只有一个网页，也可以大到一个门户网站。
4.发布顾名思义，发布就是指把制作好的网页上传到Internet网络服务器上的过程。
5.浏览器浏览器是一种把在互连网络上的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地观看Internet上的内容。
目前使用较广泛的浏览器主要有微软公司的览器(后面简称为IE),览器等。
Internet Explorer浏网景公司的Netscape Narigator浏览器和腾讯公司的Tencent Traveler浏览器等。
6.超链接超链接具有将不同页面链接起来的功能。
超链接可以是同一站点内页面之间的链接，也可以是与其他网站页面之间的链接。
项目五超级链接-设置站点导航网页-PPT
面包屑导航
1 2
显示当前位置
面包屑导航应清晰地显示用户在网站中的当前位 置，以便用户了解自己所处的页面层级。
提供返回路径
面包屑导航应提供返回上一级的链接，使用户能 够轻松地返回到之前的页面或主页面。
3
简化路径
在显示面包屑导航时，可以简化路径，只显示关 键的页面层级，以避免过长的路径显示。
下拉菜单导航
DIV+CSS布局
使用DIV元素进行页面划分
利用DIV元素作为容器，将页面内容划分为不同的区块，每个区块可以独立设置样式和布 局。
CSS样式定义
通过编写CSS样式规则，可以为DIV元素及其内部内容设置样式，包括字体、颜色、背景 、边距等。
布局定位与浮动
使用CSS的定位和浮动属性，可以实现元素的精确定位和层叠效果，创建灵活的页面布局 。
测试超级链接有效性
链接可用性测试
使用自动化工具或手动检查，确保所有超级链接都能正确指向目 标页面。
跨浏览器测试
在不同浏览器和设备上测试超级链接，确保其在各种环境下都能正 常工作。
加载速度测试
测试超级链接的加载速度，确保用户能够快速访问目标页面。
解决超级链接问题
修复死链
定期检查并修复无效的超级链接，避免用户 访问时出现404错误。
处理重定向
对于需要重定向的超级链接，确保使用正确的HTTP 状态码和重定向方式。
优化锚文本
改进超级链接的锚文本，使其更具描述性和 相关性，提高用户体验和搜索引擎排名。
提高用户体验度
01
清晰的导航结构
设计简洁明了的导航菜单和面包 屑导航，帮助用户快速了解网站 结构和当前位置。
响应式设计
02
03