制作具有动态特效的网页教学.pptVIP

计算机技术应用第五章计算机技术应用第五章华东师范大学计算中心*5.6制作具有动态特效的网页1.层和时间轴动画2.Dreamweaver的Behaviors（行为）概述1.层和时间轴动画华东师范大学计算中心*030201在Dreamweaver中，使用时间轴（也被称为时间线），可以非常方便地制作网页中的浮动图标动画，不需要手动编写脚本代码时间轴根据时间的推移移动层的位置，以此来实现动画效果时间轴只能移动层，如果希望能使图像、文本或其他任何类型的内容移动，需要将这些内容插入层中，然后再使用时间轴创建层动画创建层动画华东师范大学计算中心*在创建层动画之前，需要先创建层，并在层中添加动画、文本等其他任何类型的内容将层移至动画开始时应处的位置创建层调出【时间轴面板】打开菜单【窗口】?【时间轴】，在下方显示出【时间轴面板】创建层动画华东师范大学计算中心*选中之前创建的层（选中层后，在层的周围将出现调整柄）创建动画条打开菜单【修改】?【时间轴】?【在时间轴上添加对象】，在时间轴的第一个通道中创建了一个动画条默认动画为15帧，可根据需要拖曳调整长度创建层动画华东师范大学计算中心*沿直线运动动画单击位于条末端的关键帧标记，使该关键帧处于选中状态，然后在页面中将层移至动画结束时应处于的位置在【文档】窗口中将出现一条线，它表示着动画的移动轨迹选中【时间轴】上自动播放和循环复选框，这样打开网页时就自动、重复播放动画F12观看效果移动轨迹创建层动画华东师范大学计算中心*沿曲线运动动画创建关键帧在前一步的基础上，如果要让层沿曲线移动，先选择其动画条，然后按住Ctrl键并单击动画条中的一个帧，这样就在单击的帧处添加了一个关键帧。然后，选中该添加的关键帧，在【文档】窗口中将层移至另一个位置。移动轨迹就会变为曲线。创建层动画华东师范大学计算中心*如果希望为动画创建更为复杂的移动轨迹，更为有效的方法是记录拖动层时经过的轨迹新建网页，重新创建层，但不再创建动画条，而是直接录制层路径沿复杂的曲线运动动画直接拖曳层，产生复杂运动路径打开菜单【修改】?【时间轴】?【录制层路径】注意创建层动画华东师范大学计算中心*动画不要太复杂，复杂的动画需要大量的脚本支持，不但增加网页大小，而且过多的脚本容易影响浏览速度层动画是由HTML语言+脚本方式实现，因此不可能像Flash动画那样灵活制作动画过程中尽量不要处理其他操作，防止脚本生成错误2.Behaviors（行为）概述华东师范大学计算中心*行为是事件和该事件所触发的动作的组合事件是由浏览器生成的消息，指示浏览该网页的用户执行了某种操作动作由预先编写的JavaScript代码组成。这些代码执行特定的任务Dreamweaver中预置了丰富的动作在将行为附加到页元素之后，只要该元素发生了指定的事件，浏览器就会调用与该事件关联的动作用层和行为制作动画示例华东师范大学计算中心*层的显示和隐藏动画示例用层和行为制作动画示例华东师范大学计算中心*创建两个层（名为Layer1和Layer2），并在层中插入两幅不同的图片创建层调整层和图片大小，使两个层大小相同，并使Layer2覆盖Layer1如果移动层时，两个层不能覆盖，请检查【CSS面板】的【层】选项卡中【防止重叠】功能是否启用调整层用层和行为制作动画示例华东师范大学计算中心*在网页中插入一个2行1列的表格在第一行输入文本“查看图片1”，对该文本创建无址链接插入表格01在第二行中输入文本“查看图片2”，对该文本创建无址链接创建无址链接方法：选中该行文本，在【属性检查器】的链接中输入“＃”02用层和行为制作动画示例华东师范大学计算中心*添加行为打开【窗口】?【标签检查器】，在【浮动面板组】中显示【标签检查器】，单击【标签检查器】的【行为】选项卡，并使其显示所有事件选中链接“查看图片1”，在【标签检查器】中可以看到该链接的所有事件，选中onClick事件单击【添加行为】按钮，在弹出的预置行为中选择“显示-隐藏层”各种事件添加行为删除行为用层和行为制作动画示例华东师范大学计算中心*设置行为在弹出的【显示-隐藏层】对话框中，设置层layer1为显示，层layer2为隐藏1再添加行为再为链接“查看图片2”链接的onClick事件设置动作2过程与上述相同，区别只在弹出的【显示-隐藏层】对话框中，设置层layer1为隐藏，层layer2为显示3网页布局涉及的基本内容2.网页布局规划华东师范大学计算中心*页面大小,根据显示