网页设计 第5章超级链接及使用 共九章ppt

创建锚点后，在锚点的插入处出现一个锚点标记， 如图5-1-17所示。
锚点标记
注意：
命名锚记名称只能包含字母和数字并且不能以 数字开头。
（3）创建到锚点的链接 1）选中所打开的文档中的“返回顶部”文字； 2）拖动属性面板中“链接(L)”右边的“指向文件”图 标“”至所创建的锚点标记即完成创建到该锚点的链 接。如图5-1-18所示。
2、 制作步骤 1 ）定义本书素材 source 目录下的文件夹 5-1-5 为本 地站点目录。 打开根目录下的 map.htm文件，选择“【窗口】→【 属性】”菜单命令，打开属性面板。如图5-1-20所示。
选中文档中的图片，属性面板出现相应的各项设 置。如图5-1-21所示。
选择“属性”面板中“地图（M）”下图标中的某 一形状，按住鼠标左键在图片中相应位置拖动即可建 立一个矩形的“热区”，在默认情况下，刚创建的热 区的“链接(L)”为“＃”，需要手动设置链接的目标 网址，同时也可设置“目标(R)”及“替代（T）”。如 图5-1-22所示。
2、相对地址 相对地址是由文件名及其扩展名组成的，并且假设 URL指向位于同一台WEB服务器上的文件。 例如，假设一个站点的结构如图5-1-1所示：
创建从booklist1.htm到其它文件的链接，如下所示 (1) 要从 booklist1.htm 链接到 booklist2.htm （两个 文件在同一文件夹中），文件名就是相对路径： booklist2.htm 或 ./booklist2.htm 。 其中 ./ 表示 在同一文件夹中。 (2) 若要链接到 book1.htm（在名为 book1 的子文 件夹中），可使用相对路径 book1/book1.htm。每 个正斜杠 (/) 表示在文件夹层次结构中下移一级。
l
5.1.3 实例：创建电子邮件链接
1、 实例创意 电子邮件链接在网页中也经常可见，在网页中添加 电子邮件的目的在于可以使网页的浏览者方便发送邮 件，点击电子邮件链接即可自动打开Microsoft Outlook Express，并自动创建新邮件，在“收件人” 栏自动添加电子邮件地址等。 2、 制作步骤 （ 1 ）定义本书素材 source 目录下的文件夹 5-1-3 为本地 站点目录。
有三种类型的链接路径： 1、 绝对地址 绝对路径由http://、ftp://等开始的，它不仅提 供所链接文档的完整 URL，而且包括所使用的协议（ 如对于 Web服务为http://，FTP服务为ftp://）。 注意： 尽管对本地链接（即到同一站点内文档的链接）也可 使用绝对路径链接，但不建议采用这种方式，因为一 旦将此站点移动到其它服务器，则所有本地绝对路径 链接都将断开。对本地链接使用相对路径还能在需要 在站点内移动文件时，提供更大的灵活性。
打开根目录下的about.htm文件，选择“【窗口】→【属 性】”菜单命令，打开属性面板，如图5-1-12所示。
（2）创建电子邮件链接 在大多数情况下，创建电子邮件链接在属性面板中完 成，也可以通过主菜单“【插入】→【电子邮件链接 (L) 】”来完成。我们分别以几种不同方式来完成电子 邮件链接的创建。 方法一： 选中所要创建电子邮件的文本“echo@” ，属 性面板的“链接 (L)”输入mailto:echo@即 可，如图5-1-13所示。
第5章 超级链接的使用
本章学习目标



掌握超级链接的作用及类型 掌握文本和图片链接的创建方法 掌握Email、锚点链接的创建方法 掌握热区链接的创建方法 掌握链接效果的编辑方法
5.1 创建超级链接
5.1.1 超级链接的作用及类型
超链接是文档与文档之间的链接，当单击它时， 超链接可指向另外一个页面或文件。链接目标通常是 另外一个网页，但也可以是一幅图片、一个电子邮件 地址或其他文档。 在浏览器中，超链接通常以带下划线的文本以及 特定的颜色区别于网页内的其他内容，当鼠标指向它 的时候，会变成手形，单击即可打开超链接。
(3) 若 要 链 接 到 index.html （ 在 父 文 件 夹 中 ， booklist1.htm 向 上 一 级 ） ， 可 使 用 相 对 路 径 ../index.htm。每个 ../ 表示在文件夹层次结构中上 移一级。 (4) 若要链接到 picture1.htm（在父文件夹的其它子 文 件 夹 中 ） ， 可 使 用 相 对 路 径 ../mypictures/picture1.htm。其中 ../ 向上移至父 文件夹； mypictures/ 向下移至 mypictures 子文件 夹中。
链接目标文件 方法二： 将鼠标光标定位于页面中的文字“关于本站”后，选 择主菜单“【插入】→【超级链接】”，弹出“超级链
接”对话框，输入相应内容，如图5-1-6所示。
在“超级链接”对话框中，设置以下选项： 文本：显示在页面中的文字。 链接：所要链接的目标文档。 目标：为打开的窗口类型（详见本例最后一段）。 标题：为鼠标置于链接文字上方时所出现的提示。 效果如图5-1-7所示。
5.1.2 实例：创建超级链接
1、实例创意 下面以实例制作一个简单网页，实例中只用到简单的 几个页面元素，主要有表格、文本和图片。各个文件 的文件名及位置如图5-1-2如示。
2．制作步骤 （ 1 ）定义本书素材 source 目录下的文件夹 5-1-2 为本地 站点目录。 （2）创建链接 创建超级链接有多种方法，本节将分别介绍几种不同 方式来完成超级链接的创建。 多数情况下，创建链接在【属性】面板中完成，也可以 通过主菜单“【插入】→【超级链接】”来完成。 打开根目录下的index.htm文件并选择“【窗口】→【 属性】”菜单命令，打开【属性】面板，如图5-1-3所 示。
方法三： 打开属性面板，选择“链接(L)”右边的“指向文件 ”图标“”，拖动该图标至站点目录下的 “learnlanguage.htm”文件，即可自动生成链接。如 图5-1-8所示。
“指向文件”图标
如果同时打开两个或以上编辑窗口，则只需将“指 向文件”图标直接拖动至目标窗口的任意位置即可自 动生成链接。如图5-1-9所示。
5.1.4 实例：创建锚点链接
1、 实例创意 锚点即为一个文档中的某一个特定的位置的标记， 通过首先创建锚点，可使某个超级链接链接到文档的 某个锚点，方便文档之间的跳转。 锚点通常放在文档的特定主题处或顶部。然后可以 创建到的链接的过程分为两步。首先，创建 锚点，然后创建到该锚点的链接。
3、站点根目录相对路径 站点根目录相对路径以一个正斜杠 (/) 开始，该正斜 杠 表 示 站 点 根 文 件 夹 。 例 如 ， /mybooks/ booklist1.htm 是文件 (booklist1.htm) 的站点根目 录相对路径，该文件位于站点根文件夹的 mybooks 子 文件夹中。 在某些 Web 站点中，需要经常在不同文件夹之间移 动 HTML 文件，在这种情况下，站点根目录相对路径 通常是指定链接的最佳方法。移动含有根目录相对链 接的文档时，不需要更改这些链接 。
2、 制作步骤 （ 1 ）定义本书素材 source 目录下的文件夹 5-1-4 为本 地站点目录。 打开根目录下的 traandwri.htm文件，选择“【窗口】→ 【属性】”菜单命令，打开属性面板。如图5-1-15所示
（2）创建锚点 将鼠标光标定位于页面中标题“翻译与写作”文 字之后，选择主菜单“【插入】→【命名锚记(N) 】” ，弹出“命名锚记”对话框，输入“命名锚记返回顶 部”文字后单击“确定”按钮，如图5-1-16所示。
“ 指向文件”图标指向 目标窗口任意位置
方法四： 打开属性面板，在“链接(L)” 直接输入链接地址 ，如要链接到站点内的其他文档，输入目标文件的具 体路径与文件名；要链接到站点以外的文档，则输入 完整 URL，而且包括所使用的协议。 例如，选中“index.htm”文档中的“logo.gif”图片 ，打开属性面板，在“链接(L)”直接输入 /index.asp，即可自动生成目 标指向网站下的index.asp文档 的链接。如图5-1-10所示。
直接输入 mailto:echo@
方法二： 将鼠标光标定位于页面中要显示电子邮件的地方， 选择主菜单“【插入】→【电子邮件链接(L) 】”，弹 出“电子邮件链接”对话框，输入相应内容后单击“ 确定”按钮，如图5-1-14所示。
“电子邮件链接”对话框中，设置以下选项： 文本。显示在页面中的文字，可以为Email地址 或其它文字。 E-mail。邮件地址。
在一个文档中可以创建几种类型的链接： 链接到其它文档或文件（如图形、影片、 PDF 或声音 文件）的链接。 命名锚记链接，此类链接跳转至文档内的特定位置。 电子邮件链接，此类链接新建一个收件人地址已经填 好的空白电子邮件。 空链接和脚本链接，此类链接使您能够在对象上附加 行为，或者创建执行 JavaScript 代码的链接。 注意：创建链接之前，一定要清楚文档相对路径、站点根 目录相对路径以及绝对路径的工作方式。
直接输入：about.htm#aboutme
5.1.5 实例：创建热区链接
1、 实例创意
一张图片内可以创建包含多个链接，图像内不同的 区域或文字都可以指向具体链接目标。图像图内创建 链接的区域称为“热区”，热区与链接目标逐一对应 ，单击热区后，即可对链接目标进行跟踪、访问。 热区的形状有三种：矩形、圆形与多边形，在 Dreamweaver MX 2004的“设计视图”模式下，这些热 区是可见的，但在WEB浏览内这些边框却是不可见的， 因此有必要在图像地图内添加一些文本标识，为浏览 者了解热点的确切位置提供帮助。
方法一： 选择页面上方文字“语言学习”，然后单击属性面 板上“链接”文本框右侧的文件夹图标，弹出“选择 文件”对话框，选择“ learnlanguage.htm” 文件，在 对话框“相对于”中选择“文档”，单击“确定”按 钮关闭对话框，如图5-1-4所示。
默认为“文挡 ”