ch06-网页中超级链接的应用.pptx

1、Dreamweaver CS5网页设计与制 作基础教程 第6章 网页中超级链接的应用 6.1 认识超链接 6.1.1 什么是超链接 6.1.2 内部、外部与脚本链接 6.1.3 常见的超链接 6.1.1 什么是超链接 超链接由源端点和目标端点两部分组成，其中 设置了链接的一端称为源端点，跳转到的页面 或对象称为链接的目标端点，同样，可以说超 级链接是网页中最重要、最基本的元素之一。 6.1.2 内部、外部与脚本链接 内部超链接是指目标端点位于站点内部的超链 接。 外部超链接是指目标端点位于其他网站中，通 过它可跳转到其他网站的超链接。 脚本链接就是通过脚本控制链接。 6.1.3 常见的超链接

2、根据超级链接的链接路径，通常情况下将超级 链接分为三种： 一种是绝对URL超链接，也称为绝对路径。 第二种是相对URL的超链接，又称为相对路径。 第三种超链接为同一网页内的超链接。 6.2 关于链接路径 6.2.1 绝对路径 6.2.2 相对路径 6.2.3 根路径 6.2.1 绝对路径 绝对路径提供所链接文档的完整URL，而且包 括所使用的协议，例如： http:/ dreamweaver/contents.html就是一个绝对路 径。 6.2.2 相对路径 文档相对路径对于大多数Web站点的本地链接， 是最适用的路径，在当前文档与所链接的文档 处于同一文件夹内，而且可能保持这种状态的 情况

3、下，文档相对路径特别有用。 6.2.3 根路径 站点根目录相对路径提供从站点的根文件夹到 文档的路径，如果在处理使用多个服务器的大 型Web站点，或者在使用承载有多个不同站点 的服务器，则可能需要使用这些类型的路径， 如果不熟悉此类型的路径，最好坚持使用文档 相对路径。 6.3创建超级链接的方法 6.3.1使用【属性】面板创建链接 6.3.2使用指向文件图标创建链接 6.3.3使用菜单创建链接 6.3.1使用【属性】面板创建链接 首先，选择准备创建链接的对象，在菜单栏中， 选择【窗口】【属性】菜单项，在【属性】 面板【链接】后面的文本框中，输入准备链接 的路径，即可完成使用【属性】面板创建链接

4、 的操作。 6.3.2使用指向文件图标创建链接 首先，选择准备创建链接的对象，在菜单栏中， 选择【窗口】【属性】菜单项，在【属性】 面板中，单击【指向文件】按钮 ，单击并拖 动到站点窗口的目标文件上，释放鼠标左键即 可完成创建链接的操作。 6.3.3使用菜单创建链接 首先，选中准备创建链接的文本，选择【插入】 【超级链接】菜单项，弹出【超级链接】对 话框，在【链接】文本框中输入链接的目标， 或者单击【链接】文本框，选择相应的链接目 标，单击【确定】按钮，即可完成使用菜单创 建链接的操作。 6.4 创建各种类型的链接 6.4.1 创建文本超链接 6.4.2 图像热点链接 6.4.3 创建E-ma

5、il链接 6.4.4 创建锚记链接 6.4.5 创建空链接 6.4.6 创建脚本链接 6.4.1 创建文本超链接 启动Dreamweaver CS5，在菜单栏中，选择【文 件】【打开】菜单项，打开素材文件。 展开【属性】面板，在面板中，选择【链接】文 本框右侧的【浏览文件】按钮。 弹出【选择文件】对话框，选择准备插入的文件， 单击【确定】按钮。 保存文档，按下键盘上的【F12】键，即可在浏览 器中预览到网页的效果。 6.4.2 图像热点链接 首先，要选择准备插入的图像，然后在【属性】 面板中，选择【链接】文本框右侧的【浏览文 件】按钮 ，弹出【选择文件】对话框，选择 准备插入的图像，单击【确定

6、】按钮，保存文 档，按下键盘上的【F12】键，即可在浏览器 中预览到网页的效果。 6.4.3 创建E-mail链接 启动Dreamweaver CS5，在菜单栏中，选择【文件】【打开】 菜单项，打开素材文件。 将鼠标光标放置在页面准备插入E-mail链接的位置，在菜单栏 中，选择【插入】【电子邮件链接】菜单项。 弹出【电子邮件链接】对话框，在【文本】文本框中输入文本， 在【电子邮件】文本框中输入电子邮件，单击【确定】按钮。 保存文档，按下键盘上的【F12】键，即可在浏览器中预览到 网页的效果。 6.4.4 创建锚记链接 首先需要将鼠标光标定位于准备要插入锚记的 位置，在菜单栏中，选择【插入】【

7、命名锚 记】菜单项，弹出【命名锚记】对话框，在 【锚记名称】文本框中输入锚记的名称，单击 【确定】按钮，即可完成创建锚记的操作。 6.4.5 创建空链接 启动Dreamweaver CS5，在菜单栏中，选择 【文件】【打开】菜单项，打开素材文件。 选中准备添加链接的文本对象，在属性面板的 【链接】文本框中输入半角状态下的【#】。 按键盘上的【Enter】键，即可完成文本空链 接的创建。 6.4.6 创建脚本链接 启动Dreamweaver CS5，在菜单栏中，选择【文 件】【打开】菜单项，打开素材文件。 在【属性】面板的【链接】文本框中输入 “javascript：window.close()

8、”。 保存文档，按下键盘上的【F12】键，即可在浏览 器中预览到效果，单击【关闭】超文本链接，会 弹出提示对话框，单击【是】按钮，即可关闭网 页。 6.5管理超级链接 6.5.1自动更新链接 6.5.2在站点范围内更改链接 6.5.3检查站点中的链接错误 6.5.1自动更新链接 每当在本地站点内移动或重命名文档时， Dreamweaver都可更新起自以及指向该文档的 链接，在将整个站点（或其中完全独立的一个 部分）存储在本地磁盘上时，此项功能最适用， Dreamweaver不更改远程文件夹中的文件，除 非将这些本地文件放在或者存回到远程服务器 上。 6.5.2在站点范围内更改链接 启动Dreamweaver CS5，在【文件】面板中，在【本 地文件】区域中选择一个文件。 在菜单栏中，选择【站点】【改变站点范围的链接】 菜单项。 弹出【更改整个站点链接】对话框，在【变成新链接】 文本框中，输入准备准备链接的文件，单击【确定】 按钮，即可完成在站点范围内更改链接的操作。