fireworks-CS3入门与提高课件第1章-认识Fireworks-CS3.ppt

1、第1章 认识Fireworks CS3 l本章重点l本章重点介绍了Fireworks CS3的新增功能和Fireworks CS3的工作环境，包括菜单栏、常用工具栏和工具箱，以及如何修改工具栏来方便自己的操作。l学习目的l了解Fireworks CS3的功能和新特性l熟悉Fireworks CS3的工作环境l掌握常用工具栏的作用和工具箱的功能，并学会对工具栏进行编辑1.1 Fireworks CS3的新功能lWorld Wide Web 目前已是人们生活中必不可少的一部分，它需要各种形式的（静态的、动态的和交互的）图形、图表、徽标、符号和图标，以便向人们展现出各种生动的色彩和图像。l在使用Fi

2、reworks之前，大多数设计者需要使用多种不同的工具来完成设计目的，任何一个小的创作都要完成以下操作：l（1）在矢量绘图工具（比如Freehand）中进行布局。l（2）在图片编辑工具（比如Photoshop）中进行进一步处理。l（3）利用诸如Debabelizer一类的优化工具来保证使用的颜色适合于Web使用。1.2 Fireworks CS3的工作环境l启动Fireworks CS3并打开一个图片文件后，其操作界面便会出现在屏幕上，如图所示。Fireworks CS3的操作界面主要由以下几个部分组成：标题栏、菜单栏、常用工具栏、工具箱、文档编辑窗口、修改工具栏及多个面板组成。在本小节中将简

3、单地介绍其中主要的部分，以便读者先对Fireworks CS3有个简单的了解。各部分具体应用将在以后的章节中进行详细介绍。1.2.4 工具箱l使用Fireworks处理图像，必须绘制各种图形和对象，还须插入Web元素、编辑颜色等，这就必须使用到各种工具。在Fireworks CS3中，图像处理工具都放置在工具箱中，图所示的就是Fireworks CS3的工具箱。1.2.5 文档编辑窗口lFireworks CS3界面中间是文档编辑窗口，这是用户使用Fireworks进行创作的主要工作区。图像的创建、编辑、处理和显示都是在该区域中进行的。在文档编辑窗口顶部有4个选项卡，如图所示，用于控制文档编辑

4、窗口的显示模式：l【原始】：显示当前编辑的PNG文档。l【预览】：预览当前编辑的文档。l【2幅】：2窗口比较。l【4幅】：4窗口比较。1.2.6 修改工具栏l修改工具栏提供了一些常见的图形操作命令图群组、对齐、排列以及旋转等。Fireworks CS3的修改工具栏位于主界面的下部，如图所示。l如果在主界面上找不到该工具栏，请选择【窗口】|【工具栏】|【修改】命令打开。 1.2.7 面板l浮动面板都是可停靠浮动面板，它们通常停靠到一个浮动面板框架中，并以选项卡的形式存在，就好像船只停靠在船坞中一样。这种机制能够在有限的桌面空间中放置大量的浮动面板。lFireworks CS3中的许多功能是通过面

5、板实现的。面板可以浮动在工作区上，也可以停靠在面板停靠架上。面板集中了很多功能和选项，在图像编辑过程中经常使用，通过面板可以完成多种设置。l在Fireworks CS3中有10多个面板，每个面板丰富的功能将在后面章节中具体介绍。l1分组和移动面板lFireworks自动把功能相近的面板停靠在同一个面板停靠架上，选择其中一个面板，整个面板停靠架便会一起出现。也可以手动对浮动面板进行停靠和拆分操作。l所谓停靠，就是将一个浮动面板放置到浮动面板框架中，成为一个选项卡的形式；而所谓拆分，则是将该浮动面板从浮动面板框架中分离出来，构成一个单独的浮动面板窗口。l例如要将【外形】面板以选项卡形式从资源组合中

6、拆分出来，具体操作如下：l（1）单击【资源】面板组右上角的【选项】按钮 ，打开选项菜单。l（2）选择【将形状组合至】菜单项中【新建面板组】选项，如图所示。l（3）拖动【形状】面板到要停靠的地方。如图所示。 l与拆分操作相反，如果希望将某个浮动面板停靠到一组浮动面板中，从而形成一个选项卡，则可以拖动该浮动面板的选项卡，然后将之拖动到某个浮动面板框架中。l如将【形状】面板组合到【资源】面板中，具体操作如下：l（1）单击【形状】面板右上角的【选项】按钮 ，打开选项菜单。l（2）选择【将形状组合至】菜单项中的【资源】选项，如图所示。 l还可以根据需要将常用的浮动面板组合到同一框架，如将URL面板和【混

7、色器和样本】面板组合到同一框架，具体操作如下：l（1）单击URL面板右上角的【选项】按钮 ，打开选项菜单。l（2）选择【将URL组合至】菜单项中的【颜色】选项，如图所示。l（3）拖动【混色器和样本和URL】到要停靠的地方，如图所示。l2显示和隐藏面板l一般来说，用户可能喜欢将所有的浮动面板放置到程序窗口的右方，然后在程序窗口的左方及中间区域进行图像编辑。但有时候为了节省桌面空间，也可以将浮动面板进行隐藏，必要时再显示。l可以按照如下方法显示或隐藏浮动面板：l方法一：打开【窗口】菜单，选择要隐藏或显示的浮动面板名称菜单项，即可将相应的浮动面板隐藏或显示。如果该菜单项前面带有选中标记，也即一个勾号

8、符号，则表明该浮动面板被显示，如果该菜单项前没有选中标记，也即没有勾号符号，则表明该浮动面板被隐藏。如图所示。l单击浮动面板右上角的关闭按钮，可以隐藏浮动面板，不过此时若要再次显示浮动面板，仍然必须通过【窗口】菜单来进行。 l方法二：如果希望快速隐藏桌面上所有的浮动面板。可以利用Tab快捷键。按一次Tab快捷键，可以隐藏所有的浮动面板，再按一次Tab快捷键，又可以将原先所有显示的浮动面板重新显示出来。l实际上这种操作也可以通过菜单来完成，打开【窗口】菜单，选择【隐藏面板】命令，即可隐藏所有浮动面板；再次选择该命令，清除其选中状态，即可重新显示原先显示的所有浮动面板。该操作的另一个快捷键是F4。

9、 l3面板的共同特征l尽管各个面板完成不同的工作，不同的面板都有一些共同的界面特征。许多特征（例如滑标和选项列表）对大多数其他图形工具和普通计算机软件的使用者来说都是很熟悉的。但有少数特征（例如拾色器）是在图形软件中使用。观察Fireworks CS3的浮动面板不难发现其共同的界面特征。l选项卡：在组合面板组中，每个浮动面板显示为一个选项卡。l选项菜单：单击面板右上角的选项菜单 可以完成许多操作。l新建、保存和删除按钮：通过这些按钮 可以方便地对面板进行管理。l4Fireworks CS3中的常用面板l优化面板：允许用户指定当前文档的导出设置。用户可以根据需要选择某个图像文件的类型及其特定设置

10、。如JPEG图片的质量，GIF图片的调色板设置等。根据所选文档的类型不同，有效选项也会发生变化。优化面板如图所示。l层面板：Fireworks层面板的概念同Photoshop层面板的概念相同。允许将多个图片和对象当作组来处理。每个对象依次放在不同的层上，可以隐藏层也可以显示层，或者根据需要将层在多帧之间共享。此外，许多Web对象，如热点和切片都存储在层中。层面板所示。l帧面板：在Fireworks中使用动画时要用到帧的概念。通过帧面板可以方便地实现动画，不需编辑JavaScript代码。帧面板如图所示。l历史面板：通过历史面板可以精确控制Fireworks的多级撤销命令。用户可以根据需要在Fi

11、reworks首选参数设置中设置历史面板中保留的撤销步数的最大步数。历史记录面板如图所示。l样式面板：样式是指对应用到对象中的属性，如笔触和特效的收集。Fireworks的样式面板中包含了数十种内置的样式，包括铬印、岩石、冰、反射、玻璃、塑料等，可以瞬间为对象增添专业的外观和美感。用户也可以将花费很大心血的对象的集体属性保存为样式后导出，与其他用户共享。当然，还可以导入其他人编辑好的样式为己用。l库面板：包含了Fireworks库，它可以存储并再次打开元件的收集，同时元件可以在库中进行编辑。通过将元件从库中拖动到文档工作区可以迅速创建Fireworks的一个实例，创建的实例同库中的元件有对应的

12、动态链接，可以通过在库中修改元件实现对所有实例进行同时修改。库面板如图所示。lURL面板：URL称为统一资源定位器，通过URL面板，系统可以自动保存用户编辑过的URL地址。此外还允许用户在URL面板中添加新的地址。用户可以通过URL面板选择所需的地址，避免在Fireworks使用时重复输入相同地址。URL面板如图所示。l颜色混合器面板：允许不同的编辑者根据自己的需要调整或选择颜色模型。颜色混和器面板如图所示，包含混色器和样本两个面板。l形状面板：允许用户选择自己所需要的对象外形。可以方便地实现对象的三维效果处理等操作。如图所示。l信息面板：在创建全局图形时，通过信息面板可以迅速显示对象的大小和

13、位置信息，用户还可以根据需要输入数值精确调整这些设置。此外，信息面板海显示光标所在的坐标位置以及光标所指像素的颜色，并可以实时变化。信息面板如图所示。l行为面板：Fireworks中动作的实现是通过行为面板实现的。使用行为面板可以方便地为图像添加需要的动作组合，并删除不满意的动作。避免了编写JavaScript代码。如图所示。l查找面板：在批量处理时使用该面板可以起到事半功倍的效果，如图所示。l页面板：Fireworks CS3支持多页，即可以在单个文档（PNG 文件）中创建多个页面，并分别设置每个独立页的各种参数，诸如画布大小、颜色、图像分辨率等，甚至可以添加超级链接和热点，并在多个页面之间共享图层。因而可在原型中方便地模拟网站流程，使创建复杂的多页网站原形变得更为方便。页面板如图所示。l路径面板：汇集了路径的各种操作，并以形象的图标表示。方便用户对各种路径操作的学习和使用。路径面板如图所示。