Download
1 / 83
830 likes | 1.12k Vues
Fireworks MX 2004. 教学内容. Fireworks 的功能很多，但是，因为课时数有限；有些功能，其他软件更强大，因此，教学内容是： §3.1 初识 Fireworks §3.2 熟悉常用控制面板 按钮、导航条、弹出菜单制作方法 图像优化与导出. 用 Fireworks 制作导航条目的. 制作一个专门用于以下五张网页的导航（均放在同一目录之中）导航条，并导出相应的 5 张网页。即， 主页： index.html 个人简介： personal.htm 我的学校： school.htm 本人作品： writing.htm
E N D
教学内容 • Fireworks的功能很多，但是，因为课时数有限；有些功能，其他软件更强大，因此，教学内容是： • §3.1初识 Fireworks • §3.2熟悉常用控制面板 • 按钮、导航条、弹出菜单制作方法 • 图像优化与导出
用Fireworks制作导航条目的 • 制作一个专门用于以下五张网页的导航（均放在同一目录之中）导航条，并导出相应的5张网页。即， • 主页： index.html • 个人简介： personal.htm • 我的学校： school.htm • 本人作品： writing.htm • 自荐书： oneself.htm
用Fireworks制作导航条步骤 • 画布尺寸－750×30pt • 新建按钮－“编辑”·“插入”·“新建按键” • 依次制作－释放、滑过、按下 • 提示：应用样式，不要外斜角、投影等外展样式，否则不易控制尺寸 • 将按钮元件，5次拖入文档窗口，然后在属性面板修改按钮上文字和设置链接目标 • 导出时，在“导出”对话框上单击“选项”按钮，进行相关设置后，导出一组网页 • 最后，用DW，修改网页文件名等
“导出”·“文档特定信息”选项卡 • “切片自动命名”选项区，选择用于自动命名切片的公式。宜使用默认设置或选择自己的选项 • “默认ALT标签”框中，可输入替代图像的描述文本 • 关键：“多重导航栏 HTML 页面（在没有帧集的情况下使用）”复选框，选中，Fireworks 将为导航栏中的每个按钮导出其它页面
考试题 • 简述先利用Fireworks制作导航条后，导出一组多重导航栏 HTML 页面，然后在Dream weaver中，对该网页进行必要修改的主要操作步骤
答案－主要操作步骤 • 在Fireworks中，新建一个文档，将画布设置成所需的尺寸 • 新建一个按钮（元件），依次制作－释放、滑过、按下状态 • 将按钮元件，多次拖放到编辑窗口中合适位置 • 分别对每个按钮实例的“文本”和“链接”属性进行设置 • 导出一组多重导航栏 HTML 页面。注意，必须在“HTML选项”对话框的·“文档特定信息”选项卡上选中多重导航栏 HTML 页面（在没有帧集的情况下使用）”复选框 • 将该组网页作为一个站点，在Dream weaver中修改网页文件名和标题等
GIF动画制作 • 提示：FW制作的均是逐帧动画。按制作方法 • 逐帧制作 • （新建）一帧一帧地编辑图形 • 创建所选的动画效果－对所选图形设定动画效果，在“动画”对话框上设定 • 多个图形分散到帧 • 将多个图形制作完成后－全部选中－单击“帧”面板“分散到帧”按钮 • 补间实例 • 两个（或更多）实例放置在画布上－全部选中－单击右键，然后单击“元件”·“补间实例”－在“补间实例”对话框上设置
为热点（切片）添加行为 • 以制作介绍学院、系概况网页为例 • 具体步骤参阅－网页讲解 • 提示： • 背景图像－单独放置在一个图层（最底层）－设置为共享图层－不透明度在属性面板上设定 • 添加交换图像行为－每个热点对应不同的帧 • 为管理方便，将每个按钮图形与对应文字“组合” • 网页层上放置热点、切片
功能简介 • 位图编辑－貌似Photoshop简化版。能与扫描仪、数码相机连接，工具少，处理功能弱 • 矢量图编辑－有一些独有的工具。如“路径洗刷” • 文本处理－只有字符级一种文本（没有段落文本），也能应用样式 • 动画制作－实例才能制作简单动画。移动、缩放、旋转或淡入（淡出） • 单步按钮制作程序－很有用 • 弹出式菜单－最有特色功能。可不写代码制作 • 创建翻转图片－与Dreamweaver功能相同 • 切片制作、设置应用－比Photoshop强大 • 图像优化－寻找文件尺寸与图形质量之间最佳点
对象类型与编辑模式 • 两类对象－矢量对象和位图对象 • 矢量－包含路径、文字、切片 • 文字与路径有所区别－ “自由变形”工具可对路径进行变形，但不能应用于文字 • 使用位图区中的工具，不能编辑矢量对象 • 使用矢量区中的工具，不能编辑位图对象
工作环境 • 网页三剑客的工作环境基本相同 • 菜单栏、工具栏、文档编辑窗口、工具面板、属性面板和其它控制面板 • 工具面板－工具分六个区存放 • 选择、位图、矢量、网页、颜色和视图 • 属性面板－工具选项、文档或选区属性等 • 其它控制面板－作用与Flash相同 • 工具栏－主要和修改两部分 • 设置：窗口·工具栏 • 文档编辑窗口－包含优化输出效果预览 • 原始、预览、2幅、4幅等4个选项卡（视图）
“工具”面板 • 工具面板共有58个工具，分为六个区： • 选择区、位图区、矢量区、网页区、颜色区、视图区 • 提示： • P84，工具面板图中显示了所有工具 • P85－86，工具列表中只列出了主要工具 • 颜色区，用于设置颜色，不是存放工具
与其他软件“工具”类比 • 选择区中 • 指针－相当于Flash箭头、P移动、C挑选 • 裁切－相当于P裁切－裁切尺寸属性面板设置 • 选取框－相当于P选框 • 位图区 • 选取框、椭圆选取框－相当于P选框 • 视图区中，五个工具与P的对应 • 单选按钮组－“标准屏幕模式”、“带有菜单的全屏模式” 和“全屏模式”按钮。选择显示模式 • “手形”和“缩放”工具
视图 • “视图”菜单中的命令主要与文档窗口有关 • 调整显示效果 • 标尺 • 网络－网格线的间隔、颜色等，在“编辑网格”对话框上设定 • 引导线－引导线的颜色、消除引导线，以及切片颜色、显示/隐藏切片引导线，在“引导线”对话框上设定。 • 精确设定引导线，在“移动引导线”对话框设定
新建、打开文档 • 新建文档 • 快捷键、“新建文档”对话框（宽度、高度是剪贴板中当前对象大小）等与P类似 • 打开文档－两个复选框独特 • 打开为“未命名”－选中打开后成为一个未命名文档，此后的编辑与原文档无关 • 以动画打开
导入、导出文档 • 导入 • 将图形图像文件导入正在编辑的文档中 • 导入数码相机或扫描仪的图像 • 导出 • 将编辑成果以非PNG格式文件输出 • 提示：导出预览，可更改文件格式、品质等 • 快速导出 • “快速导出”按钮（位于文档窗口右上角）－可方便地进行查看比例、动画控制和文件导出 • 提示：在主要工具栏上，有“导入”、“导出”按钮
文档格式 • Fireworks的文档格式－PNG • Fireworks编辑的是针对PNG格式文档 • 打开非PNG格式文档编辑时，将基于所打开的文档创建一个新的PNG格式文档 • 提示：打开非PNG文档后，虽说文档窗口标题栏显示的是其他格式，但实际上编辑的是PNG格式，保存时，以PNG保存。如果，需要保存为其它格式（包括原格式），则须用导出方式
改变文档属性 • 提示：所涉及的操作与P “图像”菜单中图像大小、画布大小、旋转画布等命令相似 • 使用菜单命令－“修改”·“画布”的次级菜单 • 图像大小 • 画布大小 • 画布颜色 • 修剪画布 • 符合画布 • 旋转180° • 旋转90°顺时针 • 旋转90°逆时针 • 使用属性面板－画布大小、图像大小
“参数选择”对话框 • 单击“编辑”·“参数选择”，打开该对话框 • 常规－“工作区”·“显示选项卡图标”复选框，选中，在文档窗口下方“状态栏”上显示面板按钮 • 编辑 • 启动并编辑 • 文件夹 • 导入
“参数选择”·“编辑” • 光标 • 精确光标－与P中精确光标相同（十字形） • 刷子大小绘图光标－用刷子工具时，显示刷子大小的圆圈 • “钢笔”工具选项 • 显示钢笔预览（作用与P是“橡皮带”相同） • 显示实心点（路径节点全部以实心显示，而不是仅仅是选中的才是实心） • 位图选项 • 关闭“隐藏边界” • 显示条纹边框－显示位图边框 • 指针选项 • 鼠标高亮显示、拖动时预览、显示填充手柄、选择距离、对齐距离
操作的撤消与恢复 • 撤消 • 快捷键：Ctrl＋Z。可以多次连续使用（键组合：与P、C相同；使用：与C一样，与P不同） • 恢复 • 快捷键：Ctrl＋Y。可以多次连续使用（键组合：与P、C不同） • 快速返回上次存盘状态－“文件”·“还原” • 历史面板－“窗口”·“历史记录” • 操作方法是，拖动左侧滑杆上的指示标志
属性面板（1） • “属性”面板，是一个上下文相关的对话框，根据用户当前执行的工具或对象自动显示与之相关的属性，方便用户操作。 • 换句话说，当选择的工具或对象不同时，属性面板上显示的内容也不同。例如： • 路径对象－属性面板分四个区。自左到右分别，设置尺寸（命名）、设置填充、设置笔触和设置透明度及样式。
属性面板（2） • 文字对象－属性面板分三个区。自左至右分别，设置尺寸（命名）、设置文字属性、设置透明度及样式 • 位图对象－属性面板分二个区。自左至右分别，设置尺寸（命名）、设置透明度及样式
制作网站Logo • 本节的目的是，通过制作Logo • 了解常用工具的使用方法及其功能 • 了解“修改”菜单中，“变形”和“组合路径”等使用方法及其功能
利用基本绘图工具直接绘制 • 第2步，文档属性－分辨率37.7999像素/厘米，也就是96ppi • 第6步，显示网格，对椭圆对齐，没有什么作用，应该先选定需要对齐的对象，然后使用“修改”·“对齐”次级菜单中命令 • 第7步，属性面板中轮廓线宽应是“2”
基本绘图工具与菜单命令结合 • 第6、7步，均使用了“修改”·“组合路径”·“打孔”。 • 提示：打孔的对象是位于“层”面板上最下方的对象
路径的绘制 • 线条－绘制直线－在文档窗口中拖曳 • 属性面板设置：线条颜色、笔尖大小、描边种类（笔触）、不透明度、混合模式、纹理名称及总量－与选项栏Photoshop相似 • 矩形、圆角矩形、椭圆、多边形 • 按Shift正形；按Alt起点为中心 • 提示：取消组合后方可使用“自由变形”等编辑 • 钢笔、矢量路径－双击结束 • 功能及使用方法与Photoshop中“钢笔”、“自由钢笔”基本相同。区别：Fireworks中路径（线条）有宽度，且可以填充 • 提示：上述路径工具的和属性面板相似
路径的编辑（一） • 通过编辑节点变形路径 • 使用“部分选定”工具，操作方法类似于Photoshop中"直接选择"工具。移动节点、拖动调整杆 • 提示：删除节（锚）点的方法与Photoshop中不同，没有专门的删除锚点工具，只需选中后直接按Delete键即可。添加节（锚）点，用钢笔工具在路径上单击 • 节点类型称为拐角节点（相当于Photoshop中尖角）和曲线节点（相当于平滑）类型转换的方法是用“部分选定”工具选中后，用“钢笔”工具单击或拖动 • 提示：详见几种软件编辑方法对比
路径的编辑（二） • 使用变形工具组及刀子工具变形路径 • "自由变形"工具：可直接弯曲路径不必修改节点。属性面板上，可调节变形半径和压力大小（压力越大，作用的范围越大－单击鼠标后出现的圆圈越大） • “更改区域形状”工具：可推拉路径，使之变形。属性面板上，“大小”是推拉变形范围（双层圆圈的直径），“强度”“文本框中输入一个范围从 1 到 100 的值。该值指示指针的潜在强度的百分比。百分比越高，强度越大（强度小了，拖不动路径） • "重绘路径"工具（钢笔工具组中）：用户可用它重画路径的局部。 • “刀子（切割）"工具
路径的编辑（三） • 使用路径操作命令变形路径 • 路径混合－类似C中相交、修剪、焊接 • 路径简化－“简化”对话框上设定 • 扩展笔触－“展开笔触”对话框上设定 • 扩展与收缩路径－“伸缩路径”对话框上设定 • 变形扭曲对象 • 变形扭曲工具组位于工具面板的选择区中 • 注意：可应用于文本、位图、热点区和切片区 • 提示：“修改”·“变形”菜单命令组和“修改”工具栏上按钮命令也可利用
路径的编辑（四） • 为路径设置描边、填充、不透明度及效果 • 描边路径－笔触（“笔触选项”可设置描边位置，如，居中）、宽度、纹理、边缘（柔化度） • 填充路径－填充类别（渐变样式－注意：单击填充类型颜色框即可编辑）、边缘、纹理等 • 提示：默认路径无色；有关设置在属性面板上进行；不封合的路径也能填充填充范围＝路径＋起点与终点边线 • 设置不透明度－不透明度针对描边及其填充 • 设置效果－单击“效果”右侧的“＋”按钮后选择
路径的编辑（洗刷工具） • “洗刷工具－添加”和“洗刷工具－去除”两种工具，用来更改路径的外观。使用不断变化的压力或速度，可以更改路径的笔触属性。包括笔触大小、角度、墨量、离散、色相、亮度和饱和度 • 提示：有时上述工具的作用不明显 • 为了显示明显的效果，制作路径时，可选用描边种类－毛笔·羽毛笔
路径的组合 • “修改”·“组合路径”的次级菜单命令 • 接合－可合并两个以上路径（层），也可合并同一路径层上同时选中的两个节点（不一定重合） • 拆分－只能拆分，由两个以上路径层合并而成的路径层 • 联合－类似C焊接，填充色是下方路径的 • 交集－最上层的路径，裁切下方 • 打孔－成果是下方路径中减去与上方的重叠部分 • 裁切－最上层的分别裁剪下方的每一个路径路径（结果只剩一个） • 提示：交集、打孔、裁剪的原路径即使不闭合，“成果”都是闭合的
3.3.3文本的创建与编辑 • 文本框－固定、不固定宽度两类。可互换 • 不固定→固定－拖动文本框控制点(除右上角) • 固定→不固定－双击文本框右上角控制点 • 属性面板－编辑文字 • 字符设置－字体、字号、颜色、字型（加粗、倾斜、下划线）、字间距（调节右侧间距，可单字调节）、字顶距（就是行距，单位%或像素。慎重设置）、水平缩放、基线 • 段落设置－段落缩进（首行缩进）、段前空格（段前间距）、段后空格（段后间距）、文本排列方向（按钮）、段落对齐（五个按钮组合，齐行－“撑”满整行） • 提示：在输入文字时，不应按下伸展对齐按钮
3.3.3文本编辑（二） • 描边－文字、路径均可 • 宽度、位置（“路径外”）等设定。单击属性面板笔触颜色框后，在笔触选项对话框上进行 • 填充－与路径填充类似 • 填充类别（渐变样式－注意：单击填充类型颜色框即可编辑）、边缘、纹理等 • 提示：填充范围，就是正常的文字笔画部分 • 效果－ • 单击“效果”右侧的“＋”按钮后选择 • 提示：应用一个以上样式时，应用先后影响最终效果（如，投影和凸起浮雕，选应用那一个）
文本编辑（三） • 样式－与P中相同 • “资源”面板，“样式”选项卡上选定 • 文本编辑器 • 单击“文本”·“编辑器”，即可打开该对话框 • “文本编辑器”对话框，能够编辑文本，功能与面板基本相同
3.3.4变形文本、转换为路径 • 变形文本 • 利用工具箱中，选择区的变形扭曲工具组中的缩放、扭曲、倾斜工具 • 提示：变形后，文本的大小（像素值）不变 • 将文本转换为路径 • 选中需要的文本后，单击“文本”·“转换为路径” • 提示：转为路径后，不再能用编辑文本的方法 • 转换为路径后，改变字形方法见“路径的编辑（一）”
3.3.5文本附加到路径 • 与C的文本适配路径相比，功能强一些 • 文本与路径制作完成后，必须先选中两者，然后再单击“文本”·“附加到路径” • 路径的绘制顺序决定文本的排列方向 • 文本适配到路径后，可利用： • 文字属性面板上的文本排列方向（按钮）， • “文本”菜单中的“对齐”和“方向的次级菜单命令，改变文本的排列、对齐方向等 • 路径与文本分离－“文本”·“从路径脱离”
3.5.1制作导航条 • 制作导航条的关键是制作按钮元件 • 单击“编辑”·“插入”·“新建按钮”或者“编辑”·“插入”·“新建元件”后，在“元件属性”对话框选择 • 提示：制作时，使用复制前一种状态图形的按钮，或从“公用”库中导入以简化制作工作 • 导航条须导出后，方可（插入网页）使用 • 保存类型－HTML和图像。这样才能插入网页
3.5.1使用元件 • 元件的作用、制作、应用与Flash基本相同。新建方法 • 单击“编辑”·“插入”·“新建按钮（元件）” • 或在编辑窗口中单击右键，然后单击“插入新按钮（新元件、空位图” • 元件种类－图形、动画和按钮。其中： • 按钮的作用独特，例如，利用它可快速创建导航条（栏）。而导航条在网页是很重要的 • 动画－GIF动画是逐帧动画 • 提示：元件尺寸＝图形＋样式范围。即，应用样式后，元件尺寸会比原图形尺寸大
3.5.1按钮状态 • 按钮的四种状态 • 释放－缺省状态，鼠标不在按钮上时的状态 • 滑过－鼠标在Web页中经过按钮时的状态 • 按下－单击按钮时显示的状态 • 按下时滑过－鼠标移至已按下按钮上的状态 • 提示 • 制作一个按钮至少有两种状态 • 按钮按下后，除非（网页）重新加载，否则，不会自动弹起（恢复至释放状态） • 若将“按下时滑过”与“释放”设置相同，鼠标移至已按下的按钮上，能制作按钮弹起效果
3.5.1创建按钮 • 创建按钮－制作元件：按钮（P176－178） • 176步骤2中，按钮由一个矩形和一个圆角矩形组合而成，是为了上部圆角，下部直角 • 释放状态制作完成后，滑过、按下、按下时滑过状态，均可用复制前一种状态图形，然后修改的方法制作 • 活动区域－在属性面板上设置链接目标等 • 提示：⑴按钮行为由单击（按下）事件引发 • ⑵四种状态中文本相同，不要将文本与图形组合，否则文本就不能单独编辑了 • ⑶按钮的样式不宜采用－发光、投影、凸起浮雕、凹入浮雕、外斜角等，在按钮外侧显示的样式，否则导航条上各按钮不能紧密排列
3.5.1编辑按钮 • 设置 • “按下”和“按下时滑过”选项卡上，分别有：“包括导航栏按下状态”和“包括导航栏按下后滑过状态”复选框。应该选中（默认选项），以便此按钮适用于导航栏 • 进入编辑元件或实例状态 • 双击文档窗口中的（按钮）实例 • 双击库面板上的（按钮）元件 • 选中按钮元件，单击“修改”·“元件”·“编辑元件” • 修改实例的文本对象或链接属性，可属性面板上进行
3.5.1创建导航条 • 导航栏－一组互斥的按钮 • 制作方法 • 将库中的按钮元件，重复数次拖入文档窗口，且排列整齐 • 逐个选中按钮在属性面板中修改“文本”、“链接”、替代“、”目标“等 • 导出 • 若要在网页中应用导航条，则必须使用导出的方法，保存为HTML文件和图像文件（GIF） • 应用 • 在Dreamweaver中，插入Fireworks HTML
3.5.1系统提供的元件与按钮 • Fireworks与Flash一样提供公用库。 • “公用”库位于“编辑”·“库”次级 • “主题”是“按钮”、“动画”和“项目符号”等三类 元件的总和。还可使用“其他…”命令导入其他PNG文件中的元件 • 与Flash一样，从公用库中导入元件后，会保存到当前文档的库中
3.6设计网页 • 3.6.1，第8步，制作圆环，填充色应该为无 • 提示：3.6.2，切片没有设置链接！而是待到Dream weaver中再设置 • 3.6.3、3.6.4和3.6.5，分别设置优化；导出HTML和图像 • 3.6.6，讲述部分导出PNG，使用裁剪工具组中有“导出区域”工具，选定导出区域 • 提示：所有图像素材，均在下述目录中： • 教材素材\本书素材与实例\正文素材与实例\fireworks
5.2使用样式 • 文字、图形、图像均可应用样式 • 使用样式的方法，及样式本身与P等相似 • 除了用户逐步添加（调整）外，也有样式面板 • 样式面板－使用、操作方法与P相似 • 默认有30个样式，保存在：Style Defaults.stl • 目录：Program Files\Macromedia\Fireworks MX\First Run\Styles • 另有21个样式可添加：在Styles.stl文件中 • 目录：Program Files\Macromedia\Fireworks MX\First Run\Nav Menu
5.4编辑位图 • 用户可以象编辑路径和文本那样，对位图进行选择、移动、复制和变形（缩放、倾斜、透视、旋转和翻转等）操作，也可利用属性面板为位图设置效果等 • Fireworks MX编辑位图的功能（除上述） • 利用传统位图的绘图工具－橡皮图章、铅笔等 • 利用滤镜增强图像效果。甚至使用P滤镜 • 利用橡皮擦工具擦除位图 • 羽化图像边缘 • 利用模糊、锐化、减淡、加深、涂抹处理位图 • 利用裁剪工具（选择工具区），裁剪图像
