网页设计与Web编程chapter02FireworksCS3入门及制作实例.ppt

第二章第二章 Fireworks CS3入门及制入门及制作实例作实例 内容提要内容提要pFireworks CS3概述概述pFireworks CS3工作界面工作界面pFireworks文档操作文档操作pFireworks基本操作基本操作pFireworks制作实例制作实例Fireworks CS3概述概述pAdobe Fireworks CS3是一款用来设计和制作网页图形是一款用来设计和制作网页图形的应用程序它所含的创新性解决方案解决了图形设计的应用程序它所含的创新性解决方案解决了图形设计人员和网站管理员所面临的主要问题使用人员和网站管理员所面临的主要问题使用Fireworks可以在一个专业化的环境中创建和编辑网页图形、对其可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像进行动画处理、添加高级交互功能以及优化图像pFireworks中的工具种类齐全，使用这些工具，设计者中的工具种类齐全，使用这些工具，设计者可以在单个文件中创建和编辑矢量和位图图形可以在单个文件中创建和编辑矢量和位图图形Fireworks可生成可生成JavaScript脚本，从而使用户可以很轻脚本，从而使用户可以很轻松地创建变换图像。

除此之外，其高效的优化功能可在松地创建变换图像除此之外，其高效的优化功能可在不牺牲品质的前提下缩减网页图形文件的大小不牺牲品质的前提下缩减网页图形文件的大小Fireworks CS3概述概述p图像也是网页中不可缺少的部分，使用图像也是网页中不可缺少的部分，使用Macromedia公司开发公司开发的的Fireworks 可以非常方便地处理网页图像该软件不仅结合了位图可以非常方便地处理网页图像该软件不仅结合了位图以及矢量图形处理的特点，具有处理复杂图像的功能，而且还能以及矢量图形处理的特点，具有处理复杂图像的功能，而且还能为图像创建各种交互式动感效果为图像创建各种交互式动感效果Ø网页中的各种图像：产品图片、背景图片、按钮图片、广告图片Ø各种标志：网站标志、各种小图标Ø网页动画：各种动画LOGO、动画Banner、动画广告Ø网页界面设计：网页首页设计、网站内容页面设计Ø辅助网页制作：导航条、按钮、交换图像、弹出菜单Ø优化网页图像：减小图像文件大小Fireworks的工作界面的工作界面pFireworks 的工作界面，主要由标题栏、的工作界面，主要由标题栏、菜单栏、工具栏、工具箱、绘图区域、属菜单栏、工具栏、工具箱、绘图区域、属性面板和功能面板等组成。

性面板和功能面板等组成Fireworks的工作界面的工作界面标题栏工具栏绘图区域工具箱菜单栏功能面板属性面板1）标题栏）标题栏p标题栏位于标题栏位于Fireworks 窗口的顶部，显示窗口的顶部，显示了当前编辑的文件名称和缩放比率了当前编辑的文件名称和缩放比率2）菜单栏）菜单栏p菜单栏位于标题栏的下方，包括文件、编辑、视图、选择、菜单栏位于标题栏的下方，包括文件、编辑、视图、选择、修改、文本、命令、滤镜、窗口、帮助修改、文本、命令、滤镜、窗口、帮助10组不同功能的指组不同功能的指令菜单单击各主菜单项都会弹出相应的下拉菜单，有些令菜单单击各主菜单项都会弹出相应的下拉菜单，有些下拉菜单还包括了下一级的子菜单下拉菜单还包括了下一级的子菜单3）绘图区域）绘图区域p绘图区域即编辑图像的区域，也被称为画布它就是通过绘图区域即编辑图像的区域，也被称为画布它就是通过使用使用Fireworks的各种工具进行编辑图像的地方的各种工具进行编辑图像的地方p在绘图区域中上方有在绘图区域中上方有 、、 、、 或或 4个按钮，可以在个按钮，可以在原始界面和预览界面之间进行切换，单击原始界面和预览界面之间进行切换，单击 按钮返回原始按钮返回原始界面，单击界面，单击 按钮显示预览界面，单击按钮显示预览界面，单击 按钮显示按钮显示2幅幅图的预览界面，单击图的预览界面，单击 显示显示4幅图的预览界面。

幅图的预览界面绘图区域绘图区域p单击单击 按钮将弹出快速导出的菜单，可以将按钮将弹出快速导出的菜单，可以将Fireworks 中中编辑的图像快速导出为编辑的图像快速导出为Macromedia公司的其他产品公司的其他产品或者或者是是其他图像处理软件其他图像处理软件的格式p在绘画区域的下方是所编辑图像文档的状态栏，分别用于在绘画区域的下方是所编辑图像文档的状态栏，分别用于控制控制Gif动画的播放、退出位图编辑模式、显示图像的尺动画的播放、退出位图编辑模式、显示图像的尺寸和控制图像缩放比例寸和控制图像缩放比例4）快捷工具栏）快捷工具栏p快捷工具栏包含图像编辑中经常使用到的一些辅助工具，快捷工具栏包含图像编辑中经常使用到的一些辅助工具，如新建、打开、保存、导入、导出、打印、撤销、剪切、如新建、打开、保存、导入、导出、打印、撤销、剪切、复制、粘贴等一些功能按钮复制、粘贴等一些功能按钮5）绘图工具栏）绘图工具栏p在绘图工具栏中包含着绘制和编辑图像的各种工具选择在绘图工具栏中包含着绘制和编辑图像的各种工具选择【【窗口窗口】】→【【工具工具】】命令或按命令或按【【Ctrl+F2】】快捷键可以打快捷键可以打开或隐藏工具箱，它主要由选择、位图、矢量、网页、颜开或隐藏工具箱，它主要由选择、位图、矢量、网页、颜色和视图色和视图6个部分构成。

其中各个工具的作用如下个部分构成其中各个工具的作用如下Ø选择工具主要用于选择对象及对选择的对象进行变形操作，每个工具的作用如下绘图工具栏绘图工具栏Ø“指针”工具 ：用于选择或者拖动对象Ø“选择后方对象”工具 ：用于选择被其他对象覆盖的对象Ø“部分选定”工具 ：可以选择对象组中的某个对象，也可以选择矢量图像中的各个控制点Ø“缩放”工具 ：用于缩放对象Ø“倾斜”工具 ：用于旋转和倾斜对象Ø“扭曲”工具 ：用于扭曲和变形对象Ø“裁剪”工具 ：用于对图像进行裁剪Ø“导出区域”工具 ：用于将选中的部分导出位图工具位图工具Ø位图工具主要用于绘制位图和对位图进行处理l“选取框”工具 ：用于创建矩形选区l“椭圆选取框”工具 ：用于创建椭圆或圆形选区l“套索”工具 ：通过拖动鼠标的方式建立任意形状的选区l“多边形套索”工具 ：用于创建多边形选区l“魔术棒”工具 ：将颜色相近的区域创建为选区l“刷子”工具 ：用于创建具有填充效果的粗线条位图工具位图工具l“铅笔”工具 ：通过拖动鼠标的方式创建任意形状的线条。

l“橡皮擦”工具 ：用于擦除不需要的区域或者对象l“模糊”工具 ：用于使编辑的区域或者图像具有模糊的效果l“锐化”工具 ：用于使编辑的区域或者图像具有锐化的效果l“减淡”工具 ：用于使编辑的区域或者图像颜色减淡位图工具位图工具l“加深”工具 ：用于使编辑的区域或者图像颜色加深l“涂抹”工具 ：用于在图像中沿拖动的方向推移图像l“橡皮图章”工具 ：用于把图像的一个区域复制或克隆到另一个区域中l“替换颜色”工具 ：用一种颜色替换另外的一种颜色l“红眼消除”工具 ：用于除去照片中出现的红眼位图工具位图工具l“滴管”工具 ：用于吸取鼠标所在位置的颜色l“油漆桶”工具 ：利用已设置的颜色填充所选择的区域l“渐变”工具 ：利用设置的渐变颜色填充所选中的区域矢量工具矢量工具Ø矢量工具主要用于绘制矢量图形和对矢量图形进行处理l“直线”工具 ：在画布中绘画出直线l“钢笔”工具 ：用于绘制直线路径l“矢量路径”工具 ：用于绘制各种形状的矢量路径l“重绘路径”工具 ：重新绘制路径l矩形、椭圆和多边形工具：下拉菜单中的选项分别用于绘制相应形状矢量图形。

矢量工具矢量工具l“文本”工具 ：用于在图像中插入并编辑文本l“自由变形”工具 ：可以直接对矢量对象执行弯曲和变形操作l“更改区域形状”工具 ：主要用于拉伸变形区域指针外圆内的所有选定路径的区域l“路径洗刷”工具 ：用于更改路径的外观使用不断变化的压力或速度，可以更改路径的笔触属性l“刀子”工具 ：能够将一个路径分割成两个或多个路径Web工具工具ØWeb工具主要用于创建热点切片，每个工具的作用如下l“矩形热点”工具 ：可以在图像的目标区域周围绘制矩形热点l“圆形热点”工具 ：可以在图像的目标区域周围绘制圆形热点l“多边形热点”工具 ：可以在图像的目标区域周围绘制多边形热点l“切片”工具 ：实现图像的矩形切片切割Web工具工具l“多边形切片”工具 ：可以实现图像的多边形形状的切片切割l“隐藏切片和热点”工具 ：实现切片热点视图的隐藏l“显示切片和热点”工具 ：实现切片热点视图的显示颜色工具颜色工具Ø颜色工具主要用于设置填充颜色和描边颜色l“笔触颜色” ：用于设置描边的颜色l“填充颜色” ：用于设置填充的颜色。

l“设置默认笔触/填充色” ：将笔触颜色和填充颜色设置为默认值，即笔触颜色为黑色，填充颜色为白色l“没有描边或填充” ：设置没有描边或填充l“交换笔触/填充色” ：将笔触颜色和填充颜色进行交换视图工具视图工具Ø视图工具主要用于转换屏幕的显示模式l“标准屏幕模式” ：将屏幕切换到“标准屏幕模式”显示模式l“带有菜单的全屏模式” ：可以用来将屏幕切换到“带有菜单的全屏模式”显示模式l“全屏模式” ：将屏幕切换到“全屏模式”显示模式l“手形”工具 ：用于移动画布查看图像l“缩放”工具 ：放大或缩小画布的显示比例6））“属性属性”面板面板p“属性属性”面板位于绘画区域的下方，用来设置绘图区域中面板位于绘画区域的下方，用来设置绘图区域中正在编辑的内容的属性可以选择正在编辑的内容的属性可以选择【【窗口窗口】】→【【属性属性】】命命令或按令或按【【Ctrl+F3】】快捷键打开或关闭快捷键打开或关闭“属性属性”面板，根面板，根据当前选择工具和对象的不同，据当前选择工具和对象的不同，“属性属性”面板中所显示的面板中所显示的选项也会不同。

选项也会不同7）控制面板）控制面板p在在Fireworks 中有多个控制面板，一般位中有多个控制面板，一般位于工作界面的右侧于工作界面的右侧p在默认情况下有些面板没有显示，可以选在默认情况下有些面板没有显示，可以选择择“窗口窗口”菜单中相应的命令显示或者隐菜单中相应的命令显示或者隐藏这些面板藏这些面板 Fireworks文档操作文档操作 pFireworks文档的基本操作包括文档的新文档的基本操作包括文档的新建、保存、打开和导入的操作建、保存、打开和导入的操作1）新建文档）新建文档p在在Fireworks中新建文档的方法有以下几中新建文档的方法有以下几种：种：Ø在开始页中单击“新建”栏中“Fireworks文档”链接Ø选择【文件】→【新建】命令或按【Ctrl+N】快捷键Ø单击快捷工具栏中的“新建”按钮 新建文档新建文档p执行新建文档操作后将打开执行新建文档操作后将打开 “新建文档新建文档”对话框，其各项含义如下对话框，其各项含义如下Ø宽度：在文本框中输入画布宽度的数字，并选择相应的单位，包括“像素”、“英寸”和“厘米”三个选项Ø高度：在文本框中输入画布高度的数字，并选择相应的单位，包括“像素”、“英寸”和“厘米”三个选项。

Ø分辨率：在文本框中输入画布分辨率的数字分辨率越高，则文件就越大，单位包括“像素\英寸”和“像素\厘米”两个选项“新建文档新建文档”对话框对话框2）保存文档）保存文档p在在Fireworks中保存文档有以下两种方法完成：中保存文档有以下两种方法完成：Ø选择【文件】→【保存】命令或按【Ctrl+S】快捷键Ø单击快捷工具栏中的“保存”按钮 p如果文档是第一次保存或选择如果文档是第一次保存或选择【【文件文件】】→【【另存为另存为】】命命令，则会打开令，则会打开 “另存为另存为”对话框在对话框中可以选择对话框在对话框中可以选择保存文档的位置和输入文件的名称，设置完成后单击保存文档的位置和输入文件的名称，设置完成后单击 按钮进行保存按钮进行保存3）打开文档）打开文档p在在Fireworks中打开文档有以下两种方法：中打开文档有以下两种方法：Ø单击快捷工具栏中的“打开”按钮 、选择【文件】→【打开】命令或按【Ctrl+O】快捷键，在打开的“打开”对话框选择要打开的文档，再单击 按钮打开Ø双击Fireworks图标的文档即可打开该文档4）文件的导入）文件的导入p在在Fireworks中可以导入一幅图像到当前的文档中，有以中可以导入一幅图像到当前的文档中，有以下几种方法可以导入文档：下几种方法可以导入文档：Ø执行【文件】→【导入】命令或按【Ctrl+R】快捷键。

Ø单击快捷工具栏中的“导入”按钮 p执行导入操作后，在打开的执行导入操作后，在打开的“导入导入”对话框中选择需要导对话框中选择需要导入的图像文件，然后单击入的图像文件，然后单击“打开打开”按钮即可按钮即可示例：新建一个示例：新建一个Fireworks文档文档p本示例将新建一个本示例将新建一个Fireworks文档，并在文档中导入一幅图像，然文档，并在文档中导入一幅图像，然后保存文档，主要练习新建文档、导入图像和保存文档等操作后保存文档，主要练习新建文档、导入图像和保存文档等操作p制作思路：制作思路：Ø1）启动Fireworks CS3Ø2）新建文档Ø3）导入“鲨鱼.psd”图像Ø4）保存“鲨鱼.png”文档Fireworks基本操作基本操作 p设置文档的属性就是在对图像的编辑过程中，对绘图文档设置文档的属性就是在对图像的编辑过程中，对绘图文档的大小、颜色以及分辨率等进行调整或者修改的大小、颜色以及分辨率等进行调整或者修改p图像的基本概念包括像素、分辨率、颜色深度和图像的基本概念包括像素、分辨率、颜色深度和Alpha通通道等概念道等概念像素和分辨率像素和分辨率p像素是组成位图的最基本单元。

可以把像素看成是一个极像素是组成位图的最基本单元可以把像素看成是一个极小的方形的颜色块，每个小方块为一个像素小的方形的颜色块，每个小方块为一个像素p图像的图像的分辨率分辨率是指图像在单位尺寸上所包含的像素数量是指图像在单位尺寸上所包含的像素数量图像的图像的分辨率分辨率与图像的与图像的精细度精细度和和图像文件的大小图像文件的大小有关颜色深度和颜色深度和Alpha通道通道p颜色深度是指图像中可以显示出的颜色数，在计算机中，颜色深度是指图像中可以显示出的颜色数，在计算机中，通常采用颜色深度这一概念来说明其处理色彩的能力通常采用颜色深度这一概念来说明其处理色彩的能力pAlpha通道使用不同灰度值表示透明度的大小，通道使用不同灰度值表示透明度的大小，Alpha通通道的作用主要用于合成不同的图像，实现混合叠加道的作用主要用于合成不同的图像，实现混合叠加画布操作画布操作 p在在Fireworks中，修改画布的大小是通过在中，修改画布的大小是通过在“画布大小画布大小”对话框中来完成的可以通过选择对话框中来完成的可以通过选择【【修改修改】】→【【画布画布】】→【【画布大小画布大小】】命令，或者在文档的命令，或者在文档的“属性属性”面板中单击面板中单击 按钮打开按钮打开“画布大小画布大小”对话框。

对话框改变画布的背景颜色改变画布的背景颜色p改变画布的背景颜色是通过在改变画布的背景颜色是通过在“画布颜色画布颜色”对话框中对话框中完成的选择完成的选择【【修改修改】】→【【画布画布】】→【【画布颜色画布颜色】】命命令，打开令，打开“画布颜色画布颜色”对话框更改图像大小更改图像大小 p与改变画布大小不同，调整图像的大小将与改变画布大小不同，调整图像的大小将同时改变画布和画布中对象的大小选择同时改变画布和画布中对象的大小选择“修改修改”|“画布画布”|“图像大小图像大小”菜单命菜单命令，打开令，打开“图像大小图像大小”对话框，在对话框，在“像素像素尺寸尺寸”文本框中输入新的水平和垂直尺寸文本框中输入新的水平和垂直尺寸 旋转画布旋转画布p可以选择可以选择【【修改修改】】→【【画布画布】】菜单下的命令对画布进行旋转菜单下的命令对画布进行旋转p菜单中各项命令的含义如下菜单中各项命令的含义如下Ø旋转180°：执行此命令，画布将旋转180°Ø旋转90°顺时针：执行此命令，画布将顺时针旋转90°Ø旋转90°逆时针：执行此命令，画布将逆时针旋转90°修剪画布修剪画布p通过通过Fireworks中的修剪画布命令，可以使画布的大小同绘中的修剪画布命令，可以使画布的大小同绘制图像或者文字的大小相匹配，从而减少文件量。

制图像或者文字的大小相匹配，从而减少文件量p选择选择【【修改修改】】→【【画布画布】】→【【修剪画布修剪画布】】命令或按命令或按【【Ctrl+Alt+T】】快捷键，修剪画布快捷键，修剪画布示例示例——练习图像的基本操作练习图像的基本操作p制作思路：制作思路：Ø新建一个500×400像素的Fireworks文档Ø导入“海浪.psd”、“鱼1.psd”、“鱼2.psd”、“鱼3.psd”和“鱼4.psd” 共五幅图像Ø重新设置画布大小Ø旋转画布Ø修剪画布使用标尺、辅助线和网格使用标尺、辅助线和网格 p使用标尺和辅助线可以尽可能精确地对对使用标尺和辅助线可以尽可能精确地对对象进行布局以及执行各种绘制操作用户象进行布局以及执行各种绘制操作用户可以将辅助线放在文档中并使对象与这些可以将辅助线放在文档中并使对象与这些辅助线对齐，或者启用辅助线对齐，或者启用Fireworks网格并网格并使对象与网格对齐使对象与网格对齐p通过选择通过选择“视图视图”|“标尺标尺”菜单命令可菜单命令可以显示和隐藏标尺如果打开标尺，垂直以显示和隐藏标尺如果打开标尺，垂直和水平标尺会出现在文档窗口的边缘和水平标尺会出现在文档窗口的边缘。

使用标尺、辅助线和网格使用标尺、辅助线和网格p辅助线是从标尺拖到文档画布上的线条它们可作为帮辅助线是从标尺拖到文档画布上的线条它们可作为帮助放置和对齐对象的辅助绘制工具，也可以使用辅助线助放置和对齐对象的辅助绘制工具，也可以使用辅助线来标记文档的重要部分，如边距、文档中心点和要在其来标记文档的重要部分，如边距、文档中心点和要在其中精确地进行工作的区域中精确地进行工作的区域p创建水平或垂直辅助线的方法是：在水平或垂直标尺上创建水平或垂直辅助线的方法是：在水平或垂直标尺上按下鼠标左键进行拖动，在画布上定位辅助线并释放鼠按下鼠标左键进行拖动，在画布上定位辅助线并释放鼠标按钮注意：可以通过反复拖动辅助线来重新确定其标按钮注意：可以通过反复拖动辅助线来重新确定其位置使用标尺、辅助线和网格使用标尺、辅助线和网格p网格在画布上显示一个由横线和竖线构成的体系，网格网格在画布上显示一个由横线和竖线构成的体系，网格对于精确放置对象非常有用此外，用户可以查看和编对于精确放置对象非常有用此外，用户可以查看和编辑网格、调整网格大小以及更改网格的颜色辑网格、调整网格大小以及更改网格的颜色p注意：网格既不驻留在层上，也不随文档一起导出。

它注意：网格既不驻留在层上，也不随文档一起导出它只是一种设计工具只是一种设计工具p网格的主要设置方法如下网格的主要设置方法如下Ø显示和隐藏网格：选择“视图”|“网格”|“显示网格”菜单项 Ø使对象与网格对齐：选择“视图”|“网格”|“对齐网格” 设置首选参数和快捷键设置首选参数和快捷键 p设置首选参数的方法如下：设置首选参数的方法如下：Ø（1）选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框Ø（2）选择要修改的首选参数组：“常规”、“编辑”、“启动并编辑”、“文件夹”或“导入” Ø（3）更改参数后单击“确定”完成 设置首选参数和快捷键设置首选参数和快捷键p“文件夹文件夹”参数为用户提供了对来自外部参数为用户提供了对来自外部源的其它源的其它Photoshop插件、纹理文件和图插件、纹理文件和图案文件的访问案文件的访问 设置首选参数和快捷键设置首选参数和快捷键p下图所示效果是利用下图所示效果是利用Photoshop插件插件EyeCandy 4.0 中的火焰效果制作的特殊文中的火焰效果制作的特殊文字注意本示例中采用的插件和字体（方字注意本示例中采用的插件和字体（方正活意简体）均可从网上下载。

正活意简体）均可从网上下载操作的撤消与重复操作的撤消与重复 p使用使用“历史记录历史记录”面板可以查看、修改和面板可以查看、修改和重复操作文档过程中所进行的动作在该重复操作文档过程中所进行的动作在该面板中列出了最近在面板中列出了最近在Fireworks中执行的中执行的操作及次序，所列动作个数最多不超过在操作及次序，所列动作个数最多不超过在 Fireworks“首选参数首选参数”对话框的对话框的“撤消步撤消步骤骤”域中指定的数值域中指定的数值 修剪文档修剪文档p操作方法如下：操作方法如下：p（（1）从）从“工具工具”面板中选择面板中选择“裁切裁切”工具，或者选择工具，或者选择“编辑编辑”>“裁剪所选位图裁剪所选位图”菜单p（（2）在画布上拖动鼠标并调整修剪手柄，直到边框包围要）在画布上拖动鼠标并调整修剪手柄，直到边框包围要保留的文档区域为止保留的文档区域为止 p（（3）在边框中双击或者按下）在边框中双击或者按下Enter键以修剪文档键以修剪文档 Fireworks制作实例制作实例 p我们将通过实例介绍如何利用我们将通过实例介绍如何利用Fireworks CS3制作网页图片，通过它们进一步学习制作网页图片，通过它们进一步学习Fireworks CS3工具和面板的灵活使用。

工具和面板的灵活使用 个性化图标个性化图标 p（（1）启动）启动Fireworks cs3，创建宽度为，创建宽度为300像素，高度为像素，高度为200像素，像素，颜色为白色，分辨率为颜色为白色，分辨率为72像素像素/英寸的画布英寸的画布p（（2）选择工具栏中的）选择工具栏中的“椭圆椭圆”工具，在工具，在“属性属性”面板中设置填充面板中设置填充类别为类别为“放射状放射状”，单击填充颜色旁边的下拉按钮，打开，单击填充颜色旁边的下拉按钮，打开“编辑填编辑填充充”对话框，分别选择放射状起始点颜色为对话框，分别选择放射状起始点颜色为#FFFF33，终止点的颜，终止点的颜色为色为#FF3300p（（3）按住）按住Shift键拖动鼠标在画布画一个圆，然后拖动圆键拖动鼠标在画布画一个圆，然后拖动圆“放射状放射状”手柄的二个控制点，颜色深的一方在上（方形手柄点），颜色浅手柄的二个控制点，颜色深的一方在上（方形手柄点），颜色浅的一方在下（圆形手柄点），使之正好平分圆的一方在下（圆形手柄点），使之正好平分圆 个性化图标个性化图标p（（4）选择）选择“椭圆椭圆”工具再绘制一个小椭圆，在工具再绘制一个小椭圆，在“属性属性”面板中设置填充面板中设置填充类别为类别为“线性线性”，在，在“编辑填充编辑填充”对话框中选择颜色均为白色，设置其中对话框中选择颜色均为白色，设置其中一个不透明样本的透明度为一个不透明样本的透明度为0。

p（（5）接下来再调整）接下来再调整“线性线性”手柄的位置，使透明的一边在下方，白色部手柄的位置，使透明的一边在下方，白色部分在上方，这样就能体现出球体的高光，让球体呈现立体感分在上方，这样就能体现出球体的高光，让球体呈现立体感p（（6）将刚才画出的小椭圆复制一份，并放置在大圆内部下方区域在）将刚才画出的小椭圆复制一份，并放置在大圆内部下方区域在“属性属性”面板中设置其填充类别为面板中设置其填充类别为“放射状放射状”，图层的不透明度为，图层的不透明度为80%用户可根据需要调整户可根据需要调整“放射状放射状”手柄p（（7）利用）利用“对齐对齐”面板将两个椭圆对齐面板将两个椭圆对齐p（（8）在）在“层层”面板中选中大圆，单击面板中选中大圆，单击“属性属性”面板中的面板中的“添加效果添加效果”按按钮，选择钮，选择“阴影和光晕阴影和光晕”|“内侧发光内侧发光”，设置颜色为，设置颜色为#FF3300、宽度为、宽度为2、不透明度为、不透明度为80%、柔化为、柔化为8、偏移为、偏移为0p（（9）选取工具箱中的）选取工具箱中的“文本文本”工具，在工具，在“属性属性”面板中选择字体和文字面板中选择字体和文字大小，然后输入自己的英文名，如大小，然后输入自己的英文名，如“David”。

个性化图标个性化图标p（（10）单击）单击“属性属性”面板中的面板中的“添加效果添加效果”按钮，选择按钮，选择“阴影和光阴影和光晕晕”|“投影投影”，设置距离为，设置距离为3、不透明度为、不透明度为65%、柔化为、柔化为4、其他、其他参数采用默认值参数采用默认值p（（11）在画布中再绘制一个椭圆，作为球体的阴影，在）在画布中再绘制一个椭圆，作为球体的阴影，在“属性属性”面面板中设置填充颜色为板中设置填充颜色为#66666、填充类别为实心、边缘羽化为、填充类别为实心、边缘羽化为13，图，图层的不透明度为层的不透明度为70%p（（12）将椭圆拖到球体下方，右击打开快捷菜单，选择）将椭圆拖到球体下方，右击打开快捷菜单，选择“排列排列”|“下移一层下移一层”命令将它叠放到球体后面，效果如图命令将它叠放到球体后面，效果如图2-29所示 p（（13）选择工具箱中的）选择工具箱中的“椭圆椭圆”工具，按住工具，按住Shift键再画一个圆形图键再画一个圆形图案，在案，在“属性属性”面板中设置填充类别为无，边框颜色为无，其他参面板中设置填充类别为无，边框颜色为无，其他参数采用默认值数采用默认值p（（14）选择工具箱中的）选择工具箱中的“文本文本”工具，输入自己的工具，输入自己的Email地址地址“wufox@”，在，在“属性属性”面板中设置文字大小为面板中设置文字大小为16、颜色、颜色为为#3399FF，其他参数采用默认值。

其他参数采用默认值p（（15）将前面完成的球体部分放在圆形的中间将前面完成的球体部分放在圆形的中间 个性化图标个性化图标p（（16）同时选中文本和圆形，然后选择）同时选中文本和圆形，然后选择“文本文本”|“附加到路径附加到路径”命令，将文字对命令，将文字对象附加到路径上，此时可以用象附加到路径上，此时可以用“倾斜倾斜”工工具旋转文字，使之恰好放在图标底部具旋转文字，使之恰好放在图标底部p（（17）将制作完成的水晶球个性化图标保）将制作完成的水晶球个性化图标保存到文件中存到文件中网页按钮网页按钮 p按钮是网页中的重要元素，以下通过实例讲解如何利用按钮是网页中的重要元素，以下通过实例讲解如何利用Fireworks 制作按钮制作按钮p（（1）创建）创建300×200像素新文档，绘制一个矩形，修改属性检查器面像素新文档，绘制一个矩形，修改属性检查器面板中的矩形圆度值为板中的矩形圆度值为100，将矩形四角转换成圆角样式将矩形四角转换成圆角样式p（（2）将矩形宽度设为）将矩形宽度设为150，高度设为，高度设为48，并用颜色，并用颜色#FF6600填充p（（3）为此圆角矩形增加效果，单击属性检查器中增加效果按钮，）为此圆角矩形增加效果，单击属性检查器中增加效果按钮，弹出效果快捷菜单，然后选择弹出效果快捷菜单，然后选择“斜角和浮雕斜角和浮雕”|“内斜角内斜角”命令，命令，设置斜角边缘形状为平坦，宽度为设置斜角边缘形状为平坦，宽度为7像素，其它参数采用默认值，像素，其它参数采用默认值，效果如下图所示。

效果如下图所示网页按钮网页按钮p（（4）在）在Fireworks中有相当成熟的色彩层次调整工具中有相当成熟的色彩层次调整工具用户可以执行用户可以执行“滤镜滤镜”|“调整色彩调整色彩”菜单中的各项命菜单中的各项命令对图形的色彩进行全方位调整令对图形的色彩进行全方位调整p（（5）选择）选择“滤镜滤镜”|“调整色彩调整色彩”|“曲线曲线”菜单命令，菜单命令，打开曲线对话框修改图像的光影层次效果打开曲线对话框修改图像的光影层次效果p（（6）选择）选择“滤镜滤镜”|“色彩调整色彩调整”|“色相色相/饱和度饱和度”菜菜单命令，为按钮上色单命令，为按钮上色p（（7）在制作好的按钮造型上，使用文本工具输入文字）在制作好的按钮造型上，使用文本工具输入文字“HOME”，调整字体类型和大小，也可调整圆角矩形大，调整字体类型和大小，也可调整圆角矩形大小，并使二者居中对齐小，并使二者居中对齐p（（8）使用滴管工具吸取按钮中间色调，并为字体填充）使用滴管工具吸取按钮中间色调，并为字体填充该色选择效果菜单中的该色选择效果菜单中的“斜角和浮雕斜角和浮雕”|“内斜角内斜角”命令，为字体添加凹陷的立体化效果命令，为字体添加凹陷的立体化效果。

网页按钮网页按钮p（（9）在属性面板上调整字体的透明度为）在属性面板上调整字体的透明度为85，使文本的，使文本的凹陷效果显得更加自然逼真凹陷效果显得更加自然逼真p（（10）为按钮添加投影，设置距离为）为按钮添加投影，设置距离为7像素，不透明度像素，不透明度为为32%，其他参数采用默认值完成的按钮如下图所示其他参数采用默认值完成的按钮如下图所示p（（11）将制作完成的网页按钮图形保存到文件中将制作完成的网页按钮图形保存到文件中 弹出式菜单弹出式菜单 p当用户将鼠标移动到某些网页对象上时，浏览器中将显示弹出菜单用户当用户将鼠标移动到某些网页对象上时，浏览器中将显示弹出菜单用户可以将可以将URL链接附加到弹出菜单项以便于导航例如，可以使用弹出菜单链接附加到弹出菜单项以便于导航例如，可以使用弹出菜单来组织与导航栏中的某个按钮相关的若干个导航选项，也可以根据需要在来组织与导航栏中的某个按钮相关的若干个导航选项，也可以根据需要在弹出菜单中创建任意多级子菜单弹出菜单中创建任意多级子菜单p（（1）利用绘图工具栏中的钢笔工具绘制菜单背景样式，设置填充色为）利用绘图工具栏中的钢笔工具绘制菜单背景样式，设置填充色为#FFFF66，没有边框线，并输入文字，没有边框线，并输入文字“小雨的个人网站小雨的个人网站”，并将字体设置，并将字体设置为为“华文行楷华文行楷” 。

p（（2）绘制一个）绘制一个88×25的矩形，设置填充色为的矩形，设置填充色为#FFCC33，边框线颜色为，边框线颜色为#FFFF66选择效果快捷菜单中的选择效果快捷菜单中的“斜角和浮雕斜角和浮雕”|“凹入浮雕凹入浮雕”命令为命令为矩形添加立体效果，设置宽度为矩形添加立体效果，设置宽度为2像素，其他参数采用默认值像素，其他参数采用默认值p（（3）按住）按住Alt键移动立体矩形，将其复制键移动立体矩形，将其复制4个，为制作按钮做准备个，为制作按钮做准备弹出式菜单弹出式菜单p（（4）将制作好的零部件水平排列整齐，在每一个立体）将制作好的零部件水平排列整齐，在每一个立体矩形上输入相应文字，并为文字设置矩形上输入相应文字，并为文字设置“凸起浮雕凸起浮雕”效果，效果，形成静态按钮，也就做好了网页的水平菜单条形成静态按钮，也就做好了网页的水平菜单条p（（5）单击）单击Web工具箱中的工具箱中的“矩形热点矩形热点”工具，为其中工具，为其中一个按钮绘制热区一个按钮绘制热区p（（6）选择）选择“修改修改”|“弹出菜单弹出菜单”|“添加弹出菜单添加弹出菜单”命令，为指定的按钮设置下拉菜单命令，为指定的按钮设置下拉菜单。

弹出式菜单弹出式菜单p（（7）在打开的）在打开的“弹出菜单编辑器弹出菜单编辑器”对话框中，包含对话框中，包含4个个选项卡在选项卡在“内容内容”选项卡的选项卡的“文本文本”栏输入弹出菜单栏输入弹出菜单内容，内容，“链接链接”栏中输入此菜单项超级链接的栏中输入此菜单项超级链接的URL对象，对象，“目标目标”栏中可选择浏览器打开链接的方式如果要创栏中可选择浏览器打开链接的方式如果要创建子菜单项，只需点击建子菜单项，只需点击“缩进菜单缩进菜单”按钮即可按钮即可p（（8））创建了基本菜单和可选子菜单之后，即可在创建了基本菜单和可选子菜单之后，即可在“弹弹出菜单编辑器出菜单编辑器”的的“外观外观”选项卡上，对文本进行格式选项卡上，对文本进行格式设置，对设置，对“滑过状态滑过状态”和和“弹起状态弹起状态”应用图形样式，应用图形样式，并选择垂直或水平方向并选择垂直或水平方向p（（9））“高级高级”选项卡提供了用于控制以下各项的附加选项卡提供了用于控制以下各项的附加设置：单元格大小、边距和间距，文字缩进，菜单消失设置：单元格大小、边距和间距，文字缩进，菜单消失延时，以及边框宽度、颜色、阴影和高亮等延时，以及边框宽度、颜色、阴影和高亮等。

弹出式菜单弹出式菜单p（（10）在）在“位置位置”选项卡中设置弹出菜单和子菜单的位选项卡中设置弹出菜单和子菜单的位置当当“网页层网页层”可见时，用户还可以通过在工作区中可见时，用户还可以通过在工作区中拖动弹出菜单的轮廓来调整其位置拖动弹出菜单的轮廓来调整其位置p（（11）回到设计页面中，可以发现在热区下方出现弹出）回到设计页面中，可以发现在热区下方出现弹出菜单的外轮廓样式，并与热区以线相连，但看不到弹出菜单的外轮廓样式，并与热区以线相连，但看不到弹出菜单的实际面貌，如下图所示此时可拖动弹出菜单轮菜单的实际面貌，如下图所示此时可拖动弹出菜单轮廓，调整其位置廓，调整其位置 弹出式菜单弹出式菜单p（（12）选择）选择“文件文件”|“在浏览器中预览在浏览器中预览”|“在在iexplore.exe中预览中预览”菜单命令，菜单命令，或按下或按下F12键，切换到浏览器中查看制作键，切换到浏览器中查看制作效果p（（13）在浏览器中将鼠标指针指向按钮，）在浏览器中将鼠标指针指向按钮，就会出现相应的弹出菜单就会出现相应的弹出菜单 网页动画网页动画 绘制图形绘制图形 p邮票效果邮票效果 思考题思考题 p1．．“优化优化”面板的主要功能是什么？面板的主要功能是什么？p2．矢量图形和位图图形的区别有哪些？．矢量图形和位图图形的区别有哪些？p3．如何将一个编辑好的．如何将一个编辑好的PNG文档导出为网页需要的文档导出为网页需要的256色色GIF图片？图片？p4．画布菜单中的．画布菜单中的“修剪画布修剪画布”和和“符合画布符合画布”有何不同？有何不同？p5．．Fireworks CS3中默认可撤消的操作步骤为多少次？中默认可撤消的操作步骤为多少次？p6．．Fireworks对图像重新取样时会不会造成图像品质的变化？为什么对图像重新取样时会不会造成图像品质的变化？为什么？？p7．滤镜菜单中的斜角方式有哪几种？浮雕方式有哪几种？．滤镜菜单中的斜角方式有哪几种？浮雕方式有哪几种？p8．．“部分选取部分选取”工具有什么特别作用？工具有什么特别作用？p9．制作弹出式菜单的主要步骤是什么？．制作弹出式菜单的主要步骤是什么？p10．利用．利用Fireworks制作动画时，如何调整每个帧的播放时间？制作动画时，如何调整每个帧的播放时间？ The End。