83 网站导航栏制作案例

《83 网站导航栏制作案例》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、本案例将练习Dreamweaver中行为的使用。案例的制作思路：(1)向预留的导航栏位置插入嵌套表格。(2)插入导航栏图片。(3)对图片添加“交换图像”行为，使得鼠标移到图片上时文字发光，如图8.15所示，鼠标移开图片时文字恢复，如图8.16所示。图8.15鼠标移到导航栏上图8.16鼠标从导航栏移开在介绍案例的具体实现之前，先来介绍相关的知识。8.3.1行为概述Dreamweaver提供了一种称为“行为”的机制，帮助用户构建页面中的交互行为。行为，就是在网页中进行一系列动作，通过这些动作实现用户与页面的交互，

2、是一个带有面向对象设计思想的工具。事实上，行为是由预先书写好的JavaScript代码构成的，使用它可以完成诸如弹出浏览器窗口、显示-隐藏元素等任务。利用Dreamweaver中的行为，不需要书写代码，就可以实现丰富的动态页面效果。行为有3个重要的组成部分：对象、事件和行为。对象是产生行为的主体，许多网页元素都可以成为对象，如图片、文字、多媒体文件等。事件是触发动态效果的条件，它可以被添加到各种页面元素上，也可以被添加到HTML标记中。不同的浏览器支持的事件种类和数量不一样，通常高版本浏览器支持更多的事件。行

3、为通过动作来完成动态效果。例如，弹出信息、改变属性、交换图像等都是动作。动作是一段JavaScript代码，在DreamweaverCS3中使用内置的行为，系统会自动往页面中添加JavaScript代码，用户完全不必自己编写。Dreamweaver内置了很多行为动作，形成一个JavaScript程序库，用户还可以到官方网站下载并安装更多的行为。另外，如果精通JavaScript语言，也可以编写自己的行为，添加到DreamweaverCS3中。选择“窗口”→“行为”可以显示“行为”面板。在网页中添加行为时，首先

4、需选择要添加行为的对象，然后在“行为”面板中单击按钮打开“动作”菜单，如图8.17所示。因为浏览器版本或选择对象的不同，在“动作”菜单中有些选项呈灰色状态，表明当前情况下不能使用该动作。设定好动作以后还需要在“行为”面板中选择相应的事件，如图8.18所示。图8.17“动作”菜单图8.18“事件”列表8.3.2预定义行为Dreamweaver提供很多预定义行为(或称内置行为)动作，这些都是一些比较常用的功能，在“动作”菜单中可以进行选择。另外单击“动作”菜单中的“获取更多行为”，用户还可以从Internet上下

5、载更多的第三方行为并添加到“动作”菜单中。下面主要介绍几种预定义行为的使用方法。1．交换图像交换图像动作可以实现用户执行某个动作后改变页面上显示的图像的效果，要注意改变的是图像的源路经，而原来设置的图像大小不变，最好交换图像的两张图片大小相同，以免图像变形。创建交换图像行为的操作步骤如下。(1)选中要添加行为的对象，通常是图像对象。(2)在“行为”面板中单击按钮打开“动作”菜单，从中选择“交换图像”。(3)在打开的“交换图像”对话框中设置各选项，如图8.19所示。图8.19“交换图像”对话框“交换图像”对话框

6、中各参数含义如下。·①“图像”：在列表中显示了页面中所有的图像对象，选择要添加行为的图像。·②“设定原始档为”：设置替换图像的路径，可以单击“浏览”按钮从磁盘上选择。·③“预先载入图像”：选择该选项，则无论图像是否显示，都会被下载。·④“鼠标滑开时恢复图像”：选择该选项，则鼠标离开设定行为的图像对象时，恢复显示原始图像。(4)设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。2．弹出信息弹出信息动作可以在用户执行某个动作后，显示一个信息对话框，起提示信息的作用。创建弹出信息效果的具体操作步骤如下。

7、(1)选中要添加行为的对象。(2)在“行为”面板中单击按钮打开“动作”菜单，从中选择“弹出信息”。(3)在“弹出信息”对话框中的输入要显示的内容，如图8.20所示。在消息文本框中可以输入文字，也可以使用JavaScript语句。图8.20“弹出信息”对话框(4)设置完毕后单击“确定”按钮。回到“行为”面板中选择相应的事件，效果如图8.21所示。图8.21“弹出信息”效果图3．显示-隐藏层显示-隐藏层动作可以控制层在网页中的可见性。例如，网页中可以将对某个对象的说明性文字放在一个层内，通过添加显示-隐藏层动作，

8、实现当鼠标移到对象上时显示文字，而当鼠标移开对象时隐藏文字。显示-隐藏层的操作步骤如下。(1)选中要添加行为的对象。(2)在“行为”面板中单击按钮打开“动作”菜单，从中选择“显示-隐藏元素”。(3)在“显示-隐藏元素”对话框中，列出了页面中所有的层。选择要设置的层，单击“显示”按钮则执行显示层的动作，单击“隐藏”则执行隐藏层的动作，单击“默认”则恢复层默认的可见性状态，如图8.22所示。图8.22“