Dreamweaver图层应用实例

Icefire 
2001年 18期

　　随着网络技术的发展，网页对象仅仅停留在平面二维是落伍的，Dreamweaver（以下简称DW）的图层可以轻松建立三维效果，我们可以使网页中的对象在垂直方向互相重叠，再配合Timeline的应用做出意想不到的效果来，使你的网页动感十足。
　　　　TimeLine（时间轴）是DW最精华的一点，也是Macromedia最为骄傲的。用TimeLine做动画可以满页飞，动画的实现主要是通过Java Script语句来完成的，你不必为不懂java script而苦恼，在DW中你只需用鼠标点几下就ok了。DW动画是建立在图层上的，也就是说没有图层的参与DW动画就不可能实现。下面我将通过一个范例的实现来体现Timeline的强大功能。
　　　　时下非常流行在网站首页放置飘动的广告，这样的广告节省页面空间、交互性强，往往点击率很高，为了使飘动广告交互性更强，我们可以加入一些行为事件，比如Onclick、OnMouseOver等等。下面范例要实现的效果是：一个飘动的广告，当鼠标指向广告时，时间轴动画停止并换一张广告图片，当鼠标移开广告恢复原状。以下是在DW4中实现这一效果的详细步骤：
　　　　一、准备工作：准备两张图片，最好尺寸一样，图片文件越小越好，这样有利于提高网页的浏览速度。
　　　　二、执行Insert→Layer命令，在网页中插入一个图层，并在图层中插入我们准备的图片，在属性浮动面板中给该图片命名。注意：图片名称只能是字符，不支持数字。当然也可以根据需要插入其它的内容，如Flash动画、文本、表格、Shockwave等等。
　　　　三、执行Window→Timelines命令，打开时间轴浮动面板。
　　　　四、通过下列方法之一把图层加到时间轴中去。
　　　　1.执行Modify→Timeline→Add Object to Timeline命令，把Layer 1加到时间轴。
　　　　2.用鼠标单击选取图层，在时间轴浮动面板中单击鼠标右键，然后在弹出快捷单中选择Add Object（加入对象）命令，把Layer 1加到时间轴。
　　　　3.用鼠标直接拖动图层到时间轴轨道中，这是最简便的也是最常用的方法。
　　　　五、单击时间轴的最后的一帧，红色播放指针移到最后一帧，图1（^18040701a^）所示的是操作后的时间轴浮动面板。
　　　　六、用鼠标拖动图层到目的位置，松开鼠标后编辑窗口中出现一条路径参考线，这条参考线就是动画的运动轨迹。这样制作的动画沿直线运动非常单调，同样也可以让图片走曲线，拖动红色播放指针到时间轴的中间，选择蓝色轨道单击鼠标右键弹出快捷菜单，选择Insert KeyFrame命令或按住Ctrl键单击时间轴插入关键帧，再用鼠标拖动图层，发现路径变成曲线了。
　　　　如果需要制作更为复杂的运动路径，可用DW的Record Path of Layer（记录图层路径）功能，具体使用方法如下：
　　　　1.在网页中插入一个图层，并在图层中插入对象，用鼠标选取图层后执行Modify→Timeline→Record Path of Layer命令。
　　　　2.用鼠标按住图层在网页中画图层的运动轨迹，松开鼠标DW就自动为你创建好了时间轴，只需自己修改一点点就可以了，强烈推荐用此方法创建时间轴动画运动轨迹。
　　　　七、给时间轴动画加入鼠标指向广告停止动画行为，执行Window→Behaviors命令，打开行为浮动面板。
　　　　八、单击行为浮动面板的加号按钮弹出快捷菜单，执行Timeline→Stop Timeline命令，打开Stop Timline对话框。
　　　　九、在对话框中选择All Timelines后，点击确定按钮，再在行为浮动面板中，把事件改为OnMouseOver即可。
　　　　十、这一步是让动画重新动起来，加入当鼠标移开广告时间轴重新运动行为。在行为浮动面板中点击加号弹出快捷菜单，执行Timeline→Play Timeline命令，打开Play Timeline对话框，在对话框中选择当前时间轴名称后确定。
　　　　十一、在行为浮动面板中把激发Play Timeline动作的事件改为OnMouseOut。
　　　　十二、加入当鼠标指向广告交换图片行为，在行为浮动面板中点击加号弹出快捷菜单，执行Swap Image命令，打开Swap Image（交换图片）对话框，在对话框中的Images选择框中选择要替换的图片（如图2所示）（^18040701b^），再在Set Source to文本框中输入替换图片地址，也可通过点击Browser按钮来选择图片，最后点击确定。
　　　　十三、至此，所有行为添加完毕，行为浮动面板里的内容应如图3（^18040701c^）所示。注意：Swap Image Restore事件是在添加Swap Image行为时自动加上的，无需人工添加。
　　　　十四、在时间轴浮动面板中，把Autoplay（自动播放）和Loop（循环播放）选中，按F12预览即可看到你想要的效果，这个效果可在我网站http://www.kupage.com（酷页）首页看到，欢迎指教。
　　　　
　　
　　 
 