阿飙专线Dreamweaver直通车──动态网页
?牐犂肈reamweaver提供的一些工具和面板，我们可以方便的实现许多常见的动态交互式效果。例如：弹出窗口、显示和隐藏层、改变状态条文字、播放多媒体文件甚至制作出动态飘动的图层等等，更复杂的还包括常见的下拉菜单效果，以及拖动层效果等复杂的动态网页。根据动态效果的不同种类，我们可以用行为、时间线、层和扩展插件来达到我们的目的。
#1?牐犚弧⒔换バ形狟ehavior??
?牐犜贒reamweaver中我们可以在行为面板通过简单的点击，并设定响应的参数来添加常见的一些交互行为。
#2?牐?1.行为的基本要素
?牐犑录‥vent）和动作（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.行为面板默认行为简介
?牐燙all JavaScript：呼叫一段JavaScript；
?牐燙hange Property：改变Html标签的CSS样式；
?牐燙heck Browser：根据不同的浏览器，进入不同的页面；
?牐燙heck Plugin：检查浏览器是否装有必要的插件；
?牐燙ontrol Shockwave or Flash：控制Shockwave或Flash动画的播放；
?牐燚rag Layer：使浏览者可拖动层中的元素；
?牐燝o To URL：链接到指定的网址；
?牐燡ump Menu、Jump Menu Go：跳页式的菜单及Go按钮；
?牐燨pen Browser Window：打开新浏览窗口；
?牐燩lay Sound：播放声音；
?牐燩opup Message：弹出警告窗口；
?牐燩reload Images：提前读入图片；
?牐燬et Nav Bar Image：设定导航栏的图片；
?牐燬et Text：在特定的地方显示文字；
?牐燬how Hide Layer：显示或隐藏层；
?牐燬wap Image、Swap Image Restore：变换图片和恢复原来的图片；
?牐燭imeline：控制时间线的播放；
?牐燰alidate Form：验证表单的正确性；
?牐燝et More Behaviors：下载更多的行为事件。
#1?牐牰⒉阌氩忝姘錖ayer??
?牐犘形姘褰鼋鍪鞘迪纸换バЧ淖羁旖莸耐揪叮肈reamweaver中的层面板我们还可以使更多的元素动起来，并将Web页面带入三维的空间。需要指出的是，层是Web页面中实现精确定位的重要基础，也是CSS定位的基础。这里我们主要介绍的是利用层实现动态效果的方法，因此对于层的知识我将简单介绍。
#2?牐?1.创建和添加层
?牐犜贒reamweaver中创建层主要有多种途径，一种是从Object面板中选择（Draw Layer）图标绘制一个层；另一种方法是使用Inser｜Layer命令在当前位置插入一个层。
#2?牐?2.设定层的基本参数
?牐犜诓愕氖粜悦姘逦颐强梢陨瓒ú愕母鞲霾问缤?6（^47040702f^）所示。
?牐犘枰氐憬樯艿娜植问牵?
?牐牐?1）Visibility（可见性）：可以改变层的显示和隐藏属性。
?牐牐?2）Overflow（溢出处理）：可以控制层范围内的元素的显示区域，当层里面的内容超出层的实际尺寸时，可以定义如何显示超出部分。
?牐牐?3）Clip（剪切）：可以定义一个矩形区域，当层里面的内容超出层的实际大小时，可以将其剪切掉不显示。
?牐犕ü谋湔馊植问憧梢允迪指丛拥亩Ч?
#2?牐?3.使用层面板
?牐牭币趁嫔系牟惚冉隙嗍保颐强梢源蚩忝姘謇粗苯庸芾砗托薷牟悖缤?7（^47040702g^）所示。包括改变层的显示和隐藏属性，改变层的z轴叠放次序，改变层的名称及层与层之间的嵌套关系。
#2?牐?4.嵌套层的实现
?牐犌短撞闶且桓鲋匾母拍睿ü愕那短祝梢允棺硬慵坛懈覆愕囊恍┦粜裕笨梢允棺硬闼孀鸥覆阕刺母谋涠嘤Φ母谋洹Ｎ颐强梢栽诓忝姘逯醒≡褚桓霾悖醋trl键将它拖动到另一个层的名称上，便可以使它成为目标层的子层，而且我们可以实现层的多级嵌套。
#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^）所示。
?牐犔砑油闟how-Hide Layer行为后，我们还可以在行为面板改变触发此行为的事件，如图9（^47040702i^）所示。
?牐牐?2）Drag Layer（拖动层）。拖动层之所以具有很大的吸引力，在于它可以让浏览者自己控制和改变一些页面元素的位置，例如我们经常见的一些可以拖动的图片，以及一些拼图游戏等等。使用Drag Layer我们可以指定层的移动范围、移动方向（水平或垂直）、层的目标位置、是否自动对齐或者到达指定位置后是否触发另一个行为。
?牐牬唇ㄒ桓鐾隙愕男Ч饕幸韵录父霾街瑁?
?牐牐?1）绘制一个希望大小的层，并将需要改变位置的页面元素放置进去，例如一些图片、一个表格或一段文字等等任意的对象。
?牐牐?2）从工作窗口最下方的标签选择器中选定<body>标签，这样将把Drag Layer行为添加在<body>标签上。
?牐牐?3）打开行为面板，点击“+”号添加Drag Layer行为，并设定相应的参数，如图10（^47040702k^）所示。
?牐燣ayer：包含了当前文档中已有的层列表。
?牐燤ovement：设定层的移动方式，可以是Unconstrained（无约束）或Constrained（有约束）两种移动方式。无约束方式可以使你任意移动层，有约束方式将使你可以指定一个限制范围，层将只在此范围内移动。
?牐燚rop Target：设定有层移动的目标范围，这个值将和层移动的初始位置有关，当浏览者将层移动到你设定的这个位置时，可以执行你设定的另外一些行为。
?牐燬nap if Within：设定当拖动的层与目标位置的距离在此范围内时，自动将层对齐到目标位置。
?牐牰杂诩虻サ耐贫阈形瓒ㄒ陨喜问涂梢允迪治颐切枰亩换バЧＨ绻瓜Ｍ谕隙阈形崾螅葱衅渌囊恍┒鳎梢郧谢坏礁呒睹姘宕翱冢瓒ㄏ嘤Φ牟问?
?牐牐?4）设定高级参数（^47040702l^11）：
?牐燱hile Dragging：设定当拖动行为正在进行时可以执行的操作，在拖动时将层调到最顶端，拖动结束后可以将它留在顶端，或者恢复它原来的高度；并且可以设定拖动时执行另外一段JS程序或命令。
?牐燱hen Dropped：设定拖动结束后调用另一段JS程序。
#1?牐犎⑹奔湎逿imeline??
?牐犑褂眯形姘逦颐且丫梢约虻タ旖莸卮唇ń换ナ蕉Ч耍獶reamweaver还提供了更复杂和强大的工具可以实现高级动态效果，这就是时间线（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帧时会自动打开一个浏览器窗口。
?牐犘〗幔旱秸饫镂梗腋乓樯芰嗽贒reamweaver中实现动态交互效果的途径，我们可以看到，通过使用层并改变层的定位、可视性、深度等特性，我们创建了多种动态效果，可以说层的应用是实现动态效果的基础。通过为层增加相应的行为，并使用时间线来控制，我们将动态的Web页面引入了四维的空间。
?牐犛捎谄蓿窘谖也辉傥蠹医樯芟嘤Φ氖褂眉记桑灰蠹胰险嫜芯亢肔ayer、Behaviors、Timeline三个面板的各个参数，相信你可以作出更多变换的页面效果。