制作具有动态特效的网.ppt
《制作具有动态特效的网.ppt》由会员分享,可在线阅读,更多相关《制作具有动态特效的网.ppt(24页珍藏版)》请在三一办公上搜索。
1、华东师范大学计算中心,1,5.6 制作具有动态特效的网页,1.层和时间轴动画 2.Dreamweaver的Behaviors(行为)概述,华东师范大学计算中心,2,1.层和时间轴动画,在Dreamweaver中,使用时间轴(也被称为时间线),可以非常方便地制作网页中的浮动图标动画,不需要手动编写脚本代码时间轴根据时间的推移移动层的位置,以此来实现动画效果时间轴只能移动层,如果希望能使图像、文本或其他任何类型的内容移动,需要将这些内容插入层中,然后再使用时间轴创建层动画,华东师范大学计算中心,3,创建层动画,调出【时间轴面板】打开菜单【窗口】【时间轴】,在下方显示出【时间轴面板】创建层在创建层动
2、画之前,需要先创建层,并在层中添加动画、文本等其他任何类型的内容将层移至动画开始时应处的位置,华东师范大学计算中心,4,创建层动画,选中之前创建的层(选中层后,在层的周围将出现调整柄)创建动画条打开菜单【修改】【时间轴】【在时间轴上添加对象】,在时间轴的第一个通道中创建了一个动画条 默认动画为15帧,可根据需要拖曳调整长度,华东师范大学计算中心,5,创建层动画,沿直线运动动画单击位于条末端的关键帧标记,使该关键帧处于选中状态,然后在页面中将层移至动画结束时应处于的位置在【文档】窗口中将出现一条线,它表示着动画的移动轨迹 选中【时间轴】上自动播放和循环复选框,这样打开网页时就自动、重复播放动画F
3、12观看效果,华东师范大学计算中心,6,创建层动画,沿曲线运动动画创建关键帧在前一步的基础上,如果要让层沿曲线移动,先选择其动画条,然后按住Ctrl键并单击动画条中的一个帧,这样就在单击的帧处添加了一个关键帧。然后,选中该添加的关键帧,在【文档】窗口中将层移至另一个位置。移动轨迹就会变为曲线。,华东师范大学计算中心,7,创建层动画,沿复杂的曲线运动动画如果希望为动画创建更为复杂的移动轨迹,更为有效的方法是记录拖动层时经过的轨迹新建网页,重新创建层,但不再创建动画条,而是直接录制层路径打开菜单【修改】【时间轴】【录制层路径】直接拖曳层,产生复杂运动路径,华东师范大学计算中心,8,创建层动画,注意
4、层动画是由HTML语言+脚本方式实现,因此不可能像Flash动画那样灵活制作动画过程中尽量不要处理其他操作,防止脚本生成错误动画不要太复杂,复杂的动画需要大量的脚本支持,不但增加网页大小,而且过多的脚本容易影响浏览速度,华东师范大学计算中心,9,2.Behaviors(行为)概述,行为是事件和该事件所触发的动作的组合事件是由浏览器生成的消息,指示浏览该网页的用户执行了某种操作动作由预先编写的JavaScript代码组成。这些代码执行特定的任务Dreamweaver中预置了丰富的动作 在将行为附加到页元素之后,只要该元素发生了指定的事件,浏览器就会调用与该事件关联的动作,华东师范大学计算中心,1
5、0,用层和行为制作动画示例,层的显示和隐藏动画示例,华东师范大学计算中心,11,用层和行为制作动画示例,创建层创建两个层(名为Layer1和Layer2),并在层中插入两幅不同的图片调整层调整层和图片大小,使两个层大小相同,并使Layer2覆盖Layer1如果移动层时,两个层不能覆盖,请检查【CSS面板】的【层】选项卡中【防止重叠】功能是否启用,华东师范大学计算中心,12,用层和行为制作动画示例,插入表格在网页中插入一个2行1列的表格在第一行输入文本“查看图片1”,对该文本创建无址链接创建无址链接方法:选中该行文本,在【属性检查器】的链接中输入“”在第二行中输入文本“查看图片2”,对该文本创建
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 制作 具有 动态 特效
链接地址:https://www.31ppt.com/p-4882207.html