Fireworks教案_fireworks教案

2020-02-27 教案模板下载本文

Fireworks教案由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“fireworks教案”。

Fireworks教案

第一章

一、概述

1、简介：adobe公司旗下的集图像处理与动画制作为一体的制作软件

2、特点：丰富的位图处理功能

强大的优化输出功能（可根据需要更改图片格式）

可导入各种文件格式

制作网页

动画制作

兼容性增强

3、网页制作概述

网页元素组成网页制作过程前台美工应用

4、网页四剑客（比对fw和ps）

二、图形简介

1、位图

2、矢量图

3、网络图形（jpeg，gif，png简介和特点）

Jpg：支持颜色多，文件容量大。

Gif：支持256色，支持透明背景和动画

Png：兼并了jpg和gif的特点，支持直接编辑，逐渐流行。

三、安装与进入

Install.exe（安装在非系统盘）sn.txt（keygen。exe）为注册码绿化软件的安装。

四、基础知识

1、界面简介

2、快捷键

工具（ctrl+f2）属性（ctrl+f3）克隆（ctrl+shift+d）数值变形（ctrl+shift+t）

对齐（没有）层面板（f2）优化（f6）混色器（shift+f9）帧（shift+f2）

历史纪录（shift+f10）行为（shift+f3）

3、辅助工具

首选参数（ctrl+u）标尺（ctrl+alt+r）网格（ctrl+alt+g）

网格以及辅助线的编辑

4、界面设置

三种界面切换（f）创建以及画布设置

第二章工具

（一）一、选择区域

1、选取工具组（v）

后方选择工具：先选中前面的物体，后单击后方物体，进行后面物体的选中。

2、任意变形工具组（q）

缩放

倾斜

扭曲注意：ctrl+t只可以调用缩放工具

3、裁减工具组（c）

导出区域：除了进行图片的裁减以外，可以对所选中的部分直接进行导出

二、位图区域

1、选取框工具（m）

椭圆选取框工具

用于对位图进行选择，选择区域以外的物体将不会被更改。

2、套索工具（L）

分为普通套索和多边形套索，用于制作不规则选区

3、魔术棒工具（W）

用于选取相似颜色的区域

注：讲解所有位图选取工具时要配合选择菜单以及属性面板的介绍

三、实例：

图片修饰

第三章工具

（二）一、位图工具

1、笔刷和铅笔工具（B、Y）

用于绘制软线条和硬线条使用

属性面板操作（特别是画笔样式以及如何使用其它画笔样式）

2、橡皮工具（E）

用于擦除图片区域

注：透明度设置以及应用

3、位图修饰工具组

模糊工具

锐化工具

减淡工具

加深工具

涂抹工具

4、图章工具组

仿制图章工具

替换颜色工具

去除红眼工具

二、钢笔工具和部分选区工具

工笔工具用于绘制路径使用

注：使用钢笔工具时如何绘制直线不封闭路径，以及绘制完曲线路径后如何绘制直线路径。

将路径转换为选区。

用部分选取工具对绘制的路径

三、实例

山木培训标志

李宁标志第四章工具

（三）一、路径工具组

1、图形工具组

矩形工具

多边形工具

圆形工具

自定义图形工具组

注：自定义图形的使用方法以及绘制多边形和星形。

2、文字工具（T）

使用文本编辑器进行设置

属性设置

3、路径绘制工具

注：增加钢笔工具组的自由路径和重绘路径工具。

二、web工作区域

热点和切片工具

用于制作网络中所用连接以及特效连接注：只讲切片的分割功能。

三、颜色区域

1、滴管工具（I）

用于吸取颜色和样式以后，为图形赋予新的样式。

2、填充工具组（K）油漆桶和渐变工具

3、视图区域

空格+ctrl 放大

空格+alt+ctrl 缩小

双击手型工具恢复全屏显示第五章编辑对象

一、分类：

1、路径对象（直线、工笔、矢量路径工具、椭圆、多边形）可以直接进行编辑的对象，是fw中最基础的绘制对象

2、矩形和组合对象（ctrl+g）

进行组合后可以进行同时的位移和变形；但是，组合对象仍可以进行单独路径的编辑，而矩形对象不可以。

3、文本对象

文字工具绘制的对象

注：路径文字的制作

4、位图对象

直接导入的图片

平面化所选的对象

二、组合路径选项

结合联合打孔拆分交集

剪裁

三、改变路径

四、实例第六章

图层

一、概述

二、分类

网页层

普通层（图层与图层文件夹）

背景层

三、操作

新建图层

删除图层

图层的重命名

图层属性（锁定、透明度）

图层的合成图层混合模式（*）

四、遮罩层

矢量遮罩（只以轮廓显示）

创建矢量蒙版

步骤1：打开一幅图像,选择工具箱中的椭圆工具，在图像上绘制一个无填充颜色的椭圆

步骤2：选中无填充颜色的椭圆，按Ctrl+X组合键剪切蒙版对象后，选中被蒙版对象图片。

步骤3：

执行【编辑】→【粘贴为蒙版】命令。操作完成后，原图像中只有与椭圆区域重合的部分被显示出来，其余部分被隐藏了。

步骤4：保存文档。

矢量蒙版对象将下方的对象裁剪或剪贴为其路径的形状。创建矢量蒙版时，在层面板中会出现一个带有钢笔图标的蒙版缩略图，表示已经创建了矢量蒙版。

选择矢量蒙版，在其属性面板中会显示有关蒙版应用属性的信息。默认情况下，矢量蒙版通过其路径轮廓进行应用，但也可以采用其他的方式，如灰度外观等。

位图遮罩（以像素进行影响）

将绘制图形平面化以后（或直接导入图片），其它过程同上

五、遮罩层实例

第七章滤镜和效果

1.滤镜

滤镜是通过选择【滤镜】菜单中的命令来实现的，Fireworks的【滤镜】菜单中主要包括杂点、模糊、调整颜色、锐化等。

注意：如果使用【滤镜】菜单将滤镜应用于选定的矢量对象，则Fireworks会提示将所选对象转换成位图后再进行处理。

将上图中的正圆应用杂点滤镜，操作步骤为：

步骤1：在画布中选中正圆形矢量对象。

步骤2：执行【滤镜】→【杂点】→【新增杂点】操作，弹出所示的提示框。

步骤3：单击【确定】按钮后，弹出所示的“新增杂点”参数设置窗口，设置参数后单击【确定】按钮即可。正圆应用杂点滤镜后的效果所示。

2.动态效果

动态效果是通过在所选对象属性面板的“效果”区域内进行添加和编辑的，除了上面介绍的滤镜效果外，还包括斜角、浮雕、阴影、光晕等图像效果。

将上图中的正圆应用内斜角效果，操作步骤为：

步骤1：在画布中选中正圆形矢量对象。

步骤2：在正圆形对象属性面板的效果区域中，单击添加效果按钮，在效果菜单中选择【斜角和浮雕】→【内斜角】效果，弹出所示的参数设置对话框。

步骤3：参数设置完成后按Enter键或在画布中单击。应用内斜角的效果所示。

图像制作实例

在图像的制作过程中，经常要进行同时选择多个对象的操作，主要方法有：

按住Shift键点选每个对象；

使用Ctrl+A全选画布中的所有对象；

使用工具箱中的选择工具，在画布上框选多个对象；

执行【选择】→【全选】操作。

1.制作太极图

步骤1：新建一个宽300像素、高300像素的画布。

步骤2：选择【视图】→【标尺】命令，打开标尺，并利用鼠标从纵、横标尺中拖拽出两条辅助线，位置在纵、横距起点处150像素步骤3：选择工具箱中的椭圆工具，在其属性面板中设置“描边颜色”为#000000，“笔尖大小”为1，“描边种类”为实线，禁用填充颜色。将鼠标指向辅助线的交叉点，同时按下Shift+Alt键，画出一个以辅助线交叉点为圆心，直径为200像素的正圆。

步骤4：继续使用椭圆工具，利用上述方法，分别在垂直辅助线的两侧绘制出两个直径为100像素的小圆。

步骤5：同时选中画布上的三个圆，选择工具箱中的刀子工具，沿水平辅助线方向从大圆的左侧向右侧进行切割，将三个圆同时切割为两部分。分别将左侧小圆的下半部分和右侧小圆的上半部分删除。

步骤6：同时选中左侧小圆的上半部分和右侧小圆的下半部分，执行【编辑】→【克隆】命令，将这两段孤线克隆，就是在原位置上复制两段孤线。

步骤7：按住Shift键选中克隆后的两段孤线和大圆的上半部分孤线，并将其上移，所示。

步骤8：选中移动后的三段孤线，执行【修改→【组合路径】→【接合】命令，将这三段孤线组合成一个完整的封闭路径。

步骤9：重复上述步骤，将未移动的三段孤线组合成一个完整的封闭路径。将“步骤8”中移出的路径移回原位

步骤10：选择下半部分路径，将其填充颜色设置为#000000（黑色）。

步骤11：按“步骤3”中的方法，沿水平线在垂直线的两侧分别画两个直径为20像素的小圆，其中左侧小圆的填充颜色设置为#FFFFFF（白色）、右侧小圆的填充颜色设置为#000000，将辅助线拖出工作区。

其它滤镜以及效果同上使用

二、特殊效果

投影

斜角与浮雕

三、添加第三方滤镜

安装以及使用

第八章

实例教学

使用上述章节的知识点，制作实例

例如：按钮、静态导航条、图片处理、立体文字、镂空文字、金属文字

云彩效果、模拟3d网格线、水印文字、太极图等

第九章

样式和帧

一、样式简介

1、定义

分类（图形样式和文字样式）

2、操作

应用

新建

编辑

删除（系统自带样式不能删除）

保存

导入

二、帧

定义：一幅静止的图片

作用

用于动画制作

操作：

新建

删除

复制

帧频

速度

洋葱皮工具

三、实例：心跳广告 qq表情

第十章组件对象

图形（用于存放静态的图片）动画（存放动画）按钮（制作按钮）

快捷键：新建 ctrl+f8 ；转换 f8 实例：

制作立体按钮

在网页中我们经常看到一些漂亮的立体按钮，起到了非常好的美化作用。现在我们就来学习一种简单的制作立体按钮的方法，具体步骤如下：

步骤1：新建画布，选择工具箱中的矩形工具，在画布中绘制一正方形。

步骤2：单击工具箱中填充工具的下拉箭头，从中选择填充选项进行设置，45所示。

步骤3：选择工具箱中的渐变工具，沿矩形左上角向右下角方向拖动油漆桶，改变填充样式。

步骤4：选择该矩形，对其执行【编辑】→【克隆】命令；再执行【修改】→【变形】→【旋转180°】命令，将矩形旋转；然后选择工具箱中的缩放工具，按住Alt键，在保持中心位置不变的情况下，将其缩小。

步骤5：选择小矩形，在属性面板中设置边缘选项为羽化、数值2。

步骤6：同时选择两个矩形，执行【修改】→【改变路径】→【伸缩路径】命令，然后在¡°伸缩路径¡±对话框中进行参数设置，单击【确定】按钮.步骤7：选择两个矩形，执行【修改】→【组合】命令

步骤8：选择组合后的矩形，在其属性面板的效果中选择色相/饱和度，设置参数步骤9：选择工具箱中的文本工具，输入字母，在属性面板中设置字体大小为

35、加粗，填充颜色为#FFFFFF、禁用描边颜色；在效果中选择凹入浮雕，利用工具栏中的【对齐】按钮调整其到矩形中心位置。

动画制作

1.毛毛细雨

步骤1：新建文档，导入一幅图片。

步骤2：执行【窗口】→【层面板】命令打开层面板，添加一个新层，并在该层上用矩形工具绘制出一个略大于画布的矩形，用黑色填充。

步骤3：选择黑色矩形，在其属性面板的效果中选择【杂点】→【新增杂点】，在弹出的¡°新增杂点¡±对话框中设置数量为最大400。

步骤4：再为该矩形添加运动模糊效果。步骤5：在该矩形的属性面板中设置不透明度。

步骤6：打开帧面板，在帧面板的选项菜单中选择¡°重制帧¡±操作，在¡°重制帧¡±对话框中进行设置，然后单击【确定】按钮

步骤7：选中第2帧，使用方向键将矩形向左和向下各移动10个像素。选中第3帧，使用方向键将矩形向左和向下各移动20个像素

步骤8：选中第1帧，在层面板中双击层1，在弹出的对话框中勾选¡°共享交叠帧，53所示。

步骤9：单击控制区的播放按钮，预览效果，毛毛细雨的效果出现了

2.飞舞的蝴蝶

步骤1：导入一张带蝴蝶的图片，利用魔术棒等选取工具，将蝴蝶从原图中抠出，剪切来备用。

步骤2：导入一张鲜花图片，作为背景。在层面板中勾选背景层的共享交叠帧选项步骤3：执行【编辑】→【插入】→【【新元件】命令，在¡°元件属性¡±对话框中选择动画类型。

步骤4：在打开的元件编辑器中粘贴第1步抠出的蝴蝶，按比例调整大小后进行复制。步骤5：在帧面板中添加一个新帧，粘贴上步复制的蝴蝶。按住Alt键，在保持蝴蝶中心点不变的情况下进行缩放，并调整其亮度和对比度，单击【完成】按钮返回。

步骤6：删除画布中自动添加的动画元件实例，从库面板中重新将动画元件实例拖动到画布中，会弹出提示框，单击【确定】按钮，然后调整元件实例的位置步骤7：单击控制区的【播放】按钮。

第十一章

行为

一、概述定义作用

构成：事件：对图形的操作

动作：操作所产生的效果

二、基础操作

注：添加之前必须有热点或切片

添加

删除

常用事件

常用动作

三、实例

制作弹出菜单

弹出菜单在网页制作中起到重要的导航作用，当鼠标移到触发网页对象，如切片、热点、按钮上或单击这些对象时，浏览器中即显示弹出菜单，供用户选择浏览。一般在弹出菜单中都附加URL链接。

每个弹出菜单项都以HTML或图像单元格的形式显示，并具有“弹起”状态和“滑过”状态，并且在这两种状态中都包含文本。要预览弹出菜单，可按F12键在浏览器中预览，Fireworks文档窗口中的预览状态不会显示弹出菜单。Fireworks提供了“弹出菜单编辑器”，利用它可以快速方便地创建垂直或水平弹出菜单。

1.创建弹出菜单

本例将在以前制作的导航栏基础上介绍弹出菜单的制作过程，具体操作过程如下

步骤1：打开以前制作的daohang.png文件，修改画布大小。步骤2：选中“动物趣闻”按钮元件实例，将鼠标移至中心控制点处单击，在弹出的操作选项中选择“添加弹出菜单”，打开“弹出菜单编辑器”。

步骤3：在“内容”选项卡中添加相关内容。

“内容”选项卡中的为添加菜单项，为删除菜单项，用于将选中的菜单项变成上级菜单的子菜单，用于将子菜单还原为同级菜单，“文本”用于输入菜单项的名称，“链接”用于输入菜单项的对应链接地址，“目标”用于设置链接页面出现的形式。

步骤4：单击“外观”选项卡，进行文本格式的设置，为“滑过状态”和“弹起状态”应用图形样式，选择菜单的形式为“垂直菜单”。

步骤5：单击高级选项卡，可进行单元格大小、边距和间距、文字缩进、菜单消失延时，以及边框宽度、颜色、阴影和高亮等设置。

步骤6：单击位置选项卡，对弹出菜单位置和方向进行设置。

步骤7：最后单击【完成】按钮，按F12在浏览器中浏览。

步骤8：保存文档。

2.导出弹出菜单

Fireworks生成了在Web浏览器中查看弹出菜单所需的所有JavaScript。将含有弹出菜单的Fireworks文档导出为HTML时，会自动生成一个名为mm_menu.js的JavaScript文件，此文件与HTML文件在同一文件夹中。在上传文件时，应该将mm_menu.js上传到与包含该弹出菜单的网页相同的位置。如果希望将该文件发送到其他位置，必须在Fireworks HTML代码中更新引用mm_menu.js的超级链接，以便反映自定义位置。如果文档中有若干个弹出菜单，或者有若干个含弹出菜单的文档，Fireworks只创建一个mm_menu.js文件

当菜单包含子菜单时，Fireworks会生成一个名为arrows.gif的图像文件。该图像是一个出现在菜单项旁边的小箭头，它表示存在一个子菜单。无论文档中包含多少个子菜单，Fireworks总是使用同一个arrows.gif文件。

第十二章优化、输出和批处理

一、优化

优化格式

Jpg png gif

网络安全色（216）

网页抖动

优化面板（f6）

避免颜色丢失过多，而无法正常显示，故使用抖动颜色，以增加像素点。

二、导出

导出设置（ctrl+alt+x）

导出（ctrl+shift+r）