随着网络技术的发展，网页对象紧紧停留在平面二维是落伍的，Dreamweaver的图层可以使我们轻松建立三维效果，我们可以使网页中的对象在垂直方向互相重叠，再配合Timeline的应用可以做出意想不到的效果来，使你的网页更加生动，动感十足。

    现在有关DW（DW是Dreamweaver的缩写，后同）的教程很多，但这些教程大多是比较基础的，都是针对DW的一些初级用户。专门花大量篇幅讨论一个问题的很少，于是我就萌发了要做这个专题的想法，再开始本专题之前我花少量篇幅介绍这个专题。

    此专题针对有一定DW基础的朋友，所以我没有花时间介绍图层的基本概念，图层浮动面板等等，要是你对这些不太清楚的话，请看看本站的相关教程。本专题是由一组范例组成，这些范例由浅入深，实现难度逐渐增大。光靠几个范例是不可能把DW图层吃透，本专题只是起抛砖引玉，修行还是看个人。主要内容如下：

1.如何把DW图层换成表格，还加一个经典的图层特效等。

2.下拉菜单的实现和一个可以用按钮控制的隐藏图层。

3.如何对文字赋予图层特效，一个简单的Timeline应用。

4.如何对移动的图层加入Behaviors事件。

5.Java和Flash都可以实现幻灯片效果，DW一样可以轻松搞定。

6.压轴戏不可不看哟，我同时出了一道题有没有兴趣试一试？

图层是在制作网页经常用到的技巧，有一些人使用图层紧紧停留在定位元素这一点上，其它一些比较经典的特效没有用，不能不说是一种遗憾。今天我把我所知的一些技巧都写出来供大家学习参考，这些技巧没有一个需要你写一行程序，仅需你频繁的点击鼠标。这些技巧从易到难，循序渐进。
>>元素的定位
    这是一个最简单也是大多数人都掌握的应用， 不过我还是随便讲一讲。用表格来对页面进行排版非常方便，但有时需要在文字上放一些图片之类的应用，表格就不能胜任了，这时就需要图层来排版。在DW3中图层还可以转换成表格，这也是蛮方便的。有时比较大的图片需分割后再插入网页，这时用到DW3的图层转换功能来排版就事半功倍。首先，你要把你的图片用图层在页面中放好（你想放那就放那）。然后，点击菜单Modify\Layout Mode\Convent Layers to Table后就出来一个菜单，设好参数点击确定即可得到你想要的效果。

>>鼠标移到图片时显示隐含图层 （请看范例）
    这是比较常用的技巧，这样做会非常节约版面空间，当你介绍一张图片使用这种方法非常有效。下面看看如何实现：
    1.先插入一个图层，把它的属性设为隐含。打开属性浮动面版（Ctrl+F3)把Vis属性设为Hidden（隐藏）如下图：

    2.用鼠标点击图片后，打开Behaviors（行为）菜单（F8），按住小加号拖动鼠标选择Show Hide-Layers（显示隐含图层），立刻跳出一个Show Hide-Layers菜单，选Show（显示）点击OK,别慌还没完，接着Events（事件）框里就有一行类容如下图，

再点击黑色的小三角形，会出现非常多的选项，不要迷茫请选择OnMouseOver（鼠标移到图片上时），到此为止工作做了一大半。
    3.再重复第二步，当跳出Show Hide-Layers菜单，这次就要选Hide（隐藏），点击小三角形选OnMouseOut（鼠标移出图片时），最后设置完如下图，这个特效全部做完。


>>拖动图层的应用 （请看范例）
    在DW3中建一个可以拖动的图层非常方便，拖动图层必须要事件激活，比如onClick，onMouseOver等等。下面就是实现的过程：
    1.先建一个图层放入你想放的东东，本例中插入一张图片。
    2.选定图层后按F8调出Behaviors浮动面板，点击浮动面板的加号选Drag Layer这个选项，立刻出来一个Drag Layer 编辑窗口按确定。
    3.在Behaviors浮动面板中，你会发现默认Events（事件）是onClick，把它改成onMouseOver事件，点击Actions下的一个小三角形选onMouseOver即可。

    这是几个比较经典的应用，很多教程都有这个技巧。我把它再重复一次是为后面的技巧作铺垫。

上次说到点击按钮出现隐含图层，在今天开始学习之前，先说一点题外话。DW3对中文支持不好，他的链接不支持用中文命名的文件，这是其一。其二，它的Behaviors（行为）菜单中浏览器的选择很不方便，他默认的是3.0 and Later Browsers，这样的话就有很多特效不能用，包括图层的一些特效。解决办法是点一下Events For右边的一个小三角形，再用键盘的上下健选择你所希望的浏览器。
>>点击按钮出现隐含图层 （请看范例）
    先看看例子
    1.先把Objects（项目）Ctrl+F2面版调出来，插入两个按钮。注意，两个按钮的Action（动作）都要选None（无），否则不能做出效果来。如下图：



    2.把图层里的内容准备好，并把它设为隐含。图层里的内容由你定，教程（一）里的图层是搜索引擎，现在是留言簿，根据你的需要来更改图层中的内容。
    3.由于有了教程（一）的基础我就不写那么详细，点击“显示留言簿”按钮，按F8出现Behaviors（行为）菜单，加入Events（事件）显示图层，Actions（动作）不要改动，千万不要把它改为“OnMouseOver”，要不然这按钮没用。设完如下图：


    
    4.点击“隐藏留言簿”按钮，同样加入Events（事件）隐藏图层。

>>下拉菜单的实现 （请看范例）
    老习惯先来瞧一瞧效果
    1.你得先把菜单做好，再把相应下拉菜单的内容放到隐藏图层里。一个链接对应一个图层，上图有四个链接就得做四个隐含图层，图层分别放在链接的下面，像下图那样摆放。



    2.剩下的事情就好做了，你得多点几下鼠标。按F8把Behaviors（行为）菜单调出来，点击“健康常识”链接后，在Behaviors中点击加号选Show- Hide Layers，出来Show-Hide Layers菜单，把Layer1设为Show（显示），其它三个图层设为Hide（隐藏）。如下图：

    3.把Events（事件）OnClick改为OnMouseOver事件，Ok!这是一个下拉菜单的制作，其它的三个链接如法炮制。不过我要特别强调一点：在设置Show-Hide Layers菜单时一定要注意，除了把该链接的下拉菜单图层设为Show（显示）外，其它的图层一定要设为Hide（隐藏），否则，效果不堪入目。

>>如何赋予文字图层特效 （请看范例）
1.先输入你要做特效的文字，为它做一个链接，随便是什么链接。
2.建一个图层,设为(hidden)隐含,由于特效可以在链接上实现，先把图层特效在链接上做好。
3.链接的标签是<a>与</a>，我们现在做的事就是把<a>与</a>用<font>与</font>替换就可以达到目的。当然也有一些别的特效可以在文字上实现。如OnClick，Popup Message等，只要是能在链接上实现的特效，一般都可以在文本文字上实现。>>ClickMe<<

>>Timeline 的基本应用 （请看范例）
    TimeLine（时间轴）是Dreamweaver最精华的一点，也是Macromedia最为骄傲的。用TimeLine做动画可以满页飞，动画的实现主要是通过Java Script语句来完成的，你不必为不懂java script而苦恼，在DW中你只需用鼠标点几下就ok。DW动画是建立在图层上的，也就是说没有图层的参与DW动画就不可能实现，这是我为什么把TimeLine归纳为图层应用的原因。
先让我们熟悉一下TimeLine面板，按键盘Ctrl+F9或Window->TimeLine打开面板如下图：



1.时间轴选择框，它列出了当前所有时间轴动画名称，方便你选择编辑。
2.帧控制按钮，最左边的的按钮功能是回到第一帧，剩下的分别是向左或向右移动一个帧。
3.动画播放组件，fps是动画播放速度；Autoplay，是否打开网页时播放动画；loop,是否循环播放。
4.行为设置轨道，有一个“B”字符，它是Behavior的缩写，这最精彩，在以后我会讲到。

5.时间轴用过Flash的朋友对它一定不陌生。
    6.动画轨道，每一条轨道中只能有一个动画，也就是说每一轨道只能有一个图层特效。DW3一共支持32条轨道，这可以做出相当复杂的效果来，爽吧？
    时间轴我们已经认识了，那就开始第一个也是最简单的例子—飞动的图片。
    1.插入一个带图片的图层，把TimeLine面板调出来(Ctrl+F9)，用鼠标把图层拖到动画轨道来，就可以建立一个动画片段。用DW2的朋友不能采用此办法，还不支持。执行菜单命令"Modify>Timeline>Add Obeject to Timeline"也可以达到同等效果。
    2.在默认情况下，动画长度时15帧，当然你也可以根据需要增加或减少，只需把动画最后一帧向后拖。
    3.把播放指针移到最后一帧，拖动图层到你想要到的地方，到此一个最简单的动画基本做完。你想一打开网页就播放动画，请选择Autoplay。你要是不想让动画播一边就Game Over，你就把Loop（循环播放）也选上吧。
    4.这是我增加的一步，你想让动画走曲线，就看看这一步。在动画中间插入一个关键帧(Key Frame)，执行"Modify>Timeline>Add Keyframe"就可以插入一个关键帧。然后把播放指针移到关键帧处，拖动图层。按F12预览，图层就走曲线了。
    最后我给一个例子，可能不能预览，你把此页面保存应该可以预览。下一节将讲一个比较复杂的例子。

上次讲了基本Timeline的应用，这些时到一些网站总会看到一个移动的网易广告，那个效果就是用时间轴做的非常简单，如还有人不的会话，我建议他看看此教程的（三），好言归正传，今天我准备讲一个复杂的时间轴应用，说白了就是在图层移动的过程中加一些Behaviors事件，让你的动画更具特色。先看看效果，为了这个地图我不知看了多少张光盘的图片。

>>一个比较复杂的Timeline例子 （请看范例）
    我先来解释一下这是怎样的一个效果，飞动的图层每当移动到一个地名时就激发一个Behaviors事件，在本例中的响应事件是显示隐藏图层，当然这种特效事件有很多种，不一定非要是显示隐藏图层，比如说跳出一个对话事件或在状态栏写字等等。在此需要提出的是：一个帧可有多个响应事件。接下来我就讲一讲怎样实现这个例子，由于有了先前的基础，我讲的可能有点粗。
    1.每一个图层的例子当然先要插入一个图层，本例插入的是一个笑脸图层，同时也插入一个隐含图层，以便在地名下显示，本例中的隐含图层内容是一些文字图方便。不会吧？隐含图层都不会插入。就是先插入一个图层，把浮动属性面板的Vis项选hidden即可
    2.调出时间轴面板(Ctrul+F9)，用鼠标把笑脸图层拖到动画轨道来（用DW2的朋友不能这样做），就这样建立了一个小小的动画片段，动画长度是可以变的，你用鼠标拖动圆点就可加长常动画时间。
    3.把播放指针（红色的）拖到动画片段最后一帧， 再拖动笑脸图层到Canada这个地方。一个简单的动画片但就这样搞定了。
    4.已经把笑脸拖到Canada这个地方了，现在就要在这一帧加个Behaviors，也就是要显示隐藏图层。在时间轴的上方还有一条轨道，这就是加Behaviors事件的地方，在该帧上方的对应位置点击鼠标右建，选“Add Behavior”后跳出Behaviors事件浮动窗口。
    5.在Behaviors浮动窗口中点击符号加，选Show_Hide Layers选项接着跳出一个how_Hide Layers对话框，把刚插入的一个隐藏图层选上并点击Show后确定。
    6.完成了一点点，休息一下，我要是再接着讲我怕你快疯了，把前五步消化一下，我讲的非常细，生怕你在那一步出了错，这样的话后来的大量工作都是无用的。我没有使用图片来辅助说明，下面加一张图片，大家也有个对照的。

    7.看了这个插图，大家一定有个疑问，为什么你在时间轴上空那么一戳有什么用。我现在来解释一下，大家知道当笑脸运动到Canada这个地方时，就显示隐藏图层，我空这么一大块就是为了笑脸在Candada这个地方停一会儿，留点时间给大家看隐藏图层的内容。
    8.用鼠标拖动笑脸图层到Timeline的动画轨道，留一段空白距离如上图。把播放指针直到最后一帧，用鼠标移动到Europe，这完成了从Canada到Erope的动画，如果这个时候你按F12预览，你会发现先前介绍Canada的隐藏图层一直都显示着，并不是笑脸运动到Europe就没了。
    9.这一步就是该决这个问题的，把播放帧移到第二个动画片段的第一帧（第28帧，上图），点鼠标右键选"Add Behaviors"选项，接着就会跳出一个Behaviors的一个浮动面板，按第5步做，只是这次不是选Show，而是选Hidden。到此一个完帧的动画片段完成了。剩下的事就是重复刚在的步骤完成整个效果。要做出比较好的效果来还是比较复杂，搞懂了其实也不是太难。
    10.最后还罗嗦一步，当你的做完了，一定要把时间轴的Autoplaly选上，要不然你看不到你心情劳动的结果。最好也把Loop选上，循环播放。
    下一节将讨论将如何用DW实现幻灯片效果。

DW的功能太强大了，光图层方面的特效就可以写不少的东西出来。幻灯片用Flash作非常Easy，效果也非常好，可是有的人不太喜欢它，其主要原因是它需插件的支持。用Java做，它影响网页的浏览速度，也不是太可取的方法。有没有折衷的方法？有，DW就可以实现，它实现的效果虽不及Flash，Java，但它有着它的优越性， 制作简单，浏览速度快，无需插件支持。
>>用DW实现幻灯片效果 （请看范例）
    我想这个效果还不太差比起用java做的，看了本教程第四节的朋友，学习这个例子要轻松的多。这个例子主要用了时间轴和显示隐含图层这个特效。下面我们开工了：
    1.先烦请你准备几张大小一样的图片，gif动画也行。
    2.你要做几张幻灯片就做几个隐含图层，在层中插入你的图片。本例是三张幻灯片，就做了三个隐含图层，做隐含图层的时候一定要三个图层坐标一样，要不然当你变换图片时就会发现有位移现象。我教你一个小方法，就是先做一个隐含图层出来，复制这个图层，复制出来的图层坐标都一样，但你得把图层里的图片换一换，还要把图层的名字改一改，复制的图层名字一样（在属性浮动条里改）。
3.按Ctrl+F9把Timeline编辑窗调出来，把三个图层分别加入到三条动画轨道中去。像下图那样放入轨道。


    
4.在第一帧的位置，加入Behaviors事件，双击第一帧上方的Behavior轨道，跳出Behaviors编辑窗，点击 选择Show-hide Layers，出来Show-hide Layers编辑窗口，选Layer1后点击确定。
5.在15帧处双击Behaviors轨道，跳出Beahoviors窗口，同样加入Show-hide layers事件，这次加入的事件是把layer1隐藏起来。当动画到15帧取就要换图片，所以在15帧处还要加一个show-hide layers事件，这次是显示layer2。在15帧加完两个事件后，Behaviors窗口如下图显示：



6.在第29帧处加入两个Behaviors事件，一个是把layer2隐藏起来，另一个是显示layer3，这是在换图片。如果你的幻灯片多于3张，就是在一段帧后加入承前启后的两个Behaviors事件就行了。
7.在最后一帧处，加入隐藏layer3的Behaviors事件。
8.还有一点扫尾工作，把Timelines窗口中的Autoplaly和Loop选上。当你选完后，把这个小方块拖到与最后一帧的Behaviors重合，这样就可避免重复动画时有一帧没有显示而发生停顿。最后一帧的Behaviors事件如图：



本教程快完了，下一节讲一讲用DW3做滚动板，同样要用到时间轴。

>>可以用鼠标拖动的滚动板 （请看范例）
    今天我讲的是一个可以用鼠标到处拖动的滚动板。先看看例子，用鼠标拖拖看拖不拖的动，拖不动要跟我说一声：）

    这是本教程的最后一个例子，也可以说是压轴戏，我会讲得很详细，这个例子我花了一点时间想，为把它做好看一点，还加了一个图片背景。下面我就以这个例子的实现来讲步骤，你在具体操作时要会举一反三。
    1.你得先找一个背景图片，把这个图片放在一个图层中，此图层名为layer1，这图层就是滚动板的样式。
    2.在layer1中插入一个子层layer2。按住Ctrl键不放，点击Object对象浮动条中的 ，在layer1中画个图层，大小如下图，这个图层就是用来控制播放文本区域大小的。


    
    3.再在layer2中用同样的办法插入一个子图层layer3，在图层layer3中写入你想要发布的消息，这个图层的宽度一定要小于layer2的宽度，它的高度不限。现在为止已在layer1中插入2个子层。按F11调出layers浮动窗口，看看是不是与下图相同。


    
    4.选中layer2按Ctrl+F3调出图层属性编辑器，clip项的L和T填0，R填228，B填119。先填上再来解释，Clip它控制着你滚动板的显示区域，L，T，R，B分别是left,top,right,bottom的缩写，R，B这两个参数你就填该层的宽与高，当然你也可以改，根据后来显示的效果。如下图：


    
    5.现在该让图层layer3动起来了，怎样动？用Timeline来搞定，按Ctul+F9调出Timeline浮动面板。用鼠标拖layer3到时间轨道来。
    6.本例中图层是从下往上滚动，在第一帧处把图层layer3拖到layer2下端的边缘。再在最后一帧处，把图层拖到layer2的上端边缘，就这样做了两个关键帧，你可以拖动时间轴中的红色播放块，看图层layer3是不是运动的。
    7.由于系统默认的动画长度为30帧，播放速度是15帧每秒，这样的参数显然不适合滚动板，移动的太快了，在本例中，我把动画长度延长了，并把帧的播放速度该为2Fps，如下图。到现在为止滚动板已基本做完，有些参数你一定要耐心多设几遍，来达到最佳效果。


    
    8.现在该让此图层可以用鼠标拖动，在第一帧Behaviors轨道处双击鼠标，会出现一个大家熟悉的Behaviors窗口，点击 选Drag layer项即可。完工了，你可以按F12预览。