CHAP05创建网站的链接和导航
如何建立一个高效的网站导航
如何建立一个高效的网站导航网站导航是一种用于指引网站用户在复杂的网络环境中寻找信息和资源的工具。
随着互联网的快速发展，网络上的信息和资源日益增多，网站导航作为权威的入口成为了用户获取信息和资源的主要途径。
一个好的网站导航可以有效地提高用户体验，提升网站的流量和影响力。
本文将从以下几个方面讨论如何建立一个高效的网站导航。
一、确定网站导航的主题和结构一个高效的网站导航首先要有合理的主题和结构。
主题是指网站导航所涵盖的领域和内容，例如科技、文化、旅游、教育等。
结构是指网站导航的组织方法和布局方式，例如按分类、按字母、按热门等。
在确定主题和结构时，需要根据目标用户群的需求和偏好进行分析和调研，以确保网站导航的相关性和实用性。
二、统一标准化设计网站导航作为网站的重要组成部分，应当在设计上进行统一标准化。
在设计上，需要考虑到用户熟悉程度、网页布局、导航栏位置等因素。
要让用户能够更快速地找到自己想要的信息，导航栏的位置应当妥善设计，一般在顶部或侧边。
同时，导航栏上的按钮、文字、图标等元素应当符合网站整体风格，具有良好的可读性和识别性，以提高用户的使用效率和体验感。
三、规范化分类管理分类管理是一种有效的组织网站导航内容的方法。
在建立网站导航时，需要将各类信息和资源进行规范化的分类管理，以便用户能够快速找到所需的内容。
同时，为了提高网站导航的可靠性和权威性，分类标准应当严格按照学科领域、研究方向等标准进行分类，避免出现重复或混淆的现象。
四、灵活的更新维护良好的更新维护机制是建立高效网站导航的必要条件。
网站导航的内容和资源都处于不断变化的过程中，必须要及时更新、删除、添加新的网页信息。
同时，为了保证网站导航的稳定性和可靠性，需要建立起灵活的维护机制，并对导航内容进行定期的审核、整理和优化。
五、主动积累用户反馈网站导航的建立和维护应该是一个与用户密切互动的过程。
在这个过程中，不仅要进行有针对性的用户调查和需求分析，还要主动召集用户提供反馈和建议。
第4章 网页超链接与导航
网页超链接与导航
一、网页超链接概述
《网页设计》课程
✓ 脚本链接
脚本链接能执行JavaScript代码或调用JavaScript函数。它的 作用广泛，能够在不离开当前Web页面的情况下为访问者提供有 关某项的附加信息，还可用于在访问者单击特定项时，执行计算、 验证表单和完成其他处理任务等。
例如，将网页加入收藏夹。 javascript:window.external.addFavorite("","过节 乐");
网页超链接与导航
一、网页超链接概述
《网页设计》课程
1．认识超链接
所谓超链接是指从某个网页元素指向一个目标的连接关系。这个 链接目标可以是另一个网页，也可以是相同网页上的不同位置，还可 以是一幅图像、一个电子邮件地址、一个文件、甚至是一个应用程序。 在一个网页中用来创建超链接的元素，可以是一段文字，或是一幅图 像等。当浏览者单击设置了超链接的文字或图像后，链接目标将显示 在浏览器中，并根据目标的类型打开或运行。
因此在相当路径中我们使用“../”来表示上一级文件夹，“../../”表 示上上级的文件夹，以此类推。下级文件夹则用“/..”表示。
网页超链接与导航
一、网页超链接概述
《网页设计》课程
相对路径：
在HTML中使用相对路径常分为两类：相对当前文档、相对站点 根目录。站点根目录相对路径描述从站点的根文件夹到文档的路径。 如果在处理使用多个服务器的大型 Web 站点，或者在使用承载多个 站点的服务器，则可能需要使用这些路径。不过，如果您不熟悉此类 型的路径，最好坚持使用文档相对路径。
Dw自动添加选中文本
多采用相对路径，先保存
设置超链接标题
网页超链接与导航
第06章 创建超链接和导航
选中文字或图像之后， 选中文字或图像之后，直接在属性面板的 链接”文本框中输入外部的链接地址， “链接”文本框中输入外部的链接地址，如 然后在“目标” 然后在“目标”下拉菜单中设置这个链接的 目标窗口。 目标窗口。
2.
6.3 创建命名锚记链接
－－是指同一个页面中的不同位置链接。 －－是指同一个页面中的不同位置链接。 是指同一个页面中的不同位置链接 一般用在网页篇幅较大，浏览者需要翻屏查看的情 一般用在网页篇幅较大， 况下。 况下。 分为两步创建： 分为两步创建： 1. 创建命名锚记
6.6 创建导航条
导航条由一个或多个图像组成， 导航条由一个或多个图像组成，其显示根据 用户的动作而改变。因此， 用户的动作而改变。因此，在使用导航条命令之 应首先创建一个用于导航条的图像集。 前，应首先创建一个用于导航条的图像集。根据 鼠标的动作，导航条中的图像通常有以下4种状态 种状态。 鼠标的动作，导航条中的图像通常有以下 种状态。
URL定位器 ：指的是 统一资源定位器)：指的是Internet文 统一资源定位器 文 件在网上的地址， 件在网上的地址，它使用数字和字母按一 定顺序排列以确定一个地址，由访问方法、 定顺序排列以确定一个地址，由访问方法、 服务器名、端口号，以及文档位置组成。 服务器名、端口号，以及文档位置组成。
1.创建热区 1.创建热区 属性面板中 矩形热点工具” 属性面板中“矩形热点工具”、“椭圆形热点工 多边形热点工具”可以创建矩形、椭圆形、 具”、“多边形热点工具”可以创建矩形、椭圆形、多 边形热区 2.创建超级链接 创建超级链接 选中热区→单击“属性”面板中“链接” 选中热区→单击“属性”面板中“链接”后的浏览 按钮
创建导航条 编辑导航条
6.6 创建导航条
如何制作自己的网页链接？制作网页链接的步骤和注意事项
如何制作自己的网页链接？制作网页链接的步骤和注意事项在当今数字化时代，网页链接是连接互联网世界的纽带，它们使得用户可以轻松地在不同的网页之间跳转。
无论是个人网站、企业网站还是电子商务平台，网页链接都是构建用户友好的网站体验的重要组成部分。
本文将具体介绍如何制作自己的网页链接，并供应一些制作网页链接的步骤和留意事项，关心您创建专业、时尚且高效的网页链接。
了解网页链接的基本概念在开头制作网页链接之前，我们首先需要了解网页链接的基本概念。
网页链接，也被称为超链接，是一种在网页上创建可点击的文本或图像，通过点击这些链接，用户可以跳转到其他网页、文件或特定位置。
网页链接通常以蓝色文本显示，并且在鼠标悬停时会显示下划线，以便用户能够识别和点击。
制作网页链接的步骤1、确定链接目标：在制作网页链接之前，您需要确定链接的目标。
链接目标可以是其他网页、文件、特定位置或者是电子邮件地址。
确保您已经预备好链接目标的正确网址或文件路径。
2、编写链接文本：链接文本是用户将要点击的可见文本。
为了吸引用户点击，链接文本应当简洁、明确，并且与链接目标相关。
例如，假如您要链接到一个关于烹饪的网页，链接文本可以是“点击这里了解更多关于烹饪的信息”。
3、使用HTML标签创建链接：在网页制作中，使用HTML标签是创建网页链接的常用方法。
在适当的位置插入以下代码即可创建一个基本的网页链接：其中，`链接目标`是您确定的链接目标，可以是其他网页的URL、文件的路径或者是电子邮件地址。
`链接文本`是您编写的链接文本。
4、添加样式和属性：为了使网页链接看起来更加吸引人和易于识别，您可以为链接添加样式和属性。
例如，您可以使用CSS来更改链接的颜色、字体大小、背景颜色等。
此外，您还可以为链接添加`target="_blank"`属性，使链接在新的标签页中打开，而不是在当前标签页中打开。
5、测试链接：在完成网页链接的制作后，务必进行测试以确保链接正常工作。
创建网站的连接和导航标准版文档
改(xiūgǎi)”|“导航条”命令，在 基于站点根目录的绝对路径与相对路径有何不同。
脚本链接是指执行JavaScript代码或调用JavaScript函数。
打开的“修改(xiūgǎi)导航条”对话 在站点地图窗口中，单击菜单上的“站点地图”按钮，选择“地图和文件”命令。
三、创建(chuàngjiàn)跳转菜单
2、编辑跳转菜单
要编辑跳转菜单，可利用“属性” 面板或“行为”面板。其中，在“属性” 面板中单击“列表值”按钮，系统将打 开“列表值”对话框，利用该对话框可 增加(zēngjiā)、删除菜单项，还可调整菜 单项 的顺序。 3、解决跳转菜单冲突
使用(shǐyòng)跳转菜单时，如果用户在浏览该网页时选择了 某个菜单项，在重新返回该页面时将无法再选择该菜单项。此时 可使用(shǐyòng)菜单选择提示：每次选择菜单后，自动重新选择 菜单提示。
E-mail链接是一种(yī zhǒnɡ)特殊 链接，单
击这种链接，将打开一个空白通信
窗口。选择“插入”|“电子邮件链接”
命令，可打开“电子邮件链接”对话
框。
第四页，共13页。
二、创建与管理链接 3、创建虚拟(xūnǐ)链接及脚本链接
虚拟链接实际上是一个未设计的链接，利用该链接可激活页面 上的对象或文本。要创建虚拟链接，用户(yònghù)只需在选定文 字或图片后，在“属性”面板的“链接”文本框中输入一个“#” 号就可以了。
第三页，共13页。
二、创建(chuàngjiàn)与管理连接
1、创建(chuàngjiàn)超链接
在Dreamweaver 8中可以为对象、 文本或图像创建超链接，链接到其他 文档或文件。要在网页中创建超链接， 可以选择“插入”|“超级链接”命令， 打开“超级链接”对话框。
网页制作教程05
创建锚链接
创建命名锚记 链接命名锚记
创建命名锚记
在制作网页时，为了达到跳转到网页固定位 在制作网页时， 置的目的，可以使用锚链接。 置的目的，可以使用锚链接。通过对网页中指定位 置的命名， 置的命名，利用超级链接打开目标网页时可直接跳 转到相应的命名位置上。 转到相应的命名位置上。
ppt文档可能在WAP端浏览体验源自佳。建议您优先选择TXT，或下载源文件到本机查看。
课堂讲解
课堂讲解
超级链接概念 超级链接分类 创建文本超级链接 创建锚链接 创建空链接 创建电子邮件超级链接 创建图像超级链接 创建导航条
超级链接概念
超级链接是指页面对象之间 的链接关系，它网页的灵魂， 的链接关系，它网页的灵魂，能合 协调地把网站中的各个元素、 理、协调地把网站中的各个元素、 页面通过超级链接构成了一个有机 整体， 整体，使浏览者能快速地访问到想 要访问的页面。 要访问的页面。
创建图像热点超级链接
要在一幅比较大的图片中添加许多超级链接时， 要在一幅比较大的图片中添加许多超级链接时， 应该将图片化整为零，分割成较小的图片， 应该将图片化整为零，分割成较小的图片，然后分别 为这些小图像上建立超级链接来达到目的， 为这些小图像上建立超级链接来达到目的，但这时整 幅图片就不能对齐，利用Dreamweaver 8的图像热 幅图片就不能对齐，利用Dreamweaver 8的图像热 点超级链接功能就能避免这个问题。 点超级链接功能就能避免这个问题。
项目五超级链接-设置站点导航网页-PPT
面包屑导航
1 2
显示当前位置
面包屑导航应清晰地显示用户在网站中的当前位 置，以便用户了解自己所处的页面层级。
提供返回路径
面包屑导航应提供返回上一级的链接，使用户能 够轻松地返回到之前的页面或主页面。
3
简化路径
在显示面包屑导航时，可以简化路径，只显示关 键的页面层级，以避免过长的路径显示。
下拉菜单导航
DIV+CSS布局
使用DIV元素进行页面划分
利用DIV元素作为容器，将页面内容划分为不同的区块，每个区块可以独立设置样式和布 局。
CSS样式定义
通过编写CSS样式规则，可以为DIV元素及其内部内容设置样式，包括字体、颜色、背景 、边距等。
布局定位与浮动
使用CSS的定位和浮动属性，可以实现元素的精确定位和层叠效果，创建灵活的页面布局 。
测试超级链接有效性
链接可用性测试
使用自动化工具或手动检查，确保所有超级链接都能正确指向目 标页面。
跨浏览器测试
在不同浏览器和设备上测试超级链接，确保其在各种环境下都能正 常工作。
加载速度测试
测试超级链接的加载速度，确保用户能够快速访问目标页面。
解决超级链接问题
修复死链
定期检查并修复无效的超级链接，避免用户 访问时出现404错误。
处理重定向
对于需要重定向的超级链接，确保使用正确的HTTP 状态码和重定向方式。
优化锚文本
改进超级链接的锚文本，使其更具描述性和 相关性，提高用户体验和搜索引擎排名。
提高用户体验度
01
清晰的导航结构
设计简洁明了的导航菜单和面包 屑导航，帮助用户快速了解网站 结构和当前位置。
响应式设计
02
03
第5章创网页超链接-PPT精选文档
教学目的
介绍了超链接的概念 掌握超链接和导航条的创建方法 会在网页中灵活使用超链接
5.1 超链接的基本概念
一个网站肯定有很多的页面，如果页面之间彼此
是独立的，那么网页就好比是孤岛，这样的网站 是无法运行的，没有意义的。为了建立起网页之 间的联系我们需要实现从一个网页指向另一个目 标的跳转，这个目标可以是另一个网页，也可以 是同一个网页上的不同位置，还可以是一张图片、 一个电子邮件地址、一个文件或一个绝对定位的 元素，甚至是一个应用程序，这就是所谓的超链 接。在创建超链接之前，首先要弄清楚目录和路 径的关系，只有这样才可以轻松管理网站的链接， 创建出结构清晰明确的网站。
本章小结
为了把Internet上众多的网站和网页联 系起来，将其构成一个整体，就要在网页 中加入链接。这样一来，能让浏览者很轻 松地浏览自己想看的内容。所以我们在整 合网站内容后，系统地考虑站点链接的易 用性、条理性尤为重要。总之，掌握超链 接的制作是基础，如何合理的安排、灵活 的运用它才是关键。
5.1.1 URL概述
URL（统一资源定位器）主要用于指定网上资源
的位置和方法。 URL一般由三个部分组成，即协议、主机和域 （1）协议，又成服务方式，如http、ftp、telnet 等。 （2）主机：即存放资源的主机的IP地址，有时 也包括端口号，如：qq (3)域：主机的具体地址，包括路径和文件名等。
5.4创建跳转菜单
跳转菜单是页面中的弹出式菜单，在菜单
中列举出链接到文件或文件夹的选项。
5.5创建导航条
导航条由按钮、图像或一组图像组成。导
航条就像网站的桥梁，网站通过它把站点 中的各个页面联系起来，使浏览者更加方 便清晰地在各个页面间进行切换，是网站 的结构更加层次分明。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计应用教程
一、插入和设置文本格式
6、使用水平线 使用水平线可以很好地组织 信息。在页面上可以使用一个 或多个水平线来分隔文本或对 象。 插入水平线的方法是把插入 点放置在两段文字的中间，选 择“插入”|“HTML”|“水平线” 命令，即可在标题与正文中间 插入一条水平线。
网页设计应用教程
二、添加图像和图像占位符
网页设计应用教程
一、插入和设置文本格式
3、改变文本颜色 要改变文本的颜色，可在文档 中选择文本，然后选择“文 本”|“颜色”命令，打开“颜色” 对话框，选择合适的颜色，然后 单击“确定”按钮即可改变所选 文本的颜色。 用户还可以选择“修 改”|“页面属性”命令，打开 “页面属性”对话框，单击“文 本颜色”右侧的色块，设置文本 颜色。
三、设置图像和图像占位符
1、设置图像属性 要设置图像的属性，可在网页文档中选择一个图像，然 后选择“窗口”|“属性”命令以显示图像的“属性”面板。
2、调整图像大小 当选择文档中的图像时，在图像 的周围将出现3个控制点，将鼠标移 到控制点，然后根据箭头方向拖动这 些控制点，可以改变图像的大小。
网页设计应用教程
2、插入图像占位符 “图像占位符”是在准备将最终图像添加到网页文档之 前而使用的图像。要在网页中插入图像占位符，可以选择 “插入”|“图像占位符”命令，或选择“插入”栏中的 “常用”选项卡，切换到常用插入栏，单击按钮，从打开 的菜单中选择“图像占位符”命令，将打开“图像占位符” 对话框。
网页设计应用教程
网页设计应用教程
第5章 在网页中应用文本和图形
重点内容：
• 插入和设置文本格式
• 添加图像和图像占位符
• 设置图像和图像占位符
•
网页设计应用教程
一、 插入和设置文本格式
1、插入文本和对象 在页面中添加文本时，可以直接在插入点处输入文本， 也可以从其他文本编辑器中复制文本，然后切换到 Dreamweaver 8中，将插入点放置到文档窗口的设计视图中， 选择“编辑”|“粘贴”命令，将复制的文本粘贴到 Dreamweaver文档中。 2、使用段落和标题 用户使用“属性”面板中的 “格式”下拉列表框，或选择“文 本”|“段落格式”菜单中的命令， 可以设置标准的段落和标题。
1、插入图像 要在网页中插入图像，可以选择“插入”|“图像”命令， 或选择“插入”栏中的“常用”选项卡，切换到常用插入 栏，单击按钮，从打开的菜单中选择“图像”命令，打开 “选择图像源文件”对话框，在对话框中选中合适的图像 文件，单击“确认”按钮即可将选中的图像插入到网页中。
网页设计应用教程
二、添加图像和图像占位符
网页设计应用教程
一、插入和设置文本格式
4、对齐文本 用户要对齐段落文本，可以选择 “文本”|“对齐”子菜单中的命令。 在Dreamweaver 8中，文本的对齐方 式共有4种，左对齐、居中对齐、右 对齐和两端对齐 。 5、编辑字体组合 用户使用“编辑字体列表”对话 框可以对字体进行编辑组合。选择 “文本”|“字体”|“编辑字体列表” 命令，将打开“编辑字体列表”对 话框 。
三、设置图像和图像占位符
3、设置图像占位符的属性 要设置图像占位符的属性，可在网页文档中选择一个 图像占位符，然后选择“窗口”|“属性”命令，以显示 图像占位符的“属性”面板。
4、替换图像占位符 图像占位符不是在浏览器中显示的图形图像。双击图 像占位符，将打开“选择图像源文件”对话框，在对话 框中选中合适的图像文件进行替换。
网页设计应用教程
四、 思考
•在网页中替换图像、 动手练习
创建一个带有图片和文字的网页。包括：1.插入“布局 单元格”。2.输入所需文本并进行设置。3.插入图像占位符并 选择合适的图片进行替换。
网页设计应用教程
本章小结：
•掌握插入文本和设置文本格式的方法。 •掌握添加图像和图像占位符的方法。 •熟悉图像外部编辑器的设置方法。