DreamweaverCS3，FlashCS3，FireworksCS3网页制作培训教程第8课 初步认识Fireworks CS3.ppt

8.3.1 设置图像环境 操作思路： 新建500×400像素大小的图像文档，导入“2.jpg”图像并进行调整，如图8.16所示。 导入“f1.gif”并拖动调整图像位置和大小。 导入“f2.jpg”和“f3.gif”，调整大小和位置。 缩小图像的显示比例，单击图像外围，再单击【画布大小】按钮，打开【画布大小】对话框，修改画布大小为500×400像素，单击【锚定】栏中的 按钮，固定图像左上侧。 8.3.2 定义面板浮于窗口上的界面 本次练习将定义如下图所示的界面，主要应用浮动面板的可浮动功能对工作环境进行设置。 8.3.2 定义面板浮于窗口上的界面 操作思路： 从【窗口】菜单中选择相应的命令，打开【调色板】、【颜色】和【图像编辑】面板。 将3个面板从浮动面板区拖动到窗口灰色区域。 将3个面板组合到同一个浮动面板组中。 Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程 第8课 初步认识Fireworks CS3 本课要点 具体要求 本课导读 上机练习 本课要点 了解Fireworks的工作环境 设置图像文档环境 具体要求 熟悉浮动面板的使用 掌握画布的设置 本课导读 Fireworks是专门为制作网页设计而开发的软件，它综合了矢量、位图及网页图像编辑功能。本课主要介绍了Fireworks CS3的工作环境及画布的设置等知识。 8.1 了解Fireworks CS3的工作环境 网页设计中，Fireworks主要用于设计图标和界面效果，制作简单的小动画和按钮等。另外，使用Fireworks还可以处理位图和矢量图。 8.1 了解Fireworks CS3的工作环境 8.1.1 知识讲解 8.1.2 典型案例——自定义Fireworks工作界面 8.1.1 知识讲解 本节主要介绍Fireworks的工作界面、设计工具和浮动面板的使用。 8.1.1 知识讲解 1. 认识Fireworks工作界面 2. 设计工具的分工及作用 3. 浮动面板的使用 1. 认识Fireworks工作界面 从【开始】菜单中启动Fireworks后，进入Fireworks启动界面，如下图所示。 1. 认识Fireworks工作界面 单击【新建】栏中的【Fireworks文档（PNG）】超链接，进入Fireworks的工作界面，如下图所示。 2. 设计工具的分工及作用 从工具箱中可以看出，Fireworks工具的分工十分明确，下面来看看工具箱中各工具的功能是如何分配的。 2. 设计工具的分工及作用 【选择】栏：该栏的工具用于选择、变形和裁切编辑窗口中的对象。 【位图】栏：用于创建和编辑位图。 【矢量】栏：该栏集中了对矢量图进行绘制和编辑的工具。 【Web】栏：网页编辑工具，使用该栏工具可以对效果图进行切片和创建热点等操作。 2. 设计工具的分工及作用 【颜色】栏：用于取色、填充颜色，以及设置笔触线和填充颜色，与其他图像软件中的对应工具功能相似。 【视图】栏：以不同的视图模式查看图像效果，也可通过手形指针移动观看，或用放大镜放大显示图像。 3. 浮动面板的使用 浮动面板是可以展开或关闭的参数设置区。要调用浮动面板，可以按各自对应的快捷键，也可以从【窗口】菜单中选择相应的命令打开。 8.1.2 典型案例——自定义Fireworks工作界面 案例目标 本例介绍自定义工作界面，主要介绍浮动面板的相关操作。 8.1.2 典型案例——自定义Fireworks工作界面 操作思路： （1）打开所有面板。 （2）关闭不常用的面板。 （3）保存所做的自定义操作。 操作步骤请老师参照软件讲解 8.1.2 典型案例——自定义Fireworks工作界面 案例小结 本案例自定义了一个工作界面，主要进行了面板的添加、分离和关闭等操作。本例中关闭了【调色板】和【颜色】面板，主要是因为这两个面板的功能可以通过【属性】面板来完成，这样可节约面板空间。 8.2 设置图像文档环境 在编辑或设计图像效果前都需要对图像文档窗口的尺寸、分辨率和显示模式进行设置。下面就来了解一下相关的知识。 8.2 设置图像文档环境 8.2.1 知识讲解 8.2.2 典型案例——设置“主页”文档环境 8.2.1 知识讲解 本节将介绍新建文件、导入文件、修改文档属性以及调整图像显示比例的方法，操作与Dreamweaver等软件创建新文档的操作类似。 8.2.1 知识讲解 1. 新建文件 2. 导入文件 3. 修改文档属性 4. 视图模式及显示比例 1. 新建文件 新建文件的具体操作如下： （1）选择【文件】→【新建