超链接PPT课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
相对路径
相对路径是指相对于当前文件的路径，它包含了从当前文件指向 目的文件的路径。同时只要是处于站点文件夹之内，即使不属于同 一个文件目录下，相对路径建立的链接也适合。 采用相对路径是建立两个文件之间的相互关系，可以不受站点和 所处服务器位置的影响。 这些链接是相对于文档或根文件夹而言的，因此不需要一个像
文档的任何部分（如文本、页面、表单、动画或图像等） 都可用作超级链接
3
创建超级链接
图3.1 基本的超链接的结构
创建超级链接
有两种类型的链接路径： 绝对路径（例如 ） 相对路径（例如 ./contents.html）
假设ex1.htm文件引用1.jpg文件：
使用相对路径：
ch4
./ image/1.jpg（“.”代表当
当Web页包含超链接时，Web页中的外观形式为彩 色（一般为蓝色）且带下划线的文字或图片。单击这 些文本或图片，可跳转到相应位置。鼠标指针指向超 链接的显示文本或图片时，将变成手形。超文本链接 使用热点标记<A>来定义。
1. 超链接概述(续)
超级链接分类
同一页面内不同部分的跳转 一个网站内不同页面之间的跳转 网站之间的跳转
3. 创建指向其他页面的链接
创建指向其他页面的链接，就是在当前页面与其 他相关页面间建立超链接。无论目标文件与当前文件 的目录关系如何，其格式为：
<A href = "目标</A>
根据目标文件与当前文件的目录关系，有3种写法： ① 链接到同一目录内的网页文件，其格式为： <A href="目标文件名.html">链接内容</A> 目标文件名是链接所指向的文件。
插入内部链接-页面内部
<html> <head> <title>无标题文档</title> </head> <body> <p><a href="#first">第1本书</a> <a href="#second">第2本书
</a> <a href="#third">第3本书</a></p> <h3><a name="first"></a>精通CSS+DIV网页样式与布局</h3> <p>本书系统地讲解了...</p> <h3><a name="second"></a>CSS设计彻底研究</h3> <p>本书是一本... </p> <h3><a name="third"></a>CSS设计禅意花园</h3> <p>本书作者是...</p> </body> </html>
/index.html 一样的完整地址
8
相对路径使用方法
相对位置
如何输入
同一目录
输入要链接的文档
链接上一目录
先输入"../",再输入目录名
链接下一目录
先输入目录名，后加"/"
链接路径 绝对路径
绝对路径指文件的完整路径，包括文件传输协议http、ftp等。 这些链接指向您没有编辑控制权的站点。 此类链接用于为读者提供附加资源。
2.2.4 建立超级链接 1. 超链接概述 2. 超链接与路径 3. 创建指向其他页面的链接 4. 创建指向本页中的链接 5. 热点标记
1. 超链接概述
超链接（Hyperlink）可以看作是一个“热点”， 它可以从当前Web页定义的位置跳转到其他位置，包 括当前页的某个位置、Internet或本地硬盘或局域网 上的其他文件，甚至跳转到声音、图片等多媒体文件。 浏览Web页是超链接最普遍的一种应用，通过超链接 还可以获得不同形态的服务，如文件传输、资料查询、 电子函件、远程访问等。
② 链接到下一级目录中的网页文件，其格式为： <A href="子目录名/目标文件名.htm"> 链接内容</A> ③ 链接到上一级目录中的网页文件，其格式为： <A href="../目标文件名.html">链接内容</A> 其中“../”表示退到上一级目录中。 表示先退到上一级目录中，然后再进入到目标文件所 在的目录。
Ch4_1
前目录，因此./image代表当
前目录下的image文件夹， ./
是可以省略的，即
Ex1.htm
image
image/1.jpg ）
1.jpg
D:/myweb/ch4/ch4_1/image /1.jpg（不可取）
Ch4在D:/myweb 文件夹下
ch4
image1
image2
Ex1.htm
例如：
10
root
f-01
f-02
f-03
f-04
a.htm
cup.gif
01
02
c.htm
b.htm
cap.gif
d.htm
hat.gif
创建超级链接
链接可以建立在同一站点的各文档中，也 可以建立在站点外的文档中
…..
....
…
….
…
…
….
….
…
…
…..
…..
12
… …
…
…
…
…. ….. …..
插入外部链接
<html>
<head>
<title>插入外部链接</title>
</head>
<body> <A href="">电子工业出版社</A>与国内第三方网
络支付平台提供商——首信易在线支付合作，开通了 网上付款购书业务，实现了互联网上的在线支付、资 金清算、查询统计等功能。实现了读者灵活、方便地 进行网上购书，同时让读者享受网络科技带来的快捷 和便利。
插入内部链接-一个站点不同网页之间跳转
<html> <head> <title>插入内部链接</title> </head> <body> 电子工业出版社与国内第三方网络支付平台提供商——首信易在
线支付合作，开通了<A href="index.htm">网上付款购书业务 </A>，实现了互联网上的在线支付、资金清算、查询统计等功能。 实现了读者灵活、方便地进行网上购书，同时让读者享受网络科 技带来的快捷和便利。 </body> </html>
1.jpg
Ch4在D:/myweb文件夹下
ex1.htm文件引用1.jpg 文件：
使用相对路径：
../image2/1.jpg（“..” 代表上一层目录，因 此. ./image2代表上一层 目录下的image2子目录， 这是不能省略的
D:/myweb/ch4/imag e2/1.jpg（不可取）
链接路径
相对路径是指相对于当前文件的路径，它包含了从当前文件指向 目的文件的路径。同时只要是处于站点文件夹之内，即使不属于同 一个文件目录下，相对路径建立的链接也适合。 采用相对路径是建立两个文件之间的相互关系，可以不受站点和 所处服务器位置的影响。 这些链接是相对于文档或根文件夹而言的，因此不需要一个像
文档的任何部分（如文本、页面、表单、动画或图像等） 都可用作超级链接
3
创建超级链接
图3.1 基本的超链接的结构
创建超级链接
有两种类型的链接路径： 绝对路径（例如 ） 相对路径（例如 ./contents.html）
假设ex1.htm文件引用1.jpg文件：
使用相对路径：
ch4
./ image/1.jpg（“.”代表当
当Web页包含超链接时，Web页中的外观形式为彩 色（一般为蓝色）且带下划线的文字或图片。单击这 些文本或图片，可跳转到相应位置。鼠标指针指向超 链接的显示文本或图片时，将变成手形。超文本链接 使用热点标记<A>来定义。
1. 超链接概述(续)
超级链接分类
同一页面内不同部分的跳转 一个网站内不同页面之间的跳转 网站之间的跳转
3. 创建指向其他页面的链接
创建指向其他页面的链接，就是在当前页面与其 他相关页面间建立超链接。无论目标文件与当前文件 的目录关系如何，其格式为：
<A href = "目标</A>
根据目标文件与当前文件的目录关系，有3种写法： ① 链接到同一目录内的网页文件，其格式为： <A href="目标文件名.html">链接内容</A> 目标文件名是链接所指向的文件。
插入内部链接-页面内部
<html> <head> <title>无标题文档</title> </head> <body> <p><a href="#first">第1本书</a> <a href="#second">第2本书
</a> <a href="#third">第3本书</a></p> <h3><a name="first"></a>精通CSS+DIV网页样式与布局</h3> <p>本书系统地讲解了...</p> <h3><a name="second"></a>CSS设计彻底研究</h3> <p>本书是一本... </p> <h3><a name="third"></a>CSS设计禅意花园</h3> <p>本书作者是...</p> </body> </html>
/index.html 一样的完整地址
8
相对路径使用方法
相对位置
如何输入
同一目录
输入要链接的文档
链接上一目录
先输入"../",再输入目录名
链接下一目录
先输入目录名，后加"/"
链接路径 绝对路径
绝对路径指文件的完整路径，包括文件传输协议http、ftp等。 这些链接指向您没有编辑控制权的站点。 此类链接用于为读者提供附加资源。
2.2.4 建立超级链接 1. 超链接概述 2. 超链接与路径 3. 创建指向其他页面的链接 4. 创建指向本页中的链接 5. 热点标记
1. 超链接概述
超链接（Hyperlink）可以看作是一个“热点”， 它可以从当前Web页定义的位置跳转到其他位置，包 括当前页的某个位置、Internet或本地硬盘或局域网 上的其他文件，甚至跳转到声音、图片等多媒体文件。 浏览Web页是超链接最普遍的一种应用，通过超链接 还可以获得不同形态的服务，如文件传输、资料查询、 电子函件、远程访问等。
② 链接到下一级目录中的网页文件，其格式为： <A href="子目录名/目标文件名.htm"> 链接内容</A> ③ 链接到上一级目录中的网页文件，其格式为： <A href="../目标文件名.html">链接内容</A> 其中“../”表示退到上一级目录中。 表示先退到上一级目录中，然后再进入到目标文件所 在的目录。
Ch4_1
前目录，因此./image代表当
前目录下的image文件夹， ./
是可以省略的，即
Ex1.htm
image
image/1.jpg ）
1.jpg
D:/myweb/ch4/ch4_1/image /1.jpg（不可取）
Ch4在D:/myweb 文件夹下
ch4
image1
image2
Ex1.htm
例如：
10
root
f-01
f-02
f-03
f-04
a.htm
cup.gif
01
02
c.htm
b.htm
cap.gif
d.htm
hat.gif
创建超级链接
链接可以建立在同一站点的各文档中，也 可以建立在站点外的文档中
…..
....
…
….
…
…
….
….
…
…
…..
…..
12
… …
…
…
…
…. ….. …..
插入外部链接
<html>
<head>
<title>插入外部链接</title>
</head>
<body> <A href="">电子工业出版社</A>与国内第三方网
络支付平台提供商——首信易在线支付合作，开通了 网上付款购书业务，实现了互联网上的在线支付、资 金清算、查询统计等功能。实现了读者灵活、方便地 进行网上购书，同时让读者享受网络科技带来的快捷 和便利。
插入内部链接-一个站点不同网页之间跳转
<html> <head> <title>插入内部链接</title> </head> <body> 电子工业出版社与国内第三方网络支付平台提供商——首信易在
线支付合作，开通了<A href="index.htm">网上付款购书业务 </A>，实现了互联网上的在线支付、资金清算、查询统计等功能。 实现了读者灵活、方便地进行网上购书，同时让读者享受网络科 技带来的快捷和便利。 </body> </html>
1.jpg
Ch4在D:/myweb文件夹下
ex1.htm文件引用1.jpg 文件：
使用相对路径：
../image2/1.jpg（“..” 代表上一层目录，因 此. ./image2代表上一层 目录下的image2子目录， 这是不能省略的
D:/myweb/ch4/imag e2/1.jpg（不可取）
链接路径