当前位置：文档之家 › Fireworks 8 教程第09章 制作按钮、导航栏和弹出菜单

Fireworks 8 教程第09章 制作按钮、导航栏和弹出菜单

  • 格式：ppt
  • 大小：287.50 KB
  • 文档页数：13

下载文档原格式

  / 13

合集下载

Fireworks8教案

Fireworks8教案

2、给“切片”增加行为 、 切片”
• 简单交换图像：
– 在第一帧中创建切片， – 添加第二帧，在切片区域导入或绘制图像， – 在第一帧的切片中单击行为手柄，选择“简单交换 图像”。
• 不相交翻转图 • 将多个变换图像应用到所选切片：
– 将手柄拖动到同一切片的左上边缘时可创建一个交 换图像， – 将手柄拖动到其它切片时可创建不相交变换图像。
– 修改菜单
• 修剪画布（Ctrl+Alt+T） Ctrl+Alt+T
– 裁去多余的画布和图像
• 符合画布（Ctrl+Alt+F）
– 让画布与图像大小一样
• 旋转画布：修改/画布
二、工具的使用
• • • • • 常用位图图形工具 常用矢量图形工具 对象的选择与编辑 图形特效的设置 使用文本
1、常用矢量图形工具
3、使用切片导出图像
图层的操作
• • • • 新建、复制和删除图层（Alt键） 锁定和隐藏图层 图层透明度的设置 平面化、合并图层：将图层转化为位图层
–“向下合并”只对用于位图层，对于路径、切片、 热点和按钮是无效的 – 修改/平面化图层，修改/向下合并或层面板
• 网页层：包含Web对象（切片和热点）。
– 特殊的层，只有一个，在所有帧之间共享 – 不能停止共享、删除、复制、移动或重命名、合并
• 绘制基本的多边形和星形
– 边数3~360、拖动滑块可设选取工具
– – – – 选择规则区域：正方形或正圆选区 选择不规则区域：“套索”与“多边形套索” 选取相似色彩区域：选择——选择相似 调整选择区域
• • • • • 移动选区（光标置于选区内） 增加选区：Shift 减少选区：Alt 取消：Ctrl+D 相交选区：Alt+Shift

Dreamweaver-Flash-Fireworks网页制作培训教程第9课

Dreamweaver-Flash-Fireworks网页制作培训教程第9课

9.1.2 典型案例——编写简单网页
操作思路：
（1）在代码视图中修改<title>和</title>之间的 文本，设置浏览器标题栏中的内容。 （2）在<body>和</body>之间添加表格、行、 单元格、段落、换行、项目列表、项目内容标 签，并输入对应的内容。 （3）在表格标签中设置表格的宽度、边框和对 齐方式。
9.1 认识Dreamweaver
9.1.1 知识讲解 9.1.2 典型案例——编写简单网页
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
9.1.1 知识讲解
本节将介绍Dreamweaver的工作环境、 网页基础语言HTML及网站中主页、网页 间的联系。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
9.1 认识Dreamweaver
Dreamweaver是一款网页编辑软件，可 将图像、动画等各种素材有机地整合在同 一网页中，通过超链接实现网页间的相互 切换。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
9.2.1 知识讲解
1. 认识【文件】面板 2. 建立站点 3. 管理站点文件
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
1. 认识【文件】面板
选择【窗口】→【文件】命令或按【F8】 键，打开【文件】面板，如下图所示。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
3. 管理站点文件

fireworks教案课件第8章按钮、动画

fireworks教案课件第8章按钮、动画
2．编辑按钮
方法一：在文档窗口中，双击要编辑的按钮，打开按钮编辑器，然后 对按钮的各个状态进行编辑。编辑完毕，关闭按钮编辑器，即可实现 对按钮的更新。
方法二： （1）在文档窗口中，选中要编辑的按钮。 （2）选择“修改”|“元件”|“编辑元件”菜单命令。打开按钮编辑器
编辑按钮。
3．为按钮添加URL链接
1．在状态之间复制或移动对象 使用状态面板可以很便捷地将某个对象从一个状态复制或移动到另一
个状态中。 2．在状态之间共享层 图层共享的原理是：将在所有状态中都固定出现并保持静止的对象放
置在某一个图层中，然后将该图层在各状态之间交叉共享，这样该图 层中的内容就会出现在所有的状态中。 3．分散到状态 若在一个状态中绘制了多个对象，可以使用分散到状态的操作，将创 建的许多对象分别放入不同的状态中。 4．将多个图像文件打开到不同状态中 若已经存在多个图像，并希望将这些图像组合起来形成一个动画图像。
1．简单变换图像 简单变换图像可以用来创建简单翻转图：当鼠标移过或单击某一幅图
像（称为原始图像）时，显示位于该图下面的图像（称为翻转图像）。 这也是最简单的翻转效果。 2．交换图像行为 交换图像行为可以将切片图像切换为后面状态或外部图像，简单变换 图像实际就是目标为“状态2”的交换图像行为。 3．恢复交换图像行为 恢复交换图像行为通常与交换图像行为配套使用，将切换后的图像返 回原始图像。 4．设置导航栏图像行为 设置导航栏图像行为可以用于导航条的制作。 5．设置弹出菜单行为 设置弹出菜单行为用于制作弹出式菜单。
5．洋葱皮技术
主要是指在半透明的描图纸上绘制动画状态，以便透过纸 张看到其他状态中的内容，便于了解两个状态或多个状态 之间图案的相差程度，以掌握动画的流畅性。
8.2.5 控制动画

第8章Fireworks网页图形制作

第8章Fireworks网页图形制作
返回本节 录
8.1.5 使用描边和填充


2．为矢量图形设置填充效果 （1）使用“矩形工具”在画布上绘制一个矩形，如图8-10 （a）所示。 （2）用“箭头工具”选中图形对象，在属性检查器中，选择 “填充类别”为“网页抖动”，并在油漆桶中选择两种不同 颜色，如图8-10(b)所示。 （3）在属性检查器中，选择“填充类别”为“渐变”选项中 “折叠” ，如图8-10(c)所示。 （4）若选择“填充类别”为“图案”选项中的“彩色玻璃”， 如图8-10(d)所示。 （5）若设置“纹理”选项为“丝褶”，且“纹理总量”为 100%，可得到图8-10(e)。 （6）若设置“边缘”选项为“羽化”，且“羽化总量”为 9%，可得到图8-10(f)。 （7）在设置填充类别时，如果需要对填充颜色进行编辑，还 可以打开“填充选项”对图形的填充颜色进一步编辑。
返回本节 录
8.1.1 绘制直线、矩形和椭圆
返回本节 录
8.1.1 绘制直线、矩形和椭圆

（3）调整直线、矩形和椭圆形状的方法 选择工具箱上的“部分选定工具”，然后 单击画布上已绘制的图形，选中图形，在 图形的周围出现节点，将鼠标指向选中图 形的单击右键，从弹出的下拉菜单中选择 “组合”时，拖动图形的节点可任意缩放 图形
返回本节 录
8.1.2 绘制圆角矩形
返回本节 录
8.1.3 绘制多边形
绘制多边形的操作步骤如下： （1）首先在工具箱中选择“多边形工具”，然 后折叠面板组，使得“属性检查器”能够完全 显示，设置相关参数。 （2）在相应“属性检查器”中，“形状”下拉 列表框中有“多边形”和“星形”选项，可以 设置所需要形状。“边数”文本框用于设置多 边形的边数，或星形的角数，取值范围是 0~360。“角度”文本框用于设置星形各顶角 的角度，取值范围是0~100º 。上述选项设置完 成后，在画布上拖曳鼠标即可绘制出等边多边 形或星形

Fireworks制作水晶按钮教程

Fireworks制作水晶按钮教程

Fireworks制作水晶按钮教程
这是Macromedia Fireworks 8官方网站上新版Fireworks功能宣传一个Flash按钮,暂时把这个按钮效果叫Macromedia按钮吧,呵呵。

下面我们使用Fireworks来制作一款这样的按钮，看最终效果。

看图:
好下面我们开始Fireworks制作Macroedia按钮。

首先启动Fireworks,新建一个宽450px,高300px的图形文档.
绘制四个矩形;
p1:利用矩形工具绘制一个宽450px,高300px的矩形为背景图.设置填充为,图像>>叶片.
再利用矩形工具绘制一个宽350px,高50px的矩形.设置为无填充,1像素柔化
再利用矩形工具绘制一个宽350px,高23px的矩形.设置为渐变>>线性填充,如图,两端都为白色,左边透明度为80%,右边透明度为40%,,无边框,矩形圆度为15,不透明度为100%.
再利用矩形工具绘制一个宽350px,高27px的矩形.设置为白色实心填充,无边框,矩形圆度为15,不透明度为30%.
把P3和P4往P2中间移动拼合,得到如图效果:
在加上文字效果阴影和光晕>>投影.就得到了最终效果. OK,大功告成。

Firework所有实例制作步骤(第九讲)

Firework所有实例制作步骤(第九讲)

所有实例制作步骤第一讲、第二讲练习--------------------------------------------------------------------------------------- 制作3D网格线（学习网格和线条、矩形工具的简单应用，部分选择工具的使用；）（1）新建一画布，大小自定，颜色为白色；（2）打开显示网格功能；（选择【视图】|【网格】|【显示网格】或快捷键：Ctrl+Alt+G）（3）选择【编辑】|【首选参数】—选择“辅助线和网格”—将网格的颜色设定为“蓝色”，大小设定位“30*30”；（4）在工具箱中选择“直线”工具，将线条颜色设定为“绿色”，在编辑区中画出“8行8列”的作图范围；（5）锁定“图层1”并新建一个图层2；（6）选择“矩形”工具，将矩形的边线设置为“黑色”，粗细设置为“1”个像素，填充色为“无”，画出一个“8行1列的矩形”；（7）接着用同样的方式，并以第一个矩形的左边线为起点，画出一个“7行2列”的矩形；（8）以此类推同理画出8个矩形，最后一个矩形为“1行8列”；（9）隐藏“图层1”，并设置为网格线不可见；（选择【视图】|【网格】|【显示网格】）或用快捷键：Ctrl+Alt+G）；（10）组合所有矩形（【修改】|【组合】，或用快捷键：Ctrl+G）；（11）使用“部分选定”工具，选中第一个矩形的右上角节点，按键盘上的“Delete”键，将其删除，同理删除其它矩形右上角的节点；网格线效果制作完毕。

（注意：使用“部分”选择工具选中节点时，要保证节点是实心的才表示选中，镂空的表示没选中，就没法操作）制作五子棋黑白棋盘（学习：网格和克隆效果以及组合路径中接合的使用等）（1）新建一文档，大小设定为“240*20”像素，背景色为“白色”；（2）打开“显示网格”和“对齐网格”功能；（选择【视图】|【网格】|选择【显示网格】和【对齐网格】显示网格快捷键：Ctrl+Alt+G）（3）选择【编辑】|【首选参数】—选择“辅助线和网格”—将网格的大小设定位“30*30”；（4）在工具箱中选择“矩形”工具，将填充色设置为“无”，边框色设置为“黑色”，描边种类中设置为“1像素柔化”（选择时，选择“铅笔”—“1像素柔化”）（5）绘制一个“宽为1格、高伟8格”的矩形；（6）选择【编辑】—【克隆】，在工具中选择“缩放”工具，将克隆的矩形长度加大一格；（7）重复此操作，直到网格全部被覆盖；（8）按快捷键：Ctrl+A，选中所有矩形并对其进行克隆；（【编辑】|【克隆】）（9）将克隆的矩形顺时针旋转90度；（【修改】|【变形】|【顺时针旋转90°】）（10）去掉显示的网格；（选择【视图】|【网格】|选择【显示网格】，或按快捷键：Ctrl+Alt+G）（11）按快捷键：Ctrl+A，选中所有矩形，选择【修改】|【组合路径】|【接合】；（12）将内部填充色填充为“黑色”，五子棋黑白棋盘效果制作完毕。

Fireworks基础

刷子工具和铅笔工具都可以直接在画布上画出任意线条在刷子工具的属性对话框中可以对刷子的色彩大小笔触类形边缘柔化值纹理纹理透明度刷子透明度色彩模式等进行设置在该属性框的笔触类形下拉列表里有各式各样的笔触类形可以选择点击笔触选项可以编辑新的笔触
第8章 创建Fireworks文档 章 创建 文档
8.1 Fireworks的工作环境 的工作环境
在样式选项中可使该选取框在“正常” 在样式选项中可使该选取框在“正常”、“固定大 固定比例”这三个样式中切换。 小”和“固定比例”这三个样式中切换。 正常——默认的选择方式，也最为常用。可以用鼠 正常 默认的选择方式，也最为常用。 默认的选择方式 标拉出任意矩形或椭圆形选取区域。 标拉出任意矩形或椭圆形选取区域。 固定比例——可以任意设定矩形或椭圆选区的宽高 可以任意设定矩形或椭圆选区的宽高 固定比例 只需在该选项的下方输入相应的宽高比数值。 比。只需在该选项的下方输入相应的宽高比数值。 固定大小——在这种方式下可以通过输入宽和高的 在这种方式下可以通过输入宽和高的 固定大小 数值来精确确定矩形或椭圆选区的大小。 数值来精确确定矩形或椭圆选区的大小。
选取不规则区域。在工具箱中单击上述工具， 选取不规则区域。在工具箱中单击上述工具，在工作区沿着需 要选取的像素区域拖曳，完成选取操作。 要选取的像素区域拖曳，完成选取操作。 魔术棒工具 素区域。 素区域。 ：用于选取具有相同或者相似颜色的像
1、选区工具 、 “矩形”、“椭圆形”、“套索”、“多 矩形” 椭圆形” 套索” 边形套索” 魔术棒” 边形套索”和“魔术棒”工具都用于约束位图 的编辑范围，所有的位图编辑例如剪切、复制、 的编辑范围，所有的位图编辑例如剪切、复制、 填充等只能在该范围内有效。 填充等只能在该范围内有效。

Fireworks设计制造下拉菜单资料

导航条中下拉菜单的设计
同学们，上节课我们学习了 什么呢？
课程回顾
2018/11/14
切片
就是将一幅大图像分割为一些小图像 切片，然后在网页中通过没有间距和 宽度的表格重新将这些小图像没有缝 隙的拼接起来，成为一幅完整的图像。
2018/11/14
思考：
切片工具和 我们切割蛋 糕有没有一 点点相似呢？
2018/11/14
谢谢您的支持！
下拉菜单
• 随着网站主题内容的急剧增加以及功能的复杂化， 越来越多的网站使用下拉菜单进行导航。
2018/11/14
201ห้องสมุดไป่ตู้/11/14
案例教学 1
黑色（#000000 ） 浅橙色（ # f9c637） 灰色（# 9fa1a0）
课堂总结
• 切片工具 • 编辑弹出菜单
内容 外观
高级
位置

fireworks动画制作的三种方法

fireworks动画制作的三种方法jpg、png、bmp等静态图片用photoshop软件制作十分简单，有时候，而那些貌似flash的动态图片如何制作呢?下面小编给大家整理了关于一些fireworks动画制作的三种方法，希望大家喜欢fireworks动画制作的三种方法：合并已有图片生成动画合并已有图片形成动画，顾名思义就是将一系列图片按顺序排列在不同的帧中从而生成动画，当然，首先我们必须有一串连续的图片，然后，在Fireworks中，选择菜单指令“File/Open Multiple”，这时将弹出“打开”对话框(如图1)，进入所需图片所在的目录，然后按照动画中图片显示的顺序依次选取图片，并单击“Add”按钮将这三张图片加入到对话框下面的窗口;注意：我们还必须勾选对话框最下面的“Open as Animation”(以动画打开)选项，不然的话，我们打开的将是三张分开的静态图片;最后，单击“Done”(完成)按钮。

图1 以动画打开单击窗口右下角状态栏的播放按钮，怎么样?效果还不错吧!现在只是一只海鸥在不停地飞，如果为它再添加一副背景，效果一定会更好，好吧，下面我们就为海鸥添加一副大海的背景。

fireworks动画制作的添加背景的方法有两种：自动复制和共享图层。

1. 自动复制图2 添加帧首先，单击“Frames”面板右上角如图2按钮，选择“Add Frames”，在弹出的对话框中选择“Number”为1和“At the end”，单击“ok”按钮。

图3 编辑模式状态然后将画布的大小改为200x150(Pixels);接下来，打开背景图片，发现图片周围有一个如图3的边框，说明图片处于图像编辑模式，选择“Modify/Exit Image Edit (Ctrl+Shift+D)”，使图片进入对象编辑模式，如果想让图片打开时总为对象编辑模式，我们将“File/Preferences”的“Editing”面板中“Open in Image Edit Mode”复选框前面的对钩去掉即可。

第八章 Fireworks入门


8新增功能 ห้องสมุดไป่ตู้ireworks 8新增功能
工作流程的优化包括简化的重命名功能， 工作流程的优化包括简化的重命名功能，在批 处理过程中进行缩放时检查文件尺寸的功能， 处理过程中进行缩放时检查文件尺寸的功能， 增加了状态栏和日志文件等。 增加了状态栏和日志文件等。 8增强矢量图兼容性 增强矢量图兼容性。 4、 Fireworks 8增强矢量图兼容性。在 Flash和Fireworks之间移动对象时 之间移动对象时， Flash和Fireworks之间移动对象时，会保留矢 填充、笔触、滤镜和混合模式） 量性（填充、笔触、滤镜和混合模式）。 8能识别ActionScript颜色值 能识别ActionScript 5、 Fireworks 8能识别ActionScript颜色值 0xFFCC00） 在将ActionScript ActionScript颜色值从 （0xFFCC00）。在将ActionScript颜色值从 Flash复制并粘贴到Fireworks颜色值字段中 复制并粘贴到Fireworks Flash复制并粘贴到Fireworks颜色值字段中 8可识别该颜色值 可识别该颜色值。 时，Fireworks 8可识别该颜色值。
Fireworks简介 Fireworks简介
8是Macromedia公司推出的Studio8的 公司推出的Studio8 Fireworks 8是Macromedia公司推出的Studio8的 组件之一，是第一个完全为网页制作者设计的软件。 组件之一，是第一个完全为网页制作者设计的软件。 它极大的简化了网络图形设计的工作难度， 它极大的简化了网络图形设计的工作难度，使用 Fireworks可以轻松制作出十分动感的GIF动画 可以轻松制作出十分动感的GIF动画。 Fireworks可以轻松制作出十分动感的GIF动画。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。