Artile_Title
六、动态交互篇
二、层与层面板(Layer) 。行为面板仅仅是实现交互效果的最快捷的途径，利用Dreamweaver中的层面板我们还可以使更多的元素动起来，并将Web页面带入三维的空间。需要指出的是，层是Web页面中实现精确定位的重要基础，也是CSS定位的基础。但在本节中我们主要介绍的是利用层实现动态效果的方法，因此对于层的知识我将简单介绍。
（一） 创建和添加层。在Dreamweaver中创建层主要有多种途径，一种是从Object面板中选择 
（Draw Layer）图标绘制一个层；另一种方法是使用Inser|Layer命令在当前位置插入一个层。
（二） 设定层的基本参数。在层的属性面板我们可以设定层的各个参数。
需要重点介绍的三种参数是：
1、Visibility(可见性)：可以改变层的显示和隐藏属性。
2、Overflow(溢出处理)：可以控制层范围内的元素的显示区域，当层里面的内容超出层的实际尺寸时，可以定义如何显示超出部分。
3、Clip(剪切)：可以定义一个矩形区域，当层里面的内容超出层的实际大小时，可以将其剪切掉不显示。
通过动态的改变这三种参数，便可以实现复杂的动态效果。
（三） 使用层面板：当页面上的层比较多时，我们可以打开层面板来直接管理和修改层。包括改变层的显示和隐藏属性，改变层的z轴叠放次序，改变层的名称及层与层之间的嵌套关系。
（四） 嵌套层的实现。嵌套层是一个重要的概念，通过层的嵌套，可以使子层继承父层的一些属性，同时可以使子层随着父层状态的改变而相应的改变。我们可以在层面板中选择一个层，按住Ctrl键讲它拖懂到另一个层的名称上，便可以使它成为目标层的子层，而且我们可以实现层的多级嵌套。
（五） 利用层实现动态效果。层的一个重要的特性是它的所有属性可以被动态的改变（包括坐标、尺寸、深度、可见性和剪裁等等）。而且这些属性的改变我们可以利用Dreamweaver的行为面板来实现，在Dreamweaver中有两个行为是专门针对层的，Show-Hide Layer和Drag Layer。
1、 Show-Hide Layer（显示/隐藏层）。通过交互式的改变层的显示属性为实现Web页面的丰富效果提供了可能，通过Show-Hide
Layer行为我们可以控制各个层的显示，从而实现一些特殊效果，例如翻转图效果、下拉菜单效果等等。主要的过程类似于前面我们介绍的添加行为的过程。首先需要选定将要添加Show-Hide
Layer行为的HTML元素，例如图像、链接；从行为面板中添加Show-Hide Layer行为；在打开的对话框中指定将要改变显示属性的层，并改变它的显示属性，如图：
添加完Show-Hide Layer行为后，我们还可以在行为面板改变触发此行为的事件。
2、 Drag Layer（拖动层）。拖动层之所以具有很大的吸引力，在于它可以让浏览者自己控制和改变一些页面元素的位置，例如我们经常见得一些可以拖动的图片，以及一些拼图游戏等等。使用Drag Layer我们可以指定层的移动范围、移动方向（水平或垂直）、层的目标位置、是否自动对齐或者到达指定位置后是否触发另一个行为。创建一个拖动层的效果主要有以下几个步骤：
1） 绘制一个希望大小的层，并将需要改变位置的页面元素放置进去，例如一些图片、一个表格或一段文字等等任意的对象。
2） 从工作窗口最下方的标签选择器中选定<body>标签，这样将把Drag Layer行为添加在<body>标签上。
3） 打开行为面板，点击“+”号添加Drag Layer行为，并设定相应的参数。
Layer：包含了当前文档中已有的层列表。
Movement：设定层的移动方式，可以是Unconstrained（无约束）或Constrained（有约束）两种移动方式。无约束方式可以使你任意移动层，有约束方式将使你可以指定一个限制范围，层将只在此范围内移动。
Drop Target：设定有层移动的目标范围，这个值将和层移动的初始位置有关，当浏览者将层移动到你设定的这个位置时，可以执行你设定的另外一些行为。
Snap if Within：设定当拖动的层与目标位置的距离在此范围内时，自动将层对齐到目标位置。
对于简单的推动层行为，设定以上参数就可以实现我们需要的动态交互效果。如果们还希望在拖动层行为结束后，执行其他的一些动作，可以切换到高级面板窗口，设定相应的参数。
4） 设定高级参数：
While Dragging：设定当拖动行为正在进行时可以执行的操作，在拖动时将层调到最顶端，拖动结束后可以将它留在最顶端，或者回复它原来的高度；并且可以设定拖动时执行另外一段JS程序或命令。
When Dropped ：设定拖动结束后调用另一段JS程序。