21世纪高等院校规划教材：《网页设计与制作实用技术》课程配套电子教案（PPT教学课件）第六章 在网页中使用超链接

第6章在网页中使用超链接 通过本章学习,应该掌握以下内容: 1.认识超链接 2.利用 Dreamweaver mX刨建各种超连接 的方法 3.利用 Dreamweaver mX编辑各种超连接 的方法 4.利用HTML创建、编辑超链接的方法 5.利用站点地图管理超链接的方法

通过本章学习，应该掌握以下内容： 1. 认识超链接 2. 利用Dreamweaver MX创建各种超连接 的方法 3. 利用Dreamweaver MX编辑各种超连接 的方法 4. 利用HTML创建、编辑超链接的方法 5. 利用站点地图管理超链接的方法 第6章 在网页中使用超链接

61利用 Dreamweaver mX处理超链接 61.1超链接简介 1.什么是超链接 所谓的超链接是指从一个网页指向一个目标的连 接关系,这个目标可以是另一个网页,也可以是相同 网页上的不同位置,还可以是一个图片、一个电子邮 件地址、一个文件,甚至是一个应用程序。而在一个 网页中用来超链接的对象,可以是一段文本或者是 个图片。当浏览者单击已经链接的文字或图片后,链 接目标将显示在浏览器上,并且根据目标的类型来扌 开或运行

6.1 利用Dreamweaver MX处理超链接 6.1.1 超链接简介 1．什么是超链接 所谓的超链接是指从一个网页指向一个目标的连 接关系，这个目标可以是另一个网页，也可以是相同 网页上的不同位置，还可以是一个图片、一个电子邮 件地址、一个文件，甚至是一个应用程序。而在一个 网页中用来超链接的对象，可以是一段文本或者是一 个图片。当浏览者单击已经链接的文字或图片后，链 接目标将显示在浏览器上，并且根据目标的类型来打 开或运行

按照链接路径的不同,网页中超链接一般分为 以下3种类型: 内部链接:即在同一个站点内的不同页面之间相互联 系的超链接。 锚点链接:可以链接到网页中某个特定位置的链接。 外部链接:把网页与 Internet中的目标相联系的链接 如果按照使用对象的不同,网页中的链接又可以分 为:文本超链接、图像超链接、E-mai链接、锚点链 接、多媒体文件链接、空链接等

按照链接路径的不同，网页中超链接一般分为 以下3种类型： 内部链接：即在同一个站点内的不同页面之间相互联 系的超链接。 锚点链接：可以链接到网页中某个特定位置的链接。 外部链接：把网页与Internet中的目标相联系的链接。 如果按照使用对象的不同，网页中的链接又可以分 为：文本超链接、图像超链接、E-mail链接、锚点链 接、多媒体文件链接、空链接等

2.合理安排超链接 合理安排超链接在网页的制作中是非常重要的。 采用什么结构的链接会直接影响到网页的布局。建 议 避免孤立文件的存在 在网页中避免使用过多的超链接 网页中的超链接不要超过4层 页面较长时可以使用书签 设置主页或上一层的链接

合理安排超链接在网页的制作中是非常重要的。 采用什么结构的链接会直接影响到网页的布局。建 议 ： • 避免孤立文件的存在 • 在网页中避免使用过多的超链接 • 网页中的超链接不要超过4层 • 页面较长时可以使用书签 • 设置主页或上一层的链接 2．合理安排超链接

3.文档路径类型 在一个网站中,有绝对路径、和根目录相对路 径以及和文档相对路径3种类型的文档路径。 绝对路径:是包含服务器协议(对于网页来说 通常是http:/或ftp:/1)的完全路径 和根目录相对的路径:是从当前站点的根目录开 始的路径。站点上所有可公开的文件都存放在站点 的根目录下 和文档相对的路径:是指和当前文档所在的文件 夹相对的路径

3．文档路径类型 在一个网站中，有绝对路径、和根目录相对路 径以及和文档相对路径3种类型的文档路径。 绝对路径：是包含服务器协议（对于网页来说 通常是http://或ftp://）的完全路径。 和根目录相对的路径：是从当前站点的根目录开 始的路径。站点上所有可公开的文件都存放在站点 的根目录下。 和文档相对的路径：是指和当前文档所在的文件 夹相对的路径

612创建文本超链接 1.建立文本超链接 在浏览网页时,鼠标指针经过某些文本时,指 针的形状发生变化,同时文本也会发生变化(如出 现下划线、文本的颜色发生变化、字体发生变化 等),提示这是带链接的文本。此时点击鼠标,就 会打开所链接的网页,这就是文本超链接

6.1.2 创建文本超链接 1．建立文本超链接 在浏览网页时，鼠标指针经过某些文本时，指 针的形状发生变化，同时文本也会发生变化（如出 现下划线、文本的颜色发生变化、字体发生变化 等），提示这是带链接的文本。此时点击鼠标，就 会打开所链接的网页，这就是文本超链接

在 Dreamweaver mXI中创建文本超链接的步骤为: (1)在网页上选择需要添加超链接的文本,打开文本 的属性面板。 (2)在属性面板上指定文字的链接目标。 (3)在“目标”下拉列表框中选择目标文件打开的方 式 设置结束后,在网页中被选择的文字改变了颜色 且在文字底部出现一条下划线,即文字的超链接设置 完成。在键盘上按“F12”键,即可将网页在浏览器中 打开。单击链接的文字,即可打开目标文件

在Dreamweaver MX中创建文本超链接的步骤为： （1）在网页上选择需要添加超链接的文本，打开文本 的属性面板。 （2）在属性面板上指定文字的链接目标。 （3）在“目标”下拉列表框中选择目标文件打开的方 式。 设置结束后，在网页中被选择的文字改变了颜色， 且在文字底部出现一条下划线，即文字的超链接设置 完成。在键盘上按“F12”键，即可将网页在浏览器中 打开。单击链接的文字，即可打开目标文件

2.编辑文本超链接 (1)设置文本链接的状态 个未被访问过的链接与一个被激活的链接 在形式上肯定会有所区别,链接被访问过了也会 发生变化,提示用户这是一个已经点击过的链接, 所有这些都是链接的状态。通过设置不同的文本 颜色可以使各个状态区别开来

2．编辑文本超链接 （1）设置文本链接的状态 一个未被访问过的链接与一个被激活的链接 在形式上肯定会有所区别，链接被访问过了也会 发生变化，提示用户这是一个已经点击过的链接， 所有这些都是链接的状态。通过设置不同的文本 颜色可以使各个状态区别开来

(2)删除文本超链接 在 Dreamweaver MX中要删除一个文本超链接 很容易,先用鼠标选定文本对象,将光标定位于 属性面板的“链接”文本框中,用“ BackSpace” 键或“ Delete”键,将其显示的超链接对象文件名 删除,再回车,或选择“修改”|“移除链接”命 令,都可以删除超链接而保留原文本对象

（2）删除文本超链接 在Dreamweaver MX中要删除一个文本超链接 很容易，先用鼠标选定文本对象，将光标定位于 属性面板的“链接”文本框中，用“BackSpace” 键或“Delete”键，将其显示的超链接对象文件名 删除，再回车，或选择“修改”|“移除链接”命 令，都可以删除超链接而保留原文本对象

61.3创建图像超链接 1.创建图像超链接 给图像添加链接,使其指向其他的网页或者文 档,就是图像超链接。 (1)选中需要建立超链接的图像,此时属性面板显 示图像的属性 (2)在属性面板中为图像添加文档相对路径的链接。 (3)按“F12”预览网页。 2.删除图像超链接 删除图片超链接与删除文本超链接的方法相同

1．创建图像超链接 6.1.3 创建图像超链接 给图像添加链接，使其指向其他的网页或者文 档，就是图像超链接。 （1）选中需要建立超链接的图像，此时属性面板显 示图像的属性 。 （2）在属性面板中为图像添加文档相对路径的链接。 （3）按“F12”预览网页。 2．删除图像超链接 删除图片超链接与删除文本超链接的方法相同