网页制作超级链接[互联网业]
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
学校公共选修课：《网页设计与制作》讲义
超级链接
北师大珠海分校信息技术学院 陈星火
软件网络
1
学习目标
• 了解超级链接的概念
• 了解超级链接的类型
文字
• 掌握站点内部超级链接的方法 图片
页
按钮
面
• 掌握电子邮件链接
• 掌握外部超级链接的方法
文字 图片
• 掌握锚点链接
按钮
页 面
• 掌握热点区域链接
软件网络
• MailtoMailto://
• TelnetTelnet://
软件网络
9
软件网络
10
文档的绝对路径
• 即被链接文档的完整URL，包括所使用的 传输协议，对于网页通常是“http://”。
• 例如， • http://itse.bnuep.com/news/ default.asp • 就是一个绝对路径。
• （2）点击属性面板上的“浏览文件”图标， 打开“选择文件”对话框中，选择页面文 件“autobiography.htm”；
• （3）点击“确认”按钮完成操作。
软件网络
20
软件网络
21
创建外部超级链接
• 链接外部网站的关键，是在链接域正确输 入外部网站的网址。
• 例题：为页面中的文字“信息技术与软件 工程学院”添加外部超级链接，地址为 “http://itse.bnuep.com”，并设置链接目 标为新窗口打开，
软件网络
22
操作步骤如下：
• （1）选中页面中的文字“信息技术与软件 工程学院”；
• （2）在属性面板的“链接”文本框中输入 地址“http://itse.bnuep.com” ；
• （3）在“目标”域选择链接目标的载入位 置为“_blank” 。
软件网络
23
软件网络
24
注意
• 在默认情况下，链接的文件在当前窗口或框架中 被打开。要使被链接的文件（网页、网站主页、 图像）显示在其它地方，需要从属性面板的目标 域弹出菜单上选择一个选项：
软件网络
15
制作目标
• 制作一个预览效果图如图所示的网页页面。
软件网络
16
创建内部超级链接
• 属性面板上的“链接定位”图标或者“浏览文件” 图标可以用来创建文件的内部超级链接。
软件网络
17
使用“链接定位”图标创建内部超级链 接
• （1）选择页面中的标题文字“星火其人”； • （2）在编辑窗口的列表菜单中打开“站点”
• 而链接目标可以是任意的网络资源，例如： 页面、图像、声音、程序、其他网站、 Email甚至是页面中的某个位置––––锚点等 等。
软件网络
4
软件网络
5
超级链接的应用
• 超级链接可以为浏览者畅游网络提供方便。是 网页制作中使用得比较多的一种技术。
• 超级链接是用预先准备好的文本、图片、按钮 等对象与其他对象建立一种链接关系。也就是 在源端点和目标端点之间建立起一种链接。
• _blank 被链接文件在新窗口中打开； • _parent 将被链接文件载入到父框架集或包含该
链接的框架窗口中； • _self 被链接文件在与该链接相同的框架或窗口中
打开（默认窗口无须指定）； • _top 将被链接文件载入到整个浏览器窗口并删除
所有框架。
软件网络
25
软件网络
26
创建E-mail链接
软件网络
7
超级链接举例
• 超文本链接 • 非超文本链接 • 外部链接 • 内部链接 • 电子邮件链接 • 局部链接
软件网络
8
“统一资源定位符”----URL
• URL是英文Uniform Resource Location的缩写。 下面是几种常见的URL协议：
• 超文本传输协议Http://
• 文件传输协议Ftp://
2
什么是超级链接？
• 所谓链接（link）就是一个web资源到另一 个web资源的连接，建立链接的目的是为 了获取web的其他资源。
• 超级链接由两部分组成：链接载体（源端 点）和链接目标（目标端点）。
软件网络
3
链接的基本概念
• 许多页面元素都可以作为链接载体，例如： 文本、图像、图像热区、轮替图像、动 画……
管理器；
• （3）拖动“链接定位”图标到站点管理器 中的页面文件“autobiography.htm”上方， 文件的地址就会出现在属性面板的“链接” 文本框中；
• （4）松开鼠标左键，完成内部链接的创建。
软件网络
18
软件网络
19
使用“浏览文件”图标创建内部超级链 接
• （1）选择页面pra_05_01.htm中的标题文 字“星火其人”；
• 在网页上创建电子邮件链接，方便用户意 见反馈。当浏览者单击电子邮件链接时， 可以及时打开浏览器默认的电子邮件程序 处理程序，收件人的邮件地址被电子邮件 链接中指定的地址自动更新，无需浏览者 手工输入。为页面添加E-mail地址链接， 可以有两种方法：
软件网络
13
创建超级链接
• 超级链接是指站点内不同网页之间、站点 与Web之间的链接关系，它可以使站点内 的网页成为一个有机的整体，还可以在不 同的站点之间建立联系。
• 下面以文本为链接载体，介绍在 Dreamweaver MX中如何创建各种类型的 超级链接。
软件网络
14
创建超级链接的方法
• 在站点管理器中编辑超级链接 • 创建锚点链接 • 创建E-MAIL链接 • 创建导航条 • 创建跳转菜单 • 创建映射图链接
软件网络
12
根相对路径
• 是指从站点根文件夹到被链接文档经由的 路径，以前斜杠开头，例如， “/news/default.asp”就是站点根文件夹下 的“news”子文件夹中的一个页面文件 “default.asp”的根相对路径。当我们移动 一个包含根相对链接的文档时，不需要对 原有的链接进行修改。
• 源端点是超级链接的起始端点，也称为源锚， 目标端点是联结的对象，也称为目标锚。
软件网络
6
超链接的划分
ຫໍສະໝຸດ Baidu
• 按源端点的链接划分：
• 按目标端点的链接划分：
• 超文本链接： • 源锚文本下方有下划线
• 非超文本链接： • 用除文本之外的其他对象
构建的链接(图像、表格、 列表、表单、多媒体等)
• 外部链接 • 内部链接 • 电子邮件链接 • 局部链接
• 在创建外部链接时，必须使用绝对路径。
软件网络
11
文档的相对路径
• 以当前文档所在位置为起点到被链接文档 经由的路径。
• 例如， “default.asp”就是一个文档相对 路径。
• 同一网站内创建内部链接时，使用相对路 径比较方便。与同文件夹内的文件链接时 只写文件名即可，如果要与上一级文件夹 里的文件链接，在文件名前加上“../”即可。
超级链接
北师大珠海分校信息技术学院 陈星火
软件网络
1
学习目标
• 了解超级链接的概念
• 了解超级链接的类型
文字
• 掌握站点内部超级链接的方法 图片
页
按钮
面
• 掌握电子邮件链接
• 掌握外部超级链接的方法
文字 图片
• 掌握锚点链接
按钮
页 面
• 掌握热点区域链接
软件网络
• MailtoMailto://
• TelnetTelnet://
软件网络
9
软件网络
10
文档的绝对路径
• 即被链接文档的完整URL，包括所使用的 传输协议，对于网页通常是“http://”。
• 例如， • http://itse.bnuep.com/news/ default.asp • 就是一个绝对路径。
• （2）点击属性面板上的“浏览文件”图标， 打开“选择文件”对话框中，选择页面文 件“autobiography.htm”；
• （3）点击“确认”按钮完成操作。
软件网络
20
软件网络
21
创建外部超级链接
• 链接外部网站的关键，是在链接域正确输 入外部网站的网址。
• 例题：为页面中的文字“信息技术与软件 工程学院”添加外部超级链接，地址为 “http://itse.bnuep.com”，并设置链接目 标为新窗口打开，
软件网络
22
操作步骤如下：
• （1）选中页面中的文字“信息技术与软件 工程学院”；
• （2）在属性面板的“链接”文本框中输入 地址“http://itse.bnuep.com” ；
• （3）在“目标”域选择链接目标的载入位 置为“_blank” 。
软件网络
23
软件网络
24
注意
• 在默认情况下，链接的文件在当前窗口或框架中 被打开。要使被链接的文件（网页、网站主页、 图像）显示在其它地方，需要从属性面板的目标 域弹出菜单上选择一个选项：
软件网络
15
制作目标
• 制作一个预览效果图如图所示的网页页面。
软件网络
16
创建内部超级链接
• 属性面板上的“链接定位”图标或者“浏览文件” 图标可以用来创建文件的内部超级链接。
软件网络
17
使用“链接定位”图标创建内部超级链 接
• （1）选择页面中的标题文字“星火其人”； • （2）在编辑窗口的列表菜单中打开“站点”
• 而链接目标可以是任意的网络资源，例如： 页面、图像、声音、程序、其他网站、 Email甚至是页面中的某个位置––––锚点等 等。
软件网络
4
软件网络
5
超级链接的应用
• 超级链接可以为浏览者畅游网络提供方便。是 网页制作中使用得比较多的一种技术。
• 超级链接是用预先准备好的文本、图片、按钮 等对象与其他对象建立一种链接关系。也就是 在源端点和目标端点之间建立起一种链接。
• _blank 被链接文件在新窗口中打开； • _parent 将被链接文件载入到父框架集或包含该
链接的框架窗口中； • _self 被链接文件在与该链接相同的框架或窗口中
打开（默认窗口无须指定）； • _top 将被链接文件载入到整个浏览器窗口并删除
所有框架。
软件网络
25
软件网络
26
创建E-mail链接
软件网络
7
超级链接举例
• 超文本链接 • 非超文本链接 • 外部链接 • 内部链接 • 电子邮件链接 • 局部链接
软件网络
8
“统一资源定位符”----URL
• URL是英文Uniform Resource Location的缩写。 下面是几种常见的URL协议：
• 超文本传输协议Http://
• 文件传输协议Ftp://
2
什么是超级链接？
• 所谓链接（link）就是一个web资源到另一 个web资源的连接，建立链接的目的是为 了获取web的其他资源。
• 超级链接由两部分组成：链接载体（源端 点）和链接目标（目标端点）。
软件网络
3
链接的基本概念
• 许多页面元素都可以作为链接载体，例如： 文本、图像、图像热区、轮替图像、动 画……
管理器；
• （3）拖动“链接定位”图标到站点管理器 中的页面文件“autobiography.htm”上方， 文件的地址就会出现在属性面板的“链接” 文本框中；
• （4）松开鼠标左键，完成内部链接的创建。
软件网络
18
软件网络
19
使用“浏览文件”图标创建内部超级链 接
• （1）选择页面pra_05_01.htm中的标题文 字“星火其人”；
• 在网页上创建电子邮件链接，方便用户意 见反馈。当浏览者单击电子邮件链接时， 可以及时打开浏览器默认的电子邮件程序 处理程序，收件人的邮件地址被电子邮件 链接中指定的地址自动更新，无需浏览者 手工输入。为页面添加E-mail地址链接， 可以有两种方法：
软件网络
13
创建超级链接
• 超级链接是指站点内不同网页之间、站点 与Web之间的链接关系，它可以使站点内 的网页成为一个有机的整体，还可以在不 同的站点之间建立联系。
• 下面以文本为链接载体，介绍在 Dreamweaver MX中如何创建各种类型的 超级链接。
软件网络
14
创建超级链接的方法
• 在站点管理器中编辑超级链接 • 创建锚点链接 • 创建E-MAIL链接 • 创建导航条 • 创建跳转菜单 • 创建映射图链接
软件网络
12
根相对路径
• 是指从站点根文件夹到被链接文档经由的 路径，以前斜杠开头，例如， “/news/default.asp”就是站点根文件夹下 的“news”子文件夹中的一个页面文件 “default.asp”的根相对路径。当我们移动 一个包含根相对链接的文档时，不需要对 原有的链接进行修改。
• 源端点是超级链接的起始端点，也称为源锚， 目标端点是联结的对象，也称为目标锚。
软件网络
6
超链接的划分
ຫໍສະໝຸດ Baidu
• 按源端点的链接划分：
• 按目标端点的链接划分：
• 超文本链接： • 源锚文本下方有下划线
• 非超文本链接： • 用除文本之外的其他对象
构建的链接(图像、表格、 列表、表单、多媒体等)
• 外部链接 • 内部链接 • 电子邮件链接 • 局部链接
• 在创建外部链接时，必须使用绝对路径。
软件网络
11
文档的相对路径
• 以当前文档所在位置为起点到被链接文档 经由的路径。
• 例如， “default.asp”就是一个文档相对 路径。
• 同一网站内创建内部链接时，使用相对路 径比较方便。与同文件夹内的文件链接时 只写文件名即可，如果要与上一级文件夹 里的文件链接，在文件名前加上“../”即可。