网页超链接与导航PPT课件

网页设计 课程 WPSOFFICE 计算机与通信系 网页超链接与导航 1 目录CONTENTS 网页设计 课程 网页超链接与导航 2 使用浏览器浏览网页时 当移动鼠标到页面的某些位置 鼠标指针会变成一只 手形 表明该位置是一个超链接 在超链接处单击鼠标左键 可以直接跳转到与这个超链接相连的网页或Internet网站上去 从而在不输入URL地址的情况下访问相关网页 通过超链接 使网站内的网页串联形成一个有机整体 也是通过超链接 在网站之间架起沟通的桥梁 使整个互联网形成一个有机整体 网页超链接与导航 网页设计 课程 一 网页超链接概述 3 1 认识超链接所谓超链接是指从某个网页元素指向一个目标的连接关系 这个链接目标可以是另一个网页 也可以是相同网页上的不同位置 还可以是一幅图像 一个电子邮件地址 一个文件 甚至是一个应用程序 在一个网页中用来创建超链接的元素 可以是一段文字 或是一幅图像等 当浏览者单击设置了超链接的文字或图像后 链接目标将显示在浏览器中 并根据目标的类型打开或运行 一 网页超链接概述 4 1 认识超链接超链接有以下不同的分类方式 按照链接路径的不同 网页中超链接主要分为内部链接 局部链接和外部链接 按照目标对象的不同 网页中的超链接可以分为文档链接 锚点链接 电子邮件链接 脚本链接 空链接等 一 网页超链接概述 5 2 超链接路径创建超链接时 超链接路径的设置非常重要 如果设置不正确 将不能正确完成跳转功能 超链接路径分为绝对路径和相对路径两大类 一 网页超链接概述 重点 6 绝对路径 大家都知道 在我们平时使用计算机时要找到需要的文件就必须知道文件的位置 而表示文件的位置的方式就是路径 例如只要看到这个路径 D mysite music 123 mp3 我们就知道123 mp3文件是在D盘的mysite文件夹下的music子文件夹中 类似于这样完整的描述文件位置的路径就是绝对路径 我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置 而在网站中类似于 一 网页超链接概述 缺点 不利于站点的移植和本地测试 7 相对路径 相对路径就是指由这个文件所在的路径引起的跟其它文件 或文件夹 的路径关系 使用相对路径可以为我们带来非常多的便利 下面举实例详解 如在本地硬盘有如下两文件 它们要互做超链接 如图5 1所示 G site web article 01 htmG site index htm 一 网页超链接概述 8 index htm要想链接到01 htm这个文件 正确的链接应该是 链接文字 这是标准的相对路径 反过来 01 htm要想链接到index htm这个文件 在01 htm文件里面应该写上这句 返回首页 这里的 表示向上一级 因此在相当路径中我们使用 来表示上一级文件夹 表示上上级的文件夹 以此类推 下级文件夹则用 表示 一 网页超链接概述 9 相对路径 在HTML中使用相对路径常分为两类 相对当前文档 相对站点根目录 站点根目录相对路径描述从站点的根文件夹到文档的路径 如果在处理使用多个服务器的大型Web站点 或者在使用承载多个站点的服务器 则可能需要使用这些路径 不过 如果您不熟悉此类型的路径 最好坚持使用文档相对路径 站点根目录相对路径以一个正斜杠开始 该正斜杠表示站点根文件夹 例如 article index htm是文件 index htm 的站点根目录相对路径 该文件位于站点根文件夹的article子文件夹中 一 网页超链接概述 10 一 网页超链接概述 使用 插入 面板的常用选项卡制作电子邮件链接效果 使用 属性 面板为文字制作下载文件链接效果 修改链接样式 自学案例 实木地板网页 11 2 创建各类超链接文档链接锚点链接电子邮件链接空链接脚本链接 一 网页超链接概述 案例1设计制作过节乐网页 图4 1过节乐网页效果 12 文档链接 一 网页超链接概述 首先选中要创建超链接的文字或图像 创建方法有以下几种 1 选择 插入 超级链接 菜单命令 或者单击 插入 面板 常用 类别中的 超链接 图标按钮 打开 超级链接 对话框 从中设置文本链接目标和链接目标打开的方式 Dw自动添加选中文本 多采用相对路径 先保存 设置超链接标题 13 文档链接 一 网页超链接概述 目标 指定链接目标打开的窗口 其中 blank 表示在新窗口中打开 new 也表示在新窗口中打开 parent 表示在上级窗口中打开 self 默认 self 表示在当前窗口中打开 top 表示在顶层窗口中打开 2 在 属性 面板 HTML 类别中的 链接 文本框中直接输入路径 或者单击 链接 后面的 浏览文件 按钮 在打开的对话框中选择目标文件创建超链接 3 在 属性 面板中 将 链接 后面的 指向文件 图标按钮拖曳到 文件 面板中的目标文件上创建链接 4 按住键 拖曳鼠标指针到 文件 面板中的 目标文件 上创建链接 14 文档链接 一 网页超链接概述 提示 创建超链接的目标文件不仅可以是网页文件 还可以是其他类型文件 如图像文件 音频文件 视频文件 文本文件等 单击超链接 目标文件将在浏览器中打开 如果目标文件需要其他应用程序打开 则单击超链接后会弹出 下载文件 对话框 询问用户打开或者保存 提示 修改超链接的操作步骤与创建超链接相同 若删除超链接 只要选定超链接对象 将 属性 面板 链接 下拉框中的内容删除即可 15 锚点链接 一 网页超链接概述 锚点链接的功能是 单击超链接对象后 可以跳转到本页面或其他页面中的指定位置 即命名锚记处 锚点超链接通常用于长篇文章 技术文档等内容的网页中 创建锚点链接分为建立命名锚记和创建指向命名锚记的超链接两部分 16 锚点链接 一 网页超链接概述 1 创建命名锚记 将鼠标光标定位在要设置命名锚记的位置 选择 插入 命名锚记 菜单命令 或者单击 插入 面板 常用 类别中的 命名锚记 图标按钮 或者按下组合键 均能弹出 命名锚记 对话框 在对话框中输入命名锚记的名称 2 创建指向命名锚记的超链接 选中要设置锚点链接的文本或图像 在 属性 面板的 链接 框中 输入一个 字符和命名锚记名称 或将 指向文件 图标按钮拖曳到命名锚记处 提示 以 其他页面的路径 锚点名称 17 电子邮件链接 一 网页超链接概述 使用电子邮件链接 可以方便地打开浏览器默认的邮件处理程序进行发送电子邮件操作 收件人地址即为电子邮件链接指定的邮箱地址 选中要设置电子邮件超链接的文本 选择 插入 电子邮件链接 菜单命令 或者单击 插入 面板 常用 类别中的 电子邮件链接 图标按钮 弹出 电子邮件链接 对话框 在 电子邮件 文本框中输入收件人的电子邮箱地址 单击 确定 按钮完成电子邮件超链接的创建 18 空链接 一 网页超链接概述 空链接是未指派的链接 主要用于向页面上的对象或文本附加行为 选中要设置空链接的文本 在 属性 面板的 链接 框中输入 或 javascript 例如 可以为空链接添加事件来设置主页 设为主页 19 脚本链接 一 网页超链接概述 脚本链接能执行JavaScript代码或调用JavaScript函数 它的作用广泛 能够在不离开当前Web页面的情况下为访问者提供有关某项的附加信息 还可用于在访问者单击特定项时 执行计算 验证表单和完成其他处理任务等 例如 将网页加入收藏夹 javascript window external addFavorite 过节乐 20 2 创建各类超链接文档链接锚点链接电子邮件链接空链接脚本链接 一 网页超链接概述 案例1设计制作过节乐网页 图6 1过节乐网页效果 21 3 用CSS设置超链接样式选择 修改 页面属性 菜单命令 或单击 属性 面板上的 页面属性 按钮 打开 页面属性 对话框 选择 链接 CSS 类别 在其中设置链接的字体 大小 链接状态的颜色 以及下画线样式等 一 网页超链接概述 默认超链接的样式为链接文本带有下画线 链接前文本为蓝色 链接活动过程为红色 链接后变为暗紫色 22 3 用CSS设置超链接样式CSS样式可以设置超链接不同状态的样式 为此CSS定义了4种伪类 a link 设置超链接对象正常显示的样式 即未访问前的样式 a visited 设置超链接对象已访问后的样式 a hover 设置超链接对象变换时的样式 即鼠标悬停在超链接文本上的样式 a active 设置超链接对象活动链接时的样式 即单击超链接并释放超链接之前的样式 此过程时间非常短 通常效果不明显 一 网页超链接概述 23 目录CONTENTS 网页设计 课程 网页超链接与导航 24 加强身体锻炼 网页设计 课程 网页超链接与导航 二 案例 图像地图 设计国家地理网站页面 学习目标 掌握创建图像地图的方法 知识要点 图像地图的功能 图像地图的创建 案例效果如图6 14所示 单击山东 辽宁 湖南省地图区域 分别打开链接的网页 图6 14国家地理页面效果 25 所谓图像地图是指已被分为多个区域的图像 这些区域称为热点 当用户单击某个热点时 会显示其链接的目标文件 选中要设置热点的图像 单击 属性 面板左下角的热点工具图标按钮 在图像上拖动创建热点 可以选定 指针热点工具 图标按钮 拖动热点区域的位置或调整热点区域的大小 绘制一个不规则形状的热点区域时 需要在图像上各个转折点单击一下 最后单击 指针热点工具 按钮封闭此形状 二 案例 图像地图 26 二 案例 图像地图 属性 面板的4个热点工具按钮名称说明如下表所示 27 目录CONTENTS 网页设计 课程 网页超链接与导航 28 1 网页导航作用网页导航的目的是使网站的层次结构以一种有条理的方式清晰展示 引导用户毫不费力地找到所需信息 让用户在浏览网站过程中不至迷失 定位显示位置 展现网站架构 显示品牌形象 影响公司业绩 三 网页导航概述 29 2 网页导航分类 1 水平栏导航水平栏导航是最流行的网站导航设计模式之一 它常用于网站的主导航菜单 用于显示网站的内容分类 水平栏导航设计模式有时设有下拉菜单 当鼠标移到某个菜单项上时 会弹出对应的二级子导航项 三 网页导航概述 30 2 网页导航分类 2 垂直栏导航垂直导航也是当前最通用的模式之一 垂直导航常与子导航菜单一起使用 也可以单独使用 垂直导航多用于包含很多链接的网站主导航 三 网页导航概述 31 2 网页导航分类 3 选项卡导航选项卡导航几乎可以设计成用户想要的任何样式 如逼真的 有手感的标签 圆滑的标签 以及简单的方边标签等 选项卡导航对用户有积极的心理效应 但不太适用于链接很多的情况 三 网页导航概述 32 2 网页导航分类 4 菜单导航菜单导航主要有弹出式菜单和下拉菜单两种 弹出式菜单 一般与垂直栏导航一起使用 和下拉菜单 一般与水平栏导航一起使用 是构建健壮的导航系统的良好方法 它使得网站整体上看起来很整洁 而且使得深层章节很容易被访问 三 网页导航概述 33 2 网页导航分类 5 面包屑导航面包屑导航是二级导航的一种形式 辅助网站的主导航系统 面包屑对于多级别 具有层次结构的网站特别有用 它可以帮助访客了解到当前自己在整个网站中所处的位置 如果访客希望返回到某一级 只需要单击相应的面包屑导航项即可 三 网页导航概述 34 2 网页导航分类 6 标签导航标签经常被用于博客和新闻网站 它们常常被组织成一个标签云 导航项可能按字母顺序排列 或者按流行程度排列 标签导航也多用于二级导航 可以提高网站的可发现性和探索性 三 网页导航概述 35 2 网页导航分类 7 页脚导航页脚导航通常用于次要导航 而且通常用于放置其他地方都没有的导航项 页脚导航一般使用文字链接 偶尔带有图标 三 网页导航概述 36 2 网页导航分类 8 个性化导航有些网页的导航以体现网站的个性为主 不拘一格 采用各种样式力求使网站与众不同 如图标样式的导航 气泡样式的导航 三维样式的导航 以及JavaScript动画导航等 三 网页导航概述 37 3 网页导航方向 1 横向导航横向导航是网页导航 尤其是网页主导航采用最多的形式 而且主导航的项目个数通常在5 12个 对于有非常复杂的信息结构且有很多模块组成的网站来说 横向的导航应该使用水平栏导航和下拉菜单导航相结合的方式进行构建 占用面积小 常被信息量大的门户网站 资讯网站使用 三 网页导航概述 38 横排导航 39 横排导航 40 横排导航 41 3 网页导航方向 2 纵向导航纵向导航适用于几乎所有种类的网站 尤其适合有一堆主导航链接的网站 由于纵向导航菜单可以不受页面限制 所以可以含有很多链接 但是需要注意 纵向导航太长时可能将用户淹没 占用面积大 视野好 可以有效的填补网页空间 并弱化信息少所带来的视觉缺陷和心理疑惑 三 网页导航概述 42 竖排导航 43 竖排导航 44 竖排导航 45 3 网页导航方向 3 不规则导航不规则导航打破了网页由表格排版造成的 横平竖直 的布局 可能是倾斜的 也可能是波浪型的 甚至是分散的 三 网页导航概述 46 目录CONTENTS 网页设计 课程 网页超链接与导航 47 四 案例1 为网页添加导航 使用 插入 面板 常用 选项卡 为网页添加导航效果 使用 属性 面板 制作超链接效果 自学案例 温泉度假网页 48 四 案例1 为网页添加导航 使用 插入 面板 常用 选项卡 为网页添加导航效果 使用 属性 面板 制作超链接效果 自学案例 温泉度假网页 49 四 案例2 为网页添加导航 练习案例 世界旅游网页 使用 鼠标经过图像 按钮 为网页添加导航效果 50 四 案例 用CSS设计制作网页导航 学习目标 掌握用CSS创建网页导航的方法 知识要点 用CSS创建网页导航的方法 案例效果如图6 28所示 图6 28CSS设计网页导航效果 51 四 案例 用CSS设计制作网页导航 用CSS创建网页导航的方法 案例效果如图6 28所示 传统制作网页导航通常使用表格技术 将导航项目分别放置在表格的单元格中 然后设置表格和单元格的样式 而用CSS设计制作网页导航 则把导航项目看做列表 用标签进行定义 然后设置列表项的样式 具体步骤 1 添加导航项目 输入导航项目 将其设置为列表并创建空超链接 52 四 案例 用CSS设计制作网页导航 2 用CSS定义导航样式 其中 设置列表项左浮动 从而使下一个列表项在右侧贴近自身 每一个列表项应用此规则 就会形成水平排列的样式 3 应用导航项CSS规则 4 用CSS定义当前导航项样式 5 应用当前导航项CSS规则 53 目录CONTENTS 网页设计 课程 网页超链接与导航 54 2 创建各类超链接文档链接锚点链接电子邮件链接空链接脚本链接 一 网页超链接概述 案例1设计制作过节乐网页 图6 1过节乐网页效果 超链接 文本链接 锚点链接 空链接 脚本链接 55 加强身体锻炼 网页设计 课程 网页超链接与导航 二 案例 图像地图 设计国家地理网站页面 学习目标 掌握创建图像地图的方法 知识要点 图像地图的功能 图