5.6 制作具有动态特效的网页.ppt

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