fireworks教程 第5讲 网页交互效果.pptVIP

网页交互效果 ◇　热点和切片的使用 ◇　按钮和弹出菜单的制作 ◇　掌握行为面板的使用 ◇ 熟练掌握热点和切片的使用（重点、难点）◇ 熟练掌握按钮和弹出菜单的制作和使用 ◇ 熟练掌握行为面板的使用（难点） 　　 :有矩形热点、圆形热点和多边形热点。 菜单：编辑/插入/热点（Ctrl+Shift+U）热区：就是当一张图片包含数个超链接时用于指定哪部分区域指向哪个超链接地址的对象，在标准HTML语言中用map标签表示。热区最后会被输出成标准的HTML代码，将代码插入到页面相应的位置就可以了。 目标设置：_blank 在新的空白窗口中打开链接目标_self 在链接所在的自身窗口打开链接目标_parent 在含有左右分帖结构的窗口中打开链接目标_top 在含有上下分帖结构的窗口中打开链接目标 :有矩形切片和多边形切片。 切片：为了加快页面加载的速度把大图片分割成小图片放在表格中，使用Fireworks切割会按照，切割自动生成HTML的表格代码，然后将生成的代码放在页面的相应位置。 除了用来分割图片，在Fireworks中翻转图、按钮、导航条等带有交互动作的对象都是基于切片的。 1、相关概念：行为（Behavior）=事件（Event）+动作（Action），即一个行为需要先由事件来触发，触发后完成一系列动作，这样就是一个完整的行为。 2、面板简介 简单交换图像：简单翻转，使用第一帧作为Up的图象，使用第二帧作为Over的图象，并且使用相同的切片 ，简单翻转是交换图的一种特殊形式。 交换图像：当鼠标触发了一些事件时，使用其他帧上的图象替换当前的图象。 恢复交换图像：交换图还原，当鼠标离开触发事件的区域后，还原为默认的图象。 3、操作：选择了动作之后就可以在行为面板中修改触发的事件 1、简单的图片翻转 (1)打开一幅图片，选择切片工具，将图片切割 (2)选中切片区域，打开帧面板，并添加一帧 (3)选中第2帧，导入一幅图片 (4)返回第1帧，打开行为面板，设置为简单交换图像 2、高级的图片翻转 双击 ，进入按钮编辑状态，设置 释放：按钮初始状态 滑过：鼠标滑过状态 按下：按钮按下时的状态 点击 并为当前状态改换所需的效果 在Fireworks中可以很方便地为按钮与切片、热区添加弹出菜单 1、选中按钮，单击行为手柄，弹出对话框，在Text中输入弹出菜单中条目名称，在Link中输入链接的地址，然后点击 所设的条目即可显示在下面的空白文本框中，然后点击  2、在对话框中再进行设置下拉菜单的颜色、菜单条目文字的字号、字体、字色 Font：设置目录文字的字体，还可以设置成为粗体和斜体。Size：设置目录字体的大小。Up State：平时的状态。Over State：鼠标悬浮时的状态。Text：文字的颜色。Cell：背景的颜色。Preview：马上预览修改后的样式。 　　通过本讲的学习，掌握热区和切割的使用，熟练掌握行为面板的使用,学习轮换图的制作，掌握按钮和下拉菜单的制作和使用。 1. 利用热点制作图像的超链接。 2. 制作按钮和下拉菜单。 3. 掌握本讲中的实例。 图像的优化及网页效果图的制作 * 第5讲 教学目标 教学重难点 任务一、热点与切片工具 任务二、行为面板 任务三、实例操作 任务四、按钮 选择画布上的对象，按F8，选按钮类型 任务五、弹出菜单 小结 上机操作 预习