网页制作CH6_超链接
合集下载
如何插入和编辑超链接以跳转页面
如何插入和编辑超链接以跳转页面超链接是网页中非常常见的元素，它可以将用户引导到其他页面，扩展了页面的功能和内容展示。
在本文中，我们将讨论如何插入和编辑超链接以跳转页面。
1. 插入超链接在开始插入超链接之前，我们需要确保所要跳转的页面已经存在并可以通过URL地址访问。
接下来，我们可以按照以下步骤插入超链接：（1）选择要添加超链接的文本或图片，例如一段文字或者一张图片。
（2）在编辑器的工具栏中找到超链接插入的图标，通常是一个链状图标。
（3）在弹出的超链接插入窗口中，将要跳转到的页面的URL地址粘贴到“链接URL”或“目标URL”字段中。
（4）根据需要，可以编辑其他超链接属性，例如添加标题、描述或者设置在新标签页中打开等选项。
（5）点击“确认”或“插入”按钮，完成超链接的插入。
2. 编辑超链接如果需要修改已经插入的超链接，我们可以按照以下步骤进行编辑：（1）选中已经插入的超链接文本或图片。
（2）在编辑器的工具栏中找到超链接编辑的图标，通常是一个链状图标加上一个铅笔图标。
（3）弹出超链接编辑窗口后，可以编辑链接URL、标题、描述等属性。
（4）完成编辑后，点击“确认”或“保存”按钮，保存修改。
3. 跳转页面当用户点击超链接时，会自动跳转到所指定的页面。
为了保证用户能够正常跳转，我们可以注意以下几点：（1）确保链接URL的准确性，避免链接地址错误导致页面无法访问。
（2）测试超链接的跳转效果，确保目标页面可以正常打开。
（3）在页面中提供明显的提示，表明某段文字或者图片是一个可点击的链接，以引导用户进行操作。
（4）若有需要，可以通过设置在新标签页中打开的方式，保持用户在原页面的浏览。
总结：插入和编辑超链接以跳转页面是网页制作中常见的操作。
通过选择要跳转的文本或图片，插入超链接并设置链接URL，我们可以在页面中创建可交互的内容。
编辑超链接可以对已有的链接进行修改，确保链接的准确性和完整性。
最后，为了提供良好的用户体验，我们需注意链接URL的正确性、目标页面的可访问性，并为用户明确标识可点击的链接。
网页制作技术-6 建立超级链接 - 副本
?5单击浏览页面中的请单击此处出现邮件发送界面输入相应信息发送邮件图622邮电链接设置图623浏览器显示效果65图像超链接?在浏览网页时网页上经常会有以图像方式来实现链接的尤其是以广告或产品介绍应用最为广泛比如在购物网站上其产品往往是以图片的方式显示的当单击该图片时就会弹出相应介绍或购买的网页及其内容
6.1.2 超链接的类型
• 1. 根据超链接的链接路径分 • 通常情况下将超链接分为以下三种： • （1）绝对URL超链接也称为绝对路径。页面之间的链接是 用统一资源定位符URL(United Resource Location)来表 示。 • （2）相对URL的超链接，又称为相对路径。 • （3）同一网页的超链接。
图6-1 链接源与目标路径
6.1.3 内部、外部与脚本链接
• 常规的链接包括内部超链接、外部超链接和脚本链接。下 面介绍各个链接的操作方法。3.脚本超链接 • 就是通过脚本的方法来控制链接。其主要用来执行计算、 表单验证和其他处理。 • 1.内部超链接 • 内部超链接是指目标端点内部的超链接，其设置非常灵活。
图6-8 “属性”面板变化
• 经过设置确认后，链接文本显示会出现如图6-9所示的效 链接文本显示变化
• （4）按F12键运行，在浏览页面中，单击已经设置的链接 文本。跳转到如图6-9所示的页面，可看到相应的内容。
图6-9 链接打开的目标页面
（a） 图6-5 创建链接
（b）
6.4 各种类型链接的创建
• 在网页中常见的超链接主要包括文本超链 接、图像超链接、E-mail链接、锚链接、空 链接、脚本链接等。
6.4.1 创建文本超链接
• 文本超链接是网页文件中最常用的链接， 单击文本链接将激发文本链接所连接的文 件，使用文本链接创建连接的文件对象可 以是网页、图像等。 • （1）启动Dreamweaver CS5，打开或建 立一个网页。打开如图5-6所示的网站页面。
6.1.2 超链接的类型
• 1. 根据超链接的链接路径分 • 通常情况下将超链接分为以下三种： • （1）绝对URL超链接也称为绝对路径。页面之间的链接是 用统一资源定位符URL(United Resource Location)来表 示。 • （2）相对URL的超链接，又称为相对路径。 • （3）同一网页的超链接。
图6-1 链接源与目标路径
6.1.3 内部、外部与脚本链接
• 常规的链接包括内部超链接、外部超链接和脚本链接。下 面介绍各个链接的操作方法。3.脚本超链接 • 就是通过脚本的方法来控制链接。其主要用来执行计算、 表单验证和其他处理。 • 1.内部超链接 • 内部超链接是指目标端点内部的超链接，其设置非常灵活。
图6-8 “属性”面板变化
• 经过设置确认后，链接文本显示会出现如图6-9所示的效 链接文本显示变化
• （4）按F12键运行，在浏览页面中，单击已经设置的链接 文本。跳转到如图6-9所示的页面，可看到相应的内容。
图6-9 链接打开的目标页面
（a） 图6-5 创建链接
（b）
6.4 各种类型链接的创建
• 在网页中常见的超链接主要包括文本超链 接、图像超链接、E-mail链接、锚链接、空 链接、脚本链接等。
6.4.1 创建文本超链接
• 文本超链接是网页文件中最常用的链接， 单击文本链接将激发文本链接所连接的文 件，使用文本链接创建连接的文件对象可 以是网页、图像等。 • （1）启动Dreamweaver CS5，打开或建 立一个网页。打开如图5-6所示的网站页面。
网页制作-超链接
建立图形地图，使一个图形指向多个链接目标 。单击 图片的不同部分时，就可以跳到页面的不同部分 。 首先，要在图形上绘制热点： 绘图工具栏有按钮可以添加热点。 这个可以添加矩形热点，我们用的就是它。 这个用来添加圆形热点， 这个可以添加不规则热点。 接下来 我们按下“矩形热点”按钮，在图片的某一部分 上拖一个框，接着就会弹出“创建超链接”对话框。还 可以拖动热点框调整位置，也可以拖动热点框的小黑点 改变框的大小。
在默认情况下，超链接是蓝色的，以与未访问已经 访问过的超链接一般用不同的颜色过的相区别。 我们可以改变这些颜色。首先在网页上单击鼠标右 键，选择“网页属性”，进入“网页属性”对话框，选 择“背景”选项卡，你可以改变一般的、已访问的和当 前的超链接的颜色，这里我们单击“超链接”下拉列表 框，选择绿色，单击“确定”按钮，超链接的颜色就改 变了。
建立到书签的链接
选中文字或图片，把它作为超链接标志，单击“常用”工具栏 “超链接”按钮，在可选组框里书签下拉列表中选择相应的书签，单 击“确定”。“书签名称”就变为超链接了。 修改书签：选择“插入”菜单的“书签”命令，在对话框中选中 你要修改的书签，选择“转到”，跳到相应位置，这时可以直接修改 书签名称，也可以单击“清除”按钮删除书签。
定义书签
书签可以是字符串，也可以 是光标所在位置。我们选中“默 认名称”四个字，选择“插入” 菜单“书签”命令，书签名称就 是选择的文本名称。我们可以直 接修改书签名称 。当你的书签 名为空时，你还要自己输入一个 名称。现在我们单击“确定”按 钮，在普通视图里“默认名称” 被加了下划虚线，表示这儿有一 个书签。
还有一种超链接，可以链接电子邮件。这样可以使你 的网上朋友通过Email及时与你联系，这是一个网站站长 和网友交流的重要手段。 首先选中要作为超链接的文本和图片，一般文本 就是你的邮箱地址，单击“超链接”按钮，单击“信 封”按钮 ，输入你的邮箱地址：
第五讲：超链接——网页制作.
10
图5.2
11
图5.3
12
③ 在属性面板上的Target（目标）下拉列表中，可以指定 链接文档在哪个框架集中被显示。 _blank： 表示在新窗口中显示链接指向的页面。 _self： 表示在当前文档的框架集中显示被链接页面。 _parent： 表示在当前页面的父级框架集中显示被链接页 面。 _top： 表示在链接所在的完整窗口中显示链接页面。 默认情况下，在当前文档的框架集中显示被链接页面，如 果没有使用框架结构，则在当前浏览器窗口显示被链接 页面。 按照图5.2和图5.3的选择，创建链接后的页面中“秋夕” 下面带有下划线(图5.4(a))。用浏览器浏览该网页，单击 “秋夕”便可在当前窗口显示网页tans_qiuxi.htm（图 13 5.4(b)）。
3
5.1.2 超链接的路径
超链接的路径是URL地址。按目标端点所处位置的不同， 超链接的路径分为绝对路径、相对路径和基于根目录 的路径。下面以如图5.1所示站点的目录结构为例，介 绍这几种路径的含义。假设网址是， web是网站的根目录，index.htm是主页。 1. 绝对路径 如果路径是一个完整的URL地址，则这种链接路径就称 为绝对路径。其特点是，路径同链接的源端点所处的 位置无关。在图5.1所示站点中，要创建指向 Introduction目录下index1.htm文件的链接。如 果要创建指向benkesheng目录下的jiaoxuejihua.htm 文档的链接，绝对路径为图5.1一个网站的目录结构
2
超链接按源端点区分为有文本超链接、图像超链接和表 单超链接。文本超链接就是利用文本为源端点构建的 超链接。在浏览器中，文本超链接的锚点一般显示为 下方带有下划线的文字；图像超链接的源端点是图像； 表单超链接的源端点可能是菜单或按钮等表单对象。 超链接按目标端点区可以分为外部链接、内部链接、局 部链接和Email链接。外部链接是链接到本站点之外的 站点或文档，利用这种链接，可以跳转到其他的网站 上。内部链接的目标端点是本站点中的其他文档，利 用这种链接，可以跳转到本站点其他的页面上。局部 链接的目标端点是文档中的某个位置，如文档中间、 末尾、开头或某个指定的位置，也可以是其他文档中 的某一指定位置。 Email链接的目标端点是一个Email 地址，单击这种链接，可以启动电子邮件程序，书写 邮件并发送到指定的地址。
图5.2
11
图5.3
12
③ 在属性面板上的Target（目标）下拉列表中，可以指定 链接文档在哪个框架集中被显示。 _blank： 表示在新窗口中显示链接指向的页面。 _self： 表示在当前文档的框架集中显示被链接页面。 _parent： 表示在当前页面的父级框架集中显示被链接页 面。 _top： 表示在链接所在的完整窗口中显示链接页面。 默认情况下，在当前文档的框架集中显示被链接页面，如 果没有使用框架结构，则在当前浏览器窗口显示被链接 页面。 按照图5.2和图5.3的选择，创建链接后的页面中“秋夕” 下面带有下划线(图5.4(a))。用浏览器浏览该网页，单击 “秋夕”便可在当前窗口显示网页tans_qiuxi.htm（图 13 5.4(b)）。
3
5.1.2 超链接的路径
超链接的路径是URL地址。按目标端点所处位置的不同， 超链接的路径分为绝对路径、相对路径和基于根目录 的路径。下面以如图5.1所示站点的目录结构为例，介 绍这几种路径的含义。假设网址是， web是网站的根目录，index.htm是主页。 1. 绝对路径 如果路径是一个完整的URL地址，则这种链接路径就称 为绝对路径。其特点是，路径同链接的源端点所处的 位置无关。在图5.1所示站点中，要创建指向 Introduction目录下index1.htm文件的链接。如 果要创建指向benkesheng目录下的jiaoxuejihua.htm 文档的链接，绝对路径为图5.1一个网站的目录结构
2
超链接按源端点区分为有文本超链接、图像超链接和表 单超链接。文本超链接就是利用文本为源端点构建的 超链接。在浏览器中，文本超链接的锚点一般显示为 下方带有下划线的文字；图像超链接的源端点是图像； 表单超链接的源端点可能是菜单或按钮等表单对象。 超链接按目标端点区可以分为外部链接、内部链接、局 部链接和Email链接。外部链接是链接到本站点之外的 站点或文档，利用这种链接，可以跳转到其他的网站 上。内部链接的目标端点是本站点中的其他文档，利 用这种链接，可以跳转到本站点其他的页面上。局部 链接的目标端点是文档中的某个位置，如文档中间、 末尾、开头或某个指定的位置，也可以是其他文档中 的某一指定位置。 Email链接的目标端点是一个Email 地址，单击这种链接，可以启动电子邮件程序，书写 邮件并发送到指定的地址。
网页设计超链接
绝对路径名
7
设置绝对路径
绝对路径是指文件的完整路径，即在进行超链接 时使用了URL，例如： /index.php /teach/index.php 绝对路径通常会在网站的友情链接中使用
8
6.2.2 设置相对路径
6
绝对和相对路径名
C:\html 目录
Doc1.htm Doc3.htm
C:\example目录
Doc2.htm Doc4.htm
相对路径名
要链接到同一目录 (C:\html) 下的页面，可编写 <A HREF = “Doc3.htm”> 或 <A HREF = “C:\html\Doc3.htm”> 要链接到另一目录 (C:\example) 下的页面，可编写 <A HREF =“..\example\Doc2.htm”> 或 <A HREF =“C:\example\Doc2.htm”>
19.1.9 设置图片热区链接
• 语法说明
<img>标记用来插入图片和引用映射图片名称，即用usemap属性来 引用在<map>标记中所定义的映射图片名称，并且要在名称前加上 #号。 <map>标记只有一个name属性，用来定义映射图片的名称。 <area>标记有三个属性，shape属性、coords属性和href属性。 shape属性用来定义热区的形状，又有3个属性值，具体取值见 表19-2 coords属性用来定义热区的坐标，不同的形状其coords属性的 设置方式也不同，具体可以参见表19-3 href属性，用来定义超链接的目标地址。
为达到这种跳转效果，需在 HREF 参数 中使用该标记
<A HREF= “#marker”>热点文字</A>
如何制作超链接
9
《电子商务技术基础》
二、链接路径
因此，链接可以分以下三种：
绝对路径 如：
相对路径 如：news/index.html
根路径 如：d│/web/news/index.html
10
《电子商务技术基础》
1、绝对路径
绝对路径：包含了标识INTERNET上的文件所需要的 所有信息。文件的链接是相对原文档而定的。包括完 整的协议名称，主机名称，文件夹名称和文件名称
3.3.4 建立超链接
《电子商务技术基础》
一、概述
HTML文件中最重要的应用之一就是超链接， web上的网页是互相链接的，单击被称为超链接 的文本或图形就可以链接到其它页面。超文本具 有的链接能力,可层层链接相关文件，这种具有超 级链能力的操作，即称为超级链接。超级链接除 了可链接文本外，也可链接各种媒体，如声音、 图象、动画，通过它们我们可享受丰富多采的多 媒体世界。
如：/web/highight/shouey.html d│/web/highight/shouey.html
16
《电子商务技术基础》
3、根路径
思考：链接本地机器上的文件时，应该使用相对 路径还是根路径？
在绝大多数情况下使用相对路径比较好，例如，用绝对 路径定义了链接，当把文件夹改名或者移动之后，那么 所有的链接都要失败，这样就必须对你的所有html文件 的链接进行重新编排，而一旦将此文夹件移到网络服务 器上时，需要重新改动的地方就更多了，那是一件很麻 烦的事情。而使用相对路径，不仅在本地机器环境下适 合，就是上传到网络或其他系统下也不需要进行多少更 改就能准确链接。
17
《电子商务技术基础》
三、在站点内部建立链接
所谓内部链接，指的是在同一个网站内部，不同的 html页面之间的链接关系，在建立网站内部链接的时 候，要明确哪个是主链接文件（即当前页），哪个是 被链接文件。在前面介绍链接路径时，已经给大家介 绍了内部链接概念，内部链接一般采用相对路径链接 比较好。
网页设计实用教程第4章超链接ppt课件
网页设计实用教程第4章超链接 ppt课件
目录
• 引言 • 超链接的基本概念 • 如何创建超链接 • 超链接的使用场景 • 超链接的优化技巧 • 总结与展望
01 引言
课程简介
本章将介绍超链接在网页设计中的重 要性和应用，帮助读者掌握如何创建 和管理超链接，提高网页的交互性和 用户体验。
学习目标：了解超链接的概念、类型 和创建方法；掌握如何设置链接颜色 、下划线样式等样式属性；理解相对 路径和绝对路径的区别和应用场景。
链接的命名规范
总结词：统一规范
详细描述：超链接的命名应该统一规范，保持一致的风格和格式。这有助于提高网站的规范性和专业 性，同时也有利于网站的SEO优化。
链接的颜色和字体设置
总结词：突出重点
详细描述：为了突出重点，超链接的颜色和字体设置应该 与普通文本有所区别。通常，超链接会以醒目的颜色和不 同的字体样式显示，以吸引用户的注意力。
详细描述：超链接的交互设计应该提供易于返回的功能 ，方便用户返回上一个页面或回到主页。这有助于提高 用户体验，降低用户的操作成本。
06 总结与展望
超链接的重要性
导航功能
超链接是网页导航的核心，通过 超链接，用户可以方便地跳转到 其他页面或网站，提高浏览体验。
信息关联
超链接可以将不同页面或网站的内 容关联起来，形成知识网络，方便 用户获取更全面的信息。
02 超链接的基本概念
什么是超链接
总结词
超链接是网页中非常重要的元素之一，它允许用户通过点击文本、图片或其他 网页元素，从一个网页跳转到另链接，用户可以通过点击超链接来访问不同的网页 或网站。超链接使用户能够方便地浏览和获取信息，是互联网中不可或缺的组 成部分。
总结词
目录
• 引言 • 超链接的基本概念 • 如何创建超链接 • 超链接的使用场景 • 超链接的优化技巧 • 总结与展望
01 引言
课程简介
本章将介绍超链接在网页设计中的重 要性和应用，帮助读者掌握如何创建 和管理超链接，提高网页的交互性和 用户体验。
学习目标：了解超链接的概念、类型 和创建方法；掌握如何设置链接颜色 、下划线样式等样式属性；理解相对 路径和绝对路径的区别和应用场景。
链接的命名规范
总结词：统一规范
详细描述：超链接的命名应该统一规范，保持一致的风格和格式。这有助于提高网站的规范性和专业 性，同时也有利于网站的SEO优化。
链接的颜色和字体设置
总结词：突出重点
详细描述：为了突出重点，超链接的颜色和字体设置应该 与普通文本有所区别。通常，超链接会以醒目的颜色和不 同的字体样式显示，以吸引用户的注意力。
详细描述：超链接的交互设计应该提供易于返回的功能 ，方便用户返回上一个页面或回到主页。这有助于提高 用户体验，降低用户的操作成本。
06 总结与展望
超链接的重要性
导航功能
超链接是网页导航的核心，通过 超链接，用户可以方便地跳转到 其他页面或网站，提高浏览体验。
信息关联
超链接可以将不同页面或网站的内 容关联起来，形成知识网络，方便 用户获取更全面的信息。
02 超链接的基本概念
什么是超链接
总结词
超链接是网页中非常重要的元素之一，它允许用户通过点击文本、图片或其他 网页元素，从一个网页跳转到另链接，用户可以通过点击超链接来访问不同的网页 或网站。超链接使用户能够方便地浏览和获取信息，是互联网中不可或缺的组 成部分。
总结词
网页设计与制作第6章 网页中的超级链接
• 2. 根据超链接目标位置的不同分 • （1）内部链接：指在同一站点内部，不同页面之 间的超链接。 • （2）锚记链接：网页内部的链接。通常情况下， 锚记链接用于链接到网页内部某个特定的位置。 • （3）外部链接：站点外部的链接，是网页与因特 网中某个目标网页的链接。 • （4）E-mail链接：指链接到电子邮箱的链接。单 击该链接可以用于发送电子邮件。 • （5）可执行文件链接：通常又称为下载链接，单 击该链接可以运行可执行文件，可以用于下载文 件或或在线运行可执行文件。 • 超链接源与目标路径概括如图6-1所示。
6.1 超级链接概述
• 超级链接在通过网页浏览获取信息中有如此重要的作用， 所以要想实现一个科学合理的链接，就应学习超级链接的 相关知识并熟练掌握实现的技术。
6.1.1 超级链接的定义
• 所谓的超链接是指从一个网页指向一个目标的连接关系， 这个目标可以是另一个网页，也可以是相同网页上的不同 位置，还可以是一个图片、一个电子邮件地址、一个文件， 甚至是一个应用程序。能合理、协调地把网站中的各个元 素以及网站中的页面通过超级链接构成了一个有机整体， 使浏览者能快速地访问到想要访问的页面。 • 超链接由源端点和目标端点两部分组成，其中设置了链接 的一端称为源端点，跳转到的页面或对象称为链接的目标 端点，同样，超级链接也是网页中最重要、最基本的元素 之一。 • 而在一个网页中用来作超链接的对象，可以是一段文本或 者是一个图片。当浏览者单击已经链接的文字或图片后， 链接目标将显示在浏览器上，并且根据目标的类型来打开 或运行。
第6章 网页中的超级链接
• 在主页制作中，大家对链接的作用并不陌生，可以这样说， 链接是主页的灵魂是网页的核心。有了它，就能够轻而易 举地实现互联网上的信息访问、资源共享。在此，作为超 文本标记语言（HTML）可以链接到其他的网页、图像、多 媒体、电子邮件地址、可下载的文件等。可以说只要浏览 器能够显示的内容，都可以从一个HTML文件中得到。我们 只所以能在网络世界恣意畅游，页面之间的链接功不可没。 而对于网页制作者来说，链接看似简单却并不容易。 • 本章对网页中的链接进行一个综合的介绍，以期让大家对 它有一个全面而深入的理解。对于链接在HTML 中的写法， 在这里就不作过多讲解，有兴趣的读者可参考有关资料学 习。
网页设计与制作8_超链接
Step5：图像链接 打开图文网页文件，尝试在图像上加入 在新窗口打开的链接， 观察代码的变化。
Step6：电子邮件链接 【插入】→【电子邮件链接】，尝试插 入电子邮件链接，观察代码的变化。
Step7：文件链接 空链接 文件链接与文本图像的链接方法类似， 在链接框中输入文件路径即可。 空链接是未指定目标端点的链接，在链 接中呈现 # 号。
超链接类型
文件链接 • 提供下载服务
电子邮件链接 • 快速创建电子邮件
DW 教程 3：超链接
教程目的： • 了解超链接的创建过程 • 学习创建链接的多种方式
Step1：文本链接 打开文本网页，选中需要设置链接的文 本，在页面下方 HTML 属性面板中，输 入绝对链接网址。 如果链接对象为相对链接，点击 浏览 文件，选择所需页面。 或拖拽 指向本地站点中的文件。
基本格式：“访问方案 :// 服务器 : 端口 ( 可省略 )/ 路径 / 文件 # 锚记”
超链接类型
相对链接 • 最常见链接形式 • 链接网站内部的ห้องสมุดไป่ตู้面或资源
绝对链接 • 外部链接 • 严格的目标端点对象
超链接类型
锚点链接 • 跳转到指定的页面位置 • 适用于网页内容超出窗口高度情况
空链接 • 提供调用脚本的按钮
链接标签 <a href=" 目标端点 URL"> 源端点 </a>
Step2：链接设置 默认文本链接为“蓝色 + 下划线”，如 需改动，可在属性面板点击 →链 接 (CSS) 更改链接样式。
超链接目标的打开方式可在
下拉菜单中选择，选项包括：
•_blank：在新浏览器窗口中打开网页 •new：在新建的同一个窗口中打开 •_parent：将要链接的文件载入含有该链接框架的父框架集或父窗口中 •_self：在同一框架或窗口中打开所链接的文档，默认方式 •_top：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架
网页制作ppt课件第4章超链接
超链接的重要性
总结词
超链接在网页制作中起着至关重要的作用，它能够提高用户体验、增强网站导航、增加网站流量和提升搜索引擎 排名。
详细描述
超链接是网页中不可或缺的一部分，它能够提高用户体验，使用户能够方便地浏览和获取信息。通过设置合理的 超链接，可以增强网站的导航结构，使用户更容易找到所需内容。同时，超链接还可以增加网站的外部链接数量， 提高网站的权重和流量，从而提升搜索引擎排名。
问。
图片链接
总结词
图片链接是指将一张图片设置为超链接 ，当用户点击这张图片时，会跳转到指 定的片链接，首先需要插入一 张图片，然后选中这张图片，选择“插入 ”菜单中的“超链接”选项。在弹出的对 话框中，输入要链接到的网址或文件路径 ，并设置好显示的文字和颜色等属性。点 击确定后，选中的图片就会变成超链接， 用户可以直接点击访问。
确保超链接指向的内容合法、合规， 不涉及任何违法、侵权或不良信息。
避免在超链接中传递任何误导、虚假 或欺诈信息，以免引起法律纠纷和不 良后果。
在使用外部链接时，尊重原网站的版 权和隐私政策，避免侵犯他人的权益。
06
案例分析
优秀超链接案例一
01
案例名称
旅游网站导航栏
02 03
描述
该网站通过超链接将各个旅游景点的页面相互连接，使用户可以轻松跳 转到感兴趣的景点页面，同时每个景点页面都提供了返回主页的超链接， 方便用户浏览。
使用链接管理工具或插件来检 测和清除死链，提高网站的用 户体验和搜索引擎优化效果。
优化用户体验
确保超链接的文本清晰、简洁， 易于理解，避免使用过于复杂或
难以理解的链接描述。
合理规划超链接的位置和布局， 使其符合用户的浏览习惯和阅读
第6章 网页中的超级链接
第6章网页中的超级链接6.1任务题目灵活运用链接知识建立各种超级链接6.2 任务导入如何使一个个独立的网页彼此联系起来，又如何使这些独立的网页和其他网站联系起来呢？这就需要使用超链接。
通过超链接，把Internet上的众多的网站和网页联系起来，构成一个有机整体。
在Internet上浏览，实际上就是通过在页面上单击链接，从当前页面跳转到另一个页面。
本章主要介绍各种超链接工具的使用，在建立和设置超链接属性的同时，运用超链接知识制作出灵活跳转的各个链接页面。
6.3 任务分析1．目的（1）掌握简单超链接的设计能力。
（2）掌握各种链接的创建及属性设置。
2．重点（1）掌握超链接的概念。
（2）掌握内部超链接、外部超链接创建方法及设置。
（3）掌握E-mail链接创建方法及设置。
（4）掌握锚点链接创建方法及设置。
（5）掌握图像映射链接的创建及设置。
3．难点（1）掌握如何设置链接目标。
（2）掌握锚点链接的创建及设置。
（3）掌握图像映射链接的创建及设置。
6.4 技能目标1．根据任务要求，能设计网页的简单超链接。
2．根据网页效果需要，能合理运用超链接属性进行参数设置。
6.5 任务讲析6.5.1实例演练——奥运网页超级链接的制作【任务一】设计思路◆打开网页1．在D盘创建新文件夹名为“任务6-1”，作为站点文件夹用于存放站内的文档。
2．启动Dreamweaver CS4软件，进入Dreamweaver CS4主窗口中，单击菜单【文件】>【打开】，弹出【查找文件】对话框，打开“光盘/素材/第6章/任务1/ind ex.html”。
◆设置内部超级链接[1]1．选中页面里的文字“奥运动态”，然后执行【插入】>【超级链接】命令，如图6-1所示，弹出【超级链接】对话框，如图6-2所示。
图6-1应用菜单命令插入超级链接图6-2“超级链接”对话框2．单击图6-2面板上【链接】项右边的文件夹图标，打开【选择文件】对话框，在该对话框中选择“光盘/素材/第6章/任务1/ ch6-11.html”。
网页制作超级链接
• 超级链接是指站点内不同网页之间、站点 与Web之间的链接关系，它可以使站点内 的网页成为一个有机的整体，还可以在不 同的站点之间建立联系。 • 下面以文本为链接载体，介绍在 Dreamweaver MX中如何创建各种类型的 超级链接。
创建超级链接的方法
• • • • • • 在站点管理器中编辑超级链接 创建锚点链接 创建E-MAIL链接 创建导航条 创建跳转菜单 创建映射图链接
给热点区域创建链接
• 在属性面板的“链接”文本框中输入被链 接的页面路径“../travel/guangdong.htm‖， 该页面就是单击热点时所要链接的去向。
创建导航条
• 在网页上选择插入导航条的位置 • 在插入菜单里选择插入交互式图像——》 导航条命令 • 屏幕上出现对话框 • 按屏幕提示操作（事先准备好作为按钮的 四张图片）
• （3）在“目标”域选择链接目标的载入位 置为“_blank‖ 。
注意
• 在默认情况下，链接的文件在当前窗口或框架中 被打开。要使被链接的文件（网页、网站主页、 图像）显示在其它地方，需要从属性面板的目标 域弹出菜单上选择一个选项： • _blank 被链接文件在新窗口中打开； • _parent 将被链接文件载入到父框架集或包含该 链接的框架窗口中； • _self 被链接文件在与该链接相同的框架或窗口中 打开（默认窗口无须指定）； • _top 将被链接文件载入到整个浏览器窗口并删除 所有框架。
• 在同一网页内有长文档。比如，人物传记、 小说连载等。
锚点链接分两步来实现
• 第一步: 将网页的某一处设置为锚点， 并为其命名；
• 第二步: 在源端点处建立该锚点的超级 链接。
设置锚点的操作步骤如下
• 为灭绝师太设置锚点
创建超级链接的方法
• • • • • • 在站点管理器中编辑超级链接 创建锚点链接 创建E-MAIL链接 创建导航条 创建跳转菜单 创建映射图链接
给热点区域创建链接
• 在属性面板的“链接”文本框中输入被链 接的页面路径“../travel/guangdong.htm‖， 该页面就是单击热点时所要链接的去向。
创建导航条
• 在网页上选择插入导航条的位置 • 在插入菜单里选择插入交互式图像——》 导航条命令 • 屏幕上出现对话框 • 按屏幕提示操作（事先准备好作为按钮的 四张图片）
• （3）在“目标”域选择链接目标的载入位 置为“_blank‖ 。
注意
• 在默认情况下，链接的文件在当前窗口或框架中 被打开。要使被链接的文件（网页、网站主页、 图像）显示在其它地方，需要从属性面板的目标 域弹出菜单上选择一个选项： • _blank 被链接文件在新窗口中打开； • _parent 将被链接文件载入到父框架集或包含该 链接的框架窗口中； • _self 被链接文件在与该链接相同的框架或窗口中 打开（默认窗口无须指定）； • _top 将被链接文件载入到整个浏览器窗口并删除 所有框架。
• 在同一网页内有长文档。比如，人物传记、 小说连载等。
锚点链接分两步来实现
• 第一步: 将网页的某一处设置为锚点， 并为其命名；
• 第二步: 在源端点处建立该锚点的超级 链接。
设置锚点的操作步骤如下
• 为灭绝师太设置锚点
如何制作超链接
• URL(Uniform Resourc Locator) 指的就是每一个网 站都具有的地址。同一个网站下的每一个网页都属于同 一个地址之下，在创建一个网站的网页时，不需要为每 一个连接都输入完全的地址，我们只需要确定当前文档 同站点根目录之间的相对路径关系就可以了。
9
二、链接路径
因此，链接可以分以下三种：
12
2、相对路径
– 如果链接到同一目录下，则只需输入要链接文件的 名称。
– 要链接到下级目录中的文件。只需先输入目录名， 然后加"/"，再输入文件名。
– 要链接到上一级目录中文件，则先输入"../"，再输 入文件名。
13
2、相对路径
14
例2：
如果文档“page1.html”存放在目录 d:/lianjie/example/page下， • 使用相对路径时可写成： <A href=" page/page1.html">第一部分</A>
2
一、概述
• 建立超链接的标签为<A>和</A>
• 格式为：<A HREF="资源地址" TARGET="窗口名 称" TITLE="指向连接显示的文字">超链接名称</A>
• 说明：标签<A>表示一个链接的开始，</A>表示链接 的结束；
• 属性“HREF”定义了这个链接所指的目标地址；目标 地址是最重要的，一旦路径上出现差错，该资源就无 法访问
• TARGET:该属性用于指定打开链接的目标窗口，其默
认方式是原窗口。
3
一、概述
• TITLE：该属性用于指定指向链接时所显示的标题文字。 • “超链接名称”是要单击到链接的元素，元素可以包含文
9
二、链接路径
因此，链接可以分以下三种：
12
2、相对路径
– 如果链接到同一目录下，则只需输入要链接文件的 名称。
– 要链接到下级目录中的文件。只需先输入目录名， 然后加"/"，再输入文件名。
– 要链接到上一级目录中文件，则先输入"../"，再输 入文件名。
13
2、相对路径
14
例2：
如果文档“page1.html”存放在目录 d:/lianjie/example/page下， • 使用相对路径时可写成： <A href=" page/page1.html">第一部分</A>
2
一、概述
• 建立超链接的标签为<A>和</A>
• 格式为：<A HREF="资源地址" TARGET="窗口名 称" TITLE="指向连接显示的文字">超链接名称</A>
• 说明：标签<A>表示一个链接的开始，</A>表示链接 的结束；
• 属性“HREF”定义了这个链接所指的目标地址；目标 地址是最重要的，一旦路径上出现差错，该资源就无 法访问
• TARGET:该属性用于指定打开链接的目标窗口，其默
认方式是原窗口。
3
一、概述
• TITLE：该属性用于指定指向链接时所显示的标题文字。 • “超链接名称”是要单击到链接的元素，元素可以包含文
制作包含超级链接的网页
实验六：制作包含超级链接的网页
一、实验任务：
1、熟练掌握创建网页外部链接和内部链接，根据页面内容的需要添加和制作不同类型的超级链接。
2、完成【任务6-1】。
3、根据任务6-1的制作，观察和说明外部链接和内部链接、绝对地址和相对地址之间的差别。
二、实验步骤：
1、设置超链接的属性
2、选中所要超链接的文字，点击属性面板，输入链接地址，更改目标状态
3、选中“天子山自然保护区”，点击插入中的Hyperlink，点击链接
按钮，选择网页文件，更改目标填入标题。
3、点击图片，点击属性，点击链接旁的浏览文件夹，选择文件，再点击拆分视图，编入代码
4、选中文字，在属性面板中点击链接，输入链接
5、点击代码视图，首页左侧输入代码<a name=“top”id=“top”></a>，再在“索溪峪自然保护区”左侧输入代码，最后点击“回到首页”设置其链接为“#top’
6、在图像中点击热点工具按钮，在图中绘制一个合适的区域，点击所绘制的区域进行设置超链接。
7、点击窗口里的结果，再点击链接检查器，选择见检查的范围进行检查。
8、外部链接：本网站外部的链接，一般是指其他网站连到本网站的链接。
内部链接：本网站内部网页之间的链接。
相对地址是指相对于当前网页的地址。
绝对路径是被链接文档的完整路径包括使用的传输协议.
三、实验体会
本次的实验报告，让我更加对我的期末报告有了更好的完善，对文字的链接，图片的链接以及图形有了更深次的了解。
ch06-网页中超级链接的应用
h
18
6.4.5 创建空链接
• 启动Dreamweaver CS5，在菜单栏中，选择 【文件】→【打开】菜单项，打开素材文件。
• 选中准备添加链接的文本对象，在属性面板的 【链接】文本框中输入半角状态下的【#】。
• 按键盘上的【Enter】键，即可完成文本空链 接的创建。
h
19
6.4.6 创建脚本链接
h
7
6.2.2 相对路径
• 文档相对路径对于大多数Web站点的本地链接， 是最适用的路径，在当前文档与所链接的文档 处于同一文件夹内，而且可能保持这种状态的 情况下，文档相对路径特别有用。
h
8
6.2.3 根路径
• 站点根目录相对路径提供从站点的根文件夹到 文档的路径，如果在处理使用多个服务器的大 型Web站点，或者在使用承载有多个不同站点 的服务器，则可能需要使用这些类型的路径， 如果不熟悉此类型的路径，最好坚持使用文档 相对路径。
Dreamweaver CS5网页设计与制 h
1
6.1 认识超链接
• 6.1.1 什么是超链接 • 6.1.2 内部、外部与脚本链接 • 6.1.3 常见的超链接
h
2
6.1.1 什么是超链接
• 超链接由源端点和目标端点两部分组成，其中 设置了链接的一端称为源端点，跳转到的页面 或对象称为链接的目标端点，同样，可以说超 级链接是网页中最重要、最基本的元素之一。
h
11
6.3.2 使用指向文件图标创建链接
• 首先，选择准备创建链接的对象，在菜单栏中， 选择【窗口】→【属性】菜单项，在【属性】 面板中，单击【指向文件】按钮 ，单击并拖 动到站点窗口的目标文件上，释放鼠标左键即 可完成创建链接的操作。
网页设计与制作之超链接
网页设计与制作之超链接
实验四在网页中使用超链接
【实验目的】
通过本实验，使学生熟悉如何在网页中通过超链接来使用多媒体的方法。
【实验要求】
[1] 掌握如何创建与各种对象的超级链接；
[2] 掌握编辑各种超链接的方法；
[3] 掌握利用站点地图管理超链接的方法。
【实验内容】
1、制作一个网页，并设置相应的超链接，如文本超链接、图片热区超链接、电子邮件超链接，如图1“校友录”所示。
2、使用布局表格制作如图2所示网页
图1“校友录”
图2 布局表格
“校友录”页面制作【实验步骤】
1、首先在制作出如下所示的表格：
2、页面属性如下：
3、添加相应图片及文本
4、在图片上设置热点链接，如下所示：
并制作相应地特点链接网页，示例如下：
5、设置文本空链接，如下所示：
6、在“联系”字样上设置电子邮件超链接，如下所示：
对“Send”图片设置电子邮件超链接，如下所示：
“布局表格”制作步骤
1、使用布局模式绘制布局表格和布局单元格进行布局，如图所示
2、将未来旅游中的图片设置为“鼠标经过图像”
3、将页面下方的“与我联系”设置为电子邮件超链接。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（2）在现有的表格中插入单元列，可以选择以上的操 作之一： • 将光标移到在插入单元列的右边一列 ，选择“修 改”|“表格”|“插入列”命令。 • 将光标移到要插入单元列的右边一列 ，按组合键 “Ctrl+Shift+A”。
• 将光标移到要插入单元列的右边一列，单击鼠标右
键，在弹出的快捷菜单中选择“表格”|“插入列”
6.1.4 创建锚记超链接
锚记，也称为书签或锚点，用来标记文档中的 特定位置，使用其可以跳转到当前文档或其他文档
中的标记位置，免去浏览者翻阅网页寻找信息的麻
烦。在网页中加入锚记包括两方面的工作，一是在
网页中创建锚记，另一个就是为锚记建立链接。
1．创建锚记
创建锚记的步骤如下： （1）将光标移到需要加入锚记的地方，一般是将光 标放置在一行或是一段文字的开头部分。 （2）单击插入“常用”面板上的按钮，或是选择 主窗口的菜单“插入”|“命名锚记”命令，将弹 出“命名锚记”对话框。
③ 锚记名称区别英文字母的大小写。
④ 锚记名称间不能含有空格，也不能含有特殊字符。
2．链接锚记
创建锚记后，还必须链接锚记。选择想要链接 到锚记的文字或图片，然后按如下方法中的任意一 种进行操作。 （1）在属性面板上的“链接”文本框中输入符
号# 和锚记名称。
• （2）选择文字或图片后，按住Shift键，然后拖动
（3）在“目标”下拉列表框中选择目标文件打开的方
式。 且在文字底部出现一条下划线，即文字的超链接设置 完成。在键盘上按“F12”键，即可将网页在浏览器
设置结束后，在网页中被选择的文字改变了颜色，
中打开。单击链接的文字，即可打开目标文件。
2．编辑文本超链接
（1）设置文本链接的状态 一个未被访问过的链接与一个被激活的链接 在形式上肯定会有所区别，链接被访问过了也会 发生变化，提示用户这是一个已经点击过的链接， 所有这些都是链接的状态。通过设置不同的文本 颜色可以使各个状态区别开来。
置，然后单击“确定”按钮，设置的多列或多行将插
入到页面中。
（4）删除整行/整列，可以采用下列办法之一： • 先选择欲删除的整行或整列，直接按Del键，即可删 除。 • 先将光标移到要删除的行或列中，选择“修 改”|“表格”|“删除行”或“删除列”命令。 • 将光标移到要删除的行或列中，单击鼠标右键，在
执行完上述任何一种操作，都可以看到如图所示 的“插入表格”对话框。
• • • •
行数：初次指定表格的总行数。 列数：初次指定表格的总列数。 单元格填充：指定单元格的大小，以像素为单位。 单元格间距：指定单元格之间的距离，以像素为单位。 分比用于根据浏览器窗口的大小来自动调整表格的宽
• 宽度：指定表格的宽度，以百分比或像素为单位（百
为：文本超链接、图像超链接、E-mail链接、锚点链
接、多媒体文件链接、空链接等
3．文档路径类型
在一个网站中，有绝对路径、和根目录相对路 径以及和文档相对路径3种类型的文档路径。 绝对路径：是包含服务器协议（对于网页来说 通常是http://或ftp://）的完全路径。 和文档相对的路径：是指一个文档与当前文件 夹间相对的路径。
（3）在对话框的“锚记名称”文本框输入锚记的名
称。
（4）单击“确定”按钮。
在命名锚记时，必须遵循以下规定：
① 只能使用字母和数字，锚记命名不支持中文。虽 然在插入锚记对话框中能输入中文，但在属性面板 上显示的则是一堆乱码，且在为锚记添加链接的时 候，也无法工作。 ② 锚记名称的第1个字符最好是英文字母，一般不要 以数字作为锚记名称的开头。
本，然后在属性面板中的“链接”栏中输入一个数值 其他情况下不必建立空链接。
符“#”即可。建立空链接的目的就是为了应用行为，
第4章 网页表格的处理
通过本章学习，应该掌握以下内容：
1. 2. 3. 4. 5. 6. 创建表格的方法 编辑表格的方法 表格的排序方法 表格的格式化方法 设置表格属性的方法 用表格设计页面布局的方法
度）。 • 边框：指定表格边界的宽度，以像素为单位（如果在 浏览器窗口中不显示表格的边框，则定义为0）。
2．导入表格数据文件
在Dreamweaver MX中，利用插入列表数据命令 可以很容易把表格数据加入到网页中。在插入外部数 据前，首先要将表格数据文件转换成 .txt（文本文 件）格式，并且该文件中的数据要带有分隔符，如逗
后一个单元格。
• 将光标置于第1行的左边缘，当光标变成图标时，
ห้องสมุดไป่ตู้
向下拖动鼠标至最后一行。
• 将光标置于第1列的上边缘，当光标变成图标时， 向右拖动鼠标至最后一列。
2．添加/删除行列
（1）在现有的表格中插入单元行，可以选择以下的操 作之一： • 将光标移到要插入单元行的下一行，选择“修 改”|“表格”|“插入行”命令。 • 将光标移到要插入单元行的下一行，按组合键 “Ctrl+M”。 • 将光标移到要插入单元行的下一行，单击鼠标右键， 在弹出的快捷菜单中选择“表格”|“插入行”命令。
命令。
（3）如果想在现有的表格中添加多行或多列，可执行 以下操作： 首先将光标移到要插入行或列附近的单元格中， 单击鼠标右键，在弹出的下拉菜单中选择“表 格”|“插入行或列”命令，或是选择“修改”|“表 格”|“插入行或列”命令，将弹出如图4-5所示的
“插入行或列”对话框。在此对话框中进行相关的设
6.1.2 创建文本超链接
1．建立文本超链接
在浏览网页时，鼠标指针经过某些文本时，指 针的形状发生变化，同时文本也会发生变化（如出 现下划线、文本的颜色发生变化、字体发生变化 等），提示这是带链接的文本。此时点击鼠标，就 会打开所链接的网页，这就是文本超链接。
在Dreamweaver MX中创建文本超链接的步骤为： （1）在网页上选择需要添加超链接的文本，打开文本 的属性面板。 （2）在属性面板上指定文字的链接目标。
6.1.1 超链接简介 1．什么是超链接
所谓的超链接是指从一个网页指向一个目标的连接关 系，这个目标可以是另一个网页，也可以是相同网页上的 不同位置，还可以是一个图片、一个电子邮件地址、一个 文件，甚至是一个应用程序。而在一个网页中用来超链接
的对象，可以是一段文本或者是一个图片。当浏览者单击 已经链接的文字或图片后，链接目标将显示在浏览器上，
6.1.3 创建图像超链接
1．创建图像超链接
给图像添加链接，使其指向其他的网页或者文
档，就是图像超链接。 （1）选中需要建立超链接的图像，此时属性面板显 示图像的属性 。 （2）在属性面板中为图像添加文档相对路径的链接。
（3）按“F12”预览网页。
2．删除图像超链接
删除图片超链接与删除文本超链接的方法相同 。
6.1.6 创建下载文件超链接
如果想让网站提供文件下载的功能，就必须建立
下载文件超链接。实现文件下载的功能很简单，只需
加入连接到文件的超链接就可以了。连接到网站中下 载文件的超链接也算是内部超链接中的一种。 创建下载文件超链接的方法如下： 首先选择主窗口的菜单“站点”|“站点文件”命
令，打开站点窗口，找到需要链接的目标文件。然后
4.1 利用Dreamweaver MX处理网页表格
4.1.1 创建表格
1．新建表格
利用Dreamweaver MX创建新表格时，首先打开插 入“常用”面板，然后可以通过下列四种方式中的任 意一种： （1）在插入“常用”面板上，单击插入表格按钮 。 （2）通过主窗口的菜单“插入”|“表格”命令。 （3）使用快捷组合键“Ctrl+Alt+T”。 （4）在插入“常用”面板上，拖动表格 按钮到主窗 口的工作区中。
（2）删除文本超链接 在Dreamweaver MX中要删除一个文本超链接 很容易，先用鼠标选定文本对象，将光标定位于 属性面板的“链接”文本框中，用“BackSpace” 键或“Delete”键，将其显示的超链接对象文件 名删除，再回车，或选择“修改”|“移除链接”
命令，都可以删除超链接而保留原文本对象。
弹出的快捷菜单中选择“表格”|“删除行”或“删
除列”命令。
3．修改表格大小
（1）设置表格的宽度及高度 在Dreamweaver MX中，修改表格的大小有以下 两种方法。 ① 通过鼠标拖曳法可以粗略地调整表格的大小。 ② 通过“表格属性”对话框可以精确地调整表格的大
小。
在创建表格时，可以通过表格对话框来设置表格
第6章 在网页中使用超链接
通过本章学习，应该掌握以下内容：
1. 认识超链接 2. 利用Dreamweaver MX创建各种超连接 的方法 3. 利用Dreamweaver MX编辑各种超连接 的方法 4. 利用HTML创建、编辑超链接的方法 5. 利用站点地图管理超链接的方法
6.1 利用Dreamweaver MX处理超链接
号、分号、冒号等，但加入到Dreamweaver MX中的数
据并不会出现分隔符，且会自动生成表格。 要加入外部数据，选择如下的任何一种操作： （1）选择“文件”|“导入”|“表格式数据”命令。 （2）选择“插入”|“表格对象”|“导入表格式数据”
命令。
4.1.2 编辑表格 1．选择表格
（1）如果要选择整个表格，可进行如下的操作之一： • 将光标置于表格中的某个单元格中，选择“修 改”|“表格”|“选择表格”命令。 • 将光标置于表格中的某个单元格中，单击鼠标右键， 在弹出的快捷菜单中选择“表格”|“选择表格”命 令。 • 单击表格的边线。
并且根据目标的类型来打开或运行。
按照链接路径的不同，网页中超链接一般分为 以下3种类型： 内部链接：即在同一个站点内的不同页面之间相互联
系的超链接。 锚点链接：可以链接到网页中某个特定位置的链接。 外部链接：把网页与Internet中的目标相联系的链接。 如果按照使用对象的不同，网页中的链接又可以分