第11章 DW中的行为.ppt

1、,第十一章,DW中的行为,行为基础 行为实例 拼图游戏的制作 下拉菜单的制作 行为总结,行为（Behavior）基础：前面在制作一对多关系的翻滚图时，我们用到了行为（Behavior），那么， Dreamweaver 中的行为倒底是些什么东西？实际上，Dreamweaver 中的行为，只不过是一系列 JavaScript 程序的集成，它包括两部分的内容，一个部分是事件，另一个部分是动作，动作是特定的 JavaScript 程序，只要在事件发生（如鼠标点击，或者页面装载）后，该程序（动作）就会自动运行。Window/Behaviors 命令可以打开行为面板，如图,点击左上角的 + 号，弹出一个长

2、长的菜单，里面全是一些特效动作，所有当前不可用的选项都是灰色的，只有在设定一定条件下那些灰色的动作才能使用。如图,对这些动作的解释如下：Call JavaScript：调用 Javascript 脚本。 Dreamweaver 虽然内集了丰富的可供调用的 Javascript ，但如果你觉得不满意的话，可以调用自己制作的 Javascript 或第三方开发的 Javascript ，而这时就需要使用本选项。Change Property：改变属性，如发生某个事件后，自动改变文本或图片信息，等等。Check Browser：检查浏览器。同一个网页，在不同的浏览器上的显示可能大为不同，如果你要让自

3、己的网页适合于大多数浏览器的话，可以分别针对不同的浏览器将所有的网页制作成几个不同的类别，然后再调用 Check Browser ，根据访问者浏览器的不同，进入相应的网页，从而让你的网页在每种浏览器上都是完美无缺的。Check Plugin：检查插件。插件？比如你做了个 Flash 动画并放到自己的网页上，当访问者的浏览器有 Flash 播放插件，则可以播放动画，如果没有，这时如果你的网页具有 Check Plugin 功能，则可按你的解决方案对访问者进行提醒，如你应该安装 Flash 播放器，下载地址.。,Control Shockwave or Flash：控制 Flash 影像。为什么要

4、控制 Flash 影像？其实，并不是每个 Flash 动画都是随网页打开就开始播放了，更多的是在网页上做一些按钮之类的带交互作用的图标，可以点击它开始播放动画，也可以通过拖拉进度条前进或后退，等等，而这，就需要 Control Shockwave or Flash 功能的支持。Set Text/Set Text of Status Message：在状态栏显示信息。一般情况是，当鼠标放到某幅图像上会自动弹出信息提示；或者当鼠标指向某个链接会在该处自动显示链接信息，而状态栏中始终只有一个网页图标。要充分利用网页的有效空间，避免信息混杂现象，可以把那些事件信息通过壮态栏进行显示，这就需要在网页中进

5、行 Set Text of Status Message 的设置。Drag Layer：拖曳图层，主要用来制作随鼠标移动而发生位移的网页特效。Go to URL：跳转页面。在输入栏中输入网址，然后回车，就可以到想去的网站。但在整个过程中，全是手工操作，而 Go to URL 却不同，只要你到了某个网页，不用你再动手，它自己就会把你带到另外的指定的网址去。最常见的例子是那些网址发生变化的网站，它们常常在旧网址的首页上注明网址已变，然后通过设置旧网页的 Go to URL 自动将访问者带到新的地址去。,Open Browser Window：打开浏览器。Popup Message：弹出信息提示框。

6、最常见的例子是访问者进入某个页面，该页面就会自动弹出一个消息框，显示先设定好的文本，如欢迎访问本站等等。Preload Images：预取图片，主要功能在于保持效果的连续性，避免事件发生时的读取延迟。Show/Hide Layers：显示/隐藏图层，非常通用的网页特效，如当鼠标移到某个对象上时，原来隐藏的图层显示出来，从而显示出该图层中的对象；当鼠标离开原对象，显示和图层再次隐藏。Swap Image：翻滚图，用它不仅可以建立一对一的翻滚图，还可以建立一对多等更为复杂的替换特效。Timeline中，Play Timeline/Stop Timeline/Go to Timeline Frame

7、：主要是对等时线控制。等时线犹如一个动画过程集合，在不同的时间可以播放不同的动画，关于它的详细介绍我们将在下一节中讲解。本节中，你只需知道 Behavior 可以控制复杂的等时线并产生非常智能化的特效就行了。Validage Form：表单验证。表单中如果有诸如密码式，字符数目等的限制，就可以应用表单验证功能。,行为示例：上面我们就大部分常用的动态技术进行了解释，现在来看一看如何将这些特效变成实实在在的东西。由于内容太多，我们只是选择了几个比较简单的例子，以便于大家能够很容易地进行掌握。1.在状态态显示信息：从上面我们知道，Set Text/Set Text of Status Message

8、 可以控制状态栏的显示信息，现在我们来看如何制作。.最终效果如图,图中，当将鼠标移到请看状态栏这几个字上的时候，状态栏中会显示请看状态栏字样，当鼠标移开时状态栏中的信息消失，本例显示了带链接的内容在状态栏显示信息的方法；当将鼠标移动到图像上时，状态栏中会显示这是索尼网站的一个图片字样，当鼠标移开，状态栏中信息消失，本例显示了普通内容如图片在状态栏中显示信息的办法。.制作步骤：先在编辑区域输入请看状态栏字样，并随便为它加上个链接信息。如图,全选几个字，用 Window/Behaviors 命令打开行为窗口。点击左上角的 “+”号，然后在弹出的窗口中选择 Set Text/Set Text of

9、Status Bar 命令，如图 然后弹出如图六的窗口，其中， Message 对话框中的内容就是要在状态栏中显示的信息。这时只需向其中输入“请看状态栏”字样就行了。如图 从前面我们已经知道，行为其实是一种针对事件（Event）触发的特殊效果，效果与事件缺一不可。刚才我们设置了效果（就是在状态栏中显示的信息），现在得设置事件了。,回到行为面板上，看左边 Events 下是什么事件。此处是 onmouseover （鼠标移上），那就不需要改了，因为我们正是要在鼠标移上那几个字样上时在状态栏显示特别信息，但这只是系统的默认事件，而且在本例中这个默认事件又恰恰合适，而在许多其他情况下，这种事件是需要

10、另行选择的。要进行选择，只需点按 onmouseover 右边那个向下的小三角形，然后在弹出的菜单中进行选择就行了。如图,置完鼠标移上效果，还得设置鼠标移出，状态栏信息消失的效果。办法很简单，还是选中那几个字，Set Text/Set Text of Status Bar ，然后在弹出的窗口中什么也别写（以便在状态栏中什么也不显示），点按 OK 后回到动作面板上，最后再将动作由 onMouseOver （鼠标移上）改为 onMouseOut （鼠标移出）。如图 带链接的文本设置完毕，下面我们加入图片（image/photo.gif），并按刚才的原理给它添加效果。不同的地方只是不用给图片添加链接

11、信息，在状态栏中显示的信息不同，其他的设置完全一样，大家可以自己试着做一下。,2.弹出信息：Popup Message 可以制作弹出信息效果，也就是打开页面，页面自动弹出对话窗口并提示预设好的信息。.最终效果如图,.制作步骤：现在我们用现成的 16.htm 文件来制作弹出式效果。用 Dreamweaver 打开 16.htm ，并用 File/Save As 命令将文件另存为一个新文件。请仔细找到编辑窗口中左下角的 Body符号，如图 选中 body符号，然后在行为面板的行为菜单中点按 Popup Message 命令，如图,然后会弹出如图十二的窗口， Message 输入框中输入的信息将作为

12、提示信息弹出。在输入框中输入“欢迎大家来到我的网页”字样。 最后点按 OK 并进行保存，弹出式效果制作完毕。,制作拼图游戏 工具:Layer（层）与Behavior（行为事件）菜单命令。 在浏览别人网页的时候，你也许经常发现网页上的某些图片（或文字） 可以用鼠标随意拖动。如果把此效果运用到你的网页中，不是也可以为你 的网页增添一点灵性?不过你或许会觉得制作起来比较麻烦，其实恰恰相反， 用DW做此效果特别简单。相信看了下面的制作过程，你也会发出这样的感 叹。 一般情况下，我们都固定住图的一部分，在此基础上再用图的其它部 分（可以被拖动的）进行组合拼装，当然也可以让图全部都可以被拖动。 下面是具体

13、的制作步骤。 步骤一:准备好要进行拼装的图形，然后将其分割。分割图形可使用Photoshop 之类的软件，如果没有，用Windows自带的画图工具也可以。 步骤二:选定分割后图形的一部分，作为页面上固定部分，用菜单“Insert” 中的“Image”命令直接插入到页面上的合适位置就可以。,步骤三:制作活动图形。在页面上插入一个层（Layer），选定分割后 图形可被拖动的部分，将其插入层中，选中该层，弹出Behavior框，在其 中的“Events For”框中选择“IE 4.0”。 单击“+”，在菜单中选择“Drag Layer”，弹出对话框。 “Layer”表示选定层的名称（此项一定要选正确

14、），至于其它参数用 默认值或不填也可以了。选择“More Options”将会有更多的参数，见下 图，同样使用默认值也可以。 步骤四:在Behavior框的“Events”中点黑色箭头，选择“onMouseOver” 或“onMouseDown”。 步骤五:如还有活动图形，重复步骤三、四，直至全部做完。 拼装图形只是DW中Behavior命令的一个简单应用，还有更多的功能在着我们进一步去开发，把我们的网页点缀得更加精彩！,用Dreamweaver制作下拉菜单 Dreamweaver是制作下拉菜单最常用的工具，方法简单，控制自由，可以最大限度地随心打造菜单样式，是制作下拄菜单的必修课。 用Dre

15、amweaver制作下拉菜单的原理很简单，它利用了Behaviors（行为）面板中的内置方法Show-Hide Layers（隐藏-显示层）方法，并用onMouseOver（鼠标移至）和onMouseOut（鼠标移开）来触发层的隐藏和显示，而将要出现的菜单就在层中。 因此，我们可以分四步来制作下拉菜单，首先我们需要一个导航条，它用来放置首先出现在浏览者眼前的主菜单；然后再制作开始隐藏着而将会出现的下拉选单；接着，进行最关键的一步，为主菜单和下拉选单添加上隐藏和显示层的效果；最后，我们进行菜单的美化修饰。最终看到的效果如图。,一、 导航条的制作 首先进行一些必要的前期工作，按CTRL+J，打开P

16、age Properties（页面属性）窗口，参数设置如图二，这一设置对菜单的位置将有影响，所以请如图设置。,按CTRL+F2打开Objects面板，点击层按钮后在页面中按住鼠标不放拖出一个层，然后在层的Properties（属性）面板中设置各参数，Layer ID框填入title，L、T、W、H框分别填入8、15、480、15，背景色填入#006699，如图。 将光标移至层内，点击Objects面板上的表格按钮，插入一个一行四列的表格，设置如图。,按住CTRL键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两个单元格中输入文字，就是你的主菜单名，可按自己想要的名字输入，我用经典

17、论坛和天极网为例，并加上链接。,二、 下拉选单的制作 现在开始制作将要下拉出现的菜单，同样用层来制作。 再次从Objects面板插入一个层到前面我们做好的导航条的下方，各项参数填为：Layer ID框填入menu1，L、T、W、H框分别填入8、34、120、80，背景色填入#999966，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。,这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表格来做菜单。这个层将作为经典论坛的下拉选单出现，填入你所需要的菜单链接。同样的方法，再为天极网也做一

18、个下拉选单（层menu2）。 这一步要注意的地方就是下拉选单所在的层（menu1、menu2）的位置非常重要（由L和T两个参数决定）。它们的上边线应该紧贴导航条的下边线，这样才能保证在后面我们完成第三个步骤后，菜单能正常使用。因为如果远离导航条的话，鼠标一离开导航条，菜单就消失了。 按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。,三、 显示和隐藏效果的添加 这一步骤是化腐朽为神奇的关键一步，大家仔细跟我来做。 本步骤分为两部分：第一，对导航条中的主菜单添加控制

19、显示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命令。 1导航条部分 首先按CTRL键不放点击导航条中的第一个单元格，现按Shift+F3打开Behaviors窗口，点按钮，在下拉选项中选中Show-Hide Layers（如图）。如果选项中没有这一项，则选择Show Events For下的IE 5.0后，重新点 按钮，此时Show-Hide Layers将出现。,这时将会弹出一个窗口，如下图。在Named Layers框中会列出当前网页所有的层，选中 layer menu1 ，因为我们想要menu1这个层对经典论坛响应。然后点下面的show按钮，OK。 这时会回到Behaviors窗口，

20、窗口中出现如下图所示字样，点击Events下的文字onClick，会出现一个向下的小箭头，点击它，在下拉选项中选中onMouseOver。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示（Show）。,下一步是让下拉选单menu2在鼠标移至第二个单元格时再变加隐藏状态。 再点按钮，在下拉选项中选中“Show-Hide Layers”，在弹出窗口中选中“ layer ”menu1“ ”，因为我们想要menu1这个层对“经典论坛”响应。然后点下面的“hide”按钮，OK。 回到Behaviors窗口，点击向下的小箭头，在下拉选项中选中onMouseOut。,2下拉选单部

21、分 先选中层menu1，方法是点击层的边缘或在LAYER面板中点击menu1，用与导航条部分同样的方法在Behaviors窗口中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层menu1时，层menu1就自动隐藏。最后层menu1的状态如图所示。 3重复以上两部分，为导航条的第二个主菜单天极网和层menu2添加显示、隐藏层命令。,四、 下拉菜单的美化修饰 到这里，下拉菜单的功能效果已经实现了，你现在按F12就可以看到。不过你一定也发现菜单有点难看，字不够精细，菜单选项的默认链接色不好看，菜单也没有边框，那就让我们来稍稍为它美容一下。 1定义菜单字体样式 按Shift+F11打开CSS Style（样式）面板，点击面板下面的按钮 在弹出的New Style窗的Tag框内选中td标签，Type选第二项Redefine HTML Tag，Define选This Document Only，如图。,此时弹出设置窗口，不管其它的，只在右边的Size框里选中12