Fireworks 图形图像制作任务教程 丁桂芝编著 第4章

《Fireworks 图形图像制作任务教程 丁桂芝编著 第4章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章创建交互实现网页交互功能，是制作网页的基本要求，切片和热点是用于创建交互效果的重要元素，彼此互相有关联。切片是FireworksMX2004中用于创建交互性的基本构造块，是网页对象，它不是以图像的形式存在，而是最终以HTML代码的形式出现。使用拖放变换图像方法将交互性附加到切片，可以在工作区中快速创建变换图像和交换图像效果，也可以在“行为”面板中查看指定的行为并使用该面板创建更复杂的交互。还可以使用热点将交互性结合到网页中。热点用于创建图像映射，即在HTML文档中定义热区的HTML代码。这些区域不一定链接到某个地方，它们可能只是触发一个行为或定义替代文本。热点还可以接收鼠标

2、事件，使得JavaScript行为在切片中起作用。1第4章创建交互本章软件使用技能要求切片和热点是实现网页交互的基本要素，在Fireworks中二者功能不近相同，但又彼此关联，本章需要掌握的软件使用技能是：1．使用切片实现交互创建简单变换图像，创建不相交变换图像，将多个变换图像应用到切片，使用“行为”面板向切片中添加其它类型的交互效果。2．使用热点实现交互创建图像映射，创建变换图像。3．将切片和热点关联使用切片上的热点创建变换图像效果。2第4章创建交互4.1创建和编辑切片切片将Fireworks文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，Fireworks还创建一

3、个包含表格代码的HTML文件，以便在浏览器中重新装配图形。对图像进行切片，有三个主要优点（好处）：1．“优化”。网页图形设计的最终目标是在确保图像快速下载的同时保证质量，使用切片能以最适合的文件格式和压缩设置来优化每个独立切片。2．“交互性”。可以使用切片来创建响应鼠标事件的区域。3．“更新网页的某些部分”。使用切片可以轻松地更新网页中经常更改的部分，例如，某公司的网页中可能包含每月更改一次的“本月员工”部分，使用切片可以快速更改员工的姓名和照片而不用更换整个网页。3第4章创建交互4.1创建和编辑切片4.1.1创建切片可以使用【切片】工具绘制切片对象，或者用基于所选对象插入切片的

4、方法来创建切片对象。从切片对象延伸的线叫切片引导线，它确定导出时将文档拆分成的单独图像文件的边界。默认情况下，这些引导线为红色，如图所示。4第4章创建交互4.1创建和编辑切片4.1.1创建切片1．基于所选对象插入矩形切片的操作（1）选择对象。（2）选择【编辑】→【插入】→【切片】。插入的切片是一个矩形，它的区域包括所选对象最外面的边缘。（3）如果选择了多个对象，然后选择【编辑】→【插入】→【切片】，则打开一个Fireworks提示框，询问要创建一个还是多个切片，如图所示。5第4章创建交互4.1创建和编辑切片4.1.1创建切片1．基于所选对象插入矩形切片的操作（4）选择应用切片的方

5、式。如果选择单击【单一】按钮，则可创建覆盖全部所选对象的单个切片对象，如左图所示。如果选择单击【多重】按钮，则可为每个所选对象创建一个切片对象，如右图所示。6第4章创建交互4.1创建和编辑切片4.1.1创建切片2．绘制矩形切片对象的操作（1）在工具面板中选择【切片】工具。（2）拖动【切片】工具以绘制切片对象。切片和切片引导线出现在文档中，同时切片对象出现在“网页层”上。提示：在绘制过程中，可以随时调整切片的位置，方法是：在绘制过程中按住鼠标按钮的同时，只需按住空格键，然后将切片拖动到画布上的另一个位置，释放空格键还可以继续绘制切片。3．创建HTML切片HTML切片指定浏览器中出现

6、普通HTML文本的区域。HTML切片不导出图像，它导出出现在由切片定义的表格单元格中的HTML文本。如果要快速更新出现在站点中的文本而无须创建新图形，则HTML切片很有用。7第4章创建交互4.1创建和编辑切片4.1.1创建切片3．创建HTML切片创建HTML切片的操作如下：（1）绘制切片对象并将其保留为选定状态。（2）在属性检查器中，从“类型”弹出菜单中选择【HTML】。（3）单击【编辑】按钮，打开“编辑HTML切片”窗口，如图所示。8第4章创建交互4.1创建和编辑切片4.1.1创建切片3．创建HTML切片（4）在“编辑HTML切片”窗口中键入文本，如果需要，通过添加HTML文本

7、格式设置标记来设置文本的格式，或者在使用文本编辑器或HTML编辑器（如MacromediaDreamweaver）导出HTML后，将HTML文本格式设置标记添加到HTML。（5）单击【确定】按钮，以应用更改并关闭“编辑HTML切片”窗口。输入的文本和HTML标记以原始HTML代码的形式出现在FireworksPNG文件中切片的正文上。注意：在不同的浏览器及不同的操作系统中查看HTML文本切片时，它们的外观可能会有所不同，这是因为浏览器中可以设置字体大小和类型。9第4章创建交互4.