83 网站导航栏制作案例.doc

本案例将练习 Dreamweaver 中行为的使用。案例的制作思路：(1) 向预留的导航栏位置插入嵌套表格。(2) 插入导航栏图片。(3) 对图片添加“交换图像”行为，使得鼠标移到图片上时文字发光，如图8.15 所示，鼠标移开图片时文字恢复，如图8.16 所示。图 8.15 鼠标移到导航栏上图 8.16 鼠标从导航栏移开在介绍案例的具体实现之前，先来介绍相关的知识。8.3.1 行为概述Dreamweaver 提供了一种称为“行为”的机制，帮助用户构建页面中的交互行为。行为，就是在网页中进行一系列动作，通过这些动作实现用户与页面的交互，是一个带有面向对象设计思想的工具。事实上，行为是由预先书写好的JavaScript 代码构成的，使用它可以完成诸如弹出浏览器窗口、显示-隐藏元素等任务。利用Dreamweaver 中的行为，不需要书写代码，就可以实现丰富的动态页面效果。行为有 3 个重要的组成部分：对象、事件和行为。对象是产生行为的主体，许多网页元素都可以成为对象，如图片、文字、多媒体文件等。事件是触发动态效果的条件，它可以被添加到各种页面元素上，也可以被添加到 HTML标记中。不同的浏览器支持的事件种类和数量不一样，通常高版本浏览器支持更多的事件。行为通过动作来完成动态效果。例如，弹出信息、改变属性、交换图像等都是动作。动作是一段JavaScript 代码，在Dreamweaver CS3 中使用内置的行为，系统会自动往页面中添加JavaScript 代码，用户完全不必自己编写。Dreamweaver 内置了很多行为动作，形成一个JavaScript 程序库，用户还可以到官方网站下载并安装更多的行为。另外，如果精通JavaScript 语言，也可以编写自己的行为，添加到Dreamweaver CS3 中。选择“窗口”“行为”可以显示“行为”面板。在网页中添加行为时，首先需选择要添加行为的对象，然后在“行为”面板中单击按钮打开“动作”菜单，如图8.17 所示。因为浏览器版本或选择对象的不同，在“动作”菜单中有些选项呈灰色状态，表明当前情况下不能使用该动作。设定好动作以后还需要在“行为”面板中选择相应的事件，如图8.18 所示。图 8.17 “动作”菜单图 8.18 “事件”列表8.3.2 预定义行为Dreamweaver 提供很多预定义行为(或称内置行为)动作，这些都是一些比较常用的功能，在“动作”菜单中可以进行选择。另外单击“动作”菜单中的“获取更多行为”，用户还可以从Internet 上下载更多的第三方行为并添加到“动作”菜单中。下面主要介绍几种预定义行为的使用方法。1交换图像 交换图像动作可以实现用户执行某个动作后改变页面上显示的图像的效果，要注意改变的是图像的源路经，而原来设置的图像大小不变，最好交换图像的两张图片大小相同，以免图像变形。创建交换图像行为的操作步骤如下。(1) 选中要添加行为的对象，通常是图像对象。(2) 在“行为”面板中单击按钮打开“动作”菜单，从中选择“交换图像”。(3) 在打开的“交换图像”对话框中设置各选项，如图8.19 所示。图 8.19 “交换图像”对话框“交换图像”对话框中各参数含义如下。 “图像”：在列表中显示了页面中所有的图像对象，选择要添加行为的图像。 “设定原始档为”：设置替换图像的路径，可以单击“浏览”按钮从磁盘上选择。 “预先载入图像”：选择该选项，则无论图像是否显示，都会被下载。 “鼠标滑开时恢复图像”：选择该选项，则鼠标离开设定行为的图像对象时，恢复显示原始图像。 (4) 设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。2弹出信息 弹出信息动作可以在用户执行某个动作后，显示一个信息对话框，起提示信息的作用。创建弹出信息效果的具体操作步骤如下。(1) 选中要添加行为的对象。(2) 在“行为”面板中单击按钮打开“动作”菜单，从中选择“弹出信息”。(3) 在“弹出信息”对话框中的输入要显示的内容，如图8.20 所示。在消息文本框中可以输入文字，也可以使用JavaScript 语句。图8.20 “弹出信息”对话框(4) 设置完毕后单击“确定”按钮。回到“行为”面板中选择相应的事件，效果如图8.21所示。图 8.21 “弹出信息”效果图3显示-隐藏层 显示-隐藏层动作可以控制层在网页中的可见性。例如，网页中可以将对某个对象的说明性文字放在一个层内，通过添加显示-隐藏层动作，实现当鼠标移到对象上时显示文字，而当鼠标移开对象时隐藏文字。显示-隐藏层的操作步骤如下。(1) 选中要添加行为的对象。(2) 在“行为”面板中单击按钮打开“动作”菜单，从中选择“显示-隐藏元素”。(3) 在“显示-隐藏元素”对话框中，列出了页面中所有的层。选择要设置的层，单击“显示”按钮则执行显示层的动作，单击“隐藏”则执行隐藏层的动作，单击“默认”则恢复层默认的可见性状态，如图8.22 所示。图8.22 “显示-隐藏元素”对话框(4) 设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。4打开浏览器窗口 打开浏览器窗口动作可以在一个新的浏览器窗口中载入指定 URL 地址的文档。另外，对于新打开的窗口还可以设置其属性，如大小、名称、是否显示菜单条等。打开浏览器窗口的具体操作步骤如下。(1) 选中要添加行为的对象。(2) 在“行为”面板中单击按钮打开“动作”菜单，从中选择“打开浏览器窗口”。(3) 设置“打开浏览器窗口”对话框中各参数，如图8.23 所示。图 8.23 “打开浏览器窗口”对话框“打开浏览器窗口”对话框中各参数含义如下。 “要显示的 URL”：输入在新窗口中要打开文件的URL 地址，可以单击“浏览”按钮来选择。 “窗口宽度”、“窗口高度”：设置打开的新浏览器窗口的宽度和高度，单位为像素。 “属性”：设置打开的新浏览器窗口的显示属性，如是否有导航栏、菜单栏、地址栏、状态栏等。可以根据需要在相应的选项中勾选。 “窗口名称”：设置打开的新浏览器窗口的名称。 (4) 设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。5网页效果 在 Dreamweaver CS3 中增加了一项“效果”动作，其中包括7 种视觉效果，如图8.24 所示。例如，制作图像缩放效果的具体步骤如下。图8.24 “效果”菜单(1) 选中要添加行为的图像对象。(2) 在“行为”面板中单击按钮打开“动作”菜单，选择“效果”中的“增大/收缩”。(3) 设置“增大/收缩”对话框中各参数，如图8.25 所示。图 8.25 “增大/收缩”对话框“增大/收缩”对话框中各参数含义如下。 “目标元素”：从下拉菜单中选择某个对象的 ID。如果已经选择了一个对象，则选择“”。 “效果持续时间”：定义出现此效果所需的时间，用ms 表示。 “效果”：选择要应用的效果：“增大”或“收缩”。 “收缩自”或“增大自”：定义对象在效果开始时的大小，以百分比或像素为单位。 “收缩到”或“增大到”：定义对象在效果结束时的大小，以百分比或像素为单位。若选择以像素为单位，“宽/高”域将被激活。 “收缩到”：设置元素增大或收缩到页面的左上角还是页面的中心。 “切换效果”：选择此选项则该效果是可逆的(连续单击即可增大或收缩)。 (4) 设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。此外，有些行为命令在Dreamweaver CS3 中已被弃用，被归在“动作”菜单的“建议不再使用”子菜单下，比如播放声音、显示弹出式菜单、检查浏览器等。这些行为保留在这里主要是为了编辑在以前版本的Dreamweaver 中使用了此行为的对象。8.3.3 案例实现本案例中，导航栏的实现方法如下。(1) 打开dboen.htm，现在的网页外观已经做好，只留下页面导航栏处需要插入导航按钮，如图8.26 所示。图8.26 网页最初效果(2) 把光标定位到空缺区域，插入一个1 行4 列的表格，并设置该表格宽度为100%，边框为0px，边距为0px，间距为0px，得到如图8.27 所示的效果。图8.27 插入嵌套表格(3) 设置表格背景图像为dboen_r3_c8.jpg，如图8.28 所示。图 8.28 设置嵌套表格背景图(4) 向第1 个单元格中插入图像dboen_r3_c10.jpg，并在“属性”面板中设置图像名称为“首页”，如图8.29 所示。图 8.29 插入“首页”图像(5) 依次向另外3 个单元格中分别插入dboen_r3_c12.jpg、dboen_r3_c14.jpg、dboen_r3_c18.jpg，并写入名称为“滚动文本”、“插入多媒体元素”、“行为特效”，得到如图8.30所示的效果。图 8.30 插入导航按钮(6) 选中“首页”，在“行为”面板中单击按钮，从下拉菜单中选择“交换图像”命令，打开如图8.31 所示的对话框