清华大学版（2012） 八年级下册信息技术 课件 - 4.12一触即发——应用行为创建动态效果 (共14张PPT)

一触即发——应用行为创建动态效果 1 任务导航 一个网页吸引浏览者的原因除了丰富多彩的内容和漂亮的色彩以外，各种具有交互性的动态效果也大大增强了网页的视觉效果。 本课，我们制作“逃生急救”网页，并通过给网页元素添加行为创建各种有趣的动态效果，制作完成的网页效果如图所示。 2 1.创建“逃生急救”网页 （1）规划“逃生急救”文件夹 打开“安全自护我能行”站点，在“文件”面板中新建tsjj文件夹，在tsjj文件夹中新建images和other两个文件夹，将素材库中提供的图片素材存放到images文件夹中，将音频、视频素材存放到other文件夹中。 （2）新建网页文件 利用已经创建好的module模板，创建网页，修改网页标题为“逃生急救”，保存网页文件为tsjj.html。 （3）调整网页内容 3 2.添加动态效果 （1）应用“交换图像”行为 步骤1：执行“窗口”→“行为”命令，打开“行为”面板，如图所示。 4 步骤2：选中hzzj图像对象，单击“行为”面板中的“添加行为”按钮，弹出如图所示的动作菜单。 5 步骤3：选择“交换图像”命令，打开“交换图像”对话框。单击“设定原始档为”文本框后面的“浏览”按钮，打开“选择图像源文件”对话框，选择hzzj-2.jpg图像文件，单击“确定”按钮返回到“交换图像”对话框，单击“确定”按钮，结束设置，如图所示。 6 步骤4：打开“属性检查器”，在“替换”文本框中输入“火灾自救”，设置“链接”到hzzj.html网页文件。则当在浏览器中浏览该网页时，鼠标移动到hzzj图像上时会自动变成另一个图像，并出现提示文本“火灾自救”；单击hzzj图像对象，则会在当前框架中打开hzzj.html网页文件。 7 （2）应用“弹出信息”行为 步骤1：选中标题区域的“逃生急救”文本，单击“行为”面板中的“添加行为”按钮 ，在弹出的动作菜单中选择“弹出信息”命令，打开如图所示的“弹出信息”对话框。 步骤2：在“消息”文本框中输入要在信息对话框中显示的文本内容。例如，“逃生是一种本能，急救是一种技能”。单击“确定”按钮，结束设置。 步骤3：在“行为”面板中确认激活该行为的事件是否正确，如果不正确，可以单击扩展按钮 ，在弹出