第六讲超级链接 当用户定义了一个 Dreamweaver站点 并创建了HML页面之后,一定希望在 各文档之间创建链接关系,以实现正 常的网站链接功能。 Dreamweaver系 统提供了多种方法创建超级链接,例 如:文字链接、图象链接、锚点链接 电子邮件(Emai)链接、插入 FLASH 对象、按钮的链接等等。下面介绍关 于网站链接的有关知识
第六讲 超级链接 当用户定义了一个Dreamweaver站点 并创建了HTML页面之后,一定希望在 各文档之间创建链接关系,以实现正 常的网站链接功能。Dreamweaver系 统提供了多种方法创建超级链接,例 如:文字链接、图象链接、锚点链接、 电子邮件(E-mail)链接、插入FLASH 对象、按钮的链接等等。下面介绍关 于网站链接的有关知识
主要内容 文档位置与路径 二、站点地图 绍使用 Dreamweaver m×创建 各种链接的方法(在介绍各种方法的 同时顺便举例说明) 四、测试链接(在浏览器中进行) 五、本节小结 作业
主要内容: 一、文档位置与路径 二、站点地图 三、介绍使用Dreamweaver MX创建 各种链接的方法(在介绍各种方法的 同时顺便举例说明) 四、测试链接(在浏览器中进行) 五、本节小结 六、作业
文档位置与路径 在创建链接之前首先应该了解链接 文档之间的的文件路径,因为链接的 目标是创建链接的基础。每一个Wb 页面都有一个唯一的地址,称做URL Uniform resource locator 是,当我们创建本地链接(链接文档 在同一站点中)时,一般不需要指定 链接文件的完全URL地址,而是指定 个相对的路径
文档位置与路径 在创建链接之前首先应该了解链接 文档之间的的文件路径,因为链接的 目标是创建链接的基础。每一个Web 页面都有一个唯一的地址,称做URL (Uniform Resource Locator)。但 是,当我们创建本地链接(链接文档 在同一站点中)时,一般不需要指定 链接文件的完全URL地址,而是指定 一个相对的路径
般常见的有3种链接路径: 」绝对路径:是包含服务器协议(对于大多数网页 来说是超文本传输协议:htp:/)开始到文档的 完全路径。例如: http://www.macromedia.com/support/dreamwe aver/contents. html 相对路径:是指在同一站点下的文档和当前文档 所在的文件夹相对的路径。例如: dreamweaver/contents. html 基于站点根目录相对路径:提供一个从站点根目 录文件夹开始到文档的路径。它使用“/”符号作 为前导符,它代表站点的根目录。例如: /support/dreamweaver/contents. html
一般常见的有3种链接路径: ◼ 绝对路径:是包含服务器协议(对于大多数网页 来说是超文本传输协议:http://)开始到文档的 完全路径。例如: http://www.macromedia.com/support/dreamwe aver/contents.html。 ◼ 相对路径:是指在同一站点下的文档和当前文档 所在的文件夹相对的路径。例如: dreamweaver/contents.html ◼ 基于站点根目录相对路径:提供一个从站点根目 录文件夹开始到文档的路径。它使用“/”符号作 为前导符,它代表站点的根目录。例如: /support/dreamweaver/contents.html
关于使用文档链接路径的几点说明: 1、如果链接文档在另一个服务器上,就必须使 用绝对路径。 2、如果插入一个远程服务器上的图像文件,也 必须使用绝对路径。而这样在文档中查看不到 插入图像的内容,必须通过浏览器进行预览 三使用基于站点根目录的路径使用“/为 如果链接文档在本地计算机的另一个站点 前导符 4、如果链接的各个文档在同一站点中,可以使 用相对路径。(重点掌握相对路径的表示)
关于使用文档链接路径的几点说明: 1、如果链接文档在另一个服务器上,就必须使 用绝对路径。 2、如果插入一个远程服务器上的图像文件,也 必须使用绝对路径。而这样在文档中查看不到 插入图像的内容,必须通过浏览器进行预览。 3、如果链接文档在本地计算机的另一个站点, 就必须使用基于站点根目录的路径使用“/”为 前导符。 4、如果链接的各个文档在同一站点中,可以使 用相对路径。(重点掌握相对路径的表示)
相对路径表示的特例 要链接同一目录下的文件,只输入文件名 就可以。 要链接当前文档目录的子 级)目录 中的文档,要提供子目录的名称,然后加 上“/",然后加上文件名。 要链接到当前文档目录的父(上一级)目 录中的文件,要在文件名之前加上“./ 其中“.”表示当前目录的上一级目录 下面来看一个例子,在本地机上创建了一个 站点,站点根文件夹是chm
相对路径表示的特例: ◼ 要链接同一目录下的文件,只输入文件名 就可以。 ◼ 要链接当前文档目录的子(下一级)目录 中的文档,要提供子目录的名称,然后加 上“/”,然后加上文件名。 ◼ 要链接到当前文档目录的父(上一级)目 录中的文件,要在文件名之前加上“../” , 其中“..”表示当前目录的上一级目录。 下面来看一个例子,在本地机上创建了一个 站点,站点根文件夹是chm
举例:如图所示 chm(站点根文件夹) 当前文 当前站点结构。 当前文档 support contents htm contents. htm ※ hours htm resources 站 tips. htm 点 结 product 构 catalog. htm ※ index htm(主页)
chm (站点根文件夹) index.htm (主页) support contents.htm hours.htm resources tips.htm catalog.htm 当前文 档 ※ 当 前 站 点 结 构 ※ 举例:如图所示 当前站点结构。 当前文档 contents.htm product
在上图中,要在当前文档 contents htm链接到其它的 文档上,有以下几种情况: 链接到 hours htm文件上,这两个文件位于同一目录 下,则文件名就是相对路径“ hours htm” 链接到 tips. htm文件上,该文件位于下一级子目录 resources”中,则相对路径为 resources/ tips. htm,“/”表示下降一个目录层级。 链接到 lindex. htm主页文件,该文件位于当前文档的 父目录中,则相对路径为:/ index htm,“./”表 示移动到上一级目录层级 链接到 catalog. htm,该文件位手当前文档的父目录 中的男外一个子目录中,相对路径 为:…/ products/ catalog. htm
在上图中,要在当前文档contents.htm链接到其它的 文档上,有以下几种情况: ➢ 链接到hours.htm文件上,这两个文件位于同一目录 下,则文件名就是相对路径“hours.htm” 。 ➢ 链接到tips.htm文件上,该文件位于下一级子目录 “resources”中,则相对路径为: resources/tips.htm, “/”表示下降一个目录层级。 ➢ 链接到index.htm主页文件,该文件位于当前文档的 父目录中,则相对路径为:../index.htm, “../”表 示移动到上一级目录层级。 ➢ 链接到catalog.htm,该文件位于当前文档的父目录 中的另外一个子目录中,相对路径 为: ../products/catalog.htm
站点地图 )、什么是站点地图? 定义:站点地图用于以链接图标视觉地图的形 式查看 Dreamweaver站点的本地文件夹; 注意:1、站点地图仅适用于本地站点 2、可以将站点地图保存为图像。 3、创建站点地图,先要设置主页 二)、如何使用站点地图 1、在站点地图中创建和修改链接 创建链接的方法 使用站点地图和“点到文件”图标链接文档
站点地图 一)、什么是站点地图? 定义:站点地图用于以链接图标视觉地图的形 式查看 Dreamweaver 站点的本地文件夹; 注意: 1、站点地图仅适用于本地站点。 2、可以将站点地图保存为图像。 3、创建站点地图,先要设置主页。 二)、如何使用站点地图 1、在站点地图中创建和修改链接 。 创建链接的方法: 使用站点地图和“点到文件”图标链接文档:
1)展开“站点”面板,然后通过按下“站点地 图”图标并选择“地图”和“文件”,同时 显示“站点文件”和“站点地图”视图。 2)在站点地图中选择一个HML文件。 3)在该文件旁边出现“点到文件”图标 4)拖动“点到文件”图标,并指向站点地图中 另一个文件,或者指向“站点文件”视图中 的某个本地文件 5)释放鼠标按钮。 6)名称为所链接文件名称的超文本链接被置于 所选HML文件的底部
1)展开“站点”面板,然后通过按下“站点地 图”图标并选择“地图”和“文件”,同时 显示“站点文件”和“站点地图”视图。 2)在站点地图中选择一个 HTML 文件。 3)在该文件旁边出现“点到文件”图标。 4)拖动“点到文件”图标,并指向站点地图中 另一个文件,或者指向“站点文件”视图中 的某个本地文件。 5)释放鼠标按钮。 6)名称为所链接文件名称的超文本链接被置于 所选 HTML 文件的底部