CS,Fireworks CS网页制作培训教程电子教案设计第课.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. 新建文件 新建文件的