第3章 Fireworks MX制作网页图形 学习目标 ◆使用各种面板。 ◆熟悉矢量工具,能制作和编辑矢量图形。 ◆熟悉位图工具,能制作和编辑位图图形 ◆能制作按钮,创建简单动画
1 第3章 Fireworks MX 制作网页图形 学习目标 u 使用各种面板。 u 熟悉矢量工具，能制作和编辑矢量图形。 u 熟悉位图工具，能制作和编辑位图图形。 u 能制作按钮，创建简单动画
返回总目录 第3章 Fireworks MX制作网页图形 教学内容 3.1 Fireworks mx基础 32 Fireworks mx基本操作 33位图操作 34矢量图操作 3.5文本操作 36按钮制作 37创建GF动画 本章小结
2 第3章 Fireworks MX 制作网页图形 教学内容 3.1 Fireworks MX基础 3.2 Fireworks MX基本操作 3.3 位图操作 3.4 矢量图操作 3.5 文本操作 3.6 按钮制作 3.7 创建GIF动画 本章小结 返回总目录
返回目录 31 Fireworks mX基础 Fireworks mx由 MAcromedia公司推出 是目前最优秀的Web图像制作软件,它将矢 量图和位图编辑工具相结合,并赋予图像动 态特性。可将文档另存为JPEG、GIF或其 他格式的文件以便在网页中使用。还能导出 与 Photoshop等软件类型匹配的文档。 3
3 3.1 Fireworks MX 基础 Fireworks MX由Macromedia公司推出， 是目前最优秀的Web图像制作软件，它将矢 量图和位图编辑工具相结合，并赋予图像动 态特性。可将文档另存为 JPEG 、GIF 或其 他格式的文件以便在网页中使用。还能导出 与Photoshop等软件类型匹配的文档。 返回目录
返回目录 3.1 Fireworks mX基础工作窗口 主要由标题栏、菜 件)编视图y选择3)解改的文本①命会位窗囗帮助的 单栏、工具栏、工 选择样品四 .4原回预口2辐田4 具箱、工作区、属 性面板、面板组和 状态栏等部分组成。 资遵 帕和历史记录 其中菜单栏包含创 历史记录 建与编辑图片的全 部命令,工具栏包 含菜单中常用命令 工作窗口 的按钮,状态栏显 示当前文档的主要 口宽xp 区高F2“ 信息。 工作区:位于工具箱右边,在工作区中显示和编辑图像 属性面板:当选中工具箱中的某个选项时,可以在属性面板上进行相 应属性设置。面板组:位于工作区右边,面板是非常重要的辅助作图 工具,按各自功能分组,每组有若干个面板
4 3.1 Fireworks MX 基础—工作窗口 主要由标题栏、菜 单栏、工具栏、工 具箱、工作区、属 性面板、面板组和 状态栏等部分组成。 其中菜单栏包含创 建与编辑图片的全 部命令，工具栏包 含菜单中常用命令 的按钮，状态栏显 示当前文档的主要 信息。 工作区：位于工具箱右边，在工作区中显示和编辑图像。 属性面板：当选中工具箱中的某个选项时，可以在属性面板上进行相 应属性设置。面板组：位于工作区右边，面板是非常重要的辅助作图 工具，按各自功能分组，每组有若干个面板。 Fir e w o r k s M X 工 作 窗 口 返回目录
返回目录 31 Fireworks mX基础一常用面板简介 混合器面板:用于创建笔尖颜色和填充颜色。创建颜色可以单击 颜色按钮,在弹出的调色板选择某个颜色方框,或 在R、G、B框中输入相应红、绿、蓝的数值,还可 以在面板底部的选色盘中单击所需颜色。单击“混色 器”面板的按钮,可更改的颜色模式。 2.样本面板:显示当前调色板,单击面板中的色样可以快速设置图 像颜色。“样本”面板与“混合器”面板在同一个面 板组 3.帧面板:主要用于制作动画效果。单击“帧”面板右上角的按钮, 从 弹出的菜单中对帧进行操作。 5
5 3.1 Fireworks MX 基础—常用面板简介 1．混合器面板：用于创建笔尖颜色和填充颜色。创建颜色可以单击 颜色按钮，在弹出的调色板选择某个颜色方框，或 在 R、G、B框中输入相应红、绿、蓝的数值，还可 以在面板底部的选色盘中单击所需颜色。单击“混色 器”面板的按钮，可更改的颜色模式。 2．样本面板：显示当前调色板，单击面板中的色样可以快速设置图 像颜色。 “样本”面板与“混合器”面板在同一个面 板组。 3．帧面板：主要用于制作动画效果。单击“帧”面板右上角的按钮， 从 弹出的菜单中对帧进行操作。 返回目录
返回目录 31 Fireworks mx基础一常用面板简介 4.历史纪录面板:用来记录用户对图像所作的改动。用户的每一步 操作都记录在该面板中,以便用户恢复图像或恢复到某一指定操作。 按钮是一个撤销标记,拖动该标记可以撤销或恢复最近的操作。利 用“历史纪录”面板还可以创建批处理命令。方法为:按下 Shift键 在该面板中选定多个历史动作→单击该面板右下角的“将步骤保存 为”按钮→在对话框的“名称”文本框中输入命令名→单击“确 定”按钮。这个名称就会出现在“命令”菜单的底部,单击它可执 行一系列动作。 5.行为面板:用于管理行为。行为决定热点和切片对鼠标移动所做 出的响应 6.信息面板:提供所选对象的尺寸和画布指针的精确坐标 6
6 3.1 Fireworks MX 基础—常用面板简介 4．历史纪录面板：用来记录用户对图像所作的改动。用户的每一步 操作都记录在该面板中，以便用户恢复图像或恢复到某一指定操作。 按钮是一个撤销标记，拖动该标记可以撤销或恢复最近的操作。利 用“历史纪录”面板还可以创建批处理命令。方法为：按下Shift键 在该面板中选定多个历史动作→单击该面板右下角的“将步骤保存 为” 按钮→在对话框的“名称”文本框中输入命令名→单击“确 定”按钮。这个名称就会出现在“命令”菜单的底部，单击它可执 行一系列动作。 5．行为面板：用于管理行为。行为决定热点和切片对鼠标移动所做 出的响应。 6．信息面板：提供所选对象的尺寸和画布指针的精确坐标。 返回目录
返回目录 31 Fireworks mX基础常用面板简介 7.样式面板:提供了许多可直接用于图形或者文本的图案样式。选 定图形或文本后单击“样式”面板中的样式图标,就可以自动应用 选择的样式 8.URL面板:用于添加、删除对象的URL地址。当鼠标指向图像文 件中指定了∪RL地址的热点区域时,该地址会出现在面板的当前 URL列表中 9.库面板:包含图形文件、按钮文件和动画文件。打开“库”面板 将元件从“库”面板拖到文档中,便生成了该元件的一个实例,修 改元件便相当于修改了该元件的全部实例 10.优化面板:用于管理控制对象大小和文件类型的设置,以及处理 要导出的文件或切片的调色板。 7
7 3.1 Fireworks MX 基础—常用面板简介 7．样式面板：提供了许多可直接用于图形或者文本的图案样式。选 定图形或文本后单击“样式”面板中的样式图标，就可以自动应用 选择的样式。 8．URL面板：用于添加、删除对象的URL地址。当鼠标指向图像文 件中指定了URL地址的热点区域时，该地址会出现在面板的当前 URL列表中。 9．库面板：包含图形文件、按钮文件和动画文件。打开“库”面板 将元件从“库”面板拖到文档中，便生成了该元件的一个实例，修 改元件便相当于修改了该元件的全部实例。 10．优化面板：用于管理控制对象大小和文件类型的设置，以及处理 要导出的文件或切片的调色板。 返回目录
返回目录 32 Fireworks MX基本操作一画布基本操作 1.创建画布 新建文档 单击“文件→新建”命令,出现画大小1M 如图所示的“新建文档”对话框,再 宽度 该对话框中对画布大小和画布颜色进 高度山:+0像素 高:40 行设置 分辨率③ 2.改变画布尺寸 画布颜色 G白色① 单击“修改→画布→画布大小” C透明D 命令,会出现“画布大小”对话框, C自定义 在“宽度”和“高度”文本框中输入 新的数值就可以重新指定画布的大小, 确定 重新指定大小后画布会相应扩展或缩 新建文档对话框 处给輔了扩展或缩小新画布时的参考方向,默认以中心为参考。 8
8 3.2 Fireworks MX 基本操作—画布基本操作 1．创建画布 单击“文件→新建”命令，出现 如图所示的“新建文档”对话框， 再 该对话框中对画布大小和画布颜色进 行设置。 2．改变画布尺寸 单击“修改→画布→画布大小” 命令，会出现“画布大小”对话框， 在“宽度”和“高度”文本框中输入 新的数值就可以重新指定画布的大小， 重新指定大小后画布会相应扩展或缩 小。 “锚 新建文档对话框 定”给出了扩展或缩小新画布时的参考方向，默认以中心为参考。 返回目录
返回目录 32 Fireworks MX基本操作一画布基本操作 3.更改画布属性 (1)裁剪画布 画布大小比画布上的对象大时,可以通过修剪画布来调整画布 的大小,使其刚好适合对象所占据的空间大小。具体操作为“修改- 画 布→修剪画布”,就可以将多余的画布裁剪掉,使剩余画布与画布内 对 象的大小一致。 如果对象的内容有一部分处于画布的可视范围之外,通过“修剪 画 布”命令会将这部分内容裁剪掉;要想调整画布使其容纳所有的图像 对 象,可以通过“修改→画布→符合画布”命令。 (2)旋转画布 如果需要将整个画布连同上面的所有对象旋转特定的角度,则可 9以选择“修改→画布→旋转180度/旋转90度(顺时针)/旋转90度(逆
9 3.2 Fireworks MX 基本操作—画布基本操作 3．更改画布属性 （1）裁剪画布 当画布大小比画布上的对象大时，可以通过修剪画布来调整画布 的大小，使其刚好适合对象所占据的空间大小。具体操作为“修改→ 画 布→修剪画布” ，就可以将多余的画布裁剪掉，使剩余画布与画布内 对 象的大小一致。 如果对象的内容有一部分处于画布的可视范围之外，通过“修剪 画 布”命令会将这部分内容裁剪掉；要想调整画布使其容纳所有的图像 对 象，可以通过“修改→画布→符合画布”命令。 （2）旋转画布 如果需要将整个画布连同上面的所有对象旋转特定的角度，则可 以选择“修改→画布→旋转180度/旋转90度（顺时针）/旋转90度（逆 时针）”来达到目的。 返回目录
返回目录 32 Fireworks MX基本操作一辅助工具的使用 1.网格 网格是一种设计工具,在画布上显示为由横线和竖线构成的网状体系, 只在工作环境中可见,图像输岀时不可见。利用网格可以给对象进行精确定 位。可通过“视图→网格→显示网格”命令显示和隐藏网格。 2.标尺 要测量、组织和计划作品的布局可通过标尺来实现。 Fireworks中的标 尺以象素为单位。显示和隐藏标尺,可通过“视图→标尺”命令来实现 3.辅助线 辅助线是从标尺拖到文档画布上的线条,可以帮助精确对齐目标。要显 示辅助线,首先要显示标尺,执行“视图→辅助线→显示辅助线”命令,然 后 在水平标尺或垂直标尺上按住鼠标向文档视图中拖动,就可以产生一条辅助 线。要锁定辅助线,不允许随意调整辅助线的位置,可以执行“视图 →辅助线→锁定辅助线”命令。 10
10 3.2 Fireworks MX 基本操作—辅助工具的使用 1．网格 网格是一种设计工具，在画布上显示为由横线和竖线构成的网状体系， 只在工作环境中可见，图像输出时不可见。利用网格可以给对象进行精确定 位。可通过“视图→网格→显示网格”命令显示和隐藏网格。 2．标尺 要测量、组织和计划作品的布局可通过标尺来实现。 Fireworks中的标 尺以象素为单位。显示和隐藏标尺，可通过“视图→标尺”命令来实现。 3．辅助线 辅助线是从标尺拖到文档画布上的线条，可以帮助精确对齐目标。要显 示辅助线，首先要显示标尺，执行“视图→辅助线→显示辅助线”命令，然 后 在水平标尺或垂直标尺上按住鼠标向文档视图中拖动，就可以产生一条辅助 线。要锁定辅助线，不允许随意调整辅助线的位置，可以执行“视图 →辅助线→锁定辅助线”命令。 返回目录