网页制作超级链接PPT优秀课件

1、学校公共选修课：学校公共选修课：网页设计与制作网页设计与制作讲义讲义 了解超级链接的概念了解超级链接的概念 了解超级链接的类型了解超级链接的类型 掌握站点内部超级链接的方法掌握站点内部超级链接的方法 掌握电子邮件链接掌握电子邮件链接 掌握外部超级链接的方法掌握外部超级链接的方法 掌握锚点链接掌握锚点链接 掌握热点区域链接掌握热点区域链接文字文字图片图片按钮按钮页页面面文字文字图片图片按钮按钮页页面面 所谓链接（所谓链接（link）就是一个）就是一个web资源到另一资源到另一个个web资源的连接，建立链接的目的是为资源的连接，建立链接的目的是为了获取了获取web的其他资源。的其他资源。 超级链接

2、由两部分组成：链接载体（源端超级链接由两部分组成：链接载体（源端点）和链接目标（目标端点）。点）和链接目标（目标端点）。 许多页面元素都可以作为链接载体，例如：许多页面元素都可以作为链接载体，例如：文本、图像、图像热区、轮替图像、动文本、图像、图像热区、轮替图像、动画画 而链接目标可以是任意的网络资源，例如：而链接目标可以是任意的网络资源，例如：页面、图像、声音、程序、其他网站、页面、图像、声音、程序、其他网站、Email甚至是页面中的某个位置甚至是页面中的某个位置锚点锚点等等。等等。 超级链接可以为浏览者畅游网络提供方便。是超级链接可以为浏览者畅游网络提供方便。是网页制作中使用得比较多的一种

3、技术。网页制作中使用得比较多的一种技术。 超级链接是用预先准备好的文本、图片、按钮超级链接是用预先准备好的文本、图片、按钮等对象与其他对象建立一种链接关系。也就是等对象与其他对象建立一种链接关系。也就是在源端点和目标端点之间建立起一种链接。在源端点和目标端点之间建立起一种链接。 源端点是超级链接的起始端点，也称为源端点是超级链接的起始端点，也称为源锚源锚，目标端点是联结的对象，也称为目标端点是联结的对象，也称为目标锚目标锚。 按源端点的链接划分：按源端点的链接划分： 超文本链接超文本链接： 源锚文本下方有下划线源锚文本下方有下划线 非超文本链接非超文本链接： 用除文本之外的其他对象用除文本之外

4、的其他对象构建的链接构建的链接(图像、表格、图像、表格、列表、表单、多媒体等列表、表单、多媒体等) 按目标端点的链接划分：按目标端点的链接划分： 外部链接外部链接 内部链接内部链接 电子邮件链接电子邮件链接 局部链接局部链接 超文本链接超文本链接 非超文本链接非超文本链接 外部链接外部链接 内部链接内部链接 电子邮件链接电子邮件链接 局部链接局部链接 URL是英文是英文Uniform Resource Location的缩写。的缩写。下面是几种常见的下面是几种常见的URL协议：协议： 超文本传输协议超文本传输协议Http:/ 文件传输协议文件传输协议Ftp:/ MailtoMailto:/ T

5、elnetTelnet:/ 即被链接文档的完整即被链接文档的完整URL，包括所使用的，包括所使用的传输协议，对于网页通常是传输协议，对于网页通常是“http:/”。 例如，例如， http:/ default.asp 就是一个绝对路径。就是一个绝对路径。 在创建外部链接时，必须使用绝对路径。在创建外部链接时，必须使用绝对路径。 以当前文档所在位置为起点到被链接文档以当前文档所在位置为起点到被链接文档经由的路径。经由的路径。 例如，例如， “default.asp”就是一个文档相对就是一个文档相对路径。路径。 同一网站内创建内部链接时，使用相对路同一网站内创建内部链接时，使用相对路径比较方便。与

6、同文件夹内的文件链接时径比较方便。与同文件夹内的文件链接时只写文件名即可，如果要与上一级文件夹只写文件名即可，如果要与上一级文件夹里的文件链接，在文件名前加上里的文件链接，在文件名前加上“./”即可。即可。 是指从站点根文件夹到被链接文档经由的是指从站点根文件夹到被链接文档经由的路径，以前斜杠开头，例如，路径，以前斜杠开头，例如， “/news/default.asp”就是站点根文件夹下就是站点根文件夹下的的“news”子文件夹中的一个页面文件子文件夹中的一个页面文件“default.asp”的根相对路径。当我们移动的根相对路径。当我们移动一个包含根相对链接的文档时，不需要对一个包含根相对链接

7、的文档时，不需要对原有的链接进行修改。原有的链接进行修改。 超级链接是指站点内不同网页之间、站点超级链接是指站点内不同网页之间、站点与与Web之间的链接关系，它可以使站点内之间的链接关系，它可以使站点内的网页成为一个有机的整体，还可以在不的网页成为一个有机的整体，还可以在不同的站点之间建立联系。同的站点之间建立联系。 下面以文本为链接载体，介绍在下面以文本为链接载体，介绍在Dreamweaver MX中如何创建各种类型的中如何创建各种类型的超级链接。超级链接。 在站点管理器中编辑超级链接在站点管理器中编辑超级链接 创建锚点链接创建锚点链接 创建创建E-MAIL链接链接 创建导航条创建导航条 创

8、建跳转菜单创建跳转菜单 创建映射图链接创建映射图链接 制作一个预览效果图如图所示的网页页面。制作一个预览效果图如图所示的网页页面。 属性面板上的属性面板上的“链接定位链接定位”图标或者图标或者“浏览文件浏览文件”图标可以用来创建文件的内部超级链接。图标可以用来创建文件的内部超级链接。 （1）选择页面中的标题文字）选择页面中的标题文字“星火其人星火其人”； （2）在编辑窗口的列表菜单中打开）在编辑窗口的列表菜单中打开“站点站点”管理器；管理器； （3）拖动）拖动“链接定位链接定位”图标到站点管理器图标到站点管理器中的页面文件中的页面文件“autobiography.htm”上方，上方，文件的地址

9、就会出现在属性面板的文件的地址就会出现在属性面板的“链接链接”文本框中；文本框中； （4）松开鼠标左键，完成内部链接的创建。）松开鼠标左键，完成内部链接的创建。 （1）选择页面）选择页面pra_05_01.htm中的标题文中的标题文字字“星火其人星火其人”； （2）点击属性面板上的）点击属性面板上的“浏览文件浏览文件”图标，图标，打开打开“选择文件选择文件”对话框中，选择页面文对话框中，选择页面文件件“autobiography.htm”； （3）点击）点击“确认确认”按钮完成操作。按钮完成操作。 链接外部网站的关键，是在链接域正确输链接外部网站的关键，是在链接域正确输入外部网站的网址。入外部

10、网站的网址。 例题：为页面中的文字例题：为页面中的文字“信息技术与软件信息技术与软件工程学院工程学院”添加外部超级链接，地址为添加外部超级链接，地址为“http:/”，并设置链接目，并设置链接目标为新窗口打开，标为新窗口打开， （1）选中页面中的文字）选中页面中的文字“信息技术与软件信息技术与软件工程学院工程学院”； （2）在属性面板的）在属性面板的“链接链接”文本框中输入文本框中输入地址地址“http:/” ； （3）在）在“目标目标”域选择链接目标的载入位域选择链接目标的载入位置为置为“_blank” 。 在默认情况下，链接的文件在当前窗口或框架中在默认情况下，链接的文件在当前窗口或框架中

11、被打开。要使被链接的文件（网页、网站主页、被打开。要使被链接的文件（网页、网站主页、图像）显示在其它地方，需要从属性面板的目标图像）显示在其它地方，需要从属性面板的目标域弹出菜单上选择一个选项：域弹出菜单上选择一个选项： _blank 被链接文件在新窗口中打开；被链接文件在新窗口中打开； _parent 将被链接文件载入到父框架集或包含该将被链接文件载入到父框架集或包含该链接的框架窗口中；链接的框架窗口中； _self 被链接文件在与该链接相同的框架或窗口中被链接文件在与该链接相同的框架或窗口中打开（默认窗口无须指定）；打开（默认窗口无须指定）； _top 将被链接文件载入到整个浏览器窗口并删

12、除将被链接文件载入到整个浏览器窗口并删除所有框架。所有框架。 在网页上创建电子邮件链接，方便用户意在网页上创建电子邮件链接，方便用户意见反馈。当浏览者单击电子邮件链接时，见反馈。当浏览者单击电子邮件链接时，可以及时打开浏览器默认的电子邮件程序可以及时打开浏览器默认的电子邮件程序处理程序，收件人的邮件地址被电子邮件处理程序，收件人的邮件地址被电子邮件链接中指定的地址自动更新，无需浏览者链接中指定的地址自动更新，无需浏览者手工输入。为页面添加手工输入。为页面添加E-mail地址链接，地址链接，可以有两种方法：可以有两种方法： （1）把光标置于文档窗口的文字）把光标置于文档窗口的文字“E-mail：

13、”右边；右边； （2）在菜单栏中选择）在菜单栏中选择“插入插入”“电子邮电子邮件链接件链接”命令，或者在对象面板的命令，或者在对象面板的“插入插入”栏中选择栏中选择“常用常用”选项卡，点击选项卡，点击“电子邮电子邮件链接件链接”按钮，按钮， （3）打开）打开“电子邮件链接电子邮件链接”对话框，在对话框，在“文本文本”文本框中输入邮箱文本框中输入邮箱 （4）在）在“E-Mail”文本框中输入文本框中输入E-Mail地地址址 ； （5）单击）单击“确定确定”按钮完成操作。按钮完成操作。 （1）把光标置于文档窗口的文字）把光标置于文档窗口的文字“E-mail：”右边；右边； （2）输入文字，并将其选

14、中；）输入文字，并将其选中； （3）在属性面板中的）在属性面板中的“链接链接”文本框中输文本框中输入入“mailto: ABC”。 （4）单击）单击“确定确定”按钮，完成操作。按钮，完成操作。1. 什么是锚点？什么是锚点？2. 为什么要设置锚点？为什么要设置锚点？3. 怎样实现锚点链接？怎样实现锚点链接？ 锚点是在网页文档中设置的一个标记，便锚点是在网页文档中设置的一个标记，便于以后引用。于以后引用。 通过创建锚点，可以使链接指向当前文档通过创建锚点，可以使链接指向当前文档中指定的位置。中指定的位置。 使客户可以方便快捷地浏览长文本网页。使客户可以方便快捷地浏览长文本网页。案例案例1：没有添加

15、锚点链接的文章：没有添加锚点链接的文章案例案例2：添加了部分锚点链接的文章：添加了部分锚点链接的文章案例案例3：添加了全部锚点链接的文章：添加了全部锚点链接的文章 在同一网页内有长文档。比如，人物传记、在同一网页内有长文档。比如，人物传记、小说连载等。小说连载等。 第一步第一步: 将网页的某一处设置为锚点，将网页的某一处设置为锚点，并为其命名；并为其命名； 第二步第二步: 在源端点处建立该锚点的超级在源端点处建立该锚点的超级链接。链接。 为灭绝师太设置锚点为灭绝师太设置锚点 （1）把光标置于文章）把光标置于文章“最冷酷的尼姑最冷酷的尼姑灭绝师太灭绝师太”的前面；的前面； （2）在菜单栏中选择）

16、在菜单栏中选择“插入插入”“命名锚命名锚记记”命令，或者在对象面板的命令，或者在对象面板的“插入插入”栏栏中选择中选择“常用常用”选项卡，单击选项卡，单击“命名锚记命名锚记”按钮；按钮； （3）系统自动打开）系统自动打开“命名锚记命名锚记”对话框，对话框，在在“锚点名称锚点名称”文本框中输入文本框中输入“nigu01”， （4）重复上述操作步骤，设置其余的锚点）重复上述操作步骤，设置其余的锚点 最让人尊敬的尼姑最让人尊敬的尼姑三定三定 “nigu02”、 最让人怜爱的尼姑最让人怜爱的尼姑仪琳仪琳 “nigu03”、 最不能原谅的尼姑最不能原谅的尼姑圆性圆性 “nigu04”、 最前后不一的尼姑

17、最前后不一的尼姑九难九难 “nigu05”； （1）在目录部分选中标题）在目录部分选中标题“最冷酷的尼最冷酷的尼姑姑灭绝师太灭绝师太”； （2）在属性面板的）在属性面板的“链接链接”文本框中输入文本框中输入符号符号“#”和锚点名和锚点名“nigu01”， （3）重复上述操作步骤，实现其余的超级链）重复上述操作步骤，实现其余的超级链接：接： 最让人尊敬的尼姑最让人尊敬的尼姑三定、三定、 最让人怜爱的尼姑最让人怜爱的尼姑仪琳、仪琳、 最不能原谅的尼姑最不能原谅的尼姑圆性、圆性、 最前后不一的尼姑最前后不一的尼姑九难；九难； 预览，看一下效果。预览，看一下效果。 至此，我们已经完成了从目录到文章的锚

18、至此，我们已经完成了从目录到文章的锚点链接。可以从目录随心所欲地跳转到长点链接。可以从目录随心所欲地跳转到长文本的任意一段文章了。但是当我们看完文本的任意一段文章了。但是当我们看完某一段文章之后，还不能返回到目录，怎某一段文章之后，还不能返回到目录，怎么办？么办？ 思考！思考！ 在每篇文章的后面增加几个文字在每篇文章的后面增加几个文字“返回顶返回顶部部”； 选中选中“返回顶部返回顶部”这几个字；这几个字； 在在 “链接链接”文本框中输入文本框中输入“#top”； 保存文件并预览最终效果。保存文件并预览最终效果。 除了长文本的页面可以使用锚点链接外，除了长文本的页面可以使用锚点链接外，多图片的网

19、页或图文并茂的网页是否也可多图片的网页或图文并茂的网页是否也可以实现锚点链接？以实现锚点链接？ 案例案例1 案例案例2 当网页上的图像很大时，可以通过在图像当网页上的图像很大时，可以通过在图像上插入多个热点区域创建超级链接，从而上插入多个热点区域创建超级链接，从而实现不同的图像映射。实现不同的图像映射。 在许多旅游类的网页中经常采用热点区域在许多旅游类的网页中经常采用热点区域链接的技术。链接的技术。 例如：制作一个中国著名风景胜地旅游网例如：制作一个中国著名风景胜地旅游网站，可以在地图上为每一个省制作一个热站，可以在地图上为每一个省制作一个热点区域，然后命名并添加链接。点区域，然后命名并添加链

20、接。 在页面在页面pra_05_03.htm中选择图像文件中选择图像文件“map.gif”，单击图像属性面板右下角的，单击图像属性面板右下角的扩展箭头，单击扩展箭头，单击“矩形热点工具矩形热点工具”按钮，按钮，在图像上画出矩形热点区域，在图像上画出矩形热点区域， 给图像热点区域命名给图像热点区域命名 在页面在页面pra_05_03.htm的中国地图文件上的中国地图文件上上点击广东省的热点区域，此时图像属性上点击广东省的热点区域，此时图像属性面板将变为热点属性面板，在属性面板的面板将变为热点属性面板，在属性面板的“地图地图”文本框中输入图像名称文本框中输入图像名称“Guangdong”。由于在同一文档中有多