第7章 创建链接.ppt

第5、6章主要内容 本章主要内容 超链接概述 链接路径 创建超链接 创建网站导航 7.1 超链接概述 7.2 链接路径 7.2 链接路径 7.2 链接路径 7.3 创建超链接 7.3 创建超链接 7.3 创建超链接 7.3 创建超链接 7.3 创建超链接 7.3 创建超链接 7.3 创建超链接 7.3 创建超链接 7.3 创建超链接 7.3 创建超链接 7.3 创建超链接 7.3 创建超链接 7.3 创建超链接 7.3 创建链接 7.3 创建链接 7.3 创建链接 7.4 创建导航链接 7.4 创建导航链接 7.4 创建导航链接 7.4 创建导航链接 7.4 创建导航链接 7.4 创建导航链接 7.4 创建导航链接 7.4 创建导航链接 7.4 创建导航链接 7.4 创建导航链接 7.4 创建导航链接 7.4 创建导航链接 7.4 创建导航链接 （5）交互式导航效果设计：新建一个CSS样式规则，选择器类型为复合内容，名称为#nav li a:hover，为每个li下的a连接对象设置鼠标悬停在链接之上时的样式。代码如下： #nav li a:hover { color: #FFF; background-color: #666; } 3.Spry菜单栏 Spry菜单栏构件是一组可以导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用Spry菜单栏可在紧凑的空间中显示大量的导航信息，并使站点的访问者无需深入浏览站点即可了解站点上提供的内容。其操作步骤为： （1）把光标定位在要插入Spry菜单的位置，选择【插入】|Spry|【Spry菜单栏】命令，打开【Spry菜单栏】对话框。 （2）在【Spry菜单栏】对话框中，选择菜单栏的布局格式，单击【确定】按钮，在文档窗口可以看到菜单栏已经被插入到光标设定的位置。 LOGO * LOGO （1）普通图像和特殊图像元素插入的方法 （2）图像属性的设置 （3）图像地图的创建 （4）Flash元素、音频、视频等多媒体元素的插入方法及属性设置 超链接是指从一个网页指向一个目标的连接关系。这个网页又称为源端点，目标称为目标端点，超链接就是将源端点与目标端点连接起来，源端点是被链接的对象，目标端点是链接的对象。 一个网页中用来创建超链接的对象，可以是文本、图像或其他网页元素。而目标端点可以是任何网络资源，如一个网页、相同网页上的不同位置、一张图片、一个电子邮件地址、多媒体文件，甚至是一个应用程序等。当浏览者将鼠标指针移至有超链接的网页元素上时，指针会变为手形，在状态栏中将显示连接目标的地址，单击链接后，链接目标将显示在浏览器上，并根据目标的类型来打开或运行。 路径是指从源端点指向目标端点的一种途径。链接路径可以分为3种形式： （1）绝对路径：是指被链接文件的完整URL，包括所使用的协议，如： c:/website/web/index.htm链接到 和 c:/website/img/photo.jpg 采用绝对地址的好处是，它同链接的源端点无关，只要网站的地址不变，无论文件在站点中如何移动，都可以正常实现跳转，如果希望链接其他站点上的内容，即在创建外部链接时必须需使用绝对路径 绝对路径也会出现在尚未保存的网页上，如果在没有保存的网页上插入图像或添加链接，Dreamweaver会暂时使用绝对路径，网页保存后，Dreamweaver会自动将绝对路径转换为相对路径。如： file:///D|/chapter7/示例文件/images/doudou.gif （2）相对路径：是指以当前文件所在位置为起点到被链接文件经由的路径。当把当前文件与处于同一文件夹的另一文件链接，或者把同一网站下不同文件夹中的文件相互链接时，可使用相对路径。 链接到同一目录下，只需输入链接文档的名称：如从“第7章”文件夹中的7-1.html链接到7-2.html： 链接到下一级目录，需先输入目录名，然后加”/”，再输入文件名：从“第7章”文件夹中的7-1.html链接到该文件夹下images文件夹中的某个文件： 链接到上一级目录中的文件，先输入“../”，再输入目录名、文件名：将“第7章”文件夹下images文件夹中的文件page1.html链接到“第7章”文件夹中的page2.html： （3）根路径：是指从站点根文件夹到被指文件经由的路径。在这种路径表达式中，所有的路径都是从站点根目录开始的，同源端点的位置无关。根路径由斜杠“/”开头，代表站点根文件夹。在网站内链接文件时一般使用根路径的方法。 1.创建文本链接：即以文本作为媒介的链接，是网页中最常被使用的链接方式，具有文件小、制