创建超链接和导航课件.ppt

1、中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训第第6章章 创建超链接和导航创建超链接和导航 每一个网站实际上都是由众多网页组成的，网页之间通常通过超链接方式相互建立关联。在Dreamweaver 8中，超链接的范围很广，通过它不仅可以链接到其他网页，还可以链接到其他图像文件、多媒体文件及下载程序。本章将主要介绍在Dreamweaver 8中创建和管理各种超链接以及使用导航条的方法。第1页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训通过本章的理论学习和上机实训，读者应了解和掌握以下内容:vURL

2、的含义 v绝对路径与相对路径的概念 vDreamweaver 8中链接的类型 v网页间和网页内超链接的创建 v在站点地图中管理链接 v导航条的创建 第2页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训本章章节内容安排如下:v6.1 认识URL及链接路径 v6.2 创建链接 v6.3 创建导航条 v6.4 在“站点”地图中创建和修改链接 v6.5 思考与练习 第3页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训6.1 认识URL及链接路径 超链接与URL及网页文件的存放路径是紧密相关的

3、。URL可以简单地称为网址，顾名思义，就是Internet文件在网上的地址，定义超链接其实就是指定一个URL地址来访问它指向的Internet 资源。同时，认识从作为链接起点的文档到作为链接目标的文档之间的文件路径，对于创建链接是至关重要的。一般说来，链接的路径可以分为两类，即绝对路径与相对路径。vURL v绝对路径 v相对路径 第4页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训URL URL(Uniform Resoure Locator，统一资源定位器)指的是Internet文件在网上的地址，它使用数字和字母按一定顺序排列以确定一个

4、地址，由访问方法、服务器名、端口号，以及文档位置组成。格式为access-method:/server-name:port/document-location。第5页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训绝对路径 绝对路径指包括服务器协议在内的完全路径，比如linkyoume/dw/index.htm(此处使用的协议是最常用的HTTP协议)。使用绝对路径与链接的源端点无关，只要目标站点地址不变，无论文档在站点中如何移动，都可以正常实现跳转而不会发生错误。如果是要链接当前站点之外的网页或网站，就必须使用绝对路径。第6页，共24页。中

5、文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训相对路径 相对路径包括根相对路径(Site Root)和文档相对路径(Document)两种。使用Dreamweaver 8在本地磁盘上编辑网页时，需要选定一个文件夹来定义一个本地站点，模拟服务器上的根文件夹，系统就根据这个文件夹来确定所有链接的本地文件位置，而根相对路径中的根就是指这个文件夹。文档相对路径就是指包含当前文档的文件夹，也就是以当前网页所在文件夹为基础来计算的路径。第7页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训6.2 创 建 链 接

6、 Dreamweaver 8可以为对象、文本或图像创建超链接，以链接到其他文档或文件，或链接到单个文档的指定位置。当在本地站点内移动或重命名文档或其他链接文件时，Dreamweaver 可自动更新指向文档的链接。v创建链接的类型和方法v创建页间超链接 v创建页内超链接 v创建E-mail链接 v创建空链接和脚本链接 v创建图形热点链接 第8页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训创建链接的类型和方法 在Dreamweaver 8中，可以创建下列几种类型的链接。l页间超链接：用于跳转到其他文档或文件，如图形、电影、PDF或声音文件。

7、l页内超链接：也被称为锚记链接，用于跳转到本站点指定文档的位置。lE-mail链接：用于启动电子邮件程序，允许用户编辑电子邮件，并发送到指定地址。l空链接及脚本链接：用于为用户附加行为至对象或创建一个执行JavaScript代码的 链接。l在Dreamweaver 8中，可以创建超链接的方法主要有以下几种。l使用属性检查器中的“链接”文本框。l使用“修改”|“创建链接”命令来制作到某个文件的链接。l使用站点地图来查看、创建、修改及删除链接。l使用快捷菜单，然后从中选择“创建链接”选项。第9页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训创

8、建页间超链接 在Dreamweaver 8中可以为对象、文本或图像创建超链接，链接到其他文档或文件。要在网页中创建超链接，先选中要创建链接的对象(文本、图像或其他对象)，然后有3种方法可供选用。l在对象属性检查器的“链接”下拉列表框中输入要链接对象的URL或路径。l拖动“链接”下拉列表框后面的“指向文件”图标到“文件”面板中要链接的对象上(默认使用“文档相对路径”)。l单击“链接”下拉列表框后面的“浏览文件”按钮，在打开的“选择文件”对话框中选择要链接的对象(在这个对话框的“相对于”下拉列表框的两个选择项对应两种“相对路径”)，然后单击“确定”按钮。第10页，共24页。中文版中文版Dreamw

9、eaver Dreamweaver 8基础与上机实训基础与上机实训创建页内超链接 在Dreamweaver 8中，创建页内超链接是通过使用“命名锚记”命令(用来标记位置的标识)来完成的，因此页内超链接又称为“命名锚记链接”。通过对文档中指定位置的命名，允许利用链接打开目标文档时，直接跳转到相应的命名位置。“命名锚记链接”一般用在网页篇幅较大，浏览者需要翻屏查看的情况下，因此，应用“命名锚记链接”可以有助于浏览者阅读网页，从另一个方面也体现了网页设计者为浏览者着想的一面。显而易见，创建“命名锚记链接”的过程要分为两步，首先加入一个命名锚记；然后创建到这个命名锚记的链接。第11页，共24页。中文版

10、中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训创建E-mail链接 E-mail超链接是一种特殊的链接，单击该链接将打开一个空白通讯窗口。在E-mail通讯窗口中允许用户编辑电子邮件，并发送到指定的地址。创建E-mail超链接方法同创建普通文本超链接相似，可以选择要创建E-mail超链接的对象(文本、图像或其他)，然后在该对象属性检查器的“链接”文本框中输入mailto:和E-mail地址，如mailto:abcabc；还可以选择“插入”|“电子邮件链接”命令，或选择“插入”工具栏中的“常用”选项卡，单击“电子邮件链接”按钮，在打开的“电子邮件链接”对话框

11、中输入文本和E-mail地址，然后单击“确定”按钮。第12页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训创建空链接和脚本链接 空链接实际上是一个未设计的链接，用于激活页面上的对象或文本。一旦对象或文本被激活，当鼠标指针经过该链接时，用户可为其附加行为以交换图片或显示层。要创建空链接，用户只需在选定文字或图片后，在属性检查器的“链接”下拉列表框中输入javascript:;(javascript 一词后依次接一个冒号和一个分号)，或是一个“#”号。使用“#”符号的问题在于当访问者单击该链接时，某些浏览器可能跳到页的顶部。单击 JavaSc

12、ript 空链接不会在页上产生任何效果，因此创建空链接用 JavaScript 方法通常更 可取，只需用代码javascript:void(null)代替原来的#号标记即可。第13页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训 脚本链接是指执行JavaScript代码或调用JavaScript函数。该方式可使用户在不离开当前页面的情况下了解关于某个项目的一些附加信息。此外，该方式还用于执行计算、表单验证或其他任务。要创建脚本链接，只需在选定文字或图片后，在属性检查器的“链接”下拉列表框中输入javascript:(javascript

13、一词后依次接一个冒号)，并且跟一些JavaScript代码或函数调用就可以了。例如，可输入javascript:alert(Hello！)，这时当用户单击该链接时，系统将弹出一个提示框，其中将显示上面输入的文字Hello！。第14页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训创建图形热点链接 在为图片创建链接时，如果图片比较大，或是要创建链接的区域是不规则区域时，或是只给图片中部分区域创建链接，可以将图片分为几个区(又称为“热点”)，单击不同的区可以打开不同的链接，这样的链接就称为“图形热点链接”。使用“图像”属性检查器可方便地创建图形

14、热点链接。第15页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训6.3 创建导航条 导航条由一个或多个图像组成，其显示根据用户的动作而改变。因此，在使用导航条命令之前，应首先创建一个用于导航条的图像集。根据鼠标的动作，导航条中的图像通常有以下4种状态。l一般：尚未单击时所显示的初始图像。l滑过：当光标从图像上经过时出现的图像。l按下：单击导航条图像时显示的图像。l按下时鼠标经过：单击图像后，当鼠标指针滑过该图像时显示的图像。v插入导航条 v编辑导航条 第16页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与

15、上机实训基础与上机实训插入导航条 要在网页中插入导航条，可以选择“插入”|“图像对象”|“导航条”命令，或选择“插入”栏中的“常用”选项卡，单击第6个按扭旁边的下拉箭头，选择“导航条”命令，打开“插入导航条”对话框，如图所示。第17页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训编辑导航条 为文档创建导航条后，选择“修改”|“导航条”命令，在打开的“修改导航条”对话框中向导航条添加图像，或从导航条中删除图像。此命令可用于更改图像或图像组、更改单击项目时所打开的文件、选择在不同的窗口或框架中打开文件以及重新排序图像。第18页，共24页。中文

16、版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训6.4 在“站点”地图中创建和修改链接 用户可以通过在“文件”面板中添加、更改和删除链接来修改站点的结构。Dreamweaver 8会自动更新“文件”面板以显示对站点所做的更改。第19页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训6.5 思考与练习 填空题填空题 1.定义超链接的实质是 。2.URL指的是 ，它使用 以确定一个地址，由 、以及 组成。3.在Dreamweaver 8中，可以创建下列5种类型的链接，分别是 、和 。4.在Dreamweav

17、er 8中，创建页内超链接是通过使用 来完成的，因此页内超链接又称为 。5.空链接实际上是 链接，利用该链接可激活页面上的对象或文本；而脚本链接则是指 。6.导航条中的图像通常有4种状态，分别是 、和 。第20页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训6.5 思考与练习 选择题选择题 7.下列路径中()是站点根目录相对路径。A././catalog.asp B.fuwu/contents.html C./products/catalog.html D.linkyoume/index.htm8.在属性检查器的“链接”下拉列表框中输入(

18、)后，无法实现空链接。A.javascript:;B.javascript:C.javascript:void(null)D.#第21页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训6.5 思考与练习 选择题选择题9.创建图形热点链接时，无法创建()形状的热点。A.正方形 B.三角形 C.椭圆 D.梯形10.在网页文档中创建导航条至少需要()幅图像。A.1 B.2 C.3 D.4 第22页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训6.5 思考与练习 简答题简答题11.简述绝对路径和相对路径的含义及优缺点。12.简述在“站点”地图中创建和修改链接的过程。第23页，共24页。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训6.5 思考与练习 操作题操作题13.创建如图所示的网页文档，并创建其中的图像热点链接。14.在网页文档中插入导航条，如图所示。第24页，共24页。