《Fireworks CS4网页图像设计与案例教程》配套PPT【教师用】第11章 制作综合网页效果图
合集下载
Fireworks网页图像设计教程
Fireworks网页图像设计教程第一章：Fireworks软件简介Fireworks是一款专业的网页图像设计软件，由Adobe公司开发。
它的特点是易学易用，能够快速创建、编辑和优化各种网页元素，并提供了丰富的工具和功能来提高设计效率。
本章将对Fireworks软件进行详细介绍。
1.1 Fireworks软件的特点Fireworks软件具有以下几个特点：1) 矢量图形编辑功能：能够创建和编辑矢量图形，保证图像的清晰度和可伸缩性。
2) 位图图像编辑功能：可以对位图图像进行调整、优化和修饰，使其适应网页设计的要求。
3) 视觉效果的应用：提供了各种效果和滤镜，能够为图像添加阴影、渐变、透明等视觉效果。
4) 交互设计功能：支持网页的交互设计，包括按钮、导航菜单等元素的创建和动画效果的应用。
5) 切片与导出：可以对设计好的页面进行切片，方便导出为HTML、CSS等格式，方便网页制作。
1.2 Fireworks软件的界面与工具Fireworks软件的界面包含菜单栏、工具栏、面板区以及画布等区域。
在工具栏中，包含了常见的绘图工具、修饰工具、编辑工具等。
面板区包含了图层、属性、颜色、样式等面板，便于用户对图像进行编辑和管理。
第二章：Fireworks图像设计的基础知识在进行Fireworks图像设计之前，有一些基础知识是需要了解和掌握的。
2.1 色彩模式与调整Fireworks支持RGB、CMYK、灰度等色彩模式，并提供了色彩调整工具，如色相/饱和度调整、曲线调整等，能够对图像的色彩进行精确调整。
2.2 图层管理图层是Fireworks中非常重要的概念，可以将不同的元素放置在不同的图层上进行管理。
图层的叠加次序决定了元素的显示顺序，而透明度设置则可以调整元素的透明程度。
2.3 对象的创建和编辑Fireworks提供了丰富的对象创建和编辑工具，如矩形、椭圆、多边形等。
通过编辑工具，可以对对象进行形状、大小、角度、位置等方面的调整。
fireworks教案课件第1章认识FireworksCS4
1.2.4 工具箱
选取工具组 变换工具组
选取框工具组 魔术棒工具 铅笔工具 模糊工具组
直线工具 矩形工具组 自由路径工具组 热区工具组 隐藏热区和切片
吸管工具 绘图颜色 填充颜色 采用默认绘图/填充颜色
手动工具
部分选定工具 切割工具组
套索工具组 刷子工具 橡皮擦工具 橡皮章工具
在文档编辑窗口右上角有一个“文件管理”按钮，用于轻松地访问文 件传输命令。
在文档编辑窗口底部还有一个控制条 。
1.2.6 修改工具栏
修改工具栏提供了一些常见的图形操作命令——图群组、对齐、排列以 及旋转等。Fireworks CS4的修改工具栏位于常用工具栏的右侧 。如图 所示。
1.2.7 面板
命令。 “重作”：重复最近一次撤消的操作。对应于“编辑”|“重作”命
令。 “剪切”：复制选定的对象到剪切板中并删除原来的对象。对应
“编辑”|“剪切”命令。 “复制”：复制选定的对象到剪切板中。对应于“编辑”|“复制”
命令。 “粘贴”：将剪切板中的对象粘贴到舞台。对应于“编辑”|“粘贴”
命令。
Web使用。 Fireworks CS4不仅继承了以往Fireworks的强大功能，并增添了许多
新的特性： 改进的性能和稳定性： 全新用户界面： 基于CSS的布局： Adobe PDF导出：
动态样式和改进的样式面板： Adobe文字引擎： 工作区改进： 可自定义、重用的资产： Adobe Kuler集成： Adobe AIR 创作： Adobe ConnectNow 集成：
令。 “打开”：打开一个已存在的图像文件。对应“文件”|“打开”命
令。 “导入”：导入一幅图像，对应于“文件”|“导入”命令。 “导出”：导出一幅图像，对应于“文件”|“导出”命令。 “打印”：将编辑的图像文件输出到打印设备。对应“文件”|“打
第7章使用Fireworks CS4制作图像PPT课件
设置笔触颜色。
使 用 设 置 填 充 颜 色 ，
使用“滴管”工具 可使用滴管在编辑窗口中选取颜色。
பைடு நூலகம்
使用笔触
在绘制路径的“属性”面板中，可以设置笔触的颜色、 描边种类。
1．选择描边种类 2．在路径上放置笔触 3．为笔触增加纹理
填充
Fireworks的填充可以将路径变为实际应用中的各 种图形效果。
1．填充对象
2．使用形状
编辑位图
位图又称点阵图，其图形是由屏幕上许多细微的 小点组成，基于位图的图形程序实际上就是把图形中 的像素点作为处理的对象，所以图形的分辨率取决于 像素点的多少，增加分辨率可以使图形显得更加细腻。 但分辨率越高，计算机需要记录的像素越多，存储图 形的文件就越大。位图最显著的优点是它能够真实地 模拟现实生活中的色彩，缺点是放大后会失真。
使用矢量工具
矢量又叫向量，是一种面向对象的基于数学方法 的绘图方式，用矢量方法绘制出来的图形叫做矢量图 形。矢量图形的显示质量与屏幕分辨率无关，当缩放 时，图形不会失真。 Fireworks CS4提供了许多绘制 和编辑矢量图的工具，可以很方便地创建各种矢量图 形。
绘制矢量对象
绘制矢量图形时，需要先在工具箱中选择要绘制的图形种类， 然后在画布中通过拖动鼠标进行绘制。矢量图形的线条或边框线 一般称为“路径”。
Macromedia Fireworks CS4的工作界面与 Dreamweaver CS4的工作环境相似，都采用了非常人 性化的设计界面，用户可以根据实际需要进行设置。
网页图像的格式
在计算机图形学中，根据成像原理和绘制方法的不同，可以 将图像分为两大类：基于数学公式描述的矢量图形和基于像素的 位图图像。
1．选择对象 2．移动和删除对象 3．复制对【实象例7.3】绘4制．如排图7列.32对所象示的抽象效果 5．对齐对象 6．组合对象
Fireworks全套课件
1. 操作系统为 Windows 98 SE/Me/NT 4 (Service Pack 6) /2000/Xp； 2. 300 MHz Intel Pentium∥以上的处理器 3. 64 MB可用内存(建议使用128 MB)外加80 MB可用磁盘空间，硬盘可
用空间至少60 MB 4. 只读光驱CD-ROM 5. 800× 600像素分辨率，256色或更高的显示模式 6. Adobe Type Manager 4或更高版本，以便处理Type1字体。
《网页设计与制作》
——《Fireworks》
主要内容
• Fireworks简介 • 用Fireworks切割图形 • 用Firework制作有动态效果的切图 • 用Fireworks制作动画 • 用Fireworks的绘图工具的使用 • 文字工具及文字特效
一、Fireworks简介
Fireworks是一个创建、编辑和优化网页图形的多功能应用程序，可以创 建和编辑位图及矢量图形，设计网页效果、如变换图像和弹出菜单、修剪 和优化图像，以压缩其大小 特点： 活效果：在对象的效果改变后，仍然保存着路径的可编辑性 自动应用纹理和填充效果 完整的文本控制组件
一、合并图像形成动画 文件—打开，在打开图片对话框中，勾选“以动画打开”
第四节、用Fireworks制作动画
二、使用元件生成动画 • 创建一个动画元件：编辑—插入—新建元件，类型选择为“动画” • 编辑元件，在元件中插入文字或图片，完成后，使用“属性检查器输入动
画元件的设置，如角度、方向、缩放等 • 查看“帧”面板，通过调整“帧延时”来设置速度 • 将文档优化为GIF动画：窗口—优化，设置参数即可 • 也可以到处为SWF文件
谢谢同学们！
第四节、用Fireworks制作动画
用空间至少60 MB 4. 只读光驱CD-ROM 5. 800× 600像素分辨率，256色或更高的显示模式 6. Adobe Type Manager 4或更高版本，以便处理Type1字体。
《网页设计与制作》
——《Fireworks》
主要内容
• Fireworks简介 • 用Fireworks切割图形 • 用Firework制作有动态效果的切图 • 用Fireworks制作动画 • 用Fireworks的绘图工具的使用 • 文字工具及文字特效
一、Fireworks简介
Fireworks是一个创建、编辑和优化网页图形的多功能应用程序，可以创 建和编辑位图及矢量图形，设计网页效果、如变换图像和弹出菜单、修剪 和优化图像，以压缩其大小 特点： 活效果：在对象的效果改变后，仍然保存着路径的可编辑性 自动应用纹理和填充效果 完整的文本控制组件
一、合并图像形成动画 文件—打开，在打开图片对话框中，勾选“以动画打开”
第四节、用Fireworks制作动画
二、使用元件生成动画 • 创建一个动画元件：编辑—插入—新建元件，类型选择为“动画” • 编辑元件，在元件中插入文字或图片，完成后，使用“属性检查器输入动
画元件的设置，如角度、方向、缩放等 • 查看“帧”面板，通过调整“帧延时”来设置速度 • 将文档优化为GIF动画：窗口—优化，设置参数即可 • 也可以到处为SWF文件
谢谢同学们！
第四节、用Fireworks制作动画
《Fireworks CS4网页图像设计与案例教程》配套【教师用】第3章 绘制矢量路径PPT课件
注意联合和接合的区别
23
路径的交集
若要创建一个包围所有选定闭合 路径共有的区域的闭合路径
得到的新路径具有位于最下面的 对象的笔触和填充属性。
24
路径的打孔
使用选中的最前面的路径轮廓将 其后面被选中的所有对象穿一个 孔
25
提问与回答
用思想传递正能量
26
添加
添加
添加 标题
标题
标题
添加
标题
第三章 绘制矢量路径
➢ 位图和矢量图 ➢ 位图由象素构成，“马赛克”现象 ➢ 矢量图由点和路径（曲线或直线）构成
1
整体概况
+ 概况1
您的内容打在这里，或者通过复制您的文本后。
概况2
+ 您的内容打在这里，或者通过复制您的文本后。
概况3
+ 您的内容打在这里，或者通过复制您的文本后。 2
绘制基本图形
➢ “矢量”工具面板 ➢ 绘制直线：按住鼠标左键；shift键的作
用
3
绘制基本图形
➢ 矩形 ➢ 正方形 ➢ 圆角矩形 ➢ 椭圆 ➢ 正பைடு நூலகம் ➢ 多边形 ➢ 星形
4
绘制扩展图形
➢ L 形：直边角形状。 ➢ 圆角矩形：带有圆角的矩形。 ➢ 度量工具：以像素或英寸为单位来表示
关键设计元素尺寸的普通箭线。 ➢ 斜切矩形：带有切角的矩形。 ➢ 斜面矩形：带有倒角的矩形（边角在矩
形内部成圆形）。 ➢ 星形：具有3到25个点的星形。
5
绘制扩展图形
➢ 智能多边形：有 3 到 25 条边的正多边形。 ➢ 箭头:任意比例的普通箭头，以及直线或弯曲
线。 ➢ 箭头线：可以使用细直的箭头线快速得到常
用箭头（只需单击该线的任一端即可）。 ➢ 螺旋形：开口式螺旋形。 ➢ 连接线形：三段连接线形，例如那些用来连
23
路径的交集
若要创建一个包围所有选定闭合 路径共有的区域的闭合路径
得到的新路径具有位于最下面的 对象的笔触和填充属性。
24
路径的打孔
使用选中的最前面的路径轮廓将 其后面被选中的所有对象穿一个 孔
25
提问与回答
用思想传递正能量
26
添加
添加
添加 标题
标题
标题
添加
标题
第三章 绘制矢量路径
➢ 位图和矢量图 ➢ 位图由象素构成，“马赛克”现象 ➢ 矢量图由点和路径（曲线或直线）构成
1
整体概况
+ 概况1
您的内容打在这里，或者通过复制您的文本后。
概况2
+ 您的内容打在这里，或者通过复制您的文本后。
概况3
+ 您的内容打在这里，或者通过复制您的文本后。 2
绘制基本图形
➢ “矢量”工具面板 ➢ 绘制直线：按住鼠标左键；shift键的作
用
3
绘制基本图形
➢ 矩形 ➢ 正方形 ➢ 圆角矩形 ➢ 椭圆 ➢ 正பைடு நூலகம் ➢ 多边形 ➢ 星形
4
绘制扩展图形
➢ L 形：直边角形状。 ➢ 圆角矩形：带有圆角的矩形。 ➢ 度量工具：以像素或英寸为单位来表示
关键设计元素尺寸的普通箭线。 ➢ 斜切矩形：带有切角的矩形。 ➢ 斜面矩形：带有倒角的矩形（边角在矩
形内部成圆形）。 ➢ 星形：具有3到25个点的星形。
5
绘制扩展图形
➢ 智能多边形：有 3 到 25 条边的正多边形。 ➢ 箭头:任意比例的普通箭头，以及直线或弯曲
线。 ➢ 箭头线：可以使用细直的箭头线快速得到常
用箭头（只需单击该线的任一端即可）。 ➢ 螺旋形：开口式螺旋形。 ➢ 连接线形：三段连接线形，例如那些用来连
《Fireworks CS4网页图像设计与案例教程》配套【教师用】第1章 Fireworks CS4概述和基本操作PPT课件
3
网页图像处理与传统平面设计的区别？
❖网页图像要求：简洁、明快、 信息量小（适合网络传输）
❖传统平面设计软件：专注于 图像质量，没有考虑网络要求， 与网页设计集成度低。
4
Fireworks 产品家族
❖Macromedia 家族三剑客： ❖Dreamweaver ❖Flash ❖Fireworks
预备知识
❖具备一定的计算机技能，能够比较熟练 地操作计算机。
❖有一定的网络基础知识，了解互联网应 用。
❖对网页设计软件有初步的了解。 ❖Photoshop
1
第一部分
整体概述
THE FIRST PART OF THE OVERALL OVERVIEW, PLEASE SUMMARIZE THE CONTENT
❖修改/画布/画布大小 ❖属性面板/画布大小
24
改变画布颜色
❖修改/画布/画布颜色 ❖属性面板/画布颜色指示器
25
调整图像大小
❖修改/画布/图像大小 ❖属性面板/图像大小
26
旋转画布
❖旋转180 ❖顺时针90 ❖逆时针90
27
修整画布
❖符合画布：将画布调整为恰好容 纳所有对象
❖裁剪画布：裁剪超出画布边界的 对象
❖自动形状面板 ❖样式面板 ❖文档库面板：图形、按钮、动画
元件库 ❖URL面板：简化多次输入同样的超
链接地址
13
浮动面板
❖混色器面板和样本面板：类同与 颜色工具组
❖信息面板 ❖行为面板：热点、切片对鼠标的
响应 ❖查找面板：查找和替换元素 ❖对齐面板
14
浮动面板
❖自动形状属性面板 ❖调色板面板 ❖图像编辑面板 ❖路径面板 ❖特殊字符面板 ❖元件属性面板
网页图像处理与传统平面设计的区别？
❖网页图像要求：简洁、明快、 信息量小（适合网络传输）
❖传统平面设计软件：专注于 图像质量，没有考虑网络要求， 与网页设计集成度低。
4
Fireworks 产品家族
❖Macromedia 家族三剑客： ❖Dreamweaver ❖Flash ❖Fireworks
预备知识
❖具备一定的计算机技能，能够比较熟练 地操作计算机。
❖有一定的网络基础知识，了解互联网应 用。
❖对网页设计软件有初步的了解。 ❖Photoshop
1
第一部分
整体概述
THE FIRST PART OF THE OVERALL OVERVIEW, PLEASE SUMMARIZE THE CONTENT
❖修改/画布/画布大小 ❖属性面板/画布大小
24
改变画布颜色
❖修改/画布/画布颜色 ❖属性面板/画布颜色指示器
25
调整图像大小
❖修改/画布/图像大小 ❖属性面板/图像大小
26
旋转画布
❖旋转180 ❖顺时针90 ❖逆时针90
27
修整画布
❖符合画布：将画布调整为恰好容 纳所有对象
❖裁剪画布：裁剪超出画布边界的 对象
❖自动形状面板 ❖样式面板 ❖文档库面板：图形、按钮、动画
元件库 ❖URL面板：简化多次输入同样的超
链接地址
13
浮动面板
❖混色器面板和样本面板：类同与 颜色工具组
❖信息面板 ❖行为面板：热点、切片对鼠标的
响应 ❖查找面板：查找和替换元素 ❖对齐面板
14
浮动面板
❖自动形状属性面板 ❖调色板面板 ❖图像编辑面板 ❖路径面板 ❖特殊字符面板 ❖元件属性面板
Fireworks 全套教学课件
FireWorks
北京工商大学 计算机与信息工程学院
毛典辉 maodianhui@
一、Fireworks的工作环境
启动Fireworks Fireworks的人机交互界面
Fireworks的启动
FireWorks的工作环境
Fireworks的工作模式
矢量绘图模式 位图编辑模式
算，选区会扩大； 按住Alt键再选取则两个区域作差运算，
选区会缩小； 同时按住Shift和Alt再选取则两个区域
作乘积运算；
选区的反转
执行[反选]命令
选区边缘范围的调整
扩展或收缩选区 对选区扩边 对选区平滑处理 扩大选取与选取
相似
扩展或收缩选区
对选区扩边
对选区平滑处理
扩大选取与选取相似
一、设置绘图颜色
颜色是创作的重要组成部分，使用绘图工 具进行创作时必须选择一种颜色；
颜色包含前景色和背景色两种； 颜色的设置通过调色板或拾色器来完成。
前景色和背景色
前景色是指当前绘画工具所使用的颜色； 背景色是指图像的底色。
1、使用“拾色器”
是最基本的颜色设置工具； 可以直接在颜色区取色（单击前景色按钮，
五、位图图片的处理
导入位图图片 使用选区工具 位图图片的效果处理 使用图层 使用蒙板
六、创建图片动画
图片动画的概念 帧的种类及其作用 元件和实例 动画的创建
七、网页图片的输出
关于Web图片的切片 图片格式的选择与优化 图片的输出
设计举例
设计一个北京工商大学的宣传图片
2、学习内容
创建选区的工具介绍 选区的编辑 柔化选区边缘
3、创建选区的工具
[选框]工具
[矩形]选框工具； [椭圆]选框工具；
北京工商大学 计算机与信息工程学院
毛典辉 maodianhui@
一、Fireworks的工作环境
启动Fireworks Fireworks的人机交互界面
Fireworks的启动
FireWorks的工作环境
Fireworks的工作模式
矢量绘图模式 位图编辑模式
算，选区会扩大； 按住Alt键再选取则两个区域作差运算，
选区会缩小； 同时按住Shift和Alt再选取则两个区域
作乘积运算；
选区的反转
执行[反选]命令
选区边缘范围的调整
扩展或收缩选区 对选区扩边 对选区平滑处理 扩大选取与选取
相似
扩展或收缩选区
对选区扩边
对选区平滑处理
扩大选取与选取相似
一、设置绘图颜色
颜色是创作的重要组成部分，使用绘图工 具进行创作时必须选择一种颜色；
颜色包含前景色和背景色两种； 颜色的设置通过调色板或拾色器来完成。
前景色和背景色
前景色是指当前绘画工具所使用的颜色； 背景色是指图像的底色。
1、使用“拾色器”
是最基本的颜色设置工具； 可以直接在颜色区取色（单击前景色按钮，
五、位图图片的处理
导入位图图片 使用选区工具 位图图片的效果处理 使用图层 使用蒙板
六、创建图片动画
图片动画的概念 帧的种类及其作用 元件和实例 动画的创建
七、网页图片的输出
关于Web图片的切片 图片格式的选择与优化 图片的输出
设计举例
设计一个北京工商大学的宣传图片
2、学习内容
创建选区的工具介绍 选区的编辑 柔化选区边缘
3、创建选区的工具
[选框]工具
[矩形]选框工具； [椭圆]选框工具；
fireworks教案课件第2章FlashCS4基础
从图中可以看出该工具栏提供了16个最常用的命令，它可以固定横放 在菜单栏的下面，也可以垂直固定在左右边框上，还可以浮动在屏幕 上。
2.1.4 绘图工具箱
使用Flash CS4进行动画创作，必须绘制各种图形和对象，这就必须 使用到各种绘图工具。绘图工具箱中包含了10多种绘图工具，用户可 以使用这些工具对图像或选定区进行操作。单击工作区右侧的工具箱 缩略图标，即可展开工具箱面板，如图所示。
2.2.2 工具栏、工具面板的设置
通过“窗口”菜单及其子菜单下的各项命令，可以方便地显示工具栏和工具 面板。工具面板有很多种，同时显示出来的话会使工作界面凌乱不堪，可以 根据实际工作需要选择其中几种，或修改面板的显示方式。单击Flash CS4面 板右上角的 按钮可以将面板缩为标题栏半透明的精美图标。单击 按钮 即可展开面板。
2.1.5 时间轴
Flash CS4的时间轴窗口默认情况下位于工作区的下方，它是处理帧 和层的地方，而帧和层则是动画的主要组成部分。当选择某一层，然 后在舞台上绘制内容或者将内容导入到舞台中时，该内容将成为这个 层的一部分，因为它是当前所选的内容。时间线上的帧可根据时间改 变内容。舞台中所出现的每一帧的内容表示该时间点上出现在各层上 的所有内容的反映。可以移动、添加、改变和删除不同帧的各层上的 内容以创建运动和动画。在时间线上使用多层层叠技术可将不同内容 放置在不同层，从而创建一种有层次感的动画效果。
时间轴窗口分为两大部分：图层面板和时间轴控制区。
2.1.6 动画舞台
舞台是一个矩形区域，相当于实际表演中的舞台。可以在其中绘制和 放置电影内容。任何时间看到的舞台中显示当前帧的内容。
舞台的默认颜色为白色，可用作电影的背景。在最终电影中的任何区 域都可看见该背景，可以将位图导入Flash，然后将它放置在舞台的 最底层，这样它可覆盖舞台，成为一个背景。
2.1.4 绘图工具箱
使用Flash CS4进行动画创作，必须绘制各种图形和对象，这就必须 使用到各种绘图工具。绘图工具箱中包含了10多种绘图工具，用户可 以使用这些工具对图像或选定区进行操作。单击工作区右侧的工具箱 缩略图标，即可展开工具箱面板，如图所示。
2.2.2 工具栏、工具面板的设置
通过“窗口”菜单及其子菜单下的各项命令，可以方便地显示工具栏和工具 面板。工具面板有很多种，同时显示出来的话会使工作界面凌乱不堪，可以 根据实际工作需要选择其中几种，或修改面板的显示方式。单击Flash CS4面 板右上角的 按钮可以将面板缩为标题栏半透明的精美图标。单击 按钮 即可展开面板。
2.1.5 时间轴
Flash CS4的时间轴窗口默认情况下位于工作区的下方，它是处理帧 和层的地方，而帧和层则是动画的主要组成部分。当选择某一层，然 后在舞台上绘制内容或者将内容导入到舞台中时，该内容将成为这个 层的一部分，因为它是当前所选的内容。时间线上的帧可根据时间改 变内容。舞台中所出现的每一帧的内容表示该时间点上出现在各层上 的所有内容的反映。可以移动、添加、改变和删除不同帧的各层上的 内容以创建运动和动画。在时间线上使用多层层叠技术可将不同内容 放置在不同层，从而创建一种有层次感的动画效果。
时间轴窗口分为两大部分：图层面板和时间轴控制区。
2.1.6 动画舞台
舞台是一个矩形区域，相当于实际表演中的舞台。可以在其中绘制和 放置电影内容。任何时间看到的舞台中显示当前帧的内容。
舞台的默认颜色为白色，可用作电影的背景。在最终电影中的任何区 域都可看见该背景，可以将位图导入Flash，然后将它放置在舞台的 最底层，这样它可覆盖舞台，成为一个背景。
Fireworks课件
单击“视图” 单击“视图”→“网格” →“编辑网格”菜单命令，可调 网格” 编辑网格” 出“编辑 网格”对话框，如图1 网格”对话框，如图1-8所示。利用该对话框可以设置网格 的 颜色、间距、是否对齐网格等属性。 （3）辅助线：在显示标尺后，用鼠标从标尺处向画布内拖 拽，即可在文档窗口中显示辅助线。如图1 所示单击“ 拽，即可在文档窗口中显示辅助线。如图1-8所示单击“视 图” →“辅助线” →“显示辅助线”菜单命令，即可隐藏辅助线。 辅助线” 显示辅助线” 在 单击该菜单命令，可再显示辅助线。 单击“视图” 单击“视图” →“辅助线” →“编辑辅助线”菜单命令， 辅助线” 编辑辅助线” 会调出 “辅助线”对话框，如图所示，利用该对话框可设置辅助线 辅助线” 的 颜色、是否锁定、是否对齐辅助线等属性。
Fireworks 第一章页面介绍
1.1Fireworks 的工作环境 启动Fireworks 后的工作环境如图1 启动Fireworks 后的工作环境如图1-1所示。 Fireworks的工作环境由标题栏、菜单栏、 Fireworks的工作环境由标题栏、菜单栏、 “主要”工具栏、工具箱、文档窗口、属性栏、 主要” 其他面板、修改工具栏、文档窗口的状态和隐 藏面板按扭等组成。
1-5 Fireworks文档的基本操作 Fireworks文档的基本操作 1.打开与导入文档 1.打开与导入文档 （1）打开文档：单击“文件”→“打开”菜单命令，调出 ）打开文档：单击“文件” 打开” “打开” 打开” 对话框，如图1 对话框，如图1-9所示。
利用该对话框可以打开Fireworks的PNG格式和其他格式的 利用该对话框可以打开Fireworks的PNG格式和其他格式的 文件。如果希望打开的文件的以“未命名” 文件。如果希望打开的文件的以“未命名”形式显示，可选 取 “打开”为“未命名”形式复选框。若想以“动画打开”进 打开” 未命名”形式复选框。若想以“动画打开” 行显示 ，可以选取“以动画打开” ，可以选取“以动画打开”复选框。 （2）导入文档：在编辑文档时，可以导入其他文档。单击 “文件”→“导入”菜单命令，调出“导入”对话框。 文件” 导入”菜单命令，调出“导入” 2.保存和导出文档。 2.保存和导出文档。 （1）保存文档：单击“文件” →“保存”或文件→另存 ）保存文档：单击“文件” 保存”或文件→ 为菜单 命令可将编辑好的图象保存为PNG格式文件。 命令可将编辑好的图象保存为PNG格式文件。 （2）优化文档：在导出文档前要对文档进行优化处理，可 以单击“窗口” 以单击“窗口” →“优化”菜单命令，打开“优化”面 优化”菜单命令，打开“优化” 板可设置 文档格式、调色板类型、设置类型等参数。
《Fireworks应用》课件
工具栏
提供常用工具的快速访问，如选择工具、画 笔工具等。
工作区
显示和编辑图像的区域。
创建和编辑图像
01
02
03
创建新图像
通过选择“文件”>“新 建”命令，可以创建一个 新的空白图像。
导入图像
通过选择“文件”>“导 入”命令，可以将其他图 像或图片导入到当前工作 区。
编辑图像
使用各种工具和命令对图 像进行编辑，如裁剪、调 整亮度/对比度、应用滤镜 等。
件时。这得益于Fireworks的优化和专为网页设计的功能。
与Illustrator的比较
设计目的
Fireworks和Illustrator都是矢量图形设计工具，但 Fireworks更专注于网页设计和原型设计，而Illustrator则 更适合印刷品设计和图形设计。
操作方式
Fireworks的操作方式更直观，容易上手。而Illustrator的 操作方式则更为专业，需要更多的学习和实践。
详细描述
Fireworks支持多种移动设备尺寸和分辨率，提供了丰富的移动界面设计工具和 资源，如矢量图形、图标、按钮等。通过实例展示，可以深入了解Fireworks在 移动应用界面设计方面的应用和技巧，提高设计师的设计水平和效率。
游戏界面设计实例
总结词
游戏界面设计实例展示了Fireworks在游戏界面设计方面的应 用，包括游戏图标、菜单、界面布局等方面的设计技巧。
Fireworks的未来展望
更加高效的设计工具
Fireworks将不断优化性能，提高设计和制作效率，满足用户快速 迭代和高效工作的需求。
更加丰富的素材和模板
Fireworks将提供更加丰富和多样的素材和模板，降低用户寻找和 制作素材的时间成本。
《Fireworks CS4案例教程》读书笔记模板
目录分析
第2章创建位图
第1章Fireworks CS4基础
第3章创建矢量对 象
1
第4章创建文本
2
第5章使用颜色、 笔触和填充
3
第6章应用动态 滤镜效果
4
第7章创建动画
5
第8章使用样式、 元件和URL
1
第9章层和蒙版
2
第10章创建交 互
3 第11章创建按
钮、导航栏和 弹出菜单
4
第12章优化和 导出
实训2：荡秋千
实训1：宝石花
实训3：对视
实训4：飞机和降落 伞
实训5：蝴蝶
实训6：黑与白 实训7：钟表
1
实训8：棋盘
2
实训9：手机
3
实训10：足球
4
实训11：I E 图标
5
实训12：螺旋 文字
1
实训13：五彩 按钮
2
实训14：导航 栏
3
实训15：淡入 淡出
4
实训16：碰撞 小球
5
实训17：彩灯
任务一：创建新文档 任务二：导入外部图像 任务三：对图片进行简单处理 任务四：在图片上添加文本“摩纳哥海湾” 任务五：保存“水印效果.png”文档 任务六：方法之一，添加“投影”动态滤镜效果 任务七：方法之二，使用“层”面板获得路径选区 任务八：方法之三，使用创建蒙版的方法
任务一：创建新文档 任务二：创建地球旋转动画 任务三：浏览地球旋转动画 任务四：创建“卫星轨迹” 任务五：创建“卫星”元件 任务六：创建“卫星”在各状态中的位置 任务七：浏览“卫星.png”制作效果 任务八：导出动画文件
任务一：创建新文档 任务二：绘制状态1中的笑脸 任务三：绘制状态2中的笑脸 任务四：绘制状态3中的笑脸 任务五：绘制状态4中的笑脸 任务六：绘制其他状态中的笑脸 任务七：设置状态延迟 任务八：浏览“笑脸.png”制作效果 任务九：导出动画文件
fireworks4网页制作培训课件
具、任意形状工具） 5、路径的修改与切割（区域变形工具、切割工
具） 6、简化、扩张及附加路径
– 修改→改变路径（简化路径、扩张路径、插入路径）
三、颜色操作处理
1、网页可靠色 2、混色器 3、调色板（样本）的使用 4、滴管（探色棒）工具的使用 5、笔触面板 6、填充面板
– 1、主要填充参数的作用 – 2、修改渐变色 – 3、调整渐变色与图案填充 – 4、使用外部图像文件作为填充图案或纹理 – 5、使用WEB抖动色
2、文字与路径
默认情况下，文本都是以矩形文本块形式显示，但是，用户可绘制 一条路径，然后将文本附加到该路径上，使文本按路径形状进行排
列。不过，此是路径将失去了它的所有属性，变成一条不可编辑的 路径，在预览时也不显示。
– (1)文本附加到路径：首先创建一个文本对象和一个路径对象， 然后都选中，用“文本→附加到路径”命令.
– (5)重命名图层
双击要命名的图层→在名称区输入新的名称
– (6) 图层中对象的编辑（两种编辑模式）
多层编辑模式（默认状态）
– 所有图层中的对象都处于可编辑状态
单层编辑模式：选择选项菜单中的“编辑单一图层”
– 只能对单个层的对象进行编辑
七、动画设计制作
– (7)图层属性的设置(显示和隐藏、锁定和解锁） – (8)为图层建立位图对象 – (9)设置共享层与合并图层
选区和新选区的交集。
选区的扩展与收缩：用修改→选取框→扩大或收缩 平滑选区：用修改→选取框→平滑 制作边界选区：用修改→选取框→边框 反选选区：用修改→选取框→反选 选择与已有选区颜色相近的颜色：用修改→选取框→选择相似颜色
– 取消选择：Ctrl+D
六、编辑位图对象
3、在位图模式下编辑（剪切、复制、粘贴、吸管工具、油漆桶工具、
具） 6、简化、扩张及附加路径
– 修改→改变路径（简化路径、扩张路径、插入路径）
三、颜色操作处理
1、网页可靠色 2、混色器 3、调色板（样本）的使用 4、滴管（探色棒）工具的使用 5、笔触面板 6、填充面板
– 1、主要填充参数的作用 – 2、修改渐变色 – 3、调整渐变色与图案填充 – 4、使用外部图像文件作为填充图案或纹理 – 5、使用WEB抖动色
2、文字与路径
默认情况下，文本都是以矩形文本块形式显示，但是，用户可绘制 一条路径，然后将文本附加到该路径上，使文本按路径形状进行排
列。不过，此是路径将失去了它的所有属性，变成一条不可编辑的 路径，在预览时也不显示。
– (1)文本附加到路径：首先创建一个文本对象和一个路径对象， 然后都选中，用“文本→附加到路径”命令.
– (5)重命名图层
双击要命名的图层→在名称区输入新的名称
– (6) 图层中对象的编辑（两种编辑模式）
多层编辑模式（默认状态）
– 所有图层中的对象都处于可编辑状态
单层编辑模式：选择选项菜单中的“编辑单一图层”
– 只能对单个层的对象进行编辑
七、动画设计制作
– (7)图层属性的设置(显示和隐藏、锁定和解锁） – (8)为图层建立位图对象 – (9)设置共享层与合并图层
选区和新选区的交集。
选区的扩展与收缩：用修改→选取框→扩大或收缩 平滑选区：用修改→选取框→平滑 制作边界选区：用修改→选取框→边框 反选选区：用修改→选取框→反选 选择与已有选区颜色相近的颜色：用修改→选取框→选择相似颜色
– 取消选择：Ctrl+D
六、编辑位图对象
3、在位图模式下编辑（剪切、复制、粘贴、吸管工具、油漆桶工具、
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
打后小，由简入繁 页面：PNG文件可以包含多个页面 页面→ 状态→ 层 的分级关系
编辑页面
新建页面 复制页面 删除页面 编辑页面画布：设置每个页面的单独 属性。
使用主页
这里的“主页”与我们经常听到的主 页的区别：可以在其它页面中共享的 元素放置在其中，有点类似于背景层 的概念。 设置为主页/重制主页 链接到主页：在主页创建前已有的页 面将继承主页的元素，以后随主页自 动更新。
制作综合网页效果图实例
创建页面 创建公用元素 在多个页面间共享公用元素 向各个页面添加独特的元素 使用链接模拟用户导航 导出交互式网页
首页的基本框架
制作网页
绘制网站编制LOGO 制作导航和弹出菜单 制作用户登录和导航 制作主要内容 制作页脚 拼装网页整体 导出网页
编辑页面
新建页面 复制页面 删除页面 编辑页面画布：设置每个页面的单独 属性。
使用主页
这里的“主页”与我们经常听到的主 页的区别：可以在其它页面中共享的 元素放置在其中，有点类似于背景层 的概念。 设置为主页/重制主页 链接到主页：在主页创建前已有的页 面将继承主页的元素，以后随主页自 动更新。
制作综合网页效果图实例
创建页面 创建公用元素 在多个页面间共享公用元素 向各个页面添加独特的元素 使用链接模拟用户导航 导出交互式网页
首页的基本框架
制作网页
绘制网站编制LOGO 制作导航和弹出菜单 制作用户登录和导航 制作主要内容 制作页脚 拼装网页整体 导出网页