《网页制作超级链接.ppt》由会员分享，可在线阅读，更多相关《网页制作超级链接.ppt（58页珍藏版）》请在三一办公上搜索。
1、超级链接,学校公共选修课：网页设计与制作讲义,北师大珠海分校信息技术学院陈星火,学习目标,了解超级链接的概念了解超级链接的类型掌握站点内部超级链接的方法掌握电子邮件链接掌握外部超级链接的方法掌握锚点链接掌握热点区域链接,文字图片按钮,页面,文字图片按钮,页面,什么是超级链接？,所谓链接（link）就是一个web资源到另一个web资源的连接，建立链接的目的是为了获取web的其他资源。超级链接由两部分组成：链接载体（源端点）和链接目标（目标端点）。,链接的基本概念,许多页面元素都可以作为链接载体，例如：文本、图像、图像热区、轮替图像、动画而链接目标可以是任意的网络资源，例如：页面、图像、声音、程序
2、、其他网站、Email甚至是页面中的某个位置锚点等等。,超级链接的应用,超级链接可以为浏览者畅游网络提供方便。是网页制作中使用得比较多的一种技术。超级链接是用预先准备好的文本、图片、按钮等对象与其他对象建立一种链接关系。也就是在源端点和目标端点之间建立起一种链接。源端点是超级链接的起始端点，也称为源锚，目标端点是联结的对象，也称为目标锚。,超链接的划分,按源端点的链接划分：超文本链接：源锚文本下方有下划线非超文本链接：用除文本之外的其他对象构建的链接(图像、表格、列表、表单、多媒体等),按目标端点的链接划分：外部链接内部链接电子邮件链接局部链接,超级链接举例,超文本链接非超文本链接外部链接内部
3、链接电子邮件链接局部链接,“统一资源定位符”-URL,URL是英文Uniform Resource Location的缩写。下面是几种常见的URL协议：超文本传输协议Http:/文件传输协议Ftp:/MailtoMailto:/TelnetTelnet:/,文档的绝对路径,即被链接文档的完整URL，包括所使用的传输协议，对于网页通常是“http:/”。例如，就是一个绝对路径。在创建外部链接时，必须使用绝对路径。,文档的相对路径,以当前文档所在位置为起点到被链接文档经由的路径。例如，“default.asp”就是一个文档相对路径。同一网站内创建内部链接时，使用相对路径比较方便。与同文件夹内的文件
4、链接时只写文件名即可，如果要与上一级文件夹里的文件链接，在文件名前加上“./”即可。,根相对路径,是指从站点根文件夹到被链接文档经由的路径，以前斜杠开头，例如，“/news/default.asp”就是站点根文件夹下的“news”子文件夹中的一个页面文件“default.asp”的根相对路径。当我们移动一个包含根相对链接的文档时，不需要对原有的链接进行修改。,创建超级链接,超级链接是指站点内不同网页之间、站点与Web之间的链接关系，它可以使站点内的网页成为一个有机的整体，还可以在不同的站点之间建立联系。下面以文本为链接载体，介绍在Dreamweaver MX中如何创建各种类型的超级链接。,创建
5、超级链接的方法,在站点管理器中编辑超级链接创建锚点链接创建E-MAIL链接创建导航条创建跳转菜单创建映射图链接,制作目标,制作一个预览效果图如图所示的网页页面。,创建内部超级链接,属性面板上的“链接定位”图标或者“浏览文件”图标可以用来创建文件的内部超级链接。,使用“链接定位”图标创建内部超级链接,（1）选择页面中的标题文字“星火其人”；（2）在编辑窗口的列表菜单中打开“站点”管理器；（3）拖动“链接定位”图标到站点管理器中的页面文件“autobiography.htm”上方，文件的地址就会出现在属性面板的“链接”文本框中；（4）松开鼠标左键，完成内部链接的创建。,使用“浏览文件”图标创建内部
6、超级链接,（1）选择页面pra_05_01.htm中的标题文字“星火其人”；（2）点击属性面板上的“浏览文件”图标，打开“选择文件”对话框中，选择页面文件“autobiography.htm”；（3）点击“确认”按钮完成操作。,创建外部超级链接,链接外部网站的关键，是在链接域正确输入外部网站的网址。例题：为页面中的文字“信息技术与软件工程学院”添加外部超级链接，地址为“http:/”，并设置链接目标为新窗口打开，,操作步骤如下：,（1）选中页面中的文字“信息技术与软件工程学院”；（2）在属性面板的“链接”文本框中输入地址“http:/”；（3）在“目标”域选择链接目标的载入位置为“_blank
7、”。,注意,在默认情况下，链接的文件在当前窗口或框架中被打开。要使被链接的文件（网页、网站主页、图像）显示在其它地方，需要从属性面板的目标域弹出菜单上选择一个选项：_blank 被链接文件在新窗口中打开；_parent 将被链接文件载入到父框架集或包含该链接的框架窗口中；_self 被链接文件在与该链接相同的框架或窗口中打开（默认窗口无须指定）；_top 将被链接文件载入到整个浏览器窗口并删除所有框架。,创建E-mail链接,在网页上创建电子邮件链接，方便用户意见反馈。当浏览者单击电子邮件链接时，可以及时打开浏览器默认的电子邮件程序处理程序，收件人的邮件地址被电子邮件链接中指定的地址自动更新，
8、无需浏览者手工输入。为页面添加E-mail地址链接，可以有两种方法：,插入邮件链接命令创建电子邮件链接,（1）把光标置于文档窗口的文字“E-mail：”右边；（2）在菜单栏中选择“插入”“电子邮件链接”命令，或者在对象面板的“插入”栏中选择“常用”选项卡，点击“电子邮件链接”按钮，,（3）打开“电子邮件链接”对话框，在“文本”文本框中输入邮箱（4）在“E-Mail”文本框中输入E-Mail地址；（5）单击“确定”按钮完成操作。,使用属性面板创建电子邮件链接,（1）把光标置于文档窗口的文字“E-mail：”右边；（2）输入文字，并将其选中；（3）在属性面板中的“链接”文本框中输入“mailto:
9、ABC”。（4）单击“确定”按钮，完成操作。,锚点链接,1.什么是锚点？2.为什么要设置锚点？3.怎样实现锚点链接？,锚点及其作用,锚点是在网页文档中设置的一个标记，便于以后引用。通过创建锚点，可以使链接指向当前文档中指定的位置。使客户可以方便快捷地浏览长文本网页。,锚点链接应用的案例尼姑篇,案例1：没有添加锚点链接的文章案例2：添加了部分锚点链接的文章案例3：添加了全部锚点链接的文章,使用锚点链接的前提条件,在同一网页内有长文档。比如，人物传记、小说连载等。,锚点链接分两步来实现,第一步:将网页的某一处设置为锚点，并为其命名；第二步:在源端点处建立该锚点的超级链接。,设置锚点的操作步骤如下,
10、为灭绝师太设置锚点（1）把光标置于文章“最冷酷的尼姑灭绝师太”的前面；（2）在菜单栏中选择“插入”“命名锚记”命令，或者在对象面板的“插入”栏中选择“常用”选项卡，单击“命名锚记”按钮；,（3）系统自动打开“命名锚记”对话框，在“锚点名称”文本框中输入“nigu01”，,（4）重复上述操作步骤，设置其余的锚点 最让人尊敬的尼姑三定“nigu02”、最让人怜爱的尼姑仪琳“nigu03”、最不能原谅的尼姑圆性“nigu04”、最前后不一的尼姑九难“nigu05”；,创建锚点链接的操作步骤如下,（1）在目录部分选中标题“最冷酷的尼姑灭绝师太”；（2）在属性面板的“链接”文本框中输入符号“#”和锚点名
11、“nigu01”，,（3）重复上述操作步骤，实现其余的超级链接：最让人尊敬的尼姑三定、最让人怜爱的尼姑仪琳、最不能原谅的尼姑圆性、最前后不一的尼姑九难；,预览，看一下效果。至此，我们已经完成了从目录到文章的锚点链接。可以从目录随心所欲地跳转到长文本的任意一段文章了。但是当我们看完某一段文章之后，还不能返回到目录，怎么办？思考！,设置从文章返回目录的链接,在每篇文章的后面增加几个文字“返回顶部”；选中“返回顶部”这几个字；在“链接”文本框中输入“#top”；保存文件并预览最终效果。,思维拓展,除了长文本的页面可以使用锚点链接外，多图片的网页或图文并茂的网页是否也可以实现锚点链接？案例1案例2,创
12、建热点区域链接,当网页上的图像很大时，可以通过在图像上插入多个热点区域创建超级链接，从而实现不同的图像映射。,在许多旅游类的网页中经常采用热点区域链接的技术。例如：制作一个中国著名风景胜地旅游网站，可以在地图上为每一个省制作一个热点区域，然后命名并添加链接。,制作热点区域,在页面pra_05_03.htm中选择图像文件“map.gif”，单击图像属性面板右下角的扩展箭头，单击“矩形热点工具”按钮，在图像上画出矩形热点区域，,命名和添加链接,给图像热点区域命名在页面pra_05_03.htm的中国地图文件上上点击广东省的热点区域，此时图像属性面板将变为热点属性面板，在属性面板的“地图”文本框中输
13、入图像名称“Guangdong”。由于在同一文档中有多个图像热点区域，所以要给它们分别命名。,给热点区域创建链接,在属性面板的“链接”文本框中输入被链接的页面路径“./travel/guangdong.htm”，该页面就是单击热点时所要链接的去向。,创建导航条,在网页上选择插入导航条的位置在插入菜单里选择插入交互式图像导航条命令屏幕上出现对话框按屏幕提示操作（事先准备好作为按钮的四张图片）,创建跳转菜单,跳转菜单是一个下拉式菜单，其中的每一个选项都是一个超级链接。设计者可以用跳转菜单创建本站点与远程站点的各种链接，实现网页的跳转链接。,课后作业要求,熟练掌握各种超级链接的方法和技巧，并在期中作业中有所体现。1 内部链接：网站内部的所有链接（文字、图片、按钮）2 外部链接：著名网站的友情链接3 自己的电子邮箱链接4 锚点链接（长文本的快速跳转）5 热点区域链接（图片多区域链接）6 没有无效链接,
