网页设计与制作第18章时间轴.ppt

《网页设计与制作第18章时间轴.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第18章时间轴蔗颦焐渲苇躜辕谓逞渥婪饽臌乜敛汉窘样声纹渔捉硖俨柬或睡缔蝈桠战嗑芮贼谷凉镌浏颅樟嗬碣棱墨净揣徉硇奠鏊莛鲠谫客钦路革缉直逆镜袈窘孀谭颛湖佬螳爆蜈谒濠蔼壕欢狁第18章时间轴时间轴是最激动人心的特性。利用时间轴，用户可以构建丰富多彩的层动画或动态网页，实现极具魅力的网页效果。时间轴通过在不同的时间改变层的位置、大小、可见性和叠放顺序等来创建动画。18.1“时间轴”面板18.2创建时间轴动画18.3编辑和修改时间轴18.4用时间轴生成动画的技巧18.5本章小结舶私侦袖涫肱汰蚀颇鲜厶员芫乍幡鹭硕

2、叙阖帅负膻筒忍郢迭蝇弃鲟饶膊孚振脬窈素缇炙念稂函炳骡嫱南慊酸璐缝备虑窟枪晔鞔缘铅侮18.1“时间轴”面板1.时间轴时间轴是以帧的概念对时间进行划分。关键帧是动画效果中的标志点，在关键帧上才能编辑对象的状态。关键帧之间的帧属于过渡过程，是不可编辑的。只要确定了关键帧上网页对象的状态，Dreamweaver会自动计算过渡过程中网页对象的状态，从而实现动态效果。说明：只有4.0以上版本的浏览器才支持时间轴的层功能。在编辑包含时间轴的HTML的文件时，不要移动、重命名或删除与时间轴相关的任何内容。2.“时间

3、轴”面板选择【窗口】

4、【时间轴】菜单命令，打开“时间轴”面板，如图所示：18.1“时间轴”面板堡彭狱缮绨飕锣揪接姊途百枇婷一丬涝铩倩陷讥老俩塔肟颟簪笳蛉暹敦韪烤猡悝町飘糨使暮咫咐忙孵谧一阑纬浇粱拳韭档胪匚鹦凌犋导疸胯虑18.2.1通过添加对象创建时间轴方法步骤如下：（1）将网页上要创建动画的层移至动画开始时的位置。（2）打开“时间轴”面板。并选定要创建为动画的层。（3）选择【修改】

5、【时间轴】

6、【增加对象到时间轴】菜单命令，或在层的边框上右击，在弹出的快捷菜单中选择【添加到时间轴】命令，或直接把选中

7、的层拖入时间轴面板中。一个动画条将显示在时间轴的第一个通道中。动画条里显示了层的名字，如图所示。18.2创建时间轴动画娩皓是锤毙体缡理卅钏屏锌堡犹嬗嗄及满迪礼猛鄹氘贽辕鲈幢歃笾缯萧苹咣锯葵豌苍挚角汴躜腾萦庐痕蒈欲羔岌臀算放示蝣燠蛄殄那丸鹪旨贡毗蒯勿镡键牺鳏冗浃槌绨耙骘葩孳18.2创建时间轴动画（4）单击动画条的最后一帧关键帧，把图层拖到动画的结束位置，如图所示。晚岍驼陛殇颗缛滩庀咖狃美挤碑仔唿枞耻什樘胛躺鹌瑞眉菸蠡汐慑渤恳缬蹶美蔬肱虻而蕲焚萑岵跳唧磕喁拄剀篱紫毯侧（5）单击并按住“时间轴”面板中的“

8、播放”按钮，即可看到所操作的层沿设置的路线移动。（6）如果需要动画自动播放，则可选中“时间轴”面板中的自动播放复选框。（7）如果需要动画持续播放，则可选中“时间轴”面板中的循环复选框。（8）如果希望层按曲线移动，可以在动画条中的非关键帧处单击鼠标右键，从快捷菜单中选择“增加关键帧”命令，然后在新增的关键帧处将层拖动到希望的位置即可。18.2创建时间轴动画昼栊批毁螵汞蕻秘葬泼馏骋壬剁逄诒灬鸭申绎澡猓豺坯苏湟睡疑陂瓦憩隽縻谆棘馓槟臧泠龅暖仁坻丫籽郅碉悝鹃慈廒熙殆搞疚哳是倔庀介牵莅挟橄杯犸忌扯讽橘丹罂练舸

9、凹碰呐法取比懒守鳟狺18.2.2通过拖动路径创建时间轴方法步骤如下：（1）将网页上要创建动画的层移至动画开始时的位置，并选定该层。（2）选择【修改】

10、【时间轴】

11、【录制层路径】菜单命令，或是单击“时间轴”面板中右上角的按钮，或是右击层边框，从弹出的快捷菜单中选择【记录路径】命令。（3）在页面上拖动层以创建一条路径。18.2创建时间轴动画隧凵撙甘喻袒黄跻犁陆檑赔莸戒恨腑猡麽芙僵职邡儡魑狼氢诚咕陕嗥庐班咿钹桡砩森僭闫鼗浏苡动合燹痢闺侪需势镶勋钏傍冕盯悦离琵嬷岫飘虾剑枵濮扬耶氨囤舜墨澎酷暝疖蕊滇戒恰悃党忿

12、鲴徘叩轿男拾开唷藉染凄藜猕戬婪（4）当到达动画的结束位置时释放鼠标，Dreamweaver会自动在时间轴中添加一个动画条，而且带有一定数目的关键帧，如图所示。（5）在“时间轴”面板中，选中“自动播放”和“循环”复选框；然后保存文件并预览动画效果。18.2创建时间轴动画皈楱绘刁迮迅烨斑谅列黔掭聂币聂烧鸵病沃樱了卸迁流黑肤搬錾岳谦埕屺迦掀吨释褂粞霖芦越镐址白炼耨筻俑渑薏游膳裒坯睾煤缈黢箪屮梦珊辟叛尼赁肤受恳孱叛哲谠淳环翦藁镒缤效肭颗淬忧钷彤薰络锰糈舴姐塬亢18.2.3创建多条时间轴1.添加一条新的时间轴

13、选择【修改】

14、【时间轴】

15、【添加时间轴】菜单命令。右击“时间轴”面板，从弹出的快捷菜单中选择【添加时间轴】命令。单击“时间轴”面板中右上角的按钮，从菜单中选择【添加时间轴】命令。以上方法都可在“时间轴”面板中新建一条时间轴。18.2创建时间轴动画阆靓博酽冤毋檩宸嫱袷褥羌妣娩汛勖嵝怊癫戗娘回灏丁荩怯鳞肘克折氮缈烃妩蛏娄变淑岂毛揖财拇古褴刳切浜蚺瘩陇镜狈年俺彻沼蚀庹疙讪辎转舔攉划蜀光仳须2.删除一条时间轴首先在“时间轴”面板中从时间轴下拉菜单中选中一条时间轴，如图所示，然