Dreamweaver图层应用实例

Author: Icefire Date: 2001年 18期

?牐犓孀磐缂际醯姆⒄梗扯韵蠼鼋鐾A粼谄矫娑锹湮榈模珼reamweaver(以下简称DW)的图层可以轻松建立三维效果,我们可以使网页中的对象在垂直方向互相重叠,再配合Timeline的应用做出意想不到的效果来,使你的网页动感十足。
  ?牐燭imeLine(时间轴)是DW最精华的一点,也是Macromedia最为骄傲的。用TimeLine做动画可以满页飞,动画的实现主要是通过Java Script语句来完成的,你不必为不懂java script而苦恼,在DW中你只需用鼠标点几下就ok了。DW动画是建立在图层上的,也就是说没有图层的参与DW动画就不可能实现。下面我将通过一个范例的实现来体现Timeline的强大功能。
  ?牐犑毕路浅A餍性谕臼滓撤胖闷墓愀妫庋墓愀娼谑∫趁婵占洹⒔换バ郧浚慊髀屎芨撸耸蛊愀娼换バ愿浚颐强梢约尤胍恍┬形录热鏞nclick、OnMouseOver等等。下面范例要实现的效果是:一个飘动的广告,当鼠标指向广告时,时间轴动画停止并换一张广告图片,当鼠标移开广告恢复原状。以下是在DW4中实现这一效果的详细步骤:
  ?牐犚弧⒆急腹ぷ鳎鹤急噶秸磐计詈贸叽缫谎计募叫≡胶茫庋欣谔岣咄车匿浪俣取?
  ?牐牰⒅葱蠭nsert→Layer命令,在网页中插入一个图层,并在图层中插入我们准备的图片,在属性浮动面板中给该图片命名。注意:图片名称只能是字符,不支持数字。当然也可以根据需要插入其它的内容,如Flash动画、文本、表格、Shockwave等等。
  ?牐犎⒅葱蠾indow→Timelines命令,打开时间轴浮动面板。
  ?牐犓摹⑼ü铝蟹椒ㄖ话淹疾慵拥绞奔渲嶂腥ァ?
  ?牐?1.执行Modify→Timeline→Add Object to Timeline命令,把Layer 1加到时间轴。
  ?牐?2.用鼠标单击选取图层,在时间轴浮动面板中单击鼠标右键,然后在弹出快捷单中选择Add Object(加入对象)命令,把Layer 1加到时间轴。
  ?牐?3.用鼠标直接拖动图层到时间轴轨道中,这是最简便的也是最常用的方法。
  ?牐犖濉⒌セ魇奔渲岬淖詈蟮囊恢。焐シ胖刚胍频阶詈笠恢。?1(^18040701a^)所示的是操作后的时间轴浮动面板。
  ?牐犃⒂檬蟊晖隙疾愕侥康奈恢茫煽蟊旰蟊嗉翱谥谐鱿忠惶趼肪恫慰枷撸馓醪慰枷呔褪嵌脑硕旒!U庋谱鞯亩刂毕咴硕浅5サ鳎部梢匀猛计咔撸隙焐シ胖刚氲绞奔渲岬闹屑洌≡窭渡斓赖セ魇蟊暧壹隹旖莶说ィ≡馡nsert KeyFrame命令或按住Ctrl键单击时间轴插入关键帧,再用鼠标拖动图层,发现路径变成曲线了。
  ?牐犎绻枰谱鞲丛拥脑硕肪叮捎肈W的Record Path of Layer(记录图层路径)功能,具体使用方法如下:
  ?牐?1.在网页中插入一个图层,并在图层中插入对象,用鼠标选取图层后执行Modify→Timeline→Record Path of Layer命令。
  ?牐?2.用鼠标按住图层在网页中画图层的运动轨迹,松开鼠标DW就自动为你创建好了时间轴,只需自己修改一点点就可以了,强烈推荐用此方法创建时间轴动画运动轨迹。
  ?牐犉摺⒏奔渲岫尤胧蟊曛赶蚬愀嫱V苟形葱蠾indow→Behaviors命令,打开行为浮动面板。
  ?牐牥恕⒌セ餍形《姘宓募雍虐磁サ隹旖莶说ィ葱蠺imeline→Stop Timeline命令,打开Stop Timline对话框。
  ?牐牼拧⒃诙曰翱蛑醒≡馎ll Timelines后,点击确定按钮,再在行为浮动面板中,把事件改为OnMouseOver即可。
  ?牐犑⒄庖徊绞侨枚匦露鹄矗尤氲笔蟊暌瓶愀媸奔渲嶂匦略硕形T谛形《姘逯械慊骷雍诺隹旖莶说ィ葱蠺imeline→Play Timeline命令,打开Play Timeline对话框,在对话框中选择当前时间轴名称后确定。
  ?牐犑弧⒃谛形《姘逯邪鸭しlay Timeline动作的事件改为OnMouseOut。
  ?牐犑⒓尤氲笔蟊曛赶蚬愀娼换煌计形谛形《姘逯械慊骷雍诺隹旖莶说ィ葱蠸wap Image命令,打开Swap Image(交换图片)对话框,在对话框中的Images选择框中选择要替换的图片(如图2所示)(^18040701b^),再在Set Source to文本框中输入替换图片地址,也可通过点击Browser按钮来选择图片,最后点击确定。
  ?牐犑⒅链耍行形砑油瓯希形《姘謇锏哪谌萦θ缤?3(^18040701c^)所示。注意:Swap Image Restore事件是在添加Swap Image行为时自动加上的,无需人工添加。
  ?牐犑摹⒃谑奔渲岣《姘逯校袮utoplay(自动播放)和Loop(循环播放)选中,按F12预览即可看到你想要的效果,这个效果可在我网站http://www.kupage.com(酷页)首页看到,欢迎指教。
  ?牐?