《Dreamweaver 网页设计》第5章 超级链接

Dreamweaver网页设计 第5章超级链接

Dreamweaver 网页设计 第5章 超级链接

【学习概述】 正是由于超级链接的存在,才使得使用 网络资源如此的方便。可以说超级链接是 网络最具特色的功能,如果没有了超级链 接,也就没有了互连网络。本章介绍了超 级链接的基本知识和创建超级链接的基本 方法,管理超级链接、改变超级链接属性 和测试超级链接等内容。读者要注重熟习 基本概念,熟练基本操作

【学习概述】 正是由于超级链接的存在，才使得使用 网络资源如此的方便。可以说超级链接是 网络最具特色的功能，如果没有了超级链 接，也就没有了互连网络。本章介绍了超 级链接的基本知识和创建超级链接的基本 方法，管理超级链接、改变超级链接属性 和测试超级链接等内容。读者要注重熟习 基本概念，熟练基本操作

5.1〖课堂讲解】超级链接基本知识 511超级链接 超级链接是ⅥⅥ的魅力所在。超级链接简称链接。是指从 个网页到另一个网页对象的链接关系。为了把百万数量 级的 nternet站点上众多分散的网页联系起来,构成一个 整体,就必须在网页上加入链接。通过点击网页上的链接, 我们才能在信息的海洋中尽情遨游。链接并不仅仅是网 页与网页的链接,它还包括到图片、电子邮件、文档、媒 体等的链接 512超级链接的类型 网页中的超级链搖-般分为外部链接、内部链接、邮件链接 和锚点链接等四种类型。 内部链接:在同一个站点内部网页文档之间的链接。 外部链接:在不同网站网页文档之间的链接。 邮件链接:电子邮件链接。 锚点链接:同一网页或不同网页指定位置的链接

5.1 【课堂讲解】超级链接基本知识 5.1.1 超级链接 超级链接是WWW的魅力所在。超级链接简称链接。是指从 一个网页到另一个网页对象的链接关系。为了把百万数量 级的Internet站点上众多分散的网页联系起来，构成一个 整体，就必须在网页上加入链接。通过点击网页上的链接， 我们才能在信息的海洋中尽情遨游。 链接并不仅仅是网 页与网页的链接，它还包括到图片、电子邮件、文档、媒 体等的链接。 5.1.2 超级链接的类型 网页中的超级链接一般分为外部链接、内部链接、邮件链接 和锚点链接等四种类型。 内部链接：在同一个站点内部网页文档之间的链接。 外部链接：在不同网站网页文档之间的链接。 邮件链接：电子邮件链接。 锚点链接：同一网页或不同网页指定位置的链接

51.3路径 每个网页都有一个惟一的地址,称作统一资源定位器 URL)。链接路径一般有三种类型,分别为: 绝对路径 绝对路径提供所链接文档的完整URL地址,而且包括所使用 的协议类型,比如ht:/ WWsina. com cn,就是 对路径,所使用的协议类型是htp。ht协议是最常用的 种协议。其它还有fp:/ w.sohu. com. cn/也是一个绝 对路径,所使用的协议类型是fp。 使用绝对路径时要确保绝对路径有效,比如 http://xiaoxing.onlywindy.com/news/ist.asp?d=22当这个 URL地址不存在了,浏览器用户访问时就会报错。要链接 其它服务器上的文档,就必须使用绝对路径。尽管对本地 链接也可使用绝对路径链接,但强烈建议不要采用这种方 式,因为一日此站点变更域名或改变地址,则所有本地绝 对路径链接都将断开。对本地链接最好使用相对路径,以 提供更大的灵活性

5.1.3 路径 每个网页都有一个惟一的地址，称作统一资源定位器 （URL）。链接路径一般有三种类型，分别为： 绝对路径 绝对路径提供所链接文档的完整URL地址，而且包括所使用 的协议类型，比如http://www.sina.com.cn/，就是一个绝 对路径，所使用的协议类型是http。http协议是最常用的 一种协议。其它还有ftp://www.sohu.com.cn/也是一个绝 对路径，所使用的协议类型是ftp。 使用绝对路径时要确保绝对路径有效，比如 http://xiaoxing.onlywindy.com/news/list.asp?id=22当这个 URL地址不存在了，浏览器用户访问时就会报错。要链接 其它服务器上的文档，就必须使用绝对路径。尽管对本地 链接也可使用绝对路径链接，但强烈建议不要采用这种方 式，因为一旦此站点变更域名或改变地址，则所有本地绝 对路径链接都将断开。对本地链接最好使用相对路径，以 提供更大的灵活性

相对路径 相对路径是指省略掉对于当前文档和所链接的文档都相同的绝对URL部 分,而只提供不同的路径部分。比如E: leshoplindex. htm链接到 E: eshopbbslabout. html,可以把E: eshop去掉,只用 bbs labout htm。 假设一个站点的结构如下 a tupian.htm- al aboutus. htm al wenti. htm al yew.htm a index.hm1一 图5-1站点结构

相对路径 相对路径是指省略掉对于当前文档和所链接的文档都相同的绝对URL部 分，而只提供不同的路径部分。比如E:\eshop\index.html链接到 E:\eshop\bbs\about.html，可以把E:\eshop\去掉，只用 bbs\about.html。 假设一个站点的结构如下： 图5-1 站点结构

当要链接到与当前文档处于同一文件夹中的文档时,只需 输入文件名。比如要从 aboutus htm链接到 yew.htm 两个文件在同一文件夹“bm”中,且自录深度相同) 则其相对路径为yewu.htm。 当要链接到当前文档所在文件夹的子文件夹文档时:先要 有子文件夹名 后跟符号“P,在加文件名。比如要 从 index htm链接到 yew. htm(两个文件在同一文件夹 “ eshop”中, index htm处于父目录中,而 yew. htm处于 子目录bm中),则其相对路径为 bm/yew. htm 反过来,当要链接到当前文档所在文件夹的父文件夹的文 档时,在文档名前要加“。比如要从 yew. htm链接到 index html(两个文件在同一文件夹“ eshop”中 index htm处于父目录中,而 yew. htm处子子目录bm中), 其相对路径为./ index htm。 要链接到非同一目录的文档时,要先加“./”,后加文件 夹名再加链接到的文件名。比如要从 tupian. htm链接到 aboutus. htm(两个文件在不同的目录中, tupian. htm在 “abum”目录中, aboutus htm在“bm”目录中),则其 相对路径为./m/ aboutus. htm

• 当要链接到与当前文档处于同一文件夹中的文档时，只需 输入文件名。比如要从 aboutus.htm 链接到 yewu.htm （两个文件在同一文件夹“bm”中，且目录深度相同）， 则其相对路径为yewu.htm。 • 当要链接到当前文档所在文件夹的子文件夹文档时，先要 有子文件夹名称，然后跟符号“/”，在加文件名。比如要 从 index.html 链接到 yewu.htm（两个文件在同一文件夹 “eshop”中，index.html处于父目录中，而yewu.htm处于 子目录bm中），则其相对路径为bm/yewu.htm。 • 反过来，当要链接到当前文档所在文件夹的父文件夹的文 档时，在文档名前要加“../”。比如要从yewu.htm链接到 index.html（两个文件在同一文件夹“eshop”中， index.html处于父目录中，而yewu.htm处于子目录bm中）， 则其相对路径为../ index.html。 • 当要链接到非同一目录的文档时，要先加“../”，后加文件 夹名再加链接到的文件名。比如要从 tupian.htm 链接到 aboutus.htm（两个文件在不同的目录中，tupian.htm在 “album”目录中，aboutus.htm在“bm”目录中），则其 相对路径为../bm/ aboutus.htm

站点根目录相对路径 站点根目录相对路徐是指从站点的根文件夹到文档的路径 在处理使用多个服务器的Web站 或者在使用承载 有多个不同站点的服务器时,则可能考虑使用这种类型的 蝥径。不过,如果您不太熟悉此类型的路径,最好使用上 面提到的相对路径。 站点根目录相对路径以一个正斜杠“开始,该正斜杠表示 站点根文件夹。比如, inf/info. htm是文件的站点根目录 相对路径,该文件位于站点根文件夹的inf子文件夹中。 在某些Web站点中,需要经常在不同文件夹之间移动 HTML文件,在这种情况下,站点根目录相对路径通常是 指定链接的最佳方法。当移动貪有根目录相对链接的文档 时,不需要更改这些链接;当移动该HTML文件后,其相 关文件链接依然有效。 但是,如果移动或重命名根目录相对链接所链接的文档,即 使文档彼此之间的相对路径没有改变,仍必须更新这些链 例如,如果移动某个文件夹,则指向该文件夹中文件 所有稂目录相对链接都必须更新

站点根目录相对路径 站点根目录相对路径是指从站点的根文件夹到文档的路径。 当在处理使用多个服务器的 Web 站点，或者在使用承载 有多个不同站点的服务器时，则可能考虑使用这种类型的 路径。不过，如果您不太熟悉此类型的路径，最好使用上 面提到的相对路径。 站点根目录相对路径以一个正斜杠“/”开始，该正斜杠表示 站点根文件夹。比如，/inf/info.html 是文件的站点根目录 相对路径，该文件位于站点根文件夹的inf子文件夹中。 在某些 Web 站点中，需要经常在不同文件夹之间移动 HTML 文件，在这种情况下，站点根目录相对路径通常是 指定链接的最佳方法。当移动含有根目录相对链接的文档 时，不需要更改这些链接；当移动该HTML文件后，其相 关文件链接依然有效。 但是，如果移动或重命名根目录相对链接所链接的文档，即 使文档彼此之间的相对路径没有改变，仍必须更新这些链 接。例如，如果移动某个文件夹，则指向该文件夹中文件 的所有根目录相对链接都必须更新

52.1内部超级链接 创建内部超级链接的步骤如下。 (1)选择文字“首页”,然后执行【插入】->【超级链接】命令(如图 5-4所示),打开“超级链接”对话框,如图5-5所示。 文件q)编辑〔)查看)插入)修改)文本)命令C)站点)窗口 Hv插入常用布局表标签G) AA B ISem 图像①) CtrltAlt+I 起级链接 图像对象G) 媒体M index. html 文本:首页 图R表格 CtritAlttt F9. AL. 链接 取消 布局对象 校区规划图 目标 匚帮助⑩ 表单①) 自网二新校区 标题 超链接 访问键 命名锚记匪 CtrltAlttA Tab键索引 日期①) 服务器端包括〖) 注释c 图5-4应用菜单命令插入超级链接 图5-5“超级链接”对话框

5.2.1 内部超级链接 创建内部超级链接的步骤如下。 （1）选择文字“首页”，然后执行【插入】->【超级链接】命令（如图 5-4所示），打开“超级链接”对话框，如图5-5所示。 图5-4 应用菜单命令插入超级链接 图5-5 “超级链接”对话框

(2)单击“链接”项右边的文件夹图标,打开“选择文件”对话框,如 图5-6所示,选择所需的文件名“ index htm”,然后单击【确定】按 钮 选择文件 选取文件名自 ⊙文件系统 匚站点和服务器 ○数据源 查找范围):|daua 0分 Index. html 文件名Q): index,htn 确定 x件类型(r):所有文件(.*) 取消 ndex. html 「参数 E站点定义中更改默认的链接相对王 图5-6“选择文件”对话框

（2）单击“链接”项右边的文件夹图标，打开“选择文件”对话框，如 图5-6所示，选择所需的文件名“index.html”，然后单击【确定】按 钮。 图5-6 “选择文件”对话框

3)设置“超级链接”选项,内容如下 文本:输入要在文档中作为超级链接显示的文本,因为选中的是文字 首页”,所以文本项自动显示为“首 此项葆守默认设置。 链接:此项也可以直接输入要链接到的文件名,上面选择的文件是 “ index htn|”。 目标:本例中有4项,意义分别为: blank:单击链接,所链接的文件将在一个新的浏览器窗口中打开 parent:单击链接,将所链接的文件载入含有该链接的框架的父框架集 枣分黑細果包含链接的框架不是长套的,则链接文件加载到整 se:单击链接,将所链接的文件载入该链接所在的同一框架或窗口中 此目标是默认值。 top:单击链接,将所链接的文件载入整个浏览器窗口中,因而会删除 所有框架。 标题:超级链接的标题,本例为“学校首页” 访问键:输入键盘等价键,通常为一个字母,以便在浏览器中选择该 超级链接,本例为“a”。预览时,可以按快捷键【At+A】来选择它。 Tab键索引:输入Tab键顺序的编号,本例为“0

（3）设置“超级链接”选项，内容如下： 文本：输入要在文档中作为超级链接显示的文本，因为选中的是文字 “首页”，所以文本项自动显示为“首页”，此项保守默认设置。 链接：此项也可以直接输入要链接到的文件名，上面选择的文件是 “index.html”。 目标： 本例中有4项，意义分别为： _blank：单击链接，所链接的文件将在一个新的浏览器窗口中打开。 _parent：单击链接，将所链接的文件载入含有该链接的框架的父框架集 或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整 个浏览器窗口中。 _self：单击链接，将所链接的文件载入该链接所在的同一框架或窗口中。 此目标是默认值。 _top：单击链接，将所链接的文件载入整个浏览器窗口中，因而会删除 所有框架。 标题：超级链接的标题，本例为“学校首页”。 访问键：输入键盘等价键，通常为一个字母，以便在浏览器中选择该 超级链接，本例为“a”。预览时，可以按快捷键【Alt+A】来选择它。 Tab 键索引：输入 Tab 键顺序的编号，本例为“0