高中信息技术第7章在网页中使用超链接课件粤教版选修.ppt

通过本章学习，应该掌握以下内容： 1. 认识超链接 利用Dreamweaver创建各种超连接的方 法 利用Dreamweaver编辑各种超连接的方 法 利用HTML和FrontPage创建、编辑超 链接的方法网页制作的基本步骤 第7章 在网页中使用超链接 7.1 利用Dreamweaver 4.0处理超链接 7.1.1 创建文字超链接 1超链接简介 超链接是WWW技术的核心，是网页中最重要、最根本的元素之一。 超链接能够使多个孤立的网页之间产生一定的相互联系，从而使单 独的网页形成一个有机的整体。 （1）什么是超链接 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目 标可以是另一个网页，也可以是相同网页上的不同位置，还可以是 一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。 而在一个网页中用来超链接的对象，可以是一段文本或者是一个图 片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏 览器上，并且根据目标的类型来打开或运行。 按照链接路径的不同，网页中超链接一般分为以下3种类型： 内部链接、锚点链接和外部链接。 如果按照使用对象的不同，网页中的链接又可以分为：文本超链 接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链 接等。 （2）合理安排超链接 合理安排超链接在网页的制作中是非常重要的。采用什么结 构的链接会直接影响到网页的布局。 在这里给大家一些设计链接的建议。 1。避免孤立文件的存在：应该避免存在孤立的文件，这样能 使将来在修改和维护链接时有清晰的思路。 2。在网页中避免使用过多的超级链接：在一个网页中设置过 多超链接会导致网页的观赏性不强，文件过大。如果避免不了过 多的超链接，可以尝试使用下拉列表框、动态链接等一些链接方 式。 3。网页中的超链接不要超过4层：链接层数过多容易让人产生 厌烦的感觉，在力求做到结构化的同时，应注意链接避免超过4 层。 4。页面较长时可以使用书签：在页面较长时，可以定义一个 书签，这样能让浏览者方便地找到想要的信息。 5。设置主页或上一层的链接：有些浏览者可能不是从网站的 主页进入网站的，设置主页或上一层的链接，会让浏览者更加方 便地浏览全部网页。 2建立文本超链接 在创建超链接之前，首先了解网站中3种类型的文档路径：绝 对路径、和根目录相对路径以及和文档相对路径。 绝对路径：是包含服务器协议（对于网页来说通常是http:/或 ftp:/）的完全路径，绝对路径包含的是精确地址而不用考虑源文 件的位置。但是如果目标文件被移动，则链接无效。创建外部超链 接时必须使用绝对路径。 和根目录相对的路径：是从当前站点的根目录开始的路径。站 点上所有可公开的文件都存放在站点的根目录下。和根目录相对的 路径使用斜杠以告诉服务器从根目录开始。 和文档相对的路径：是指和当前文档所在的文件夹相对的路 径。这种路径通常是最简单的路径，可以用来链接和当前文档处于 同一文件夹下的文档。 （1）创建文本超链接 在网页上选择需要添加超链接的文本，此时属性面板成为文本 属性面板； 在属性面板上指定文字的链接目标。可按以下4种方法指定文 字的超链接： 单击“Link”文本框右侧的文件夹按钮，在弹出的“选择文件”对 话框中选择链接的目标文件。 在文本框中直接输入目标的绝对路径。 利用属性面板上的“Point to File（指向文件）”按钮，为文字加 入超链接。但必须要建立本地站点，且本地站点上还要有文件存在 ，才能使用此方法。 选择“Modify”|“Make Link”命令，也可打开“选择文件”对话框 。 确定完链接目标之后，在“Link”文本框中出现文字的链接 目标。在“Target”下拉列表框中选择目标文件打开的方式 Target表示所链接的目标文件在浏览器中打开的方式，在其下 拉列表框中一共有4个选项： blank：将目标文件载入到新的未命名浏览器窗口中。 parent：将目标文件载入到父框架集或包含该链接的框架窗口中。 self：将目标文件载入与该链接相同的框架或窗口中。 top：将目标文件载入到整个浏览器窗口并删除所有框架。 _parent、_self、_top只有在使用框架页面时才有效。 设置结束后，在网页中被选择的文字颜色变为蓝色，且在文字 底部出现一条下划线，即文字的超链接设置完成。 （2）编辑文本超链接 设置文本链接的状态 一个未被访问过的链接与一个被激活的链接在形式上肯定会 有所区别，链接被访问过了也会发生变化，提示用户这是一个已经 点击过的链接，所有这些都是链接的状态。通过设置不同的文本颜 色可以使各个状态区别开来。 设置不同的文本颜色的具体步骤如下： 打开包含文本链接的文档“园丁乐园”，选择主菜单中的“Modify（ 修改）”|“Page Properties（页面属性）”命令，打开“Page Properties（页面属性）”对话框； 单击“Links（链接）”项右边的图标，打开调色板，选取一种颜色 ； 同样为“Visited Links（访问过的链接）”、“Active（活动链接） ”项设置不同的颜色； 单击“Ok”按钮，完成设置。 设置完成之后，按下“F12”键，预览网页，链接的三种状态通 过不同的颜色区别开来。 删除文本超链接 在Dreamweaver 4.0中要删除一个文本超链接很容易，先用 鼠标选定文本对象，将光标定位于属性面板的“Link”文本框中， 用“BackSpace”键或“Delete”键，将其显示的超链接对象文件名 删除，再回车，或选择“Modify”|“Remove Link”命令，都可以删 除超链接而保留原文本对象。 7.1.2 创建图片超链接 1创建图片超链接 创建图片超链接的步骤如下： （1）选中所需建立超链接的图片，此时属性面板为图片的属 性面板。 （2）在图片属性面板中，为图片添加文档相对路径的链接。具 体方法可参考为文本添加超链接的操作； （3）按“F12”预览网页。 图像连接不像文本链接那样，会发生许多提示，图像本身不 会发生改变，只是在预览网页时，当鼠标指针经过带链接的图像 时，指针的形状变为“手”的形状。点击图像就会打开所链接的文 档。 7.1.3 创建锚点超链接 在一些内容很多的网页中，设计者常常在该网页的开始部分以网 页内容的小标题作为超链接。当浏览者单击网页开始部分的小标题 时，网页将跳到内容中的对应小标题上，免去浏览者翻阅网页寻找 信息的麻烦。其实，这是在网页中的小标题添加了锚点，再通过对 锚点的链接来实现的。 锚点，也称为书签，用来标记文档中的特定位置，使用其可 以跳转到当前文档或其他文档中的标记位置。在网页中加入锚点包 括两方面的工作，一是在网页中创建锚点，另一个是为锚点建立链 接。 1创建锚点 创建锚点的步骤如下： （1）将光标移到需要加入锚点的地方，一般是将光标放置在一行或 是一段文字的开头部分； （2）单击对象面板“Invisibles”类上的“插入锚点” 按钮，将弹出 “Insert Named Anchor（插入命名锚点）”对话框； （3）在对话框的“Anchor Name”文本框输入锚点的名称； （4）单击“OK”按钮。 执行完上述操作之后，则在光标处出现一个代表锚点的图标。 在命名锚点时，必须遵循以下规定： 只能使用字母和数字，锚点命名不支持中文。虽然在插入锚点对 话框中能输入中文，但在属性面板上显示的则是一堆乱码，且在 为锚点添加链接的时候，也无法工作。 锚点名称的第1个字符最好是英文字母，一般不要以数字做为锚点 名称的开头。 锚点名称区别英文字母的大小写。 锚点名称间不能含有空格，也不能含有特殊字符。 2链接锚点 创建锚点后，还必须链接锚点。选择想要链接到锚点的文字或 图片，然后按如下方法中的任意一种进行操作。 在属性面板上的“Link”文本框中输入符号 # 和锚点名称。 选择文字或图片后，按住Shift键，然后拖动鼠标指向锚点。在属 性面板上的“Link”文本框中将自动出现符号#和该锚点的名称。 按住属性面板上的“Point to File（指向文件）”按钮，并拖动鼠标 指向锚点，属性面板上的“Link”文本框中自动出现符号 # 和该锚 点的名称。 在链接锚点时，应注意以下事项： 在#和锚点名之间不要留有空格，否则链接会失败。 在不同文件夹中为锚点创建链按时，其文件名后缀必定是“htm” ，而不能写成“html”，否则链接也会失败。 符号#必须是半角符号，而不能为全角符号。 7.1.4 创建电子邮件超链接 如果希望浏览者给你发E-mail时，只要浏览者单击E-mail链 接时，就会在浏览端自动打开浏览器默认的E-mail处理程序，收件 人的地址将会被E-mail超链接中的指定地址自动装入，无需浏览者 输入，就需要创建电子邮件链接。 创建电子邮件链接如下： 将光标置于网页中要添加E-mail链接的地方，或选中文字， 通过对象面板“Common”类上的“Insert Email Link”按钮，弹出 “Insert Email Link”对话框。如果未选中文字，可以在“Text”文本 框中添加所需文字；如果已经选中超链接文字，将会在“Text”文本 框中自动显示。然后在“E-mail”文本框中输入你的E-mail地址，单 击“OK”按钮，就可以了。 7.1.5 创建下载文件超链接 如果想让网站提供文件下载的功能，就必须建立下载文件超链 接。实现文件下载的功能很简单，只需加入连接到文件的超链接就 可以了。首先选择主窗口的菜单“Site”|“Site file”命令，打开站点 窗口，找到需要链接的目标文件。然后选择网页中需建立超链接的 文字，按下“Shift”键拖动鼠标到站点窗口中的目标文件。 7.1.6 创建空链接 空链接是一个未指定目标的链接，Dreamweaver 4.0的行为面 板中列出了许多行为，这些行为相当于使用JavaScript编写的程序 或函数，要想对文本设置行为，首先为文本建立空链接，这样行为 才有效。 为文本建立超链接时，只要先在文档窗口选定文本，然后在属 性面板中的“链接”栏中输入一个数值符“#”即可。建立空链接的目 的就是为了应用行为，其他情况下不必建立空链接。 7.2 创建超链接的其他方法 7.2.1利用HTML创建超链接 1页面链接 用HTML创建超链接需要使用A标记符（结束标记符不 能省略），它的最基本属性是href，用于指定超链接的目标。通 过为href指定不同的值，可以创建出不同类型的超链接。另外， 在和之间可以用任何可单击的对象作为超链接的源，例 如文字或图像。 例如： 外国的教师 节 2锚点链接 除了可以对不同页面或文件进行链接之外，用户还可以对同一网 页的不同部分进行链接。即建立锚点链接。 如果要设置锚点超链接，首先应为页面中需要跳转到的位置命 名。命名时应使用A标记符的name属性。 例如，可以在页面开始处用以下HTML语句进行标记： 目录 对页面进行标记之后，就可以用A标记符设置指向这些标记位置 的超链接。 返回目录 这样设置之后，当用户在浏览器中单击文字“返回目录”时，将显 示“目录”文字所在的页面部分。 3电子邮件链接 如果将href属性的取值指定为“mailto:电子邮件地址”，那么就可 以获得电子邮件链接的效果。例如： 作者邮箱 当浏览网页的用户单击了指向电子邮件的超链接后，系统将 自动启动邮件客户程序（对于安装了Windows 982000操作系统 的计算机，默认时启动Outlook Express），并将指定的邮件地址 填写到“收件人”栏中，用户可以编辑并发送该邮件。 7.2.2 利用FrontPage 2002创建超链接 用FrontPage 2002同样可以创建文本、图片、电子邮件和书签 等超链接。 1创建文本超链接 建立文本超链接的操作步骤如下： （1）在网页中选中要创建超级链接的文本； （2）单击工具栏中的“插入超链接”按钮，或选择“插入”|“超链接” 命令，弹出“插入超链接”对话框； （3）在“查找范围”下拉列表框中选择要链接的网页的位置； （4）在所显示的网页列表中选择要链接的网页文件； （5）单击“屏幕提示”按钮，弹出“设置超链接屏幕提示”对话框； （6）在“屏幕提示文字”文本框中输入在屏幕上显示的文本，在浏览 器中点击该超链接时将显示这些提示文字； （7）单击“确定”按钮，回到“插入超链接”对话框； （8）单击“确定”按钮，文本超链接完成。 2创建图片超级链接 具体操作步骤如下： （1）在网页中选择要创建超级链接的图片 ； （2）单击工具栏中的“插入超链接”按钮，打开“插入超链接”对话框； （3）在“查找范围”下拉列表中选择要链接的网页的位置； （4）在显示的网页列表中选择要链接的网页； （5）单击“屏幕提示”按钮，弹出“设置超链接屏幕提示”对话框； （6）在“屏幕提示文字”输入提示的文本； （7）单击“确定”按钮，回到“插入超链接”对话框； （8）单击“确定”按钮，图片超链接完成。 3创建电子邮件超链接 在FrontPage 2002中创建电子邮件超链接的具体方法如下： （1）选中要建立超链接的文本或图片，单击工具栏中的“插入超链接” 按钮，打开“插入超链接”对话框； （2）单击“电子邮件地址”选项，对话框变成图7.24所示； （3）在“要显示的文字”文本框中输入要显示的文字，在“电子邮件地 址”文本框中输入邮件地址，在“主题”文本框中输入主题； （4）单击“确定”按钮。 4创建书签超链接 书签即锚点。 （1）创建书签 在网页中创建书签的方法非常简单，可以执行以下的操作来实现 ： 将光标置于要插入书签处 选择“插入”|“书签”命令，弹出“书签”对话框； 在“书签名称”文本框中输入书签的名称； 单击“确定”按钮，书签创建完毕。 （2）使用书签创建链接 为书签创建超级链接可以执行以下的操作步骤。 选中要创建超级链接的文本； 单击工具栏中的“插入超链接”按钮，打开“插入超链接”对话框； 单击“书签”按钮，弹出“在文档中选择位置”对话框； 选择要链接的书签，单击“确定”按钮，回到“插入超链接”对话框； 单击“确定”按钮，完成书签的链接。 除了文本可以链接到书签外，图片也可以链接到书签。将图片 链接到