项目六 设置超级链接（课件）- 高一《网页设计与制作》同步教学（机工版·2018）

项目六 设置网页超链接 > = = 学习目标： 通过学习本项目，你应该能够： 1. 能够设置文字、图像超链接 2. 能够设置锚点链接 3. 能够对图像的不同区域、不同形状设置超链接 4. 能够设置邮件超链接 = 任务一 设置文字、图像超链接 = 超链接 定义 绝对路径、相对路径 文本 超链接 图像 超链接 = 本节提纲 = 超链接定义 超链接是WWW技术的核心，是网页中最重要、最根本的元素之一。超链接能够使多个孤立的网页之间产生一定的相互联系，从而使单独的网页形成一个有机的整体。 = 5 绝对路径 完整地描述文件存储位置的路径就是绝对路径，如：D:\tu\Rose.jpg，在Internet中，绝对路径是指包括服务器协议和域名的完整URL（Uniform Resource Locator，统一资源定位器）路径。绝对路径如http://www.sina.com.cn和ftp://www.sohu.com.cn等。 = 相对路径 对于大多数内部链接来说,相对路径是最适用的链接方式。在当前文档与所链接的文档处于同一文件夹内时，使用文档相对路径。链接到其他文件夹中的文档,也可以使用相对路径，方法是利用文件夹层次结构，指定从当前文档到所链接文档的路径。如果链接到同一目录下，则只需要输入要链接文档的名称。如果要链接到上一级目录中的文件，则先输入“../”，再输入目录名、文件名。要链接到下一级目录中的文件，只需先输入目录名，然后加“/”，再输入文件名。 。 = 活动一 设置文字超链接 1.创建文本超链接 （1）在网页上选择需要添加超链接的文本，此时属性面板成为文本属性面板； （2）在属性面板上指定文字的链接目标。可按以下4种方法指定文字的超链接： 2.编辑文本超链接 （1）创建超链接 我们要为该机票页面中的“更换航班”设置文本超链接。选中文字右键点开，选择“创建超链接”，即可设置文本超链接。 = = = 3.超链接属性修改 = 4.超链接删除 = 活动二 设置图片超链接 = 图片超链接 【活动实施】 创建图片超链接的步骤如下： （1）选中所需建立超链接的图片，此时属性面板为图片的属性面板。 （2）在图片属性面板中，为图片添加文档相对路径的链接。具体方法可参考为文本添加超链接的操作； （3）按“F12”预览网页。 = = 任务二 设置锚点链接 = 锚点的定义 锚点，也称为书签，用来标记文档中的特定位置，使用其可以跳转到当前文档或其他文档中的标记位置。在网页中加入锚点包括两方面的工作，一是在网页中创建锚点，另一个是为锚点建立链接。 在命名锚点时，必须遵循以下规定： ① 只能使用字母和数字，锚点命名不支持中文。虽然在插入锚点对话框中能输入中文，但在属性面板上显示的则是一堆乱码，且在为锚点添加链接的时候，也无法工作。 ② 锚点名称的第1个字符最好是英文字母，一般不要以数字做为锚点名称的开头。 ③ 锚点名称区别英文字母的大小写。 ④ 锚点名称间不能含有空格，也不能含有特殊字符。   = 创建命名锚记 创建锚点的步骤如下： （1）将光标移到需要加入锚点的地方，一般是将光标放置在一行或是一段文字的开头部分； （2）单击对象面板“Invisibles”类上的“插入锚点” 按钮，将弹出“Insert Named Anchor（插入命名锚点）”对话框； （3）在对话框的“Anchor Name”文本框输入锚点的名称； （4）单击“OK”按钮。 执行完上述操作之后，则在光标处出现一个代表锚点的图标。 = 将插入点置于第一篇文章标题 “一、“播撒和平友谊”——刘淇致函慰问火炬接力运行团队”前面 文本框中输入锚记名称为“article1” = 在【属性】面板上【链接】项文本框中输入“#article1”。在【属性】面板中拖动【指向文件】按钮 到“article1”锚点 上面，直到【属性】面板上的【链接】文本框中出现“#article1”为止，如图6-2-8所示。此时，“一、“播撒和平友谊”——刘淇致函慰问火炬接力运行团队”文本变成蓝色，下面出现一条下划线，表示锚点链接制作好了。 = 练一练 请问下面网页文章制作两个锚点链接，制作出如下效果。 1.“二、一只穿山甲获利近万元”链接到第二段文章。 2.“返回”链接到页首。 图6-2-9 制作效果图 = 任务三 设置热点链接 = 热点链接定义 在某些时候需要在一张图片上设置几个区域，鼠标点击图片的不同区域可以进入不同的页面，或者是点击图片的某一块区域进入某一个页面，这就是网页的热点链接。 = 活动一 图像不同形状设置热点链接 = 活动二 设置邮件超链接 = 练一练 设置地图超链接 = 谢谢 = = $