Dreamweaver图层与时间轴的应用

Dreamweaver图层与时间轴的应用与层密切相关的另一个功能是时间轴，利用时间轴可以实现动画效果，随着时间的变化改变层的位置、尺寸、可视性以及叠放顺序可以实现更多的效果。【时间轴面板】使用Alt+F9快捷键或者在菜单“窗口”中选择“时间轴”即可打开时间轴面板。【播放头】显示当前页面上的层是时间轴的哪一帧。【动画通道】显示层与图像的动画条。【动画条】显示每个对象的动画持续时间。【关键帧】在动画条中被指定动画属性的帧。【行为通道】在时间轴上某一帧执行指令的显示。【帧频】每秒钟播放的帧数，但超过用户浏览器可处理的速率则会被忽略掉，15Fps是平均较好的速率。【自动播放】选中后，在浏览器打开该页面，动画就自动播放。【循环】选中后在浏览器中会无限循环播放，在行为通道中可以看到循环的标签，双击标签可以修改行为的参数和循环次数。创建时间轴动画1、在文档窗口插入一个层，并在层中插入素材包中的qiqiu.gif图片，如图。2、选中层，将层用鼠标拖拽到时间面板中，此时一个动画条出现在时间轴的第一个通道中，层的名字出现在动画条中，如图所示。3、将关键帧选中第十五帧处，见下图：4、选中层，将层用鼠标拖拽到动画结束的地方，这里我们设定在文档窗口右下角，此时一条线段显示出动画运动的轨迹。见图。5、至此，一个动画创建完毕，按在“播放”可以浏览动画效果。选中自动播放和循环，保存文件后在浏览器也能看到动画效果。6、如果想改变一下用动路径，则需要添加关键帧，在第七帧处用鼠标右键添加一个关键帧，见图。在文档窗口选定层，并将层拖拽到需要的位置，我们可以看到运动的轨迹发生了相应的变化。用层的嵌套结合时间轴创建滚动的公告牌1、建立一个新的文档窗口，然后插入一个层，并在层属性面板中设置该层的背景图像，插入素材包中的moban.jpg图片，作为公告牌的边框。见图。层属性中，层的大小应设置跟图片尺寸一样，否则可能产成平铺，影响设计效果。（注意，这里是层的背景而不是在层内插入图片，注意区别！）2、在层面板取消防止重叠，并向刚才的层内插入一个层，这样形成了层的嵌套，将嵌入的层大小定义在背景边框以内。如图。3、向第二个层内继续添加一个层，尺寸略小于第二个层，选中添加的层拖拽到第二个层的下方，并向层内添加文字。4、在时间轴面板将第三个层，即有文字的层作为对象添加在时间轴中。5、在时间轴面板用鼠标选中关键帧15，用鼠标拖动到60帧处释放鼠标，可以看到动画条延长了，实际上也就是增加了动画运动的时间，当前选中的关键帧（蓝色）在60帧。6、回到文档窗口，选中带有文字的这个层，用鼠标移动到公告牌的上方。7、层面板选中第二个层Layer2，见下图左。回到层属性面板，将Layer2的“溢出”属性设置为“hidden”见下图右。8、至此，滚动公告牌制作完毕，保存文件后在浏览器可以看到效果。【实例分析】实例4中第一个层是为了给背景图像，也就是公告牌边框做精确定位，第二个层则是父层，第三个层是子层，第三个层移动，第二个层不改变位置，正是利用了子层移动不影响父层位置的层的嵌套的特性。将第二个层，也就是父层溢出设定为隐藏，实际上是将第三个层作为元素，符合“层溢出隐藏时，超出层的部分不可见的原理”这样子层运动实际是局部可见，也就是在父层显示范围内可见。在网页设计中，用来定位内容的元素一般包括：表格和图层，其中表格是大家在网页的整体布局中它的使用应该是最广的，也最常看到的；相对来说图层则更灵活性，操作更方便。图层除了象表格一样可以设定背景，位置，自由移动，响应事件，控制显示外，还可以轻松建立三维效果，我们可以使网页中的对象在垂直方向互相重叠，再配合Timeline的应用可以做出意想不到的效果来，使你的网页更加生动，动感十足。因此局部处理图层能给你的网页增色不少。元素的定位用表格来对页面进行排版非常方便，但如果需要在文字进行插入图片等的应用时你就需要通过图层来排版，在Dreamweaver4.0中图层可以很方便转换成表格。首先把图片用图层在页面中放好，然后，点击菜单“Modify/LayoutMode/ConventLayerstoTable”后就出来一个菜单，设好参数点击确定就可以得到你想要的效果。制作对象辅助说明大家在访问某个网站时看某些图片时，只要你把鼠标移到图片上，就会显出说明文字，在这里我就要教大家如何实现这种效果。1、建立两个新图层，分别命名为layer1和layer2，在layer1图层中插入目标对象(以图片为例)，在layer2图层中键入需要说明的文字，相应的位置可以根据需要来确定，如下图：图12、在属性板(properties)中设定layer2层显示状态为“Hidden”，即当网页载入时不显示该层内容，然后选中目标对象所在的layer1层，点击快速启动板中的behavior按钮(或按Shift+F3快捷键)进入动作面板，选择“+”号下面的“ShowHideLayers”选项，在“图层显示隐藏”窗口中设定layer2为可见(show)，并更改动作面板中的鼠标事件为onmouseover，同理建立onmouseout下该图层不可见(hide)，动作面板如图：图23、这时你按F12在浏览器中就可以看到当鼠标移到图片上方时说明文字显示，移开以后自动消失的效果了。注意:需要调整说明文字的位置时,可以直接拖拉说明layer2层来实现。拖动图层的应用大家在浏览某些网页时，经常会看到一些类似的图片或文字，可以通过鼠标点击拖拉任意改变位置，这种效果一般都是通过拖动图层(Draglayer)来完成的，而拖动图层的实现需要鼠标事件的响应，比如:onclick，onmouseover等，下面以插入一个图片拖动图层为例。1、先建一个图层放入你想放的内容，比如插入一张图片。2、点击选中图层，同时进入动作浮动面板(直接按Shift+F3即可)，选取+号列表中的“DragLayer”项，如果这时该选项不可使用的话，可以调整一下动作事件支持的浏览器类型和版本，如IE5.0，弹出DragLayer编辑窗口。图3DragLayer编辑窗口包括两个标签“Basic（基础）”和“Advanced（高级）”，下面我解释一下各标签下各项内容的含义。Basic标签下：Layer：网页中使用的所有图层的选择列表,默认即当前操作图层。Movement：移动选项,Unconstrained(不受限制)可以在网页中任何位置拖动,constrained(受限制)控制目标图层的拖动范围,选中以后在菜单后面自动产生的Up,Down,Left,Right输入框中键入定位数字。DragTarget：拖动图层在网页中的位置,点击GetCurrentPosition获取当前位置。snapifwithin：允许的最大误差，单位为：px。Advanced标签下：DragHandle：指定拖动图层的响应范围,即鼠标在哪些位置才能拖动图层。EntireLayer：表示任何位置都可拖动。AreaWithinLayer：指定拖动范围，选中以后在后面的定位输入框中键入。注意这时是相对图层而言的。whiledragging：多个拖动图层时使用,决定显示关系。3、按确定以后，拖动图层即完成了，默认使用的事件为onclick，把它改成onMouseOver事件，点击Actions下的一个小三角形选onMouseOver即可，这时不需要点击激活只要滑动到图层上就可以拖动了。这时你只要按F12就可以预览拖动效果。利用图层隐藏不可见内容制作作网页时，有时需要某些元素或是内容在网页载入时，始终不显示出来，只有点击某特定按钮时才显示出来，这时应用图层来处理应该是最明智的选择了。1、先把Objects（项目）面版调出来，插入两个按钮。注意，两个按钮的Action（动作）都要选None（无），否则不能做出效果来。如下图：图42、把图层里的内容准备好，并把它设为隐含。图层里的内容由你自己定，在这里我假设为：反馈信息，根据你的需要来更改图层中的内容。3、点击“显示反馈信息”按钮，然后调出Behaviors（行为）菜单，加入Events（事件）显示图层，Actions（动作）不要改动，千万不要把它改为“OnMouseOver”，要不然这按钮没用。设置完毕，如下图：图54、点击隐藏反馈信息按钮，同样加入Events（事件）隐藏图层。制作下拉菜单在网页中使用下拉菜单可以极大的节省网页空间，并能够使内容的分类显示更具条理性，下面我简单介绍一个典型下拉菜单的制作过程。1、首先建立主菜单项目，分别赋予对应的链接指向，然后在每个链接下面放置一个图层对象，再把相应下拉菜单的内容放到隐藏图层里。一个链接对应一个图层，如果你的网页中有三个链接就得做三个隐含图层，图层分别放在链接的下面，像下图那样摆放。注意：如果有多个主菜单，对应一定要整齐否则会影响以后的显示效果。图62、因为菜单载入后子菜单部分是完全隐藏的，所以将下面的3个子菜单图层均设为隐藏图层，这时下拉内容不可见，在例中“今日新闻”链接上面用鼠标双击以选中它，然后按F8把Behaviors（行为）菜单调出来，在behavior面板中点击“+”，选择“Show-HideLayers“，在随后的窗口中设定Layer1图层为：Show(显示)，同时另外的两个图层Layer2，Layer3，Layer3为Hide(隐藏)，这样才能保证只显示对应的子菜单。在behavior列表中点击4个动作事件的箭头按钮将默认的Onclick改为Onmouseover，动作面板如下图：图73、在behavior列表中点击3个动作事件的箭头按钮将默认的Onclick改为Onmouseover，一切就完成了！这是一个下拉菜单的制作，同样的方法设定另外三个链接，当然如果制作的是点击式的下拉菜单的话，上面的onlclick事件就不用更改了。注意：在设置Show-HideLayers菜单时，除了把该链接的下拉菜单图层设为Show（显示）外，其它的图层一定要设为Hide（隐藏）。制作完成后，可以按F12查看浏览器中的显示效果。实现幻灯片效果用Flash作幻灯片非常容易，效果也非常好，但它需插件的支持，而用Java做，它影响网页的浏览速度。其实大家可以通过Dreamweaver制作，而且效果比起用java做的还不太差，这个例子主要用了时间轴和显示隐含图层这个特效。1、首先准备几张大小一样的图片。2、你要做几张幻灯片就做几个隐含图层，在层中插入你的图片。本例是三张幻灯片，就做了三个隐含图层，做隐含图层的时候一定要三个图层坐标一样，要不在变换图片时就会有位移现象。3、把Timeline编辑窗口调出来，把三个图层分别加入到三条动画轨道中去。图84、在第一帧的位置，加入Behaviors事件，双击第一帧上方的Behavior轨道，弹出Behaviors编辑窗，点击“+”选择“Show-hideLayers”，在Show-hideLayers编辑窗口，选“Layer1”后点击“Show确定。5、在15帧处双击Behaviors轨道，弹出Beahoviors窗口，同样加入Show-hidelayers事件，这次加入的事件是把layer1隐藏起来。当动画到15帧取就要换图片，所以在15帧处还要加一个“show-hidelayers”事件，这次是显示layer2。在15帧加完两个事件后，Behaviors窗口如下图显示：图96、在第29帧处加入两个Behaviors事件，一个是把layer2隐藏起来，另一个是显示layer3，这是在换图片。如果你的幻灯片多于3张，就是在一段帧后加入承前启后的两个Behaviors事件就行了。7、在最后一帧处，加入隐藏layer3的Behaviors事件。8、最后把Timelines窗口中的Autoplaly和Loop选上。当你选完后，把这个小方块拖到与最后一帧的Behaviors重合，这样就可避免重复动画时有一帧没有显示而发生停顿。最后一帧的Behaviors事件如图：图10制作路径移动图层路径移动图层即在网页中按照指定路径移动的图层对象，目前大多用于网页广告，在