网页设计与制作第5章-创建超级链接课件

网页设计与制作第5章-创建超级链接课件1 超级链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都是由超级链接串接而成，超级链接完成了页面之间的跳转。本章将介绍超级链接的基本知识以及创建超级链接的基本方法。第第5 5章章 创建超级链接创建超级链接 超级链接是网站中使用比较频繁的HTML元素，因为网站2学习目标了解超级链接的概念和分类。了解超级链接的概念和分类。掌握设置文本和图像超级链接的方法。掌握设置文本和图像超级链接的方法。掌握设置锚记和脚本超级链接的方法。掌握设置锚记和脚本超级链接的方法。掌握测试和更新超级链接的方法。掌握测试和更新超级链接的方法。学习目标了解超级链接的概念和分类。35.1 认识超级链接 5.1.1 超级链接的概念5.1.2 链接路径的类型5.1.3 超级链接的分类5.1 认识超级链接 5.1.1 超级链接的概念45.1.1 超级链接的概念超级链接习惯简称为超链接，是指从一个网页指向一个目标的连接关系，这个目标对象可以是另一个网页，也可以是一个图像、一个电子邮件地址、一个文件（如Word、Excel、Rar、Zip文件等），甚至是一个应用程序，还可以是相同网页上的不同位置。而在一个网页上用作超级链接的载体对象，可以是一段文本或者是一幅图像，甚至可以是一幅图像的某一部分。当浏览者在浏览器中单击已经设置链接的文本或图像后，链接目标将显示在浏览器窗口中，并且根据目标的类型来打开或运行。超级链接在本质上属于一个网页的一部分，它是一种允许用户同其他网页或站点之间进行交互的元素。各个网页链接在一起后，才能真正构成一个网站。5.1.1 超级链接的概念超级链接习惯简称为超链接，是指从55.1.1 超级链接的概念在因特网中，每个网页都有惟一的地址，通常称为URL（Uniform Resource Locator，统一资源定位符）。URL的书写格式通常为“协议:/主机名/路径/文件名”，例如，“http:/ 超级链接的概念在因特网中，每个网页都有惟一的地65.1.2 链接路径的类型绝对路径提供所链接文档的完整的URL，没能任何省略部分，其中包括所使用的通信协议，例如，“http:/ 链接路径的类型绝对路径提供所链接文档的完整的U75.1.3 超级链接的分类按照不同的标准，超级链接可以有不同的分类。根据链接载体对象的不同，超级链接通常可分为以下两种。文本超级链接：以文本作为超级链接载体。图像超级链接：以图像作为超级链接形体。根据链接路径类型的不同，超级链接通常可分为以下两种。内部超级链接：链接目标位于同一站点内的超级链接形式。外部超级链接：链接目标位于站点外的超级链接形式。外部超级链接可以实现网站之间的跳转，从而将浏览范围扩大到整个网络。5.1.3 超级链接的分类按照不同的标准，超级链接可以有不85.1.3 超级链接的分类根据链接目标对象的不同，超级链接可分为以下几种类型。网页超级链接：链接到HTML、ASP、PHP等网页文档的链接，这是网站最常见的超链接形式。下载超级链接：链接到图像、影片、音频、Word文档、Excel文档、PowerPoint文档、PDF文档等资源文件或RAR、ZIP等压缩文件的链接。电子邮件超级链接：链接到电子邮件的超链接形式，将会启动邮件客户端程序，可以写邮件并发送到链接的邮箱中。空链接：链接目标形式上为“#”，主要用于在对象上附加行为等。脚本链接：链接目标为一段JavaScript脚本代码，用于执行某项操作。锚记超级链接：链接目标为网页文档中的某一位置，这一位置可以位于当前网页或其他网页中，这个网页可以位于当前站点内，也可以位于其他站点内。5.1.3 超级链接的分类根据链接目标对象的不同，超级链接95.2 文本超级链接 5.2.1 教学案例1932年我国首次参加奥运会5.2.2 文本超级链接5.2.3 下载超级链接和空链接5.2.4 电子邮件超级链接5.2.5 本超级链接的状态5.2.6 设置默认的链接相对路径5.2 文本超级链接 5.2.1 教学案例1932年我国105.2.1 教学案例1932年我国首次参加奥运会将素材文档复制到站点文件夹下，然后根据要求设置超级链接，在浏览器中的显示效果如图5-1所示。(1)设置网页中文本“奥运会首位中国运动员刘长春”的链接目标文件为“liuchangchun.htm”，打开目标窗口的方式为在新窗口中打开，标题文本为“刘长春”。(2)设置网页中文本“奥运会首位中国运动员刘长春纪念雕塑”的链接目标文件为“diaosu.htm”，打开目标窗口的方式为在新窗口中打开，标题文本为“刘长春纪念雕塑”。(3)设置文本“百度”的链接地址为“http:/”，打开目标窗口的方式为在新窗口中打开，标题文本为“到百度检索”。(4)设置文本“下载图像压缩包”的链接目标文件为“images/images.rar”，标题文本为“下载图像”。(5)设置文本“反馈给我们”的链接目标为电子邮件地址“”，标题文本为“反馈意见或建议”。(6)设置链接颜色和已访问链接颜色均为“#0CF”，变换图像链接颜色为“#F00”，且仅在变换图像时显示下划线。5.2.1 教学案例1932年我国首次参加奥运会将素材文115.2.1 教学案例1932年我国首次参加奥运会5.2.1 教学案例1932年我国首次参加奥运会125.2.2 文本超级链接文本超级链接一、通过【属性（一、通过【属性（HTML）】面板创建超级链接。）】面板创建超级链接。5.2.2 文本超级链接一、通过【属性（HTML）】面板创135.2.2 文本超级链接文本超级链接二、通过【超级链接】对话框创建超级链接。二、通过【超级链接】对话框创建超级链接。5.2.2 文本超级链接二、通过【超级链接】对话框创建超级145.2.3 下载超级链接和空链接下载超级链接和空链接在实际应用中，链接目标也可以是其他类型的文件。如果要在网站中提供资料下载，就需要为文件提供下载超级链接。下载超级链接并不是一种特殊的链接，只是下载超级链接所指向的文件是特殊的，如压缩文件、Word文档或PDF文档等。空链接是一个未指派目标的链接。空链接用于向页面上的对象或文本附加行为。例如，可向空链接附加一个行为，以便在鼠标光标滑过该链接时会交换图像或显示绝对定位的元素（AP元素）。设置空链接的方法很简单，选中文本等链接载体后，在【属性（HTML）】面板的【链接】文本框中输入“#”即可5.2.3 下载超级链接和空链接在实际应用中，链接目标也可15创建电子邮件超级链接的方法是：选择菜单命令【插入】/【电子邮件链接】，或在【插入】面板【常用】类别中单击【电子邮件链接】按钮，打开【电子邮件链接】对话框进行参数设置。如果要修改电子邮件链接的E-mail，可以通过【属性（HTML）】面板进行设置。通过【属性（HTML）】面板也可以看出，“mailto:”、“”和“.”这3个元素在电子邮件链接中是必不可少的。为了更快捷地创建电子邮件超级链接，可以先选中需要添加链接的载体，然后在【属性（HTML）】面板的【链接】文本框中直接输入电子邮件地址，并在其前面加一个前缀“mailto:”，最后按Enter 键确认即可。5.2.4 电子邮件超级链接电子邮件超级链接创建电子邮件超级链接的方法是：选择菜单命令【插入】/【电子16通过【页面属性】对话框的【链接（CSS）】分类，可以设置文本超级链接的状态，包括字体、大小、颜色及下划线等。5.2.5 文本超级链接的状态文本超级链接的状态通过【页面属性】对话框的【链接（CSS）】分类，可以设置文17如果要使用站点根目录相对路径创建超级链接，必须首先在Dreamweaver CS6中定义一个本地文件夹，作为Web服务器上文档根目录的等效目录，Dreamweaver CS6使用该文件夹确定文件的站点根目录相对路径。同时，在【管理站点】对话框中双击打开要设置的站点，展开【高级设置】选项，然后在【本地信息】类别的【链接相对于】选项中选择【站点根目录】单选按钮。5.2.6 设置默认的链接相对路径设置默认的链接相对路径如果要使用站点根目录相对路径创建超级链接，必须首先在Dre185.3 图像超级链接5.3.1 教学案例教学案例衰衰败的城市的城市 5.3.2 图像超级链接图像超级链接 5.3.3 图像热点超级链接图像热点超级链接 5.3.4 鼠标经过图像鼠标经过图像 5.3 图像超级链接5.3.1 教学案例衰败的城市 195.3.1 教学案例衰败的城市 将素材文档复制到站点文件夹下，然后根据要求设置超级链接，在浏览器中的显示效果如图5-24所示。(1)给图像“01.jpg”添加超级链接，目标文件为“city01.htm”，打开目标窗口的方式为在新窗口中打开，替换文本为“衰败的城市情景1”。(2)给图像“02.jpg”添加超级链接，目标文件为“city02.htm”，打开目标窗口的方式为在新窗口中打开，替换文本为“衰败的城市情景2”。(3)给图像“03.jpg”添加超级链接，目标文件为“city03.htm”，打开目标窗口的方式为在新窗口中打开，替换文本为“衰败的城市情景3”。(4)在图像“baidu.jpg”上创建3个圆形热点超级链接，分别指向文件“http:/ 教学案例衰败的城市 将素材文档复制到站点文件205.3.1 教学案例衰败的城市 5.3.1 教学案例衰败的城市 215.3.2 图像超级链接用图像作为链接载体，这就是通常意义上的图像超级链接。最简单的设置方法仍然是通过【属性】面板来进行。5.3.2 图像超级链接用图像作为链接载体，这就是通常意义225.3.3 图像热点超级链接创建图像热点超级链接的方法是：首先选中图像，然后在【属性】面板中单击热点工具按钮，并将鼠标光标移到图像上，绘制一个区域，并在【属性】面板中设置链接地址、目标窗口和替换文本。5.3.3 图像热点超级链接创建图像热点超级链接的方法是：235.3.4 鼠标经过图像创建鼠标经过图像的方法是，选择菜单命令【插入】/【图像对象】/【鼠标经过图像】，或在【插入】面板的【常用】类别的图像按钮组中单击【鼠标经过图像】按钮，打开【插入鼠标经过图像】对话框，在其中进行参数设置即可。5.3.4 鼠标经过图像创建鼠标经过图像的方法是，选择菜单245.4 锚记和脚本超级链接5.4.1 5.4.1 教学案例教学案例百年前的美丽风景百年前的美丽风景5.4.2 5.4.2 创建锚记超级链接创建锚记超级链接5.4.3 5.4.3 设置脚本超级链接设置脚本超级链接5.4 锚记和脚本超级链接5.4.1 教学案例百年前255.4.1 教学案例教学案例百年前的美丽风景百年前的美丽风景将素材文档复制到站点文件夹下，然后根据要求设置锚记超级链接和脚本超级链接，在浏览器中的显示效果如图5-40所示。(1)在正文中每幅图像上面的说明文本后面依次添加命名锚记“a”、“b”、“c”、“d”、“e”、“f”、“g”。(2)给“导航：”后面的每个小标题依次添加锚记超级链接，分别链接到正文中相对应命名锚记处。(3)给文本“打印本页”添加打印功能的脚本链接。(4)给文本“关闭窗口”添加关闭浏览器窗口功能的脚本链接。5.4.1 教学案例百年前的美丽风景将素材文档复制到站265.4.1 教学案例教学案例百年前的美丽风景百年前的美丽风景5.4.1 教学案例百年前的美丽风景275.4.2 创建锚记超级链接创建锚记超级链接，通常需要两个步骤：首先需要命名锚记，即在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后在【属性（HTML）】面板中设置指向这些锚记的超级链接。创建命名锚记创建锚记超级链接5.4.2 创建锚记超级链接创建锚记超级链接，通常需要两个285.4.3 设置脚本超级链接脚本链接用于执行JavaScript代码或调用JavaScript函数，能够在不离开当前页面的情况下为浏览者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、验证表单和完成其他处理任务。创建脚本链接的方法是，首先选定文本或图像，然后在【属性（HTML）】面板的【链接】文本框中输入文本“JavaScript:”，后面跟一些JavaScript代码或函数调用即可（在冒号与代码或调用之间不能键入空格）。5.4.3 设置脚本超级链接脚本链接用于执行JavaScr295.5 测试和更新超级链接5.5.1 5.5.1 测试超级链接测试超级链接5.5.2 5.5.2 查找问题链接查找问题链接5.5.3 5.5.3 修复问题链接修复问题链接5.5.4 5.5.4 自动更新链接自动更新链接5.5.5 5.5.5 手工更改链接手工更改链接5.5 测试和更新超级链接5.5.1 测试超级链接305.5.1 测试超级链接在Dreamweaver CS6中，无法通过在文档窗口中直接单击超级链接打开其所指向的文档，但是可以通过以下方法来测试链接。在文档窗口中选中超级链接，然后选择菜单命令【修改】/【打开链接页面】，此时将在窗口中打开超级链接所指向的文档。按住Ctrl键，同时双击选中的超级链接，也将在窗口中打开超级链接所指向的文档。当然，通过上述方法打开超级链接所指向的文档，必须保证该文档是在本地磁盘上。5.5.1 测试超级链接在Dreamweaver CS6中，315.5.2 查找问题链接检查链接功能用于搜索断开的链接和孤立文件（文件仍然位于站点中，但站点中没有任何其他文件链接到该文件）。可以检查当前文档、本地站点的某一部分或者整个本地站点中的链接。Dreamweaver CS6仅检查验证指向站点内文档的链接，并将出现在选定文档中的外部链接编辑成一个列表，但并不检查验证它们，还可以标识和删除站点中其他文件不再使用的文件。(1)检查当前文档中的链接。(2)检查本地站点某一部分中的链接。(3)检查整个站点中的链接。5.5.2 查找问题链接检查链接功能用于搜索断开的链接和孤325.5.3 修复问题链接在运行链接报告之后，可直接在【链接检查器】面板中修复断开的链接和图像引用，也可以从此列表中打开文件，然后在【属性】面板中修复链接。(1)在【链接检查器】面板中修复链接。(2)在【属性】面板中修复链接。5.5.3 修复问题链接在运行链接报告之后，可直接在【链接335.5.4 自动更新链接设置自动更新链接的方法如下。(1)选择菜单命令【编辑】/【首选参数】，打开【首选参数】对话框。(2)在【常规】分类的【文档选项】部分，从【移动文件时更新链接】下拉列表中根据需要选择一个选项即可(3)选择菜单命令【站点】/【管理站点】，打开【管理站点】对话框，选择并打开一个站点。(4)在【站点设置】对话框中，展开【高级设置】并选择【本地信息】类别，然后选择【启用缓存】选项即可。5.5.4 自动更新链接设置自动更新链接的方法如下。345.5.5 手工更改链接在整个站点范围内手动更改链接的操作方法如下。(1)在【文件】面板的【本地视图】中选择一个文件（如果更改的是电子邮件链接、FTP链接、空链接或脚本链接，则不需要选择文件）。(2)选择菜单命令【站点】/【改变站点范围的链接】，打开【更改整个站点链接】对话框。(3)利用【更改所有的链接】文本框浏览到并选择要取消链接的目标文件，利用【变成新链接】文本框浏览到并选择要链接到的新文件。如果更改的是电子邮件链接、FTP链接、空链接或脚本链接，需要键入要更改的链接的完整路径。5.5.5 手工更改链接在整个站点范围内手动更改链接的操作35