第11章DW中的行为.ppt
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
从上面我们知道，Set Text/Set Text of Status Message 可以控制状态栏的显示信 息，现在我们来看如何制作。
<1>.最终效果如图
图中，当将鼠标移到"请看状态栏"这几个字上的时候，状态栏中会显示"请看状 态栏"字样，当鼠标移开时状态栏中的信息消失，本例显示了带链接的内容在状 态栏显示信息的方法；当将鼠标移动到图像上时，状态栏中会显示"这是索尼网 站的一个图片"字样，当鼠标移开，状态栏中信息消失，本例显示了普通内容如 图片在状态栏中显示信息的办法。
因此，我们可以分四步来制作下拉菜单，首先我们需要一个导航条，它用来放 置首先出现在浏览者眼前的主菜单；然后再制作开始隐藏着而将会出现的下拉选单； 接着，进行最关键的一步，为主菜单和下拉选单添加上隐藏和显示层的效果；最后， 我们进行菜单的美化修饰。最终看到的效果如图。
一、 导航条的制作
首先进行一些必要的前期工作，按CTRL+J，打开Page Properties（页 面属性）窗口，参数设置如图二，这一设置对菜单的位置将有影响，所以 请如图设置。
步骤三:制作活动图形。在页面上插入一个层（Layer），选定分割后 图形可被 拖动的部分，将其插入层中，选中该层，弹出Behavior框，在其 中的“Events For”框中选择“IE 4.0”。
单击“+”，在菜单中选择“Drag Layer”，弹出对话框。
“Layer”表示选定层的名称（此项一定要选正确），至于其它参数用 默认值或 不填也可以了。选择“More Options”将会有更多的参数，见下 图，同样使用默认 值也可以。
Set Text/Set Text of Status Message：在状态栏显示信息。一般情况是，当鼠标放 到某幅图像上会自动弹出信息提示；或者当鼠标指向某个链接会在该处自动显示链 接信息，而状态栏中始终只有一个网页图标。要充分利用网页的有效空间，避免信 息混杂现象，可以把那些事件信息通过壮态栏进行显示，这就需要在网页中进行 Set Text of Status Message 的设置。
<1>.最终效果如图
<2>.制作步骤： 现在我们用现成的 16.htm 文件来制作弹出式效果。用 Dreamweaver 打开 16.htm ， 并用 File/Save As 命令将文件另存为一个新文件。 请仔细找到编辑窗口中左下角的 ＜Body＞符号，如图
选中 ＜body＞符号，然后在行为面板的行为菜单中点按 Popup Message 命令， 如图
<2>.制作步骤：
先在编辑区域输入"请看状态栏"字样，并随便为它加上个链接信息。如图
全选几个字，用 Window/Behaviors 命令打开行为窗口。点击左上角的 “+”号， 然后在弹出的窗口中选择 Set Text/Set Text of Status Bar 命令，如图
然后弹出如图六的窗口，其中， Message 对话框中的内容就是要在状态栏中显 示的信息。这时只需向其中输入“请看状态栏”字样就行了。如图
置完鼠标移上效果，还得设置鼠标移出，状态栏信息消失的效果。办法很简单，还是 选中那几个字，Set Text/Set Text of Status Bar ，然后在弹出的窗口中什么也别写 （以便在状态栏中什么也不显示），点按 OK 后回到动作面板上，最后再将动作由 onMouseOver （鼠标移上）改为 onMouseOut （鼠标移出）。如图
Open Browser Window：打开浏览器。 Popup Message：弹出信息提示框。最常见的例子是访问者进入某个页面，该 页面就会自动弹出一个消息框，显示先设定好的文本，如"欢迎访问本站"等等。 Preload Images：预取图片，主要功能在于保持效果的连续性，避免事件发生时 的读取延迟。
按CTRL+F2打开Objects面板，点击层按钮后在页面中按住鼠标不放拖出一个层， 然后在层的Properties（属性）面板中设置各参数，Layer ID框填入title，L、T、 W、H框分别填入8、15、480、15，背景色填入#006699，如图。
将光标移至层内，点击Objects面板上的表格按钮，插入一个一行四列的表 格，设置如图。
Check Plugin：检查插件。插件？比如你做了个 Flash 动画并放到自己的网页上， 当访问者的浏览器有 Flash 播放插件，则可以播放动画，如果没有，这时如果你 的网页具有 Check Plugin 功能，则可按你的解决方案对访问者进行提醒，如"你 应该安装 Flash 播放器，下载地址......"。
Dreamweaver是制作下拉菜单最常用的工具，方法简单，控制自由，可以最大 限度地随心打造菜单样式，是制作下拄菜单的必修课。
用Dreamweaver制作下拉菜单的原理很简单，它利用了Behaviors（行为）面板 中的内置方法Show-Hide Layers（隐藏-显示层）方法，并用onMouseOver（鼠标 移至）和onMouseOut（鼠标移开）来触发层的隐藏和显示，而将要出现的菜单就 在层中。
步骤四:在Behavior框的“Events”中点黑色箭头，选择“onMouseOver” 或 “onMouseDown”。
步骤五:如还有活动图形，重复步骤三、四，直至全部做完。
拼装图形只是DW中Behavior命令的一个简单应用，还有更多的功能在着我们 进一步去开发，把我们的网页点缀得更加精彩！
用Dreamweaver制作下拉菜单
从前面我们已经知道，行为其实是一种针对事件（Event）触发的特殊效果，效 果与事件缺一不可。刚才我们设置了效果（就是在状态栏中显示的信息），现 在得设置事件了。
回到行为面板上，看左边 Events 下是什么事件。此处是 onmouseover （鼠 标移上），那就不需要改了，因为我们正是要在鼠标移上那几个字样上时在 状态栏显示特别信息，但这只是系统的默认事件，而且在本例中这个默认事 件又恰恰合适，而在许多其他情况下，这种事件是需要另行选择的。要进行 选择，只需点按 onmouseover 右边那个向下的小三角形，然后在弹出的菜 单中进行选择就行了。如图
Drag Layer：拖曳图层，主要用来制作随鼠标移动而发生位移的网页特效。
Go to URL：跳转页面。在输入栏中输入网址，然后回车，就可以到想去的网站。 但在整个过程中，全是手工操作，而 Go to URL 却不同，只要你到了某个网页，不 用你再动手，它自己就会把你带到另外的指定的网址去。最常见的例子是那些网址 发生变化的网站，它们常常在旧网址的首页上注明网址已变，然后通过设置旧网页 的 Go to URL 自动将访问者带到新的地址去。
Show/Hide Layers：显示/隐藏图层，非常通用的网页特效，如当鼠标移到某个 对象上时，原来隐藏的图层显示出来，从而显示出该图层中的对象；当鼠标离开 原对象，显示和图层再次隐藏。
Swap Image：翻滚图，用它不仅可以建立一对一的翻滚图，还可以建立一对多 等更为复杂的"替换"特效。 Timeline中，Play Timeline/Stop Timeline/Go to Timeline Frame：主要是对等时 线控制。等时线犹如一个动画过程集合，在不同的时间可以播放不同的动画，关 于它的详细介绍我们将在下一节中讲解。本节中，你只需知道 Behavior 可以控 制复杂的等时线并产生非常智能化的特效就行了。
Control Shockwave or Flash：控制 Flash 影像。为什么要控制 Flash 影像？其实， 并不是每个 Flash 动画都是随网页打开就开始播放了，更多的是在网页上做一些按 钮之类的带交互作用的图标，可以点击它开始播放动画，也可以通过拖拉进度条前 进或后退，等等，而这，就需要 Control Shockwave or Flash 功能的支持。
带链接的文本设置完毕，下面我们加入图片（image/photo.gif），并按刚才的原理给 它添加效果。不同的地方只是不用给图片添加链接信息，在状态栏中显示的信息不同， 其他的设置完全一样，大家可以自己试着做一下。
2.弹出信息：
Popup Message 可以制作弹出信息效果，也就是打开页面，页面自动弹出对 话窗口并提示预设好的信息。
Validage Form：表单验证。表单中如果有诸如密码式，字符数目等的限制，就 可以应用表单验证功能。
行为示例：
上面我们就大部分常用的动态技术进行了解释，现在来看一看如何将这些特效变 成实实在在的东西。由于内容太多，我们只是选择了几个比较简单的例子，以便 于大家能够很容易地进行掌握。
1.在状态态显示信息：
第十一章
DW中的行为
行为基础 行为实例 拼图游戏的制作 下拉菜单的制作 行为总结
行为（Behavior）基础：
前面在制作一对多关系的翻滚图时，我们用到了行为（Behavior），那么， Dreamweaver 中的行为倒底是些什么东西？
实际上，Dreamweaver 中的行为，只不过是一系列 JavaScript 程序的集成，它 包括两部分的内容，一个部分是事件，另一个部分是动作，动作是特定的 JavaScript 程序，只要在事件发生（如鼠标点击，或者页面装载）后，该程序 （动作）就会自动运行。
然后会弹出如图十二的窗口， Message 输入框中输入的信息将作为提示信 息弹出。在输入框中输入“欢迎大家来到我的网页”字样。
最后点按 OK 并进行保存，弹出式效果制作完毕。
制作拼图游戏
工具:Layer（层）与Behavior（行为事件）菜单命令。
在浏览别人网页的时候，你也许经常发现网页上的某些图片（或文字） 可以用鼠 标随意拖动。如果把此效果运用到你的网页中，不是也可以为你 的网页增添一点灵性? 不过你或许会觉得制ห้องสมุดไป่ตู้起来比较麻烦，其实恰恰相反， 用DW做此效果特别简单。相 信看了下面的制作过程，你也会发出这样的感 叹。
Window/Behaviors 命令可以打开行为面板，如图
点击左上角的 "+" 号，弹出一个长长的菜单，里面全是一些"特效动作"，所 有当前不可用的选项都是灰色的，只有在设定一定条件下那些灰色的动作才 能使用。如图
对这些"动作"的解释如下：
Call JavaScript：调用 Javascript 脚本。 Dreamweaver 虽然内集了丰富的可供 调用的 Javascript ，但如果你觉得不满意的话，可以调用自己制作的 Javascript 或第三方开发的 Javascript ，而这时就需要使用本选项。
一般情况下，我们都固定住图的一部分，在此基础上再用图的其它部 分（可以被 拖动的）进行组合拼装，当然也可以让图全部都可以被拖动。 下面是具体的制作步骤。
步骤一:准备好要进行拼装的图形，然后将其分割。分割图形可使用Photoshop 之 类的软件，如果没有，用Windows自带的画图工具也可以。
步骤二:选定分割后图形的一部分，作为页面上固定部分，用菜单“Insert” 中的 “Image”命令直接插入到页面上的合适位置就可以。
按住CTRL键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两 个单元格中输入文字，就是你的主菜单名，可按自己想要的名字输入，我用"经典 论坛"和"天极网"为例，并加上链接。
二、 下拉选单的制作
现在开始制作将要下拉出现的菜单，同样用层来制作。 再次从Objects面板插入一个层到前面我们做好的导航条的下方，各项参数填为： Layer ID框填入menu1，L、T、W、H框分别填入8、34、120、80，背景色填入 #999966，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定 不能填错，不然菜单将会错位，也将影响完成后的可用性。
Change Property：改变属性，如发生某个事件后，自动改变文本或图片信息， 等等。
Check Browser：检查浏览器。同一个网页，在不同的浏览器上的显示可能大为 不同，如果你要让自己的网页适合于大多数浏览器的话，可以分别针对不同的浏 览器将所有的网页制作成几个不同的类别，然后再调用 Check Browser ，根据 访问者浏览器的不同，进入相应的网页，从而让你的网页在每种浏览器上都是完 美无缺的。
<1>.最终效果如图
图中，当将鼠标移到"请看状态栏"这几个字上的时候，状态栏中会显示"请看状 态栏"字样，当鼠标移开时状态栏中的信息消失，本例显示了带链接的内容在状 态栏显示信息的方法；当将鼠标移动到图像上时，状态栏中会显示"这是索尼网 站的一个图片"字样，当鼠标移开，状态栏中信息消失，本例显示了普通内容如 图片在状态栏中显示信息的办法。
因此，我们可以分四步来制作下拉菜单，首先我们需要一个导航条，它用来放 置首先出现在浏览者眼前的主菜单；然后再制作开始隐藏着而将会出现的下拉选单； 接着，进行最关键的一步，为主菜单和下拉选单添加上隐藏和显示层的效果；最后， 我们进行菜单的美化修饰。最终看到的效果如图。
一、 导航条的制作
首先进行一些必要的前期工作，按CTRL+J，打开Page Properties（页 面属性）窗口，参数设置如图二，这一设置对菜单的位置将有影响，所以 请如图设置。
步骤三:制作活动图形。在页面上插入一个层（Layer），选定分割后 图形可被 拖动的部分，将其插入层中，选中该层，弹出Behavior框，在其 中的“Events For”框中选择“IE 4.0”。
单击“+”，在菜单中选择“Drag Layer”，弹出对话框。
“Layer”表示选定层的名称（此项一定要选正确），至于其它参数用 默认值或 不填也可以了。选择“More Options”将会有更多的参数，见下 图，同样使用默认 值也可以。
Set Text/Set Text of Status Message：在状态栏显示信息。一般情况是，当鼠标放 到某幅图像上会自动弹出信息提示；或者当鼠标指向某个链接会在该处自动显示链 接信息，而状态栏中始终只有一个网页图标。要充分利用网页的有效空间，避免信 息混杂现象，可以把那些事件信息通过壮态栏进行显示，这就需要在网页中进行 Set Text of Status Message 的设置。
<1>.最终效果如图
<2>.制作步骤： 现在我们用现成的 16.htm 文件来制作弹出式效果。用 Dreamweaver 打开 16.htm ， 并用 File/Save As 命令将文件另存为一个新文件。 请仔细找到编辑窗口中左下角的 ＜Body＞符号，如图
选中 ＜body＞符号，然后在行为面板的行为菜单中点按 Popup Message 命令， 如图
<2>.制作步骤：
先在编辑区域输入"请看状态栏"字样，并随便为它加上个链接信息。如图
全选几个字，用 Window/Behaviors 命令打开行为窗口。点击左上角的 “+”号， 然后在弹出的窗口中选择 Set Text/Set Text of Status Bar 命令，如图
然后弹出如图六的窗口，其中， Message 对话框中的内容就是要在状态栏中显 示的信息。这时只需向其中输入“请看状态栏”字样就行了。如图
置完鼠标移上效果，还得设置鼠标移出，状态栏信息消失的效果。办法很简单，还是 选中那几个字，Set Text/Set Text of Status Bar ，然后在弹出的窗口中什么也别写 （以便在状态栏中什么也不显示），点按 OK 后回到动作面板上，最后再将动作由 onMouseOver （鼠标移上）改为 onMouseOut （鼠标移出）。如图
Open Browser Window：打开浏览器。 Popup Message：弹出信息提示框。最常见的例子是访问者进入某个页面，该 页面就会自动弹出一个消息框，显示先设定好的文本，如"欢迎访问本站"等等。 Preload Images：预取图片，主要功能在于保持效果的连续性，避免事件发生时 的读取延迟。
按CTRL+F2打开Objects面板，点击层按钮后在页面中按住鼠标不放拖出一个层， 然后在层的Properties（属性）面板中设置各参数，Layer ID框填入title，L、T、 W、H框分别填入8、15、480、15，背景色填入#006699，如图。
将光标移至层内，点击Objects面板上的表格按钮，插入一个一行四列的表 格，设置如图。
Check Plugin：检查插件。插件？比如你做了个 Flash 动画并放到自己的网页上， 当访问者的浏览器有 Flash 播放插件，则可以播放动画，如果没有，这时如果你 的网页具有 Check Plugin 功能，则可按你的解决方案对访问者进行提醒，如"你 应该安装 Flash 播放器，下载地址......"。
Dreamweaver是制作下拉菜单最常用的工具，方法简单，控制自由，可以最大 限度地随心打造菜单样式，是制作下拄菜单的必修课。
用Dreamweaver制作下拉菜单的原理很简单，它利用了Behaviors（行为）面板 中的内置方法Show-Hide Layers（隐藏-显示层）方法，并用onMouseOver（鼠标 移至）和onMouseOut（鼠标移开）来触发层的隐藏和显示，而将要出现的菜单就 在层中。
步骤四:在Behavior框的“Events”中点黑色箭头，选择“onMouseOver” 或 “onMouseDown”。
步骤五:如还有活动图形，重复步骤三、四，直至全部做完。
拼装图形只是DW中Behavior命令的一个简单应用，还有更多的功能在着我们 进一步去开发，把我们的网页点缀得更加精彩！
用Dreamweaver制作下拉菜单
从前面我们已经知道，行为其实是一种针对事件（Event）触发的特殊效果，效 果与事件缺一不可。刚才我们设置了效果（就是在状态栏中显示的信息），现 在得设置事件了。
回到行为面板上，看左边 Events 下是什么事件。此处是 onmouseover （鼠 标移上），那就不需要改了，因为我们正是要在鼠标移上那几个字样上时在 状态栏显示特别信息，但这只是系统的默认事件，而且在本例中这个默认事 件又恰恰合适，而在许多其他情况下，这种事件是需要另行选择的。要进行 选择，只需点按 onmouseover 右边那个向下的小三角形，然后在弹出的菜 单中进行选择就行了。如图
Drag Layer：拖曳图层，主要用来制作随鼠标移动而发生位移的网页特效。
Go to URL：跳转页面。在输入栏中输入网址，然后回车，就可以到想去的网站。 但在整个过程中，全是手工操作，而 Go to URL 却不同，只要你到了某个网页，不 用你再动手，它自己就会把你带到另外的指定的网址去。最常见的例子是那些网址 发生变化的网站，它们常常在旧网址的首页上注明网址已变，然后通过设置旧网页 的 Go to URL 自动将访问者带到新的地址去。
Show/Hide Layers：显示/隐藏图层，非常通用的网页特效，如当鼠标移到某个 对象上时，原来隐藏的图层显示出来，从而显示出该图层中的对象；当鼠标离开 原对象，显示和图层再次隐藏。
Swap Image：翻滚图，用它不仅可以建立一对一的翻滚图，还可以建立一对多 等更为复杂的"替换"特效。 Timeline中，Play Timeline/Stop Timeline/Go to Timeline Frame：主要是对等时 线控制。等时线犹如一个动画过程集合，在不同的时间可以播放不同的动画，关 于它的详细介绍我们将在下一节中讲解。本节中，你只需知道 Behavior 可以控 制复杂的等时线并产生非常智能化的特效就行了。
Control Shockwave or Flash：控制 Flash 影像。为什么要控制 Flash 影像？其实， 并不是每个 Flash 动画都是随网页打开就开始播放了，更多的是在网页上做一些按 钮之类的带交互作用的图标，可以点击它开始播放动画，也可以通过拖拉进度条前 进或后退，等等，而这，就需要 Control Shockwave or Flash 功能的支持。
带链接的文本设置完毕，下面我们加入图片（image/photo.gif），并按刚才的原理给 它添加效果。不同的地方只是不用给图片添加链接信息，在状态栏中显示的信息不同， 其他的设置完全一样，大家可以自己试着做一下。
2.弹出信息：
Popup Message 可以制作弹出信息效果，也就是打开页面，页面自动弹出对 话窗口并提示预设好的信息。
Validage Form：表单验证。表单中如果有诸如密码式，字符数目等的限制，就 可以应用表单验证功能。
行为示例：
上面我们就大部分常用的动态技术进行了解释，现在来看一看如何将这些特效变 成实实在在的东西。由于内容太多，我们只是选择了几个比较简单的例子，以便 于大家能够很容易地进行掌握。
1.在状态态显示信息：
第十一章
DW中的行为
行为基础 行为实例 拼图游戏的制作 下拉菜单的制作 行为总结
行为（Behavior）基础：
前面在制作一对多关系的翻滚图时，我们用到了行为（Behavior），那么， Dreamweaver 中的行为倒底是些什么东西？
实际上，Dreamweaver 中的行为，只不过是一系列 JavaScript 程序的集成，它 包括两部分的内容，一个部分是事件，另一个部分是动作，动作是特定的 JavaScript 程序，只要在事件发生（如鼠标点击，或者页面装载）后，该程序 （动作）就会自动运行。
然后会弹出如图十二的窗口， Message 输入框中输入的信息将作为提示信 息弹出。在输入框中输入“欢迎大家来到我的网页”字样。
最后点按 OK 并进行保存，弹出式效果制作完毕。
制作拼图游戏
工具:Layer（层）与Behavior（行为事件）菜单命令。
在浏览别人网页的时候，你也许经常发现网页上的某些图片（或文字） 可以用鼠 标随意拖动。如果把此效果运用到你的网页中，不是也可以为你 的网页增添一点灵性? 不过你或许会觉得制ห้องสมุดไป่ตู้起来比较麻烦，其实恰恰相反， 用DW做此效果特别简单。相 信看了下面的制作过程，你也会发出这样的感 叹。
Window/Behaviors 命令可以打开行为面板，如图
点击左上角的 "+" 号，弹出一个长长的菜单，里面全是一些"特效动作"，所 有当前不可用的选项都是灰色的，只有在设定一定条件下那些灰色的动作才 能使用。如图
对这些"动作"的解释如下：
Call JavaScript：调用 Javascript 脚本。 Dreamweaver 虽然内集了丰富的可供 调用的 Javascript ，但如果你觉得不满意的话，可以调用自己制作的 Javascript 或第三方开发的 Javascript ，而这时就需要使用本选项。
一般情况下，我们都固定住图的一部分，在此基础上再用图的其它部 分（可以被 拖动的）进行组合拼装，当然也可以让图全部都可以被拖动。 下面是具体的制作步骤。
步骤一:准备好要进行拼装的图形，然后将其分割。分割图形可使用Photoshop 之 类的软件，如果没有，用Windows自带的画图工具也可以。
步骤二:选定分割后图形的一部分，作为页面上固定部分，用菜单“Insert” 中的 “Image”命令直接插入到页面上的合适位置就可以。
按住CTRL键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两 个单元格中输入文字，就是你的主菜单名，可按自己想要的名字输入，我用"经典 论坛"和"天极网"为例，并加上链接。
二、 下拉选单的制作
现在开始制作将要下拉出现的菜单，同样用层来制作。 再次从Objects面板插入一个层到前面我们做好的导航条的下方，各项参数填为： Layer ID框填入menu1，L、T、W、H框分别填入8、34、120、80，背景色填入 #999966，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定 不能填错，不然菜单将会错位，也将影响完成后的可用性。
Change Property：改变属性，如发生某个事件后，自动改变文本或图片信息， 等等。
Check Browser：检查浏览器。同一个网页，在不同的浏览器上的显示可能大为 不同，如果你要让自己的网页适合于大多数浏览器的话，可以分别针对不同的浏 览器将所有的网页制作成几个不同的类别，然后再调用 Check Browser ，根据 访问者浏览器的不同，进入相应的网页，从而让你的网页在每种浏览器上都是完 美无缺的。