第五讲第五讲 创建工作流程原型创建工作流程原型教学目标教学目标 通过本讲的学习掌握创建编辑位图图像 1、教学内容：教学内容：重点：了解Firworks的使用范围教学重难点：教学重难点：1. 创建页面创建页面在“ 页面” 面板中，为您的初始设计创建所需的页数或屏幕数。随着设计的改进，您可以根据需要添加或去除页面。2. 构造公用设计元素布局构造公用设计元素布局在画布上，构造您要在多个页面之间共享的设计元素（如导航栏和背景图像）的布局。若要对齐元素，请使用“ 智能辅助线”。为获得最大的灵活性，请使用 CSS 构造您的布局。3. 在多个页面间共享公用元素在多个页面间共享公用元素在共享公用元素时，单个更改会自动更新所有受影响的页面。使用主页共享它包含的所有元素，或共享层来复制元素的子集。（请参阅第173 页的“ 使用主页” 和第117 页的“ 共享层”。）一、一、创建工作流程原型4. 向各个页面添加独特的元素在每个页面上，添加独特的设计、导航或表单元素。在“ 公用库” 面板中，您会发现许多可加快设计过程的按钮、文本框和弹出菜单。Flex 组件、HTML、Mac、Win、Web & Application 以及 Menu Bars 文件夹中的组件元件包括您可以为各个元件实例自定义的属性5. 使用链接模拟用户导航使用链接模拟用户导航利用切片、热点或导航按钮等网页对象，链接原型的各个页面6. 导出已完成的交互式原型导出已完成的交互式原型Fireworks 为您的原型提供了多种输出格式，所有输出格式都为页面导航保留了超文本链接。若要与客户端共享基于 CSS 的灵活原型或在 Adobe Dreamweaver 中做进一步编辑，“ 导出 Fireworks HTML”。若要分发 PDF 版本的原型进行注释或打印，PDF 文件”。若要创建 Flex 应用程序原型，一、一、创建工作流程原型一个 Fireworks PNG 文件可以包含多个页面，从而为创建 Web 界面和应用程序界面的原型提供了一种极好的方式每个页面都包含画布大小和颜色、图像分辨率以及辅助线的独特设置。这些设置可以在每个页面的基础上进行设置，也可以在文档的所有页面中以全局方式进行设置。除网页层之外，每个页面还包含一组独特的层。但是，对于公用元素，您可以使用主页或在页面之间共享层。二、二、使用 Fireworks 页面添加、删除和导航页面添加、删除和导航页面使用“ 页面” 面板，可以添加新页面，删除不需要的页面以及复制现有页面。在添加、删除或移动页面时， Fireworks 会自动更新页面标题左边的数值。这些自动数值可帮助您快速定位到多页大型设计中的特定页面。二、二、使用 Fireworks 页面添加页面添加页面 在“ 页面” 面板中，单击“ 新建/ 复制页” 按钮。 右键单击面板，然后从弹出菜单中选择“ 新建页面”。 选择“ 编辑”“ 插入”“ 页面二、二、使用 Fireworks 页面定位到页面定位到页面 在“ 页面” 面板中，选择一个页面。 在键盘上，使用 Page Up 和 Page Down 按钮。 从文档窗口顶部的页面弹出菜单或“ 页面” 面板的右下角选择页面。页面弹出菜单中的页面名称旁边的星号表示主页。二、二、使用 Fireworks 页面复制页面复制页面复制操作会添加一个新页面，它包含与当前所选页面相同的对象和图层层次结构。复制的对象保留原始对象的不透明度和混合模式。可以对复制的对象进行更改而不影响原始对象。 将页面拖到“ 新建/ 复制页” 按钮上。 右键单击页面，然后从弹出菜单中选择“ 复制页”。二、二、使用 Fireworks 页面删除页面删除页面 在“ 页面” 面板中，将页面拖到垃圾桶图标 上。右键单击页面，然后从弹出菜单中选择“ 删除页”。二、二、使用 Fireworks 页面每个页面都有独特的画布，具有独立的画布大小、颜色和图像分辨率。1 从“ 页面” 面板或文档窗口顶部的页面弹出菜单中选择一个页面。2 选择“ 修改”“ 画布”“ 图像大小”， “ 修改”“ 画布”“ 画布颜色”，或者“ 修改”“ 画布”“ 画布大小”。三、三、编辑页面画布若要在所有页面中使用一组元素，请使用主页。将普通页转换为主页时，该页会移至“ 页面” 面板中的列表顶部。创建主页时，会将主页层添加到每个页面的图层层次结构的底部。创建主页创建主页在“ 页面” 面板中，右键单击现有页，然后从弹出菜单中选择“ 设置为主页”。在页面之间共享的层会成为普通（非共享）的层。但是，在帧间共享的层会保留原样。若要显示链接页面中的主页帧四、四、使用主页将页面链接到主页将页面链接到主页在创建主页后，任何新创建的页面都会自动继承主页设置。现有页面不会继承这些设置，除非您将它们链接到主页。如果以后更改主页，则所有链接的页面都会自动更新。以下限制适用于从主页到其它页面的对象和行为继承：以下限制适用于从主页到其它页面的对象和行为继承： 页面仅继承主页中所有对象的当前状态。若要继承所有对象的所有状态，请在每个页面上将等效状态或更多状态添加到具有最多状态数的对象。该页中的所有对象继承主页中的所有状态。 在主页上对画布大小或图像大小所做的更改将影响所有页面，包括未链接到主页的页面。若要仅限于对当前页面进行更改，请选择“ 仅限当前页面”。 只有链接的页面会继承对主页的画布颜色所做的更改。四、四、使用主页删除主页层删除主页层右键单击“ 层” 面板，然后从弹出菜单中选择“ 删除主页层”。若要将主页层添加回页面，请右键单击“ 层” 面板，然后从弹出菜单中选择“ 添加主页层”。将主页更改回普通页面将主页更改回普通页面右键单击“ 页面” 面板，然后从弹出菜单中选择“ 重置主页”。四、四、使用主页您可以在 Fireworks 文档中设计基于 CSS 的布局，然后将它们转换为具有 CSS 规则（用于复制布局）的 HTML 页。基于CSS 的布局提供基于标准的方法并提供跨浏览器的友好代码。五、五、创建基于 CSS 的布局基于基于 CSS 的布局适用的规则的布局适用的规则规则规则 1：使用矩形导出文本和切片，以导出图像：使用矩形导出文本和切片，以导出图像规则规则 2：避免对象相互重叠：避免对象相互重叠规则规则 3：计划布局所需的行和列：计划布局所需的行和列规则规则 4：将文档视为二维文档：将文档视为二维文档五、五、创建基于 CSS 的布局除这些规则外，请遵循下列规则： 导出引擎仅导出原始矩形。若要导出矩形的圆角，请在这些圆角上放置矩形切片。 若要导出矩形的笔触，请将矩形切片放在拥有这些笔触的矩形上。 若要导出元件，请在其上放置矩形切片。 若要导出已应用到文本或矩形的滤镜，请在其上放置矩形切片。五、五、创建基于 CSS 的布局导出导出 CSS 布局布局Fireworks 允许您导出作为基于 CSS 的文件创建的布局。然后，您可以在 Dreamweaver 或其它与 CSS 兼容的编辑器中打开并编辑这些基于 CSS 的文件。1 选择“ 文件”“ 导出”。2 从“ 导出” 弹出菜单中选择“CSS 和图像”。3 单击“ 选项” 以设置 HTML 页面属性。4 单击“ 浏览” 以指定背景图像并设置背景图像平铺5 选择在浏览器中使页面左对齐、居中对齐或右对齐。6 将附件滚动方式选择为固定或滚动。7 单击“ 确定”，然后单击“ 保存”。五、五、创建基于 CSS 的布局创建文档演示创建文档演示您可以创建正在处理的 Fireworks 文档的演示。该演示将在浏览器中打开以展现相应功能，并允许您在页面中导航。1 选择“ 命令”“ 演示当前文档”。2 选择要为其创建演示的页面，并单击“ 创建演示”。3 选择文件夹并单击“ 打开”。五、五、创建基于 CSS 的布局为 Flex 创建原型的过程类似于用于创建网站和软件界面的工作流程。1.创建 Flex 用户界面2.将 Flex 设计组件插入布局中3.跨多个页面共享公用 Flex 组件4. 指定 Flex 组件的属性5. 将 Flex 布局导出到 MXML导出 Flex 用户界面布局，并在 Flex 中打开生成的 MXML 文件六、六、创建 Flex 应用程序原型编辑编辑 Flex 组件属性组件属性您可以在“ 元件属性” 面板中编辑 Flex 组件的属性和事件。1 在画布中选择 Flex 组件。2 打开“ 元件属性” 面板（“ 窗口”“ 元件属性”）。3 在“ 元件属性” 面板中设置组件的属性和事件。六、六、创建 Flex 应用程序原型将将 Fireworks 文档导出到文档导出到 MXML1 选择“ 文件”“ 导出”。2 从“ 导出” 弹出菜单中选择“MXML 和图像”。3 如果要将图像保存在与 MXML 代码所在不同的文件夹中，请选择“ 将图像放入子文件夹”。4 若要仅导出当前选定页面，请选择“ 仅限当前页面”。5 单击“ 保存” 完成导出。六、六、创建 Flex 应用程序原型适用于 Fireworks 的 Adobe AIR 允许您将 Fireworks 原型变换为桌面应用程序添加 Adobe AIR 鼠标事件您可以将预定义的 Adobe AIR 鼠标事件添加到文档中的对象。Fireworks 提供四种预定义鼠标事件：关闭窗口、拖动窗口、最大化窗口和最小化窗口。1 选择画布上要应用鼠标事件行为的对象。选择画布上要应用鼠标事件行为的对象。2 选择选择“ 命令命令”“AIR 鼠标事件鼠标事件” 并选择事件。并选择事件。六、六、创建 Adobe AIR 应用程序原型预览 Adobe AIR 应用程序预览 Adobe AIR 应用程序时，无须设置任何 Adobe AIR 应用程序参数。 选择“ 命令”“ 创建 AIR 包”，然后单击“ 预览六、六、创建 Adobe AIR 应用程序原型预览 Adobe AIR 应用程序预览 Adobe AIR 应用程序时，无须设置任何 Adobe AIR 应用程序参数。 选择“ 命令”“ 创建 AIR 包”，然后单击“ 预览六、六、创建 Adobe AIR 应用程序原型四、四、使用主页