fireworks 图形切片与热点

《fireworks 图形切片与热点》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第五讲切片、变换图像和热点切片是用于在Adobe®Fireworks®中创建交互效果的基本构造块。切片是最终以HTML代码形式存在的网页对象。可以通过“层”面板中的“网页层”查看、选择和重命名它们。切片将Fireworks文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，Fireworks会创建一个包含表格代码的HTML文件，以便在浏览器中重新组合图形。。一、切片、变换图像和热点一、切片、变换图像和热点切片将一个文档分割成多个部分，它们都以单独文件的形式导出。一、切片、变换图像和热点将图

2、像切片有三个主要优点：优化图像获得最快的下载速度。增加交互性使图像能够快速响应鼠标事件。易于更新适用于经常更改的网页部分（例如，“本月雇员”页上的照片和姓名）。一、切片、变换图像和热点创建矩形切片可以通过使用“切片”工具进行绘制或基于所选对象插入切片来创建矩形切片。使用切片辅助线（从切片对象延伸的线）确定导出文档时将文档拆分成的单独图像文件的边界。一、切片、变换图像和热点绘制矩形切片对象1选择“切片”工具。切片、变换图像和热点2拖动以绘制切片对象。基于所选对象创建矩形切片1选择“编辑”>“插入”>

3、“矩形切片”。该切片是一个矩形，它的区域包括所选对象最外面的边缘。2如果选择了多个对象，请选择“单个”以创建覆盖全部所选对象的单个切片对象，或选择“多个”为每个选定对象创建一个切片对象。一、切片、变换图像和热点创建非矩形切片使用“多边形切片”工具创建非矩形切片。在尝试将交互性附加到非矩形图像时，非矩形切片非常有用。一、切片、变换图像和热点绘制多边形切片对象1选择“多边形切片”工具。2单击以放置多边形的矢量点。这是必要的，因为“多边形切片”工具绘制直线段。3当在具有柔边的对象周围绘制多边形切片对象时

4、，请包括整个对象以免在切片图形中创建多余的实边。4若要停止使用“多边形切片”工具，请从“工具”面板中选择另一个工具。您不必单击第一个点来关闭多边形一、切片、变换图像和热点从矢量对象或路径创建多边形切片1选择一个矢量路径。2选择“编辑”>“插入”>“多边形切片”。创建HTML文本切片HTML切片指定浏览器中出现普通HTML文本的区域。然后，它会导出在切片定义的表单元格中显示的HTML文本。一、切片、变换图像和热点1绘制切片对象。2在选定了切片对象时，从“属性”检查器的“类型”弹出菜单中选择“HTML

5、”。3单击“编辑”。4在“编辑HTML切片”窗口中键入文本，然后通过添加HTML文本格式设置标签来设置文本的格式。注：或者，在导出HTML之后应用HTML文本格式设置标签。5单击“确定”以应用更改并关闭“编辑HTML切片”窗口。一、切片、变换图像和热点查看并选择切片“网页层”显示文档中的所有网页对象。1选择“窗口”>“层”。2单击三角形展开“网页层”。3单击一个切片名称以选择该切片。一、切片、变换图像和热点显示和隐藏切片隐藏一个切片时可使该切片在FireworksPNG文件中不可见。可以在HTML

6、中导出隐藏的切片对象。•若要隐藏个别切片，请在“层”面板中单击各个网页对象旁边的眼睛图标。•若要显示隐藏的切片，请在“眼晴”列中单击以重新打开可见性。•若要隐藏或显示所有热点、切片和辅助线，请在“工具”面板的“Web”工具部分中单击相应的“隐藏/显示切片”按钮，或单击“层”面板中“网页层”旁边的眼睛图标。。一、切片、变换图像和热点更改切片对象和辅助线的颜色“编辑”>“首选参数”的“辅助线和网格”类别中选择新的切片辅助线颜色二、编辑切片通过移动切片辅助线来编辑切片如果多个切片对象沿单个切片辅助线对齐

7、，则可以拖动该切片辅助线来同时调整全部切片对象的大小。二、编辑切片调整一个或多个切片的大小1将“指针”或“部分选定”工具放在切片辅助线上。指针会变为辅助线移动指针。2将切片辅助线拖动到所需位置。切片以及所有相邻切片的大小都会被调整。三、交互切片对于简单的交互，请使用拖放变换图像方法。•对于更复杂的交互，请使用“行为”面板。Fireworks中的行为与AdobeDreamweaver®行为兼容。在将Fireworks变换图像导出到Dreamweaver时，可以使用Dreamweaver的“行为”面板

8、编辑Fireworks行为。三、交互切片使切片具有简单的交互效果三、交互切片使切片具有简单的交互效果通过从触发切片拖动行为手柄并将其放置在目标切片上，可以轻松地创建变换图像和交换图像效果。触发器和目标可以是同一切片。三、交互切片关于变换图像变换图像的工作方式都相同：当鼠标指针滑过一个图形时，该操作将触发另一个图形的显示。触发器始终是一个网页对象（切片、热点或按钮）三、交互切片三、交互切片创建并附加简单的变换图像简单变换图像在顶部状态正下方的状态中进行交换，并且只涉及一个切片。1确保