Fireworks 图形图像制作任务教程 教学课件 作者 丁桂芝编著 第4章.pptVIP

第4章 创建交互 实现网页交互功能，是制作网页的基本要求，切片和热点是用于创建交互效果的重要元素，彼此互相有关联。 切片是Fireworks MX 2004中用于创建交互性的基本构造块，是网页对象，它不是以图像的形式存在，而是最终以HTML代码的形式出现。 使用拖放变换图像方法将交互性附加到切片，可以在工作区中快速创建变换图像和交换图像效果，也可以在“行为”面板中查看指定的行为并使用该面板创建更复杂的交互。 还可以使用热点将交互性结合到网页中。热点用于创建图像映射，即在HTML文档中定义热区的HTML代码。这些区域不一定链接到某个地方，它们可能只是触发一个行为或定义替代文本。热点还可以接收鼠标事件，使得JavaScript行为在切片中起作用。 第4章 创建交互 本章软件使用技能要求 切片和热点是实现网页交互的基本要素，在Fireworks中二者功能不近相同，但又彼此关联，本章需要掌握的软件使用技能是： 1．使用切片实现交互 创建简单变换图像，创建不相交变换图像，将多个变换图像应用到切片，使用“行为”面板向切片中添加其它类型的交互效果。 2．使用热点实现交互 创建图像映射，创建变换图像。 3．将切片和热点关联 使用切片上的热点创建变换图像效果。 第4章 创建交互 4.1 创建和编辑切片 切片将Fireworks文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，Fireworks还创建一个包含表格代码的HTML文件，以便在浏览器中重新装配图形。 对图像进行切片，有三个主要优点（好处）： 1．“优化”。网页图形设计的最终目标是在确保图像快速下载的同时保证质量，使用切片能以最适合的文件格式和压缩设置来优化每个独立切片。 2．“交互性”。可以使用切片来创建响应鼠标事件的区域。 3．“更新网页的某些部分”。使用切片可以轻松地更新网页中经常更改的部分，例如，某公司的网页中可能包含每月更改一次的“本月员工”部分，使用切片可以快速更改员工的姓名和照片而不用更换整个网页。 第4章 创建交互 4.1 创建和编辑切片 4.1.1 创建切片 可以使用【切片】工具绘制切片对象，或者用基于所选对象插入切片的方法来创建切片对象。 从切片对象延伸的线叫切片引导线，它确定导出时将文档拆分成的单独图像文件的边界。默认情况下，这些引导线为红色，如图所示。 第4章 创建交互 4.1 创建和编辑切片 4.1.1 创建切片 1．基于所选对象插入矩形切片的操作 （1）选择对象。 （2）选择【编辑】→【插入】→【切片】。插入的切片是一个矩形，它的区域包括所选对象最外面的边缘。 （3）如果选择了多个对象，然后选择【编辑】→【插入】→【切片】，则打开一个Fireworks提示框，询问要创建一个还是多个切片，如图所示。 第4章 创建交互 4.1 创建和编辑切片 4.1.1 创建切片 1．基于所选对象插入矩形切片的操作 （4）选择应用切片的方式。 如果选择单击【单一】按钮，则可创建覆盖全部所选对象的单个切片对象，如左图所示。 如果选择单击【多重】按钮，则可为每个所选对象创建一个切片对象，如右图所示。 第4章 创建交互 4.1 创建和编辑切片 4.1.1 创建切片 2．绘制矩形切片对象的操作 （1）在工具面板中选择【切片】工具。 （2）拖动【切片】工具以绘制切片对象。切片和切片引导线出现在文档中，同时切片对象出现在“网页层”上。 提示：在绘制过程中，可以随时调整切片的位置，方法是：在绘制过程中按住鼠标按钮的同时，只需按住空格键，然后将切片拖动到画布上的另一个位置，释放空格键还可以继续绘制切片。 3．创建HTML切片