超级链接的应用.ppt

第七章第七章超级链接的应用超级链接的应用4/14/20231中原工学院信息商务学院计科系7.1 超级链接概述超级链接概述o超链接是网页中超链接是网页中重要重要组成部分，利用它不仅可以组成部分，利用它不仅可以链链接到其他网页接到其他网页，还可以链接到，还可以链接到其他图像文件、多媒其他图像文件、多媒体文件体文件及及下载程序下载程序，也可以利用它在，也可以利用它在网页内部进行网页内部进行链接链接或是或是发送发送E-mail等。在等。在Dreamweaver中，中，可以将文档中的可以将文档中的任何文字任何文字及任意位置的及任意位置的图片图片设置为设置为超链接。超链接。o超链接分类：超链接分类：按照按照链接路径链接路径的不同，网页中超链接的不同，网页中超链接一般分为一般分为:内部链接内部链接，锚点链接锚点链接和和外部链接外部链接。按照。按照使用对象使用对象的不同，网页中的链接又可以分为：的不同，网页中的链接又可以分为：文本文本超链接超链接，图像链接图像链接，E-mail链接链接，文件链接文件链接，空空链接链接，脚本链接脚本链接等。等。4/14/20232中原工学院信息商务学院计科系中原工学院信息商务学院计科系7.1.1 URL的概念的概念oURL代表全球资源定位器，其功能提供一种代表全球资源定位器，其功能提供一种在在Internet上查找东西的标准方法。上查找东西的标准方法。o由斜线、冒号、散列符号分隔。由斜线、冒号、散列符号分隔。o超文本传输协议（超文本传输协议（HTTP）：以访问资源的）：以访问资源的方式来寻找方式来寻找Web服务器的方式。服务器的方式。4/14/20233中原工学院信息商务学院计科系中原工学院信息商务学院计科系7.1.2 路径的概念路径的概念 在网页中，最常用的链接对象是在网页中，最常用的链接对象是链接路径链接路径。链接路径分为链接路径分为绝对路径绝对路径和和相对路径相对路径。n绝对路径是一个绝对路径是一个完整完整的路径地址，如：的路径地址，如：http:/；n相对路径是指该文件相对路径是指该文件相对于相对于某一某一参照物参照物的路径地址，的路径地址，在网页中，我们使用在网页中，我们使用.表示上一级目录，如表示上一级目录，如./index.html 是个相对路径。是个相对路径。4/14/20234中原工学院信息商务学院计科系中原工学院信息商务学院计科系7.2 创建超级链接创建超级链接o文档链接文档链接o锚点链接锚点链接oE-mail链接链接o脚本链接脚本链接o空链接空链接o下载文件链接下载文件链接4/14/20235中原工学院信息商务学院计科系中原工学院信息商务学院计科系创建普通超链接创建普通超链接点击点击绝对路径绝对路径效果图效果图相对路径相对路径选择选择相对于相对于Untitled-1.html这个网页这个网页创建创建文本链接文本链接4/14/20236中原工学院信息商务学院计科系中原工学院信息商务学院计科系创建普通超链接创建普通超链接o目标目标属性（属性（target）的四个值：）的四个值：n_blank：在新窗口打开链接；：在新窗口打开链接；n_self：在：在原窗口原窗口打开链接；（打开链接；（默认值默认值）n_top：在：在整个窗口整个窗口中打开链接，在有框架的页面中才有效果，中打开链接，在有框架的页面中才有效果，否则效果和否则效果和_self看到的一样；看到的一样；n_parent：在：在父框架父框架中打开链接，如果含有该链接的框架中打开链接，如果含有该链接的框架不是不是嵌套嵌套的，则效果的，则效果_top。n说明说明：图像超链接图像超链接本质本质就是将就是将的的元素内容元素内容由文本替换为由文本替换为图像图像而已，我们可以直接而已，我们可以直接选中选中图图像后，在【像后，在【属性属性】面板中对【】面板中对【链接链接】和【】和【目标目标】两栏进行设置就可以为图像设置超链接了。】两栏进行设置就可以为图像设置超链接了。4/14/20237中原工学院信息商务学院计科系中原工学院信息商务学院计科系创建锚点链接（书签链接）创建锚点链接（书签链接）o它用于那些它用于那些内容庞大繁琐内容庞大繁琐的网页，通过点击的网页，通过点击命名锚点命名锚点，不仅不仅让我们能让我们能指向文档指向文档，还能还能指向页面里的指向页面里的特定段落特定段落，让链接对象更加让链接对象更加精准精准、细粒度化细粒度化，便于浏览者查看网页，便于浏览者查看网页内容。内容。o第一步：在需要链接到的第一步：在需要链接到的位置位置处处创建创建命名锚点命名锚点o第二步：链接到的第二步：链接到的刚创建刚创建的命名锚点的命名锚点n创建一个普通的超链接，将创建一个普通的超链接，将【链接】文本框【链接】文本框的值设置为：的值设置为：#+刚才创建刚才创建的锚点名称（的锚点名称（#to_logo）就可以了。）就可以了。点击点击设置设置锚点名字锚点名字代码代码4/14/20238中原工学院信息商务学院计科系中原工学院信息商务学院计科系创建创建Email链接和空链接链接和空链接oE-mail链接链接：是指：是指链接对象链接对象是一个是一个E-mail地址地址的链接。的链接。o空链接空链接：是指：是指链接对象链接对象是一个是一个#的链接。有的时候，链的链接。有的时候，链接对象还接对象还未确定未确定，又想让元素，又想让元素显示为链接显示为链接时，可以使用时，可以使用它。当点击空链接时，某些浏览器可能会跳到页面的顶它。当点击空链接时，某些浏览器可能会跳到页面的顶部。部。点击点击设置设置E-mail链接的属性链接的属性a 我的邮箱我的邮箱代码代码4/14/20239中原工学院信息商务学院计科系中原工学院信息商务学院计科系创建脚本链接创建脚本链接o脚本链接脚本链接：是指：是指链接对象链接对象是一段是一段JavaScript脚本脚本或一或一个个JavaScript函数名函数名的链接的链接。使用这种链接，我们。使用这种链接，我们可以调用一段可以调用一段JS脚本，以实现某些特殊效果。脚本，以实现某些特殊效果。nJavascript:alert()点击点击链接后的链接后的弹出弹出窗口窗口4/14/202310中原工学院信息商务学院计科系中原工学院信息商务学院计科系7.3 创建图像映射链接创建图像映射链接o如果只想给如果只想给图像图像的的某些区域某些区域添加链接，点击不同的区域添加链接，点击不同的区域可以打开不同的链接，这样的链接就叫做可以打开不同的链接，这样的链接就叫做图像热点链接图像热点链接，图像的图像的带链接的区域带链接的区域就称为就称为热点热点。选中选中要创建图像热点要创建图像热点链接的链接的图像图像，在【，在【属性属性】面板的如下区域进行设置：】面板的如下区域进行设置：n以上四个按钮从左到右，分别为如下工具：以上四个按钮从左到右，分别为如下工具：n选择工具选择工具：可以对热点区域进行：可以对热点区域进行选择选择和和调整调整；n矩形工具按钮矩形工具按钮：绘制一个：绘制一个矩形矩形的热点区域；的热点区域；创建创建图像热点链接的图像热点链接的工具工具4/14/202311中原工学院信息商务学院计科系中原工学院信息商务学院计科系创建图像映射链接创建图像映射链接n圆形工具按钮圆形工具按钮：绘制一个：绘制一个圆形圆形的热点区域；的热点区域；n多边形工具按钮多边形工具按钮：绘制一个：绘制一个不规则多边形不规则多边形的热点区的热点区域。域。创建创建图像热点链接的图像热点链接的工具工具4/14/202312中原工学院信息商务学院计科系中原工学院信息商务学院计科系创建图像热点链接创建图像热点链接距形距形热点热点圆形圆形热点热点多边形热点多边形热点用用选择工具选择工具选中选中相应的相应的热点区域热点区域后，后，即可在【即可在【属性属性】面板设置它的】面板设置它的链接链接地址地址等信息等信息图像左上角图像左上角的的坐标坐标是是（0,00,0）4/14/202313中原工学院信息商务学院计科系中原工学院信息商务学院计科系创建图像热点链接创建图像热点链接n上图的上图的HTML代码：代码：4/14/202314中原工学院信息商务学院计科系中原工学院信息商务学院计科系