《图像处理及网页制作》课件第13章.ppt

1、1 1第13章 超级链接的使用13.1 超级链接的组成超级链接的组成13.2 创建文本超级链接创建文本超级链接13.3 创建邮件链接创建邮件链接13.4 创建锚记链接创建锚记链接13.5 创建图像链接创建图像链接13.6 创建图像地图创建图像地图本章小结本章小结2 2超级链接不仅将一个Web网站中的网页与网页，网页中的内容与图像、声音、动画、视频等多媒体文件联系在一起，而且它能将全球任何位置上的Web网站中的网页甚至其他文档联系在一起，可以说，正是超级链接使全球的信息资源构成了一个巨大的Web。在网页中的超级链接主要包括：文本超级链接、邮件链接、锚记链接、图像链接和图像地图。3 3超级链接主要

2、由两个部分组成：超级链接源和目标。超级链接源通常采用文本或图像。超级链接目标是单击超级链接时打开的网页或文件，通常用URL定义其位置。文本超级链接是最常用的超级链接类型。Web浏览器通常在文本超级链接下添加下划线，并以不同的颜色显示。一个文本超级链接只是给文本指定了一个目标文档的URL地址。13.1 超级链接的组成超级链接的组成4 4图像上的超级链接并不能够直接在浏览器中显示出来，站点访问者可以使用鼠标指针来判断哪个图像包含超级链接。如果图像中包含超级链接，当鼠标指针悬停在该图像上时，鼠标指针将变成一个小手形。一个图像超级链接可以使用下列两种方式之一来分配目标URL：(1)整个图像被分配为默认

3、的超级链接。在这种情况下，访问者可以单击图像上的任何一部分来显示超级链接的目标。例如，按钮就是带有默认超级链接的图像。5 5(2)图像也可以被分成一个或更多个热点，热点是图像上的超级链接区域，访问者单击图像上的一个特定区域，即可跳转到相应的目标。在指定Internet资源时，可以使用绝对路径，也可以使用相对路径。相应的URL称为绝对URL和相对URL。1.绝对URL绝对URL是指Internet上资源的完整地址，包括完整的协议种类、计算机域名和包含路径的文档名。其形式为协议：/计算机域名/文档名6 6例如，http:/ 7说明：省略了最后部分文件名的URL通常也认为是绝对URL，因为它能够完全

4、定位资源的位置。例如，http:/就是一个绝对URL。8 82.相对URL相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目的页面位置的路径。例如：public/example.htm就是一个相对URL，它表示当前页面所在目录下public子目录中的example.htm文档。当使用相对URL时，可以使用与DOS文件目录类似的两个特殊符号：句点(.)和双重句点(.)，两者分别表示当前目录和上一级目录(父目录)。9 9例如，./image.gif表示当前目录中的image.gif文件，相当于image.gif；./public/index.htp表示与当前目录同级的

5、public目录下的index.htp文件，也就是当前目录上一级目录下的public目录中的index.htp文件。相对URL本身并不能唯一地定位资源，但浏览器会根据当前页面的绝对URL正确地理解相对URL。使用相对URL的好处在于，当用户需要移植站点时(例如，将本地站点上传到Internet上，或者是移动到软盘上)，只要保持站点中各资源的相对位置不变，就可以确保移植后各页面之间的超级链接仍能正常工作。用户在编写网页时，通常使用的都是相对URL(除非需要引用外部网页)。10 10本节以创建如图13-1所示的同学录网站为例，说明如何创建超级链接。在同学录网站中包含了6个网页：主页、我们母校、班级

6、相册、通讯录、个人简介和小游戏。13.2 创建文本超级链接创建文本超级链接11 11图13-1 同学录网站之“主页”示意图12 12创建文本超级链接的具体操作步骤如下：(1)选定需要链接的文字部分，例如，选定主页中页脚上的“个人资料”。(2)单击“属性”面板中的“链接”文本框，并单击右侧的“浏览文件”图标，如图13-2所示。(3)打开如图13-3所示的“选择文件”对话框，从中找到要链接的页面文件(如data1.html)后，单击“确认”按钮。(4)此时，在“属性”面板的“链接”文本框内出现链接的相关页面名称；单击页面的空白区域，去除选定的文字状态后，可以看到“个人资料”链接后的文字颜色发生了变

7、化，而且添加了一条下划线(如图13-4所示)。13 13图13-2 “属性”面板中“浏览文件”图标示意图14 14图13-3 “选择文件”对话框15 15提示：如果要控制被链接目标的打开方式，例如要求在当前浏览器窗口中打开链接目标，或在新的浏览器窗口中打开链接，可以在“属性”面板的“目标”下拉列表框中进行选择。例如，选择_blank(如图13-4所示)，表示链接目标将在一个新的浏览器窗口中打开，不会影响到原来的窗口。16 16图13-4 创建超级链接示意图17 17(5)为了能从“个人资料”页返回到首页，可以在该页上选定文字“返回主页”，然后选择属性栏上的“指向文件”图标，按住鼠标直接拖向“文

8、件”面板中的“index.html”文件，将其链接到所在的主页页面上，如图13-5所示。提示：如果要创建与WWW上其他网站的链接，可以在“属性”面板的“链接”文本框中输入该网站的URL(如http:/)。18 18图13-5 利用“指向文件”图标创建超链接示意图19 19邮件链接是指与一个电子邮件(E-mail)信箱的链接。当单击该邮件链接时，将打开计算机上与浏览器相关的邮件软件，给链接目标发送邮件。创建邮件链接的操作步骤如下：(1)在网页中选定作为链接的文字或图像，例如选定文字“与我联系”。(2)在“属性”面板的“链接”文本框中输入“mailto:”加上电子邮件地址即可，例如输入“mailt

9、o：”，如图13-6所示。13.3 创建邮件链接创建邮件链接2020图13-6 创建邮件链接21 21如果要测试刚才创建的邮件链接，可以单击窗口下方的“预览”标签，切换到“预览”视图中，然后单击刚创建的超级链接，即可启动邮件软件，如图13-7所示。此时，在“收件人”框中已经自动填入了超级链接指定的电子邮件地址，在“主题”栏中自动填入了创建超级链接时设置的主题。在浏览器中只需键入电子邮件的正文，然后单击“发送”按钮，即可给网页设计者发送电子邮件。2222图13-7 启用邮件软件发送邮件2323锚记是页面内的定位标记，类似于书签，通过锚记能够控制浏览器窗口在网页内的位置。例如，要在很长的网页开始处

10、给出一个目录结构，让浏览者通过单击目录中感兴趣的内容，就可以直接跳转到相应的文本处，这时就需要使用锚记链接。创建锚记链接的操作分为两部分，即“添加锚点”和“创建锚记链接”。13.4 创建锚记链接创建锚记链接2424“添加锚点”可以按照下述步骤进行操作：(1)将插入点置于待放置锚点的位置。例如，可按图13-8所示，将插入点置于“8月9日行程安排”之前。图13-8 将插入点置于待放置锚点的位置2525(2)单击“插入/命名锚记”命令，打开如图13-9所示的“命名锚点”对话框；在“锚点名称”文本框中输入该锚点的名字。例如，输入“time1”。(3)单击“确定”按钮，在插入点位置就出现一个锚点。读者可

11、重复上述步骤，在网页中的“8月10日行程安排”前面放置锚点(如图13-10所示)。如果没有看到该锚点，可以单击“查看/可视化助理/不可见元素”命令，即可显示所有的不可见元素。不过，该锚点在浏览器中是看不到的。2626图13-9 “命名锚点”对话框2727图13-10 创建各锚点2828提示：为了在阅读一个长的网页时能迅速返回到网页的开头，可以在网页的开始处创建一个锚点(可命名为top)。“创建锚记链接”可以按照下述步骤进行操作：(1)选定要添加链接的文字。例如，选定“8月9日”。(2)在“属性”面板的“链接”文本框中输入“#”加锚记的名字(如#time1)，如图13-11所示。(3)按回车键确

12、定。(4)重复上述步骤，分别将“8月10日”链接到相应的锚记名称。2929(5)为了使浏览者阅读相应的内容后，能够及时返回到网页的开头，可以在每段的末尾添加“返回页首”文字，然后创建链接到网页开头的超级链接。这只需选定文字“返回页首”，并在“属性”面板的“链接”文本框中输入“#top”即可。(6)单击“文件保存”命令，将创建的网页保存起来。按F13键，启动IE浏览器，即可测试刚创建的超级链接。例如，单击“8月9日”，跳转到“8月9日行程安排”锚记的位置，如图13-12所示。3030图13-11 创建锚记链接31 31图13-12 测试链接3232在图像上创建简单链接与在文本上创建链接的方法类似

13、，具体操作步骤如下：(1)在编辑窗口中，用鼠标左键单击图像将其选定。(2)在“属性”面板的“链接”文本框中输入链接的目标，如图13-13所示。(3)按回车键确定，完成图像链接。13.5 创建图像链接创建图像链接3333图13-13 创建图像链接示意图3434图像地图是指已被分为区域(或称为“热点”)的图像。当用户单击图像的某个热点时，会发生某种操作(例如跳转到另一个网页)。灵活利用这种技巧，可以将大部分的网页设计变成美工设计，直接把美工图像变成网页。13.6 创建图像地图创建图像地图3535如果要在图像上添加热点，首先要选择一幅比较适合于创建热点的图像，然后将这幅图像划分成不同的热点区域，让浏

14、览者能清晰地区分不同的区域。例如，用Photoshop先将一幅杭州市地图作切片处理后，以Web方式保存，取名为hangzhoumap.html，生成一幅旅游导图。利用此图创建图像地图后，单击不同的地名，即可显示与之相关的旅游景点和相关介绍。如图13-14所示，当用鼠标点击旅游导图上的“大清谷”时，立即打开“大清谷风景一览表”网页。3636图13-14 图像地图示例373713.6.1 在图像上创建热点有时，需要让图像上的不同部分对应不同的超级链接，这就要用到“热点”。“热点”是图像上被赋予了一个超级链接属性的不可见区域，在Web浏览器中单击该区域后，能够快速连接到指定的链接目标。创建热点的具体

15、操作步骤如下：(1)选定插入到网页中的图像，如果“属性”面板处于折叠状态，则单击右下角的向下箭头展开它；“属性”面板左下角的“地图”文本框和4个工具按钮是用于创建热点的，如图13-15所示。3838图13-15 “地图”文本框和4个工具按钮3939(2)如果要创建一个“圆形热点”，单击“属性”面板中的工具按钮，然后将鼠标指针移到图像上，按住鼠标左键拖动，直至框住要设置为热点的区域，热点用半透明色显示，与图像的其他部分区分开来(如图13-16所示)。此例中用圆形框选定的是图中的“大清谷”。4040图13-16 创建圆形热点示意图41 41(3)同理，若要创建一个“矩形热点”，单击“属性”面板中的

16、工具按钮 ，然后用鼠标在图像上拖动，确定矩形的大小和位置。若要创建“多边形热点”，可单击图像面板中的工具按钮 ，然后将鼠标移到多边形的起点，单击鼠标左键，在该位置出现一个顶点标记，将鼠标移到下一个顶点处单击，即可在两点之间连线。依次在各个顶点处单击，直至选定一个多边形的区域(如图13-17所示)。本例中设置的“多边形热点”是“虎跑路”。4242图13-17 创建多边形热点示意图434313.6.2 修改热点创建图像映射的热点后，如果对它们的大小和位置不满意，可以对其进行修改。具体操作方法如下：(1)单击“属性”面板中的工具按钮。(2)单击图像中要修改的热点，将其选定。(3)要改变热点区域的大小

17、，请将鼠标指针移到热点区域的顶点上，然后按住鼠标左键拖动；要移动热点，在其上按住鼠标左键拖动；要删除热点，在选定它的情况下，按Delete键。444413.6.3 为热点指定链接如果要为热点指定链接，可以按照下述步骤进行操作：(1)单击“属性”面板中的工具按钮。(2)选定要添加链接的热点。(3)在热点的“属性”面板的“链接”文本框中输入链接目标(如图13-18所示)，或者单击右边的文件夹图标从本地计算机选择一个文件作为链接的目标。4545图13-18 为热点指定链接示意图4646(4)在“替代”文本框中输入提示性文字。(5)重复步骤(2)(4)，给其他热点指定链接。(6)保存网页，然后按F13键在浏览器中预览，当鼠标移到热点区域时，就会出现提示性文字，状态栏中出现链接的地址，单击后会转到链接的网页。4747本章主要介绍了有关超级链接的内容和设置方法，通过本章学习，使学习者掌握并能应用创建文本、邮件、锚记、图像超级链接和创建图像地图等方法。本本 章章 小小 结结