83网站导航栏制作案例Word格式文档下载.docx

83网站导航栏制作案例Word格式文档下载.docx

《83网站导航栏制作案例Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《83网站导航栏制作案例Word格式文档下载.docx（9页珍藏版）》请在冰豆网上搜索。

利用Dreamweaver中的行为，不需要书写代码，就可以实现丰富的动态页面效果。

行为有3个重要的组成部分：

对象、事件和行为。

对象是产生行为的主体，许多网页元素都可以成为对象，如图片、文字、多媒体文件等。

事件是触发动态效果的条件，它可以被添加到各种页面元素上，也可以被添加到HTML标记中。

不同的浏览器支持的事件种类和数量不一样，通常高版本浏览器支持更多的事件。

行为通过动作来完成动态效果。

例如，弹出信息、改变属性、交换图像等都是动作。

动作是一段JavaScript代码，在DreamweaverCS3中使用内置的行为，系统会自动往页面中添加JavaScript代码，用户完全不必自己编写。

Dreamweaver内置了很多行为动作，形成一个JavaScript程序库，用户还可以到官方网站下载并安装更多的行为。

另外，如果精通JavaScript语言，也可以编写自己的行为，添加到DreamweaverCS3中。

选择“窗口”→“行为”可以显示“行为”面板。

在网页中添加行为时，首先需选择要添加行为的对象，然后在“行为”面板中单击按钮打开“动作”菜单，如图所示。

因为浏览器版本或选择对象的不同，在“动作”菜单中有些选项呈灰色状态，表明当前情况下不能使用该动作。

设定好动作以后还需要在“行为”面板中选择相应的事件，如图所示。

图“动作”菜单

图“事件”列表

8.3.2预定义行为

Dreamweaver提供很多预定义行为（或称内置行为）动作，这些都是一些比较常用的功能，在“动作”菜单中可以进行选择。

另外单击“动作”菜单中的“获取更多行为”，用户还可以从Internet上下载更多的第三方行为并添加到“动作”菜单中。

下面主要介绍几种预定义行为的使用方法。

1．交换图像

交换图像动作可以实现用户执行某个动作后改变页面上显示的图像的效果，要注意改变的是图像的源路经，而原来设置的图像大小不变，最好交换图像的两张图片大小相同，以免图像变形。

创建交换图像行为的操作步骤如下。

（1）选中要添加行为的对象，通常是图像对象。

（2）在“行为”面板中单击按钮打开“动作”菜单，从中选择“交换图像”。

（3）在打开的“交换图像”对话框中设置各选项，如图所示。

图“交换图像”对话框

“交换图像”对话框中各参数含义如下。

∙①“图像”：

在列表中显示了页面中所有的图像对象，选择要添加行为的图像。

∙②“设定原始档为”：

设置替换图像的路径，可以单击“浏览”按钮从磁盘上选择。

∙③“预先载入图像”：

选择该选项，则无论图像是否显示，都会被下载。

∙④“鼠标滑开时恢复图像”：

选择该选项，则鼠标离开设定行为的图像对象时，恢复显示原始图像。

（4）设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。

2．弹出信息

弹出信息动作可以在用户执行某个动作后，显示一个信息对话框，起提示信息的作用。

创建弹出信息效果的具体操作步骤如下。

（1）选中要添加行为的对象。

（2）在“行为”面板中单击按钮打开“动作”菜单，从中选择“弹出信息”。

（3）在“弹出信息”对话框中的输入要显示的内容，如图所示。

在消息文本框中可以输入文字，也可以使用JavaScript语句。

图“弹出信息”对话框

（4）设置完毕后单击“确定”按钮。

回到“行为”面板中选择相应的事件，效果如图所示。

图“弹出信息”效果图

3．显示-隐藏层

显示-隐藏层动作可以控制层在网页中的可见性。

例如，网页中可以将对某个对象的说明性文字放在一个层内，通过添加显示-隐藏层动作，实现当鼠标移到对象上时显示文字，而当鼠标移开对象时隐藏文字。

显示-隐藏层的操作步骤如下。

（2）在“行为”面板中单击按钮打开“动作”菜单，从中选择“显示-隐藏元素”。

（3）在“显示-隐藏元素”对话框中，列出了页面中所有的层。

选择要设置的层，单击“显示”按钮则执行显示层的动作，单击“隐藏”则执行隐藏层的动作，单击“默认”则恢复层默认的可见性状态，如图所示。

图“显示-隐藏元素”对话框

4．打开浏览器窗口

打开浏览器窗口动作可以在一个新的浏览器窗口中载入指定URL地址的文档。

另外，对于新打开的窗口还可以设置其属性，如大小、名称、是否显示菜单条等。

打开浏览器窗口的具体操作步骤如下。

（2）在“行为”面板中单击按钮打开“动作”菜单，从中选择“打开浏览器窗口”。

（3）设置“打开浏览器窗口”对话框中各参数，如图所示。

图“打开浏览器窗口”对话框

“打开浏览器窗口”对话框中各参数含义如下。

∙①“要显示的URL”：

输入在新窗口中要打开文件的URL地址，可以单击“浏览”按钮来选择。

∙②“窗口宽度”、“窗口高度”：

设置打开的新浏览器窗口的宽度和高度，单位为像素。

∙③“属性”：

设置打开的新浏览器窗口的显示属性，如是否有导航栏、菜单栏、地址栏、状态栏等。

可以根据需要在相应的选项中勾选。

∙④“窗口名称”：

设置打开的新浏览器窗口的名称。

5．网页效果

在DreamweaverCS3中增加了一项“效果”动作，其中包括7种视觉效果，如图所示。

例如，制作图像缩放效果的具体步骤如下。

图“效果”菜单

（1）选中要添加行为的图像对象。

（2）在“行为”面板中单击按钮打开“动作”菜单，选择“效果”中的“增大/收缩”。

（3）设置“增大/收缩”对话框中各参数，如图所示。

图“增大/收缩”对话框

“增大/收缩”对话框中各参数含义如下。

∙①“目标元素”：

从下拉菜单中选择某个对象的ID。

如果已经选择了一个对象，则选择“<

当前选定内容>

”。

∙②“效果持续时间”：

定义出现此效果所需的时间，用ms表示。

∙③“效果”：

选择要应用的效果：

“增大”或“收缩”。

∙④“收缩自”或“增大自”：

定义对象在效果开始时的大小，以百分比或像素为单位。

∙⑤“收缩到”或“增大到”：

定义对象在效果结束时的大小，以百分比或像素为单位。

若选择以像素为单位，“宽/高”域将被激活。

∙⑥“收缩到”：

设置元素增大或收缩到页面的左上角还是页面的中心。

∙⑦“切换效果”：

选择此选项则该效果是可逆的（连续单击即可增大或收缩）。

此外，有些行为命令在DreamweaverCS3中已被弃用，被归在“动作”菜单的“~建议不再使用”子菜单下，比如播放声音、显示弹出式菜单、检查浏览器等。

这些行为保留在这里主要是为了编辑在以前版本的Dreamweaver中使用了此行为的对象。

8.3.3案例实现

本案例中，导航栏的实现方法如下。

（1）打开，现在的网页外观已经做好，只留下页面导航栏处需要插入导航按钮，如图所示。

图网页最初效果

（2）把光标定位到空缺区域，插入一个1行4列的表格，并设置该表格宽度为100%，边框为0px，边距为0px，间距为0px，得到如图所示的效果。

图插入嵌套表格

（3）设置表格背景图像为，如图所示。

图设置嵌套表格背景图

（4）向第1个单元格中插入图像，并在“属性”面板中设置图像名称为“首页”，如图所示。

图插入“首页”图像

（5）依次向另外3个单元格中分别插入、、，并写入名称为“滚动文本”、“插入多媒体元素”、“行为特效”，得到如图所示的效果。

图插入导航按钮

（6）选中“首页”，在“行为”面板中单击按钮，从下拉菜单中选择“交换图像”命令，打开如图所示的对话框。

（7）单击“浏览”按钮，在文件选择对话框中选中，如图所示。

图设置交换图像

（8）单击“确定”按钮，在行为面板中出现两个动作：

“交换图像”和“恢复交换图像”，如图所示。

图行为面板

（9）用同样的方法，分别为其他3幅图像创建“交换图像”行为，按F12键在浏览器中预览。