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