Dreamweaver图层应用实例
?牐燭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(酷页)首页看到,欢迎指教。
?牐?