网页制作超级链接.ppt

1、1,a,超级链接,学校公共选修课：网页设计与制作讲义,北师大珠海分校信息技术学院 陈星火,a,2,学习目标,了解超级链接的概念 了解超级链接的类型 掌握站点内部超级链接的方法 掌握电子邮件链接 掌握外部超级链接的方法 掌握锚点链接 掌握热点区域链接,文字 图片 按钮,页面,文字 图片 按钮,页面,a,3,什么是超级链接？,所谓链接（link）就是一个web资源到另一个web资源的连接，建立链接的目的是为了获取web的其他资源。 超级链接由两部分组成：链接载体（源端点）和链接目标（目标端点）。,a,4,链接的基本概念,许多页面元素都可以作为链接载体，例如：文本、图像、图像热区、轮替图像、动画 而

2、链接目标可以是任意的网络资源，例如：页面、图像、声音、程序、其他网站、Email甚至是页面中的某个位置锚点等等。,a,5,a,6,超级链接的应用,超级链接可以为浏览者畅游网络提供方便。是网页制作中使用得比较多的一种技术。 超级链接是用预先准备好的文本、图片、按钮等对象与其他对象建立一种链接关系。也就是在源端点和目标端点之间建立起一种链接。 源端点是超级链接的起始端点，也称为源锚，目标端点是联结的对象，也称为目标锚。,a,7,超链接的划分,按源端点的链接划分： 超文本链接： 源锚文本下方有下划线 非超文本链接： 用除文本之外的其他对象构建的链接(图像、表格、列表、表单、多媒体等),按目标端点的链

3、接划分： 外部链接 内部链接 电子邮件链接 局部链接,a,8,超级链接举例,超文本链接 非超文本链接 外部链接 内部链接 电子邮件链接 局部链接,a,9,“统一资源定位符”-URL,URL是英文Uniform Resource Location的缩写。下面是几种常见的URL协议： 超文本传输协议Http:/ 文件传输协议Ftp:/ MailtoMailto:/ TelnetTelnet:/,a,10,a,11,文档的绝对路径,即被链接文档的完整URL，包括所使用的传输协议，对于网页通常是“http:/”。 例如， default.asp 就是一个绝对路径。 在创建外部链接时，必须使用绝对路径。

4、,a,12,文档的相对路径,以当前文档所在位置为起点到被链接文档经由的路径。 例如， “default.asp”就是一个文档相对路径。 同一网站内创建内部链接时，使用相对路径比较方便。与同文件夹内的文件链接时只写文件名即可，如果要与上一级文件夹里的文件链接，在文件名前加上“./”即可。,a,13,根相对路径,是指从站点根文件夹到被链接文档经由的路径，以前斜杠开头，例如， “/news/default.asp”就是站点根文件夹下的“news”子文件夹中的一个页面文件“default.asp”的根相对路径。当我们移动一个包含根相对链接的文档时，不需要对原有的链接进行修改。,a,14,创建超级链接,

5、超级链接是指站点内不同网页之间、站点与Web之间的链接关系，它可以使站点内的网页成为一个有机的整体，还可以在不同的站点之间建立联系。 下面以文本为链接载体，介绍在Dreamweaver MX中如何创建各种类型的超级链接。,a,15,创建超级链接的方法,在站点管理器中编辑超级链接 创建锚点链接 创建E-MAIL链接 创建导航条 创建跳转菜单 创建映射图链接,a,16,制作目标,制作一个预览效果图如图所示的网页页面。,a,17,创建内部超级链接,属性面板上的“链接定位”图标或者“浏览文件”图标可以用来创建文件的内部超级链接。,a,18,使用“链接定位”图标创建内部超级链接,（1）选择页面中的标题文

6、字“星火其人”； （2）在编辑窗口的列表菜单中打开“站点”管理器； （3）拖动“链接定位”图标到站点管理器中的页面文件“autobiography.htm”上方，文件的地址就会出现在属性面板的“链接”文本框中； （4）松开鼠标左键，完成内部链接的创建。,a,19,a,20,使用“浏览文件”图标创建内部超级链接,（1）选择页面pra_05_01.htm中的标题文字“星火其人”； （2）点击属性面板上的“浏览文件”图标，打开“选择文件”对话框中，选择页面文件“autobiography.htm”； （3）点击“确认”按钮完成操作。,a,21,a,22,创建外部超级链接,链接外部网站的关键，是在链接

7、域正确输入外部网站的网址。 例题：为页面中的文字“信息技术与软件工程学院”添加外部超级链接，地址为“”，并设置链接目标为新窗口打开，,a,23,操作步骤如下：,（1）选中页面中的文字“信息技术与软件工程学院”； （2）在属性面板的“链接”文本框中输入地址“” ； （3）在“目标”域选择链接目标的载入位置为“_blank” 。,a,24,a,25,注意,在默认情况下，链接的文件在当前窗口或框架中被打开。要使被链接的文件（网页、网站主页、图像）显示在其它地方，需要从属性面板的目标域弹出菜单上选择一个选项： _blank 被链接文件在新窗口中打开； _parent 将被链接文件载入到父框架集或包含该

8、链接的框架窗口中； _self 被链接文件在与该链接相同的框架或窗口中打开（默认窗口无须指定）； _top 将被链接文件载入到整个浏览器窗口并删除所有框架。,a,26,a,27,创建E-mail链接,在网页上创建电子邮件链接，方便用户意见反馈。当浏览者单击电子邮件链接时，可以及时打开浏览器默认的电子邮件程序处理程序，收件人的邮件地址被电子邮件链接中指定的地址自动更新，无需浏览者手工输入。为页面添加E-mail地址链接，可以有两种方法：,a,28,插入邮件链接命令创建电子邮件链接,（1）把光标置于文档窗口的文字“E-mail：”右边； （2）在菜单栏中选择“插入”“电子邮件链接”命令，或者在对象

9、面板的“插入”栏中选择“常用”选项卡，点击“电子邮件链接”按钮，,a,29,（3）打开“电子邮件链接”对话框，在“文本”文本框中输入邮箱 （4）在“E-Mail”文本框中输入E-Mail地址 ； （5）单击“确定”按钮完成操作。,a,30,a,31,a,32,使用属性面板创建电子邮件链接,（1）把光标置于文档窗口的文字“E-mail：”右边； （2）输入文字，并将其选中； （3）在属性面板中的“链接”文本框中输入“mailto: ABC”。 （4）单击“确定”按钮，完成操作。,a,33,a,34,锚点链接,1. 什么是锚点？ 2. 为什么要设置锚点？ 3. 怎样实现锚点链接？,a,35,锚点及

10、其作用,锚点是在网页文档中设置的一个标记，便于以后引用。 通过创建锚点，可以使链接指向当前文档中指定的位置。 使客户可以方便快捷地浏览长文本网页。,a,36,锚点链接应用的案例尼姑篇,案例1：没有添加锚点链接的文章 案例2：添加了部分锚点链接的文章 案例3：添加了全部锚点链接的文章,a,37,a,38,使用锚点链接的前提条件,在同一网页内有长文档。比如，人物传记、小说连载等。,a,39,锚点链接分两步来实现,第一步: 将网页的某一处设置为锚点，并为其命名； 第二步: 在源端点处建立该锚点的超级链接。,a,40,设置锚点的操作步骤如下,为灭绝师太设置锚点 （1）把光标置于文章“最冷酷的尼姑灭绝师

11、太”的前面； （2）在菜单栏中选择“插入”“命名锚记”命令，或者在对象面板的“插入”栏中选择“常用”选项卡，单击“命名锚记”按钮；,a,41,（3）系统自动打开“命名锚记”对话框，在“锚点名称”文本框中输入“nigu01”，,a,42,（4）重复上述操作步骤，设置其余的锚点 最让人尊敬的尼姑三定 “nigu02”、 最让人怜爱的尼姑仪琳 “nigu03”、 最不能原谅的尼姑圆性 “nigu04”、 最前后不一的尼姑九难 “nigu05”；,a,43,创建锚点链接的操作步骤如下,（1）在目录部分选中标题“最冷酷的尼姑灭绝师太”； （2）在属性面板的“链接”文本框中输入符号“#”和锚点名“nigu

12、01”，,a,44,（3）重复上述操作步骤，实现其余的超级链接： 最让人尊敬的尼姑三定、 最让人怜爱的尼姑仪琳、 最不能原谅的尼姑圆性、 最前后不一的尼姑九难；,a,45,预览，看一下效果。 至此，我们已经完成了从目录到文章的锚点链接。可以从目录随心所欲地跳转到长文本的任意一段文章了。但是当我们看完某一段文章之后，还不能返回到目录，怎么办？ 思考！,a,46,设置从文章返回目录的链接,在每篇文章的后面增加几个文字“返回顶部”； 选中“返回顶部”这几个字； 在 “链接”文本框中输入“#top”； 保存文件并预览最终效果。,a,47,思维拓展,除了长文本的页面可以使用锚点链接外，多图片的网页或图文

13、并茂的网页是否也可以实现锚点链接？ 案例1 案例2,a,48,创建热点区域链接,当网页上的图像很大时，可以通过在图像上插入多个热点区域创建超级链接，从而实现不同的图像映射。,a,49,在许多旅游类的网页中经常采用热点区域链接的技术。 例如：制作一个中国著名风景胜地旅游网站，可以在地图上为每一个省制作一个热点区域，然后命名并添加链接。,a,50,a,51,制作热点区域,在页面pra_05_03.htm中选择图像文件“map.gif”，单击图像属性面板右下角的扩展箭头，单击“矩形热点工具”按钮，在图像上画出矩形热点区域，,a,52,a,53,命名和添加链接,给图像热点区域命名 在页面pra_05_03.htm的中国地图文件上上点击广东省的热点区域，此时图像属性面板将变为热点属性面板，在属性面板的“地图”文本框中输入图像名称“Guangdong”。由于在同一文档中有多个图像热点区域，所以要给它们分别命名。,a,54,a,55,给热点区域创建链接,在属性面板的“链接”文本框中输入被链接的页面路径“./travel/guangdong.htm”，该页面就是单击热点时所要链接的去向。,a,56,创建导航条,在网页上选择插入导航条的位置 在插入菜单里选择插入交互式图像导航条命令 屏幕上出现对话框 按屏幕提示操作（事先准备好作为按钮的四张图片）,a,5