网页设计与制作 教学课件 作者 李广武张逸昀梁平 主编 第7章_超链接.pptVIP

尚辅网 尚辅网 尚辅网 第7章 超链接 尚辅网 第7章 超链接 7.1 超链接介绍 7.2 设置文件链接 7.3 设置邮件链接 7.4 设置锚记链接 7.5 设置热点链接 7.6 相对、绝对链接 7.7 超链接管理 7.8 本章小结 链接（也称为超链接）是网页的灵魂，也正是网络的魅力所在。为了把Internet上众多的网站和网页联系起来，构成一个有机的整体，就要在网页上加入链接。通过点击网页上的链接，我们才能在网络信息的海洋中尽情遨游。一个网站若是没有链接，就像一朵没有绿叶衬托的红花，平淡无味，功能尽失。恰当的链接可以使网站增加不少色彩。 尚辅网 7.1 超链接介绍 在Dreamweaver 中，一个文档中可以创建以下几种类型的链接： 文件链接：在同一站点或不同站点文档之间的链接。详细介绍请参见7.2节。 邮件链接：打开已填好E-mail地址的空白电子邮件的链接。详细介绍请参见7.3节。 锚记链接：同一网页或不同网页的指定位置的链接。详细介绍请参见7.4节。 热点链接：把一幅图像划分为几部分，或者说是热点，当热点被单击时就产生响应的动作，也就是链接跳转动作。详细介绍请参见7.5节。 7.1 超链接介绍 尚辅网 1、使用属性面版将文本、图像或对象链接到文档。具体操作步骤如下： （1）在“文档”窗口的“设计”视图中选中要建立链接的文本或图像。 （2）选择【修改】|【所选属性】菜单命令（其快捷键为【Ctrl+F3】），出现（选中要建立链接的若是文本，则如图7-1；若为图像，则如图7-2所示的）“所选属性”面板。 7.2.1 设置链接的方法 7.2 设置文件链接 尚辅网 （3）在面板中单击“链接(L)”文本框右侧的“文件夹”按钮 或选择【修改】|【创建链接】菜单命令（其快捷键为【Ctrl+L】），弹出如图所示的“选择文件”对话框。 若要链接到站点内的文档，请输入文档相对路径或站点根目录相对路径。若要链接到站点外的文档，请输入包含协议（如超文本传输协议http://）的完整的绝对路径。这种方法可用于输入尚未创建的文件的链接。 URL文本框中显示被链接文档的路径。 使用该对话框中的“相对于”下拉列表框，选择文档的路径表示方式，包括相对路径或根相对路径两种。 然后单击【确定】按钮。 7.2.1 设置链接的方法 7.2 设置文件链接 尚辅网 1、使用“插入电子邮件链接”命令创建电子邮件链接，具体操作步骤如下： （1）在“文档”窗口的“设计”视图中，将插入点放在您所要插入电子邮件链接的位置，或者选择要作为电子邮件链接出现的文本或图像。 （2）选择下列操作之一，插入该链接： 选择【插入】|【电子邮件链接】。 选择“插入”面板中的“常用”选项卡，然后单击【电子邮件链接】按钮 。出现“电子邮件链接”对话框，如图所示。 7.3.1 邮件链接介绍 7.3设置邮件链接 尚辅网 （3）完成此对话框的相关内容。 在“文本”域中，键入或编辑要在文档中作为电子邮件链接出现的文本。 在“电子邮件”域中，键入该邮件将发送到的电子邮件地址。 （4）单击【确定】按钮。 使用属性检查器创建电子邮件链接，请执行以下操作： （1）在“文档”窗口的“设计”视图中选择文本或图像。 （2）在属性检查器的“链接”文本框中，输入mailto：，后面紧跟电子邮件地址。 7.3.1 邮件链接介绍 7.3设置邮件链接 尚辅网 下面我们来看一个创建电子邮件链接的例子，操作步骤如下： 1、在“文档”窗口的“设计”视图中，输入E-mail：Georgia@。用鼠标选中所要创建邮件链接的文本“Georgia@ ”。 2、在属性检查器的“链接”文本框中，输入 mailto:Georgia@。如图所示。 3、按【F12】键在浏览器中预览该页面。单击这个链接后，系统自动调用默认的电子邮件服务程序。如图7-9所示。 7.3.2 制作邮件链接示例 7.3设置邮件链接 尚辅网 创建命名锚记链接的过程分为两个步骤：首先，要设置一个命名锚记，然后建立命名锚记的链接。 要创建命名锚记，请执行以下操作： （1）在“文档”窗口的“设计”视图中，将插入点放在需要创建命名锚记的地方。 （2）执行下列操作之一： 选择【插入】|【命名锚记】。 按Ctrl+Alt+A键。 在“插入”面板中选择“常用”选项卡，然后单击【命名锚记】按钮 。出现“命名锚记”对话框，如图所示。 单击【确定】按钮。锚记标记 在插入点处出现。 7.4.1 锚记介绍 7.4 设置锚记链接 尚辅网 下面我们来看一个在同一文档中创建锚记链接的例子，操作步骤如下： 1、将光标在锚的目标位置单击。在“插入” 面板中选择“常用”选项卡，然后单击【命名锚记】按钮 。出现“命名锚记”对话框。在“锚记名称”域中输入intro，单击【确