DreamweaverCS3，FlashCS3，FireworksCS3网页制作培训教程第11课 创建动态效果.pptVIP

11.3 制作弹出菜单 11.3.1 知识讲解 11.3.2 典型案例——制作产品导航栏的弹出菜单 11.3.1 知识讲解 本节主要学习弹出菜单的制作，以及与其相关的切片和热点等知识。 11.3.1 知识讲解 1. 切片与热点 2. 切片的交互功能 3. 添加弹出菜单 1. 切片与热点 切片用于创建交互性的区域，它以网页形式存在，不以图像的形式存在。网页设计人员常用切片工具将Fireworks文档分割成多个部分并将每部分导出为单独的文件。 热点用于创建图像映射。使用热点，可以使较大图形中的各个小部分产生交互，并将网页图形区域链接到URL地址。热点的创建方法与切片相似，在【Web】栏中选择 工具绘制即可。 2. 切片的交互功能 切片交互是指用户通过拖放行为手柄变换图像的方法，将交互性附加到切片上。交互方式有两种：一种是同一切片的交互，另一种是不同切片间的交互。 3. 添加弹出菜单 添加弹出菜单的具体操作如下： （1）选取要添加弹出菜单的切片，单击鼠标右键，在弹出的快捷菜单中选择【添加弹出菜单】命令，打开【弹出菜单编辑器】对话框，设置【内容】选项卡中的各项参数。 （2）单击【外观】选项卡，设置弹出菜单的外观效果。 （3）在【高级】选项卡中可设置弹出菜单的表格效果。 （4）在【位置】选项卡中可设置弹出菜单与切片的相对位置。 （5）设置完成后单击【完成】按钮，完成弹出菜单的创建。 11.3.2 典型案例——制作产品导航栏的弹出菜单 案例目标 本案例将制作一个弹出菜单效果，主要介绍弹出菜单的制作方法，效果如下图所示。 11.3.2 典型案例——制作产品导航栏的弹出菜单 操作思路： （1）显示导航栏的切片，为【产品展示】按钮添加弹出菜单。 （2）分别设置弹出菜单的内容、外观、表格和位置。 操作步骤请老师参照软件讲解 11.3.2 典型案例——制作产品导航栏的弹出菜单 案例小结 本例主要介绍了弹出菜单各参数项的设置。在外观设置中，【单元格】栏中有【HTML】和【图像】两个单选按钮，如果选中【HTML】单选按钮，则不能给弹起和滑过状态添加样式，只能设置单元格颜色。弹出菜单不能通过预览窗口查看，只能按【F12】键浏览。 11.4 上机练习 11.4.1 制作广告动画 11.4.2 “主页”界面切片 11.4.1 制作广告动画 本次练习将制作如下图所示的广告动画，主要练习动画元件的创建。 11.4.1 制作广告动画 11.4.1 制作广告动画 操作思路： 设置文档大小为“200×65”像素，背景为“白色”。 导入“lb.png”图像，置于左侧，绘制渐变桔黄色矩形、填充纹理“影线7”。 创建文本动画元件，输入“好消息”，并转换为图形元件，复制该元件。 设置首状态将图像缩小于喇叭上，创建补间动画，帧数为“10”。 设置动画最后1帧的停留时间为1秒。 复制最后1帧的文字并粘贴于新建的帧上，创建文字飞出的动画。 以同样的方法制作第2段文字出现的动画效果。 11.4.2 “主页”界面切片 下面练习对如下图所示的“主页”界面的切片操作，主要练习图像切片的方法。 11.4.2 “主页”界面切片 操作思路： 将背景、重复效果的图像切成小块，分割成各部分（如条纹等）。 完整的图像单独切片，如LOGO、导航、Banner、页脚和图案等部分。 纯色区域和大量文本不切片。 切片时保证相邻切片间无缝，尽量保证垂直方向在同一切线上，小图标切片除外。 Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程 第11课 创建动态效果 本课要点 具体要求 本课导读 上机练习 本课要点 创建动画 创建按钮 制作弹出菜单 具体要求 掌握动画的不同创建方法 掌握按钮、导航按钮的创建方法 掌握图像交换的创建方法 掌握弹出菜单的制作方法 本课导读 Fireworks是一款针对网页设计的图像制作软件，本课主要讲解动画的创建和按钮的制作方法等。其中，涉及到Fireworks中的切片，使用切片除了可以将设计效果切成小块图外，还可以实现动作交互，如图像的交换等。 11.1 创建动画 在Fireworks中创建的动画可以导出为GIF动画，这些动画一般都是网页中的小动画，较大的动画都在Flash中创建。 11.1 创建动画 11.1.1 知识讲解 11.1.2 典型案例——制作地球旋转动画 11.1.1 知识讲解 本节学习动画的创建方法，主要有创建所选动画、逐帧动画和补间动画3种。 11.1.1 知识讲解 1. 创建所选动画 2. 创建逐帧动画 3. 创建补间动画