网页制作三合一教程(第十二章).ppt

第12章动画、按钮和其他操作 本章要点 12.1 “悬停按钮菜单”网页 12.2 “游泳卡通人”动画 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.1 “悬停按钮菜单”网页 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2 “游泳卡通人”动画 12.2.4 项目实现 本实例利用动画功能使卡通人不断地在水里游泳，图12-2-9显示了该动画中的部分效果。该实例主要运用了不同帧连续播放，达到动画的效果。该实例的制作过程如下。 图12-2-9 实例中部分的显示效果 （1）单击“文件”→“导入”菜单命令，导入卡通人的第1帧，如图12-2-9左起第1幅图像所示。打开“帧”面板，刚才导入的图像就在第1帧内。 （2）导入卡通人动画的第2幅图像，如图12-2-9左起第2幅图像。然后依次导入其他“游泳卡通人”图像。 （3）单击“修改”→“符合画布”菜单命令，使画布的大小符合导入图像的大小。图12-2-10 定义动画范围 （4）在“帧”面板中创建4个帧，将第1帧的图像复制到其他几个帧中。然后，将第1帧的左起第1幅图像保留，删除其他图像；将第2帧的左起第2幅图像保留，删除其他图像；以此类推，完成所有图像的删除工作。 （5）关闭“帧”面板的“洋葱皮”显示，分别调整各帧的延迟时间（例如，20/100秒），然后定义动画范围，如图12-2-10所示。 图12-2-10 定义动画范围 单击编辑窗口“状态栏”中的“播放/停止”按钮，预览动画效果。 （6）单击“文件”→“导出预览”菜单命令，弹出“导出预览”对话框，按照实例2中的方法进行设置。再选择“动画”选项卡，在该窗口中可以设置每一个帧的延时时间、浏览动画的整体效果以及设置各项优化参数等，如图12-2-11所示。单击预览窗口中的“播放/停止”按钮，预览动画效果。最后导出该动画。 图12-2-11 “导出预览”对话框 12.2.5 项目拓展 链接是网页设计中最重要、最具特色的组成部分。所谓链接是指单击某一对象（文本或图像），即链接到与之相关的文件。链接分为超文本链接和超媒体链接。超文本链接是指一个文本中含有转向其他文本的链接，当单击该链接时，便可迅速转向其他的网页。超媒体链接是指不仅能链接文本信息，还能链接图片、动画、声音和影像等多媒体信息。图像映射和热区就是Fireworks这种特性的应用，也就是说，图像的某个区域具有链接媒体的属性。实际上，在Fireworks中，不仅可以生成静态的图像，还可以根据网页设计的需要生成与图像密切相关的HTML源代码，所有的图像数据和代码都存储在PNG文档中后再导出。 1．创建热点和编辑热区 在Fireworks中创建热点（也叫热区）的一般操作步骤如下。 （1）打开前面的“白塔”图像。单击工具箱“网页”栏的“多边形热点”工具按钮，如图12-2-12所示。在图12-1-5所示的图像中单击多边形的几个顶点，创建一个热区，如图12-2-13所示。 图12-2-12 热点工具按钮 图12-2-13 创建热点区域 （2）如果对所创建的热点区域不满意，可进行编辑。编辑热区的