网页设计与制作 教师姓名： 职务：.

Presentation on theme: "网页设计与制作 教师姓名： 职务：."— Presentation transcript:

1 网页设计与制作 教师姓名： 职务：

2 第7章 　创建网页超级链接 ——“网站地图”页面

3 本章知识点 规划网站页面超级链接（7.1节） 创建一般超级链接（7.2.1节） 创建E-mail链接（7.2.2节）
创建文件下载链接（7.2.3节） 创建锚记链接（7.2..4节） 设置链接的打开位置（7.3节）

4 本章导读 本章通过为“洋洋书店”网站制作“网站地图”页面介绍如何制作创建网页超级链接，“网站地图”页面的效果如图7-1所示。通过本章的学习，读者应学会建立文本、图像及电子邮件形式的超链接，设置超链接的相关属性，使用热点的方法；利用超链接组织网站结构的技巧。

5 本章导读 如图 “网站地图”页面的效果

6 思路剖析及制作流程 网站地图其实是一个罗列网页链接的列表，为搜索引擎提供“路标”。网站地图通常会根据网站的规模大小及页面数量的多少列举网站中的主要网页或主要栏目的链接。有的网站地图是列举网站上所有的超链接，这样可以让搜索引擎访问到所有的页面，但对于大型的网站来说，这会给网页的更新维护带来麻烦。 “洋洋书店”网站涉及的图书种类较多，相应的网页数量也非常多，如果列举网站上所有的超链接会比较困难，所以该网站的网站地图仅链接一些主要的栏目页面。

7 7.1 规划“网站地图”页面超级链接 什么是URL 绝对路径 相对于文档的路径 相对于站点根的路径
7.1 规划“网站地图”页面超级链接 什么是URL 绝对路径 相对于文档的路径 相对于站点根的路径 “洋洋书店”网站各栏目页面及图书主要分类页面相对地址对应表，如表7-1所示

8 表7-1 “洋洋书店”网站各栏目页面及图书主要分类页面相对地址对应表
7.1 规划“网站地图”页面超级链接 表7-1 “洋洋书店”网站各栏目页面及图书主要分类页面相对地址对应表 网页文件名称 网页文件内容 网页存放地址（相对于站点根目录） 站点根目录下的文件 index.html 本站信息（也是本站首页） haoshu.html 好书热评 zhandianmap.html 站点地图 new_book.html 新书快递 diaocha.html 客户调查表 tejibook.html 特级图书 book.html 图书宣传 liuyan.html 客户留言 站点根目录下down文件夹中的下载文件 diaocha.doc 供下载的客户调查表word文档 down\diaocha.doc

9 7.1 规划“网站地图”页面超级链接 网页文件名称 网页文件内容 网页存放地址（相对于站点根目录） 站点根目录下web文件夹中的文件
7.1 规划“网站地图”页面超级链接 网页文件名称 网页文件内容 网页存放地址（相对于站点根目录） 站点根目录下web文件夹中的文件 mohuan.html 魔幻类图书 web\mohuan.html xiaoshuo.html 小说类图书 web\xiaoshuo.html wenxue.html 文学类图书 web\wenxue.html zhuanji.html 传记类图书 web\zhuanji.html shishang.html 时尚类图书 web\shishang.html luyou.html 旅游类图书 web\luyou.html jiaju.html 家居类图书 web\jiaju.html shipu.html 食谱类图书 web\shipu.html guanli.html 管理类图书 web\guanli.html jingji.html 经济类图书 web\jingji.html sheke.html 社科类图书 web\sheke.html diannao.html 电脑类图书 web\diannao.html jiaocai.html 教材类图书 web\jiaocai.html jiaofu.html 教辅类图书 web\jiaofu.html waiyu.html 外语类图书 web\waiyu.html kaoshi.html 考试类图书 web\kaoshi.html

10 7.1 规划“网站地图”页面超级链接 设计页面超级链接时，先要对网站地图页面中用到的超级链接做好整体规划，确定所采用的超级链接方式。
7.1 规划“网站地图”页面超级链接 设计页面超级链接时，先要对网站地图页面中用到的超级链接做好整体规划，确定所采用的超级链接方式。 要正确创建链接，必须了解链接与被链接文档之间的路径。每个网页都有一个惟一的地址，称为统一资源定位符（URL）。URL是Uniform Resource Location的缩写，译为“统一资源定位符”，是Internet上用来描述网络信息资源地址的字符串。 URL的格式由下列3部分组成，如图7-2所示。 ① 协议（或称为服务方式）。 ② 存有该资源的主机IP地址（ ）（有时也包括端口号）或主机域名。 主机资源的具体地址，如目录和文件名等。 当创建内部链接（同一站点内一个文档向另一个文档之间的链接）时，一般不会指定被链接文档的完整URL，而是指定一个相对于当前文档或站点根文件夹的相对路径。

11 7.1 规划“网站地图”页面超级链接 图7-2 URL组成

12 7.1 规划“网站地图”页面超级链接 绝对路径就是被链接文档的完整URL，包括所使用的传输协议（对于网页通常是

13 7.1 规划“网站地图”页面超级链接 图7-3 设置绝对路径

14 7.1 规划“网站地图”页面超级链接 如果网页图片中使用了本地计算机中的绝对路径链接，例如，链接“file://D:/洋洋网上书店/mysite/image/S2.jpg”使用的就是本地计算机中的绝对路径，这样的路径在本地计算机中可以正常显示图像。但当把网页上传到网站服务器上后，却不能正常显示，是因为服务器将该网页和图像重新分配的存放空间可能在其他目录中，比如在C盘或D盘中。这时就必须使用下面要讲到的相对路径了。在绝对路径中，如果目标文件被移动，则链接同时不可用。 ② 相对于文档的路径。 相对于文档的路径是指以当前文档所在位置为起点到被链接文档经由的路径。这是用于本地链接的最适宜的路径。例如，Dreamweaver/main.html就是一个文档的相对路径。当要把当前文档与处在相同文件夹中的另一文档链接，或把同一网站下不同文件夹中的文档相互链接时，就可以使用相对路径。

15 7.1 规划“网站地图”页面超级链接 使用Dreamweaver 8.0可以轻易地选择文档路径的类型来建立链接，如图7-4所示。
7.1 规划“网站地图”页面超级链接 使用Dreamweaver 8.0可以轻易地选择文档路径的类型来建立链接，如图7-4所示。 图7-4 设置相对路径

16 7.1 规划“网站地图”页面超级链接 相对于站点根的路径。 相对于站点根的路径会造成在链接时不能正常显示，不建议使用此路径表示方式。
7.1 规划“网站地图”页面超级链接 相对于站点根的路径。 相对于站点根的路径会造成在链接时不能正常显示，不建议使用此路径表示方式。 “洋洋书店”网站的站点结构采用树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面，立体结构看起来就像蒲公英，这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会“迷路”。由于该网站要在本地计算机上进行设计和测试，在网站文件上传到服务器上之前，不能清楚了解该网站在服务器上的具体路径，因此本网站所有的内部网页之间的链接采用相对于本文档的相对路径的形式。 现在按照本书第2章中对“洋洋书店”网站所规划的网站总体结构及目录结构，列出本网站地图中所涉及的所有网页的文件名称、网页内容及相对于本站点根目录路径地址的对应列表。如表7-1所示。

17 7.2 创建“网站地图”页面超级链接 创建一般超级链接 创建 链接 创建文件下载链接 创建锚记链接

18 7.2 创建“网站地图”页面超级链接 链接在建设网站时非常重要，它把众多网页构成了一个有机的整体，用户可以通过单击链接访问相关的资料、信息等。所以很有必要了解链接的概念，并熟练掌握链接的应用。 在 Dreamweaver 8.0中，可以为文本、图像、多媒体对象创建如下类型的链接。 l内部链接：在同一个网站中文档之间的链接。 l外部链接：不同网站文档之间的链接。 l锚点链接：同一网页或不同网页的指定位置的链接。 l 链接：打开填写电子邮件表格的链接。 其中，以内部链接和外部链接最为常用。例如，如图7-5所示，项目一指向web02.html文件，因此它是一个外部链接。

19 7.2 创建“网站地图”页面超级链接 图 外部链接

20 7.2.1　创建一般超级链接 在规划了”洋洋书店”“网站地图”页面的超级链接，并了解了网页元素地址的绝对路径和相对路径之后，我们开始着手创建“网站地图”页面的超级链接。 上机任务：使用Dreamweaver8.0 创建洋洋网上书店“站点地图”页面的一般超级链接。 （1）启动Dreamweaver 8.0，打开已经创建好的“站点地图”的空百页面。 （2）创建除主体内容区外其他区域设置跟“本站信息”页面相同的页面设置，如图7-6所示。

21 7.2.1　创建一般超级链接 图7-6 “洋洋书店”“网站地图”初始页面

22 7.2.1 创建一般超级链接 （3）把光标定位在主体内容区，插入本站的站点地图（即本书第2章中设计的总体结构图），如图7-7所示。
7.2.1　创建一般超级链接 （3）把光标定位在主体内容区，插入本站的站点地图（即本书第2章中设计的总体结构图），如图7-7所示。 图 插入本站站点地图

23 7.2.1 创建一般超级链接 （4）用鼠标选择选择需要创建超级链接的文本，如选择页面导航栏中的“本站信息”字样，如图7-8所示。
7.2.1　创建一般超级链接 （4）用鼠标选择选择需要创建超级链接的文本，如选择页面导航栏中的“本站信息”字样，如图7-8所示。 图7-8 选择要创建超级链接的文本

24 7.2.1 创建一般超级链接 （5）为该文本创建超链接有两种方法。
7.2.1　创建一般超级链接 （5）为该文本创建超链接有两种方法。 第1种是在Dreamweaver8.0工作界面“属性”面板的“链接”文本框中输入该文本要跳转的文件的绝对路径或相对路径。如在这里我们输入跳转到的文件的相对路径“index.html”，如图7-9所示。 图 输入链接地址 注意：如果该文本要跳转到Internet上的其他网站网页中，则在这里要输入目的网页的绝对路径。例如，要跳转到搜狐网站的首页，我们要在这里输入“

25 7.2.1　创建一般超级链接 或者单击“属性”面板的“链接”文本框右边的图标 ，在弹出的“选择文件”对话框中选择所要链接的文件“index.html”，如图7-10所示。 图7-10 选择要链接的文件

26 7.2.1 创建一般超级链接 单击“确定”按钮即可创建该文本的超级链接。
7.2.1　创建一般超级链接 单击“确定”按钮即可创建该文本的超级链接。 第2种是在Dreamweaver 8.0工作界面的菜单栏中，执行“插入/超级链接”命令，在弹出的“超级链接”对话框中的“链接”文本框中输入要创建的链接地址“index.html”，如图7-11所示。 图 设置“超级链接”对话框内容

27 7.2.1　创建一般超级链接 或者单击“超级链接”对话框中的“链接”文本框右边的图标 ，在弹出的“选择文件”对话框中选择所要链接的文件“index.html”，如图7-12所示。 图7-12 选择要链接的文件

28 7.2.1 创建一般超级链接 单击“确定”按钮即可创建该文本的超级链接。
7.2.1　创建一般超级链接 单击“确定”按钮即可创建该文本的超级链接。 第3种是单击“插入栏”面板“常用”类别中的“超级链接”按钮 ，如图7-13所示，在弹出的“选择文件”对话框中选择所要链接的文件“index.html”。如上图7-12所示一样设置，最后单击“确定”按钮完成该文本超级链接的创建。 图 “常用”类别中的“超级链接”按钮 （6）以同样的方式创建该“网站地图”页面“导航栏”中其他文本的超级链接。 接下来，我们来创建该页面中“网站地图”图片上各部分区域的超链接。 上机任务：使用Dreamweaver 8.0在图片中部分区域创建超链接。

29 7.2.1　创建一般超级链接 (1) 单击Dreamweaver 8.0 工作界面中“插入栏”面板“常用”类别中“图像”按钮 旁的小三角按钮 ，如图7-14所示。 图7-14 “图像”按钮 （2）在弹出的下拉列表中选择“绘制矩形热点”选项，如图7-15所示。 图 选择“绘制矩形热点”命令

30 7.2.1　创建一般超级链接 （3）在“文档窗口”该页面的图像上按住鼠标左键不放，拖曳鼠标在创建超级链接的图像区域画出一块儿矩形区域。如选择页面图像中标有“本站信息”字样的那块区域，如图7-16所示。 图 在图像上选择矩形热点区域

31 7.2.1　创建一般超级链接 （4）松开鼠标，该矩形区域被一层半透明的蓝色色块覆盖，我们称之为图像“热点区域”，然后使用上面介绍的两种创建一般超级链接的方法，为该区域创建超级链接“index.html”，如图7-17所示。 （5）以同样的方式创建该“网站地图”页面图像中其他区域的超级链接。

32 7.2.1　创建一般超级链接 图7-17 为热点区域创建超级链接

33 7.2.2　创建 链接 在网页上创建电子邮件链接，以便用户反馈意见。当浏览者单击Internet上网页中的电子邮件链接时，可以打开浏览器默认的电子邮件处理程序，该电子邮件处理程序中的收件人邮件地址随着网页上电子邮件链接中指定的地址自动更新，无需浏览者手动输入。 为方便用户反馈意见，现在我们在“网站地图”页面中创建 链接。 上机任务：使用Dreamweaver 8.0在“网站地图”页面中创建 链接。 首先，在该“网站地图”页面中“网站地图”图片下插入一个表格，如图7-18所示，用于放置本网上书店的联系方式。

34 7.2.2　创建 链接 图 创建放置网上书店“联系方式” 的表格

35 7.2.2 创建E-mail链接 1. 使用插入邮件链接命令创建电子邮件链接
（2）选择“插入/电子邮件链接”命令或者单击“插入”栏面板“常用”类别中的“插入电子邮件链接”按钮 ，如图7-19所示。 图 ”插入电子邮件链接“按钮 （3）在“电子邮件链接”对话框的“文本”输入框中输入

36 7.2.2 创建E-mail链接 （4）单击“确定”按钮，完成电子邮件链接的创建。 2. 使用“属性”面板创建电子邮件链接
图 输入邮件地址 （4）单击“确定”按钮，完成电子邮件链接的创建。 2. 使用“属性”面板创建电子邮件链接 使用“属性”面板创建电子邮件链接，操作步骤如下。

37 7.2.2　创建 链接 图 用“属性”面板创建电子邮件链接

38 7.2.3 创建文件下载链接 超链接的对象，可以是文字、图片或动画，也可以是整张网页、多媒体文件或者是其他的对象。
7.2.3　创建文件下载链接 超链接的对象，可以是文字、图片或动画，也可以是整张网页、多媒体文件或者是其他的对象。 创建文件下载链接同本章7.2.1节所讲的创建一般超级链接的操作一样，在“文档”窗口中选择要创建文件下载链接的文本或图像，在这里我们选择“网站地图”图像中含有“表格下载”字样的矩形区域，并在其上设置热点区域，然后使用“属性”面板或执行“插入/超级链接”命令，使用 图标打开“选择文件”对话框，在里面选择要提供下载的文件，单击“确定”按钮即可完成该文件下载链接的设置。 需要说明的是，如果要提供文件下载，那么该超级链接所链接的文件必须是可执行文件。简单点说就是像word文档.doc、压缩文件.rar、后缀名为.exe等的文件。

39 7.2.4　创建锚记链接 创建命名锚记（简称锚点）就是在文档中设置位置标记，并给该位置一个名称，以便引用。通过创建锚点，可以使链接指向当前文档或不同文档中的指定位置。锚点常常被用来跳转到特定的主题或文档的顶部。 创建锚记链接，首先要设置一个命名锚记，然后建立到命名锚记的链接。 1. 设置命名锚记 上机任务：使用Dreamweaver 8.0在“网站地图”页面中设置命名锚记。 （1）在“文档”窗口中，选择要为其创建链接的文本或图像，这里我们选择本站Logo图片。

40 7.2.4　创建锚记链接 （2）执行“插入/命名锚记”命令，或者在“插入栏”的“常用”类别中单击“命名锚记”按钮 ，创建一个“命名锚记”，如图7-22所示。 图 创建“命名锚记”

41 7.2.4 创建锚记链接 （3）系统弹出“命名锚记”对话框，在“锚记名称”文本框中输入创建的命名锚记的名称“top”，如图7-23所示。
7.2.4　创建锚记链接 （3）系统弹出“命名锚记”对话框，在“锚记名称”文本框中输入创建的命名锚记的名称“top”，如图7-23所示。 图 插入命名锚记 注意：如果“命名锚记”没有出现在插入点，可执行“查看/可视化助理/不可见元素”命令查看。 2. 创建命名锚记链接 上机任务：使用Dreamweaver 8.0在“网站地图”页面中创建命名锚记链接。

42 7.2.4 创建锚记链接 （1）在“文档”窗口中，选择要为其创建链接的文本或图像，这里我们选择“联系方式”表格中的“回顶部”字样文本。
7.2.4　创建锚记链接 （1）在“文档”窗口中，选择要为其创建链接的文本或图像，这里我们选择“联系方式”表格中的“回顶部”字样文本。 （2）在“属性”面板的“链接”文本框中，键入一个数字符号 (#) 和锚记名称。例如若要链接到当前文档中的名为top的锚记，键入“#top”；若要链接到同一文件夹内其他文档如“wendang.html ”中的名为 top 的锚记，键入“wendang.html#top”，如图7-24所示。 注意：锚记名称区分大小写。 图7-24 同一文件夹不同文档的链接

43 7.3　设置链接的打开位置 如果在文档中使用有框架，在“目标”下拉列表框中可以看到与框架有关的链接。在默认情况下，被链接文档打开在当前窗口或框架中。要使被链接的文档显示在其他窗口或框架，需要从“属性”面板的“目标”弹出菜单上选择一个选项，如图7-25所示。 图7-25 选择被链接文档的载入位置

44 7.3　设置链接的打开位置 l_blank：将链接的文件载入一个未命名的新浏览器窗口中。一般用于在新的窗口中打开链接，是网页中最常见的链接方式。 l_parent：将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。一般是要在同一窗口切换。 l_self：将链接的文件载入该链接所在的同一框架或窗口中。此目标是默认的，所以通常不需要指定它。单击链接后，地址栏不变。 l_top：将链接的文件载入整个浏览器窗口中，因而会删除所有框架。 l框架名称的链接：可以控制链接的目标指向哪一个框架。读者可以从下拉菜单中选择，也可以直接输入某个框架的名称，比如mainFrame。

45 7.4　上机实践 1．创建一般超级链接 要求：创建“洋洋书店”网站导航栏其他项目的链接，如图7-26所示。导航栏各菜单项所对应网页文件名称、网页标题、网页地址（相对于“洋洋书店”网站站点的地址）的列表如表7-2所示。 图 “洋洋书店”导航栏效果图

46 表7-2 “洋洋书店” 网站网页网络相对地址对应列表
7.4　上机实践 表 “洋洋书店” 网站网页网络相对地址对应列表 网页文件名称 网页文件内容 网页存放地址（相对于站点根目录） 站点根目录下的文件 index.html 本站信息（也是本站首页） haoshu.html 好书热评 zhandianmap.html 站点地图 new_book.html 新书快递 diaocha.html 客户调查表 tejibook.html 特级图书 book.html 图书宣传 liuyan.html 客户留言

47 7.4　上机实践 关键步骤1：选中要创建链接的文本，执行“插入/超级链接”命令。如图7-27所示。 图 执行“插入/超级链接”命令

48 7.4 上机实践 关键步骤2：在打开的“超级链接”对话框中设置“链接”文本域内容为所要跳转页面的相对路径，如图7-28所示。
7.4　上机实践 关键步骤2：在打开的“超级链接”对话框中设置“链接”文本域内容为所要跳转页面的相对路径，如图7-28所示。 图 设置“超级链接”对话框内容 关键步骤3：以同样的方式设置其他菜单项的超级链接。

49 7.4　上机实践 2．创建锚记链接 要求：制作“洋洋书店”网站锚记链接。在“洋洋书店”网站首页的“最新推荐”图片上设置命名锚记“T1”，在该网页底部版权信息区“回最新推荐”文字上创建命名锚记链接，使其跳转到本网页“最新推荐”图片的位置。 关键步骤1：在“洋洋书店”网站首页选择“最新推荐”图片，然后单击“插入栏”面板上的“命名锚记”按钮，如图7-29所示。 图 点击“命名锚记”按钮

50 7.4 上机实践 关键步骤2：在打开的“命名锚记”对话框中输入锚记名称“T1”，单击“确定”按钮，如图7-30所示。
7.4　上机实践 关键步骤2：在打开的“命名锚记”对话框中输入锚记名称“T1”，单击“确定”按钮，如图7-30所示。 图 设置“命名锚记”对话框

51 7.4　上机实践 关键步骤3：选择本页底部版权信息区“回最新推荐”字样文本，在“属性”面板“链接”文本域中输入要跳转到的位置的锚记名称“#T1”，如图7-31所示。 图 创建命名锚记链接

52 7.5 习题 1．单选题 （1）在一个网站中，路径的表示方式一般有________。 A、绝对路径、根目录相对路径、文档目录相对路径
7.5 习题 1．单选题 （1）在一个网站中，路径的表示方式一般有________。 A、绝对路径、根目录相对路径、文档目录相对路径 B、绝对路径、根目录相对路径 C、绝对路径、根目录绝对路径、文档目录相对路径 D、绝对路径、根目录绝对路径 （2）下列关于绝对路径的说法正确的一项是________。 A、绝对路径是被链接文档的完整URL，不包含使用的传输协议。 B、使用绝对路径需要考虑源文件的格式。 C、在绝对路径中，如果目标文件被移动，则链接同时可用。 D、创建外部链接时，必须使用绝对路径。

53 7.5 习题 A、链接到其他文档或文件（如图形、影片、PDF 或声音文件）的链接。 B、命名锚记链接，此类链接可跳转至文档内的特定位置。
7.5 习题 （3）下列关于在一个文档中可以创建的链接类型，说法不正确的是________。 A、链接到其他文档或文件（如图形、影片、PDF 或声音文件）的链接。 B、命名锚记链接，此类链接可跳转至文档内的特定位置。 C、电子邮件链接，此类链接可新建一个收件人地址已经填好的空白电子邮件。 D、空链接和脚本链接，此类链接能够在对象上附加行为，但不能创建执行 JavaScript 代码的链接。 2．多选题 （1）在Dreamweaver 8.0中创建一般超级链接时，可使用哪几种方式________。 A、在“属性”面板中的“链接”文本域中进行设置。 B、单击“插入栏”面板的“常用”类别中的，在弹出的“超级链接”对话框中进行设置。

54 7.5 习题 C、执行“插入/超级链接”命令，在弹出的在弹出的“超级链接”对话框中进行设置。
7.5 习题 C、执行“插入/超级链接”命令，在弹出的在弹出的“超级链接”对话框中进行设置。 D、执行“编辑/超级链接”命令，在弹出的在弹出的“超级链接”对话框中进行设置。 （2）设置文件下载链接时，以下链接地址正确的是________。 A、note.doc B、book.rar C、name.txt D、game.exe （3）下面有关锚记的说法正确的是________。 A、创建命名锚记（简称锚点）就是在文档中设置位置标记，并给该位置一个名称，以便引用。 B、锚记名称不区分大小写。 C、创建锚记链接，首先要设置一个命名锚记，然后建立到命名锚记的链接。 D、如果“命名锚记”没有出现在插入点，可执行“查看/可视化助理/不可见元素”命令查看。

55 7.5 习题 3．判断题 （1）mailto=webmaster@sohu.com，这个超级链接的书写方式是错误的。 （ ）
7.5 习题 3．判断题 （ ） （2）外部链接是指同一个网站不同文档之间的链接。 （ ） （3）_parent：将链接的文件载入该链接所在的同一框架或窗口中。 （ ）