网页设置基础：网页中的超链接上课课件 2.ppt

第6章 在网页中设置链接 在这一章我们引入一个新的概念——超链接（Hyperlink）。 在网页设计中，超链接的应用非常广泛，熟练地应用超链接是设计网页的基本要求。 本章主要讲解的内容是超链接的基本知识，各种超链接的操作方法，以及检查和修复网页中的超链接。 6.1 超链接概述 超链接是Web页中最吸引人的部分。Internet之所以如此受到人们的欢迎，很大程度上是由于在网页中使用了大量的超级链接。 在介绍使用Dreamweaver cs3在文档中创建超链接之前，我们先来了解一些关于超链接的基本概念和基本知识。 6.1.1 超链接的基本概念 超链接是指从一个对象指向另一个对象的指针，它可以是网页中的一段文字也可以是一张图片，甚至可以是图片中的某一部分。 它允许我们同其它网页、站点、图片、文件等进行连接，从而使Internet上的信息构成一个有机的整体。 设置基本链接 根据链接方式的不同超链接可分为：绝对路径连接、相对路径连接两种。 而根据链接对象的不同超链接又可分为：超文本链接、命名锚链接、图像链接、电子邮件链接、热区链接，空链接等。 6.1.2 超链接的路径 相对路径与绝对路径作为超链接的两种基本连接方式是十分重要的也是容易混淆的. 要想熟练运用超链接我们首先就的弄清什么相对路径什么是绝对路径，它们的区别在哪里。 1．绝对路径 绝对路径：指明目标端点所在具体位置的完整URL地址的链接路径。 2．相对路径 相对路径：指明目标端点与源端点之间相对位置关系的路径称为相对路径。 6.2 超文本链接 超文本链接是最普通、最简单的一种超链接。 在Dreamweaver 中根据链接目标的不同，超文本链接可以分为与本地网页文档的链接、与外部网页的链接、空链接等几种类型。下面将逐一介绍。 6.2.1 创建与文档的链接 与本地网页文档的链接，是最常见的超文本链接类型。通过创建与文档的链接，可以将本地站点的一个个单独的文档连接起来，形成网站。具体操作步骤如下： 6.2.2 创建与外部网页的链接 上一小节介绍了创建与本地文档的链接，下面就来学习如何创建与外部网页的链接。具体操作步骤如下： （1）选中要创建链接的文本“中国美术学院美术馆”；在“属性检查器”的“链接”文本框中直接输入URL地址“/about.asp?id=11”，“目标”下拉列表框中选择“_blank” 。 设置外部、内部网页链接 （2）保存文件，在浏览器中预览时，单击文本“中国美术学院美术馆”，就会在新窗口中打开中国美术学院美术馆网站的主页。 按快捷键F12预览页面，当单击链接文字后，可以在一个新开的窗口中打开链接的网页。 内部页面链接指的是链接到站点内部的文件。 （1）示例页面中为指定项目建立相应的链接。 （2）在“属性”面板的“链接”文本框中输入已经制作好的目标网页的路径。 （3）按F12预览页面。 6.2 电子邮件链接 电子邮件链接是一种特殊的链接，在网页中单击这种链接，不是跳转到其他网页中，而是会自动启动电脑中的Outlook Express或其他E-mail程序，允许书写电子邮件，并发送到指定的地址。具体操作步骤如下： 6.2.3 创建空链接 空链接是指未指定目标文档的链接。使用空链接可以为页面上的对象或文本附加行为。具体操作步骤如下： （1）选中要创建链接的文本“更多进入”；在“属性检查器”，“链接”文本框中直接输入 “#” 。 （2）保存文件，在浏览器中预览时，“更多进入”显示为超文本链接的样式，单击后不会跳转到别的页面。 设置脚本链接 脚本链接对多数人来说是一个比较陌生的词汇，它一般用于为浏览者提供某个方面的额外信息，而不用离开当前页面。 脚本链接就是执行JavaScript代码的功能。 例如：选择“关闭”文字，在“属性”面板的“ 链接”文本框中输入javascript代码，“javascript:window.close()” 按f12预览页面。 6.3.1 创建锚点 在创建锚链接之前，首先要在页面中创建锚点。具体操作步骤如下： 6.3 命名锚链接 当用户浏览一个内容较多的网页时，查找信息会浪费大量的时间。在这种情况下，可以在网页中创建锚链接，放在页面顶部作为书签。 锚实质上就是在文件中命名的位置或文本范围，锚链接起到的作用就是在文档中定位。单击锚链接，就会跳转到页面中指定的位置。 设置本页面的锚点链接 创建到同页面锚点的链接的过程分为两步。首先，创建命名锚记；然后，创建到命名锚记的链接。 （1）将光标放在页面需要插入命名锚记的位置，然后在菜单栏上选择“插入”----“命名锚记”命令。 （2）在弹出的“命名锚记”对话框中的“锚记名称”文本框中输入锚记名称。 （3）单击“确定”按钮。 （4）下面将链接到命名锚记。 （5）按F12预览页面。 6.