阿飙专线Dreamweaver直通车──动态网页 梦觉 2001年 47期 编者按：经过前面五期基础知识的讲解，相信大家已经打好了坚实的基础。下一步我们则希望创造出充满变化和吸引力的页面效果，通过动态的响应吸引更多的浏览者。但网上各种动态页面效果都是需要一些编程知识才能实现的，很多朋友因此望而却步。 　　利用Dreamweaver提供的一些工具和面板，我们可以方便的实现许多常见的动态交互式效果。例如：弹出窗口、显示和隐藏层、改变状态条文字、播放多媒体文件甚至制作出动态飘动的图层等等，更复杂的还包括常见的下拉菜单效果，以及拖动层效果等复杂的动态网页。根据动态效果的不同种类，我们可以用行为、时间线、层和扩展插件来达到我们的目的。 　　#1一、交互行为Behavior 　　在Dreamweaver中我们可以在行为面板通过简单的点击，并设定响应的参数来添加常见的一些交互行为。 　　#21.行为的基本要素 　　事件（Event）和动作（Action），如图1（^47040702a^）所示。事件是一个动作的触发器，在网络上既可以是用户触发的，如鼠标的滑过、点击等，也可以是自动完成的，如一个页面的载入或关闭。动作则是一系列复杂的变化，可以是在状态条显示一条信息，或是复杂的翻转效果，打开新窗口等等。而所有的行为都是依附在某个特定的元素上，例如一个文本链接、一个图像或一个层等等。 　　#22.添加行为的基本步骤 　　（1）选取一个特定的元素，最常见的是一个链接。行为将被加到此特定的元素上。 　　（2）选择你希望兼容的浏览器版本。如果你希望更多的人能看到你做的效果，必须选择较低的浏览器选项。点击行为面板左上角的“+”号，打开行为选项，选定Show Event For，通常我们选择IE4.0以上版本的浏览器，如图2（^47040702b^）所示。 　　（3）选择一个希望执行的动作。例如打开一个浏览器窗口（^47040702c^3）、交换图片、隐藏一个层，或是在状态栏显示一段文字。 　　（4）为上述的动作设定具体的参数。虽然Dreamweaver自带的动作看起来有限，但通过设定不同的参数我们可以做出很复杂的效果，如图4（^47040702d^）所示。 　　（5）添加行为结束。当我们选择了一个动作后，Dreamweaver会自动添加一个相应的缺省事件。在本例中Dreamweaver将触发此动作的事件设定为onClick，如图5（^47040702e^）所示，即当浏览者点击此链接时，自动触发我们上面添加的弹出一个浏览器窗口这一动作。我们可以打开行为检查器来观察。从此图中我们可以看到相应的已添加事件和已添加的动作列表，点击小三角还可以改变触发此动作的事件，双击动作名称还可以修改添加的动作参数。 　　#23.行为面板默认行为简介 　　Call JavaScript：呼叫一段JavaScript； 　　Change Property：改变Html标签的CSS样式； 　　Check Browser：根据不同的浏览器，进入不同的页面； 　　Check Plugin：检查浏览器是否装有必要的插件； 　　Control Shockwave or Flash：控制Shockwave或Flash动画的播放； 　　Drag Layer：使浏览者可拖动层中的元素； 　　Go To URL：链接到指定的网址； 　　Jump Menu、Jump Menu Go：跳页式的菜单及Go按钮； 　　Open Browser Window：打开新浏览窗口； 　　Play Sound：播放声音； 　　Popup Message：弹出警告窗口； 　　Preload Images：提前读入图片； 　　Set Nav Bar Image：设定导航栏的图片； 　　Set Text：在特定的地方显示文字； 　　Show Hide Layer：显示或隐藏层； 　　Swap Image、Swap Image Restore：变换图片和恢复原来的图片； 　　Timeline：控制时间线的播放； 　　Validate Form：验证表单的正确性； 　　Get More Behaviors：下载更多的行为事件。 　　#1二、层与层面板Layer 　　行为面板仅仅是实现交互效果的最快捷的途径，利用Dreamweaver中的层面板我们还可以使更多的元素动起来，并将Web页面带入三维的空间。需要指出的是，层是Web页面中实现精确定位的重要基础，也是CSS定位的基础。这里我们主要介绍的是利用层实现动态效果的方法，因此对于层的知识我将简单介绍。 　　#21.创建和添加层 　　在Dreamweaver中创建层主要有多种途径，一种是从Object面板中选择（Draw Layer）图标绘制一个层；另一种方法是使用Inser｜Layer命令在当前位置插入一个层。 　　#22.设定层的基本参数 　　在层的属性面板我们可以设定层的各个参数，如图6（^47040702f^）所示。 　　需要重点介绍的三种参数是： 　　（1）Visibility（可见性）：可以改变层的显示和隐藏属性。 　　（2）Overflow（溢出处理）：可以控制层范围内的元素的显示区域，当层里面的内容超出层的实际尺寸时，可以定义如何显示超出部分。 　　（3）Clip（剪切）：可以定义一个矩形区域，当层里面的内容超出层的实际大小时，可以将其剪切掉不显示。 　　通过动态改变这三种参数，便可以实现复杂的动态效果。 　　#23.使用层面板 　　当页面上的层比较多时，我们可以打开层面板来直接管理和修改层，如图7（^47040702g^）所示。包括改变层的显示和隐藏属性，改变层的z轴叠放次序，改变层的名称及层与层之间的嵌套关系。 　　#24.嵌套层的实现 　　嵌套层是一个重要的概念，通过层的嵌套，可以使子层继承父层的一些属性，同时可以使子层随着父层状态的改变而相应的改变。我们可以在层面板中选择一个层，按住Ctrl键将它拖动到另一个层的名称上，便可以使它成为目标层的子层，而且我们可以实现层的多级嵌套。 　　#25.利用层实现动态效果 　　层的一个重要的特性是它的所有属性可以被动态的改变（包括坐标、尺寸、深度、可见性和剪裁等等）。而且这些属性的改变我们可以利用Dreamweaver的行为面板来实现，在Dreamweaver中有两个行为是专门针对层的，Show-Hide Layer和Drag Layer。 　　（1）Show-Hide Layer（显示/隐藏层）。通过交互式的改变层的显示属性为实现Web页面的丰富效果提供了可能，通过Show-Hide Layer行为我们可以控制各个层的显示，从而实现一些特殊效果，例如翻转图效果、下拉菜单效果等等。主要的过程类似于前面我们介绍的添加行为的过程。首先需要选定将要添加Show-Hide Layer行为的HTML元素，例如图像、链接；从行为面板中添加Show-Hide Layer行为；在打开的对话框中指定将要改变显示属性的层，并改变它的显示属性，如图8（^47040702h^）所示。 　　添加完Show-Hide Layer行为后，我们还可以在行为面板改变触发此行为的事件，如图9（^47040702i^）所示。 　　（2）Drag Layer（拖动层）。拖动层之所以具有很大的吸引力，在于它可以让浏览者自己控制和改变一些页面元素的位置，例如我们经常见的一些可以拖动的图片，以及一些拼图游戏等等。使用Drag Layer我们可以指定层的移动范围、移动方向（水平或垂直）、层的目标位置、是否自动对齐或者到达指定位置后是否触发另一个行为。 　　创建一个拖动层的效果主要有以下几个步骤： 　　（1）绘制一个希望大小的层，并将需要改变位置的页面元素放置进去，例如一些图片、一个表格或一段文字等等任意的对象。 　　（2）从工作窗口最下方的标签选择器中选定标签，这样将把Drag Layer行为添加在标签上。 　　（3）打开行为面板，点击“+”号添加Drag Layer行为，并设定相应的参数，如图10（^47040702k^）所示。 　　Layer：包含了当前文档中已有的层列表。 　　Movement：设定层的移动方式，可以是Unconstrained（无约束）或Constrained（有约束）两种移动方式。无约束方式可以使你任意移动层，有约束方式将使你可以指定一个限制范围，层将只在此范围内移动。 　　Drop Target：设定有层移动的目标范围，这个值将和层移动的初始位置有关，当浏览者将层移动到你设定的这个位置时，可以执行你设定的另外一些行为。 　　Snap if Within：设定当拖动的层与目标位置的距离在此范围内时，自动将层对齐到目标位置。 　　对于简单的推动层行为，设定以上参数就可以实现我们需要的动态交互效果。如果还希望在拖动层行为结束后，执行其他的一些动作，可以切换到高级面板窗口，设定相应的参数。 　　（4）设定高级参数（^47040702l^11）： 　　While Dragging：设定当拖动行为正在进行时可以执行的操作，在拖动时将层调到最顶端，拖动结束后可以将它留在顶端，或者恢复它原来的高度；并且可以设定拖动时执行另外一段JS程序或命令。 　　When Dropped：设定拖动结束后调用另一段JS程序。 　　#1三、时间线Timeline 　　使用行为面板我们已经可以简单快捷地创建交互式动态效果了，但Dreamweaver还提供了更复杂和强大的工具可以实现高级动态效果，这就是时间线（Timeline），使用时间线是进入四维空间的必由之路。前面我们介绍的动态效果都是发生在瞬间的变化之中，而利用时间线我们可以实现真正的运动效果，但Dreamweaver中的时间线并不仅仅是实现运动的工具，它也有助于实现定时完成指定任务。例如在指定的时间和状态下执行一个行为，或者跳转到另一个行为，可以说时间线将页面中的各种交互行为有机和有序的组织结合到了一起。这是一个非常复杂的过程，但Dreamweaver将它变得操作起来非常简单，所有的程序代码都自动为我们添加好。 　　#21.使用时间线的基本原则 　　（1）所有在时间线控制范围内运动的元素，都必须放入各自的层中，也就是说只有层可以被时间线面板接受。 　　（2）在一个时间线上可以包含多个动画，它们将按各自的属性运动，但必须保证它们没有作用在同一个层上。 　　（3）在时间线上的任意位置都可以添加行为，也就是说我们不需要将所有的行为都从时间线的开始位置启动，可以根据我们的需要在指定的帧位置启动。 　　#22.使用时间线创建动画 　　（1）将层添加到时间线。首先我们必须将需要运动的元素放入一个层中，然后点击并拖动层的标示，将其拖入时间线面板中。Dreamweaver会自动创建一个15帧的动画条。 　　（2）单击并拖动动画条可以改变它从何时开始播放，击并拖动动画条的最后一帧，可以改变动画执行的时间长度。 　　（3）一个动画并不仅仅是只有开始和结束两个状态，我们可以添加多个关键帧，并设定每个关键帧时，相关层的位置、属性，以及执行的行为。使用鼠标右键单击动画条上的一个帧位置，执行Add Keyframe即可添加一个关键帧。 　　（4）选定相应的关键帧，然后在文档窗口改变层的位置或属性。最后根据需要勾选Autoplay（自动播放）或Loop（循环播放），即可实现一个动画。 　　#23.在时间线中改变行为 　　我们除了可以自动执行一个动态运动的层效果，还可以为时间线上的关键帧指定单独执行的行为，也可以把时间线附着于某个事件上。 　　（1）将时间线指定到特定的事件。选择一个特定的元素，如图像、链接，打开行为面板，选择添加行为，从弹出菜单中选择Timeline｜Play Timeline开始播放一个时间线动画；选择Timeline｜Stop Timeline停止一个正在播放的时间线动画；选择Goto Timeline Frame直接跳转到时间线上的一个关键帧位置。 　　（2）为时间线添加行为。在时间线的行为通道中我们可以添加相应的行为，这样当动画执行到此位置时将启动相应的行为。鼠标定位在一个帧位置，打开行为面板，添加需要的一个行为，例如我们在第12帧添加了一个打开浏览器窗口的行为，当动画播放到第12帧时会自动打开一个浏览器窗口。 　　小结：到这里为止，我概要介绍了在Dreamweaver中实现动态交互效果的途径，我们可以看到，通过使用层并改变层的定位、可视性、深度等特性，我们创建了多种动态效果，可以说层的应用是实现动态效果的基础。通过为层增加相应的行为，并使用时间线来控制，我们将动态的Web页面引入了四维的空间。 　　由于篇幅所限，本节我不再为大家介绍相应的使用技巧，但只要大家认真研究好Layer、Behaviors、Timeline三个面板的各个参数，相信你可以作出更多变换的页面效果。