《网页设计与网站建设实验 教学课件 ppt 作者 周苏 黄志宏 王文 张泳 等第5章 使用Fireworks》由会员分享，可在线阅读，更多相关《网页设计与网站建设实验 教学课件 ppt 作者 周苏 黄志宏 王文 张泳 等第5章 使用Fireworks（40页珍藏版）》请在金锄头文库上搜索。
1、网页制作工具,周 苏 教授 Z QQ: 81505050,第5章 使用Fireworks,Fireworks简介 绘图工具面板介绍 基本操作 层与蒙版 滤镜和特效 切片、交互效果和热点 按钮、导航栏和弹出菜单 制作GIF动画 Fireworks与Dreamweaver的协同工作,第5章 使用Fireworks,Macromedia Fireworks MX 2004是用来设计和制作专业化网页图形的终极解决方案。它是一个可以很方便地帮助网页设计人员和开发人员解决图形图像制作问题的工具。使用Fireworks，可以在一个专业化的环境中创建和编辑网页图形、处理动画、添加高级交互功能以及优化图像。在F
2、ireworks中，可以在单个应用程序中创建及编辑位图和矢量图两种图形，一切都可以随时进行编辑。除此之外，在Fireworks中工作流可以实现自动化，从而满足耗费时间的更新和更改要求。 Fireworks可以与多种产品集成在一起，包括Macromedia的其他产品 (如Dreamweaver、Flash、FreeHand和Director) 和其他我们喜欢的图形应用程序及HTML编辑器，提供了一个真正集成的Web解决方案。 5.1.1 Fireworks MX 2004的安装 Fireworks MX 2004要求的系统配置： 300MHz以上处理器 Windows 98SE、Windows
3、ME、Windows 2000、Windows XP .64MB以上可用内存 (建议使用128MB) 外加80MB以上可用磁盘空间 CD-ROM驱动器 在上述配置的系统上，我们就可以开始安装Fireworks MX 2004。 (1) 将Fireworks MX 2004 CD插入计算机的CD ROM驱动器，Fireworks MX 2004安装程序会自动启动。如果没有自动启动，则运行Fireworks MX 2004CD上的Setup.exe文件，单击“运行”对话框中的“确定”按钮，屏幕上就会出现Fireworks MX 2004欢迎界面，如图5-l所示，单击“下一步”按钮。 图5-1 Fi
4、reworks MX 2004安装程序初始界面 (2) 弹出许可证协议对话框，单击“是”按钮，如图52所示。 图5-2 许可证协议界面 (3) 弹出“选择目的地位置”对话框，显示出默认的安装路径。如果我们想要改变安装路径，单击“浏览”按钮，然后指定想要安装的路径，再单击“下一步”按钮，如图5-3历示。 图5-3 安装路径选择界面 (4) 出现开始复制文件页面，需要确认安装路径，单击“下一步”按钮确认，继续安装，如图5-4所示。 图5-4 开始复制文件界面 (5) 出现安装状态界面，可以看到文件的安装过程，并以进度条的方式显示安装进度，如图5-5所示。 图5-5 安装状态界面 (6) 复制完成后
5、，出现安装完成界面。如果我们要查看自述文件，选中“是，立即查看自述文件。”选项，然后单击“完成”按钮结束安装，如图5-6所示。 图5-6 完成安装界面 5.1.2 Fireworks MX 2004二件界面 启动Fireworks MX 2004后，FireworlEs MX 2004会激活工作环境，其中包括标题栏、菜单栏、绘图工作区、工具面板、属性面板和浮动面板。标题栏位于最上方，显示Fireworks MX 2004程序名称和当前所编辑的文件名。菜单栏在标题栏下面，共有。文件”、“编辑”、“视图”、“选择”、“修改”、“文本”、“命令”、“滤镜”、“窗口”和“帮助”10个菜单。工具面板位于
6、屏幕的左侧，该面板分成了6个工具组并用标签标明。属性面板默认情况下出现在文件的底部，它显示文件的属性。当选择某个工具或对象后，它将显示所选工具或所选对象的属性。浮动面板沿屏幕右侧成组停放。绘图工作区出现在应用程序的中心，如图5-7所示。 图5-7 Fireworks MX 2004的工作界面 1. 工具面板 工具面板被编排为6个类别：选择、位图、矢量、WeL、颜色和视图，如图5-7所示。工具面板中某些工具右下角有个小三角，表示该工具是某个工具组的一部分，如图5-8所示。“钢笔”工具属于路径工具组，该工具组还包括“重绘路径”工具和“矢量路径”工具。 图5-8 “工具面板”中的工具组 要从工具组中
7、选择替代工具，在这个工具图标上按住鼠标不动，出现一个包含工具图标、工具名和快捷键的弹出菜单，见图5-8(a)。当前所选的工具在工具名的左侧有一个复选标记。拖动指针以高亮显示所需的工具，然后释放鼠标按键，所选工具出现在工具面板中，工具选项出现在属性面板中，如图5-8(b)所示。 2. 属性面板 属性面板是一个上下文关联面板，它显示当前选区、当前工具选项或文件属性。默认情况下，属性面板停放在工作区的底部，如图5-7所示。 要取消停放属性面板时，将左上角的抓取器拖动到工作区的其他部分；也可在工作区底部停放属性面板，只要将属性面板上的边条拖到屏幕底部即可。 3. 浮动面板 Fireworks MX 2
8、004提供的浮动面板能够帮助我们编辑所选对象的各个方面或文件的元素。可以开启、关闭、缩放或移动浮动面板，甚至可以将某个浮动面板加入另一个面板群组中，来组合出适合自己的浮动面板。 默认情况下“样式”、URL和“库”面板放在称为“资源”的面板组中；“混色器”和“样本”面板放在称为“颜色”的面板组中；“帧”和“历史记录”面板放在称为“帧和历史记录”的面板组中。 5.1.3 基本概念 在第2章我们已经对图形图像的基本概念进行了一定的介绍，这里我们还需要了解一些有关图像的知识，包括什么是矢量图像、什么是位图图像等。这里主要介绍矢量图像和位图图像的基本概念。 1. 矢量图像 矢量图像是用包含颜色和位置属性
9、的直线或曲线(称为矢量)来描述图像属性的一种方法。例如一个椭圆，就包括由通过椭圆边缘的一些点组成的轮廓和轮廓内的点两部分。 对于矢量图像，椭圆的颜色取决于椭圆轮廓曲线的颜色和轮廓封闭区域的颜色，与轮廓内单独的点无关。可以通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质，也可以移动、缩放、变形，或者在不改变图形显示质量的前提下，改变具有矢量性质的椭圆的颜色。 矢量图像具有独立的分辨率，也就是说以各式各样的分辨率来显示矢量图像，它都不会失真。 2. 位图图像 位图图像是用每一个栅格内不同颜色的点来描述图像属性的，这些点就是常说的像素。就拿前面的椭圆来说吧，也可以由所有组成该椭圆的像素的位置和颜色来
10、描述。因为编辑位图时修改的是像素，而不是直线和曲线，所以无法通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质。 位图图像的分辨率不是独立的，因为描述图像的数据是对特定大小栅格中的图像而言的，因此，编辑位图会改变它的显示质量，尤其是缩放图像，会因为图像在栅格内的重蘸分配而导致图像边缘粗糙。在比位图图像本身的分辨率低的输出设备上显示图像也会露低图像钠显示质量。 对于矢量图像和位图图像的转化，可以举一个简单的例子来说明。在Fireworks MX 2004中单击“文本”to转换为路径”命令时，可以看成是把文字变为矢量图像。,5.2 绘图工具面板,Fireworks MX 2004提供了丰富的工具可供
11、使用，它们都位于工作界面左侧的工具面板上，如图5-9所示。下面将分别介绍各工具的使用方法。 图5-9 Fireworks MX 2004工具面板 5.2.1 选择义具 Fireworks MX 2004共提供了三种选择工具，它们位于选择工具栏中。 1. 指针工具 选择这个工具后，在单击对象或者在全部或部分对象周围拖动选区时，指针工具便会选择这些对象，单击背景则会选择画布。 2. 选择后方对象工具 当处理包含多层次对象的图形时，可以使用选择后方对象工具选择被其他对象隐藏或遮挡的对象。如图5-10所示，在层叠的对象上反复单击选择后方对象工具，以层叠顺序自上而下通过对象，直到选取所需的对象。 图5-
12、10 选择后方对象 3. 部分选定工具 如果对象被组合在了一起，则指针工具只能选择整个组合，而无法选择组合前的单个对象。而使用部分选定工具，则可以选择、移动或修改属于组的对象或矢量路径上的点，对矢量路径的修改只需要拖动矢量点或调节手柄，如图5-11所示。如何画矢量图将在后文中介绍。 图5-11 对矢量图的调节 5.2.2 藏色二具 颜色工具主要分为两个方面，即描边并圆色和填充价门色激认情况下描边使用具色，填充使用白色。 使用默认的描边色和填充色。 没有描边色或填充色，都使用透明色。 髓 快速交换描边色和填充色。 这里介绍的颜色工具栏中的定义不仅适用于位图工具，还适用于其他所有的画图操作。 5.
13、2.3 往国义具 Fireworks MX 2004中位图图像的处理功能+分丰富，可以用它来编辑位图图像区域中的独立像素。位图图像是由一个个小像素堆积而成，其图像实例如同彩色照片一样，如果放大，各个微小的像素就成了一个个方块。 在绘制图像时，比较常用的工具有铅笔、毛刷、油漆桶、橡皮以及橡皮图章等。 1. 矩形和椭圆形选取工具 使用矩形选取工具或椭圆形选取工具的目的是在位图中选中一个矩形或椭圆形的区域。具体方法为：在位图工具栏中选择矩形选取工具或椭圆形选取工具，然后在画布上拖动鼠标即可。可以在属性面板中设置矩形和椭圆形选取工具的属性，如图5-12所示。 图5-12 矩形和椭圆形选取工具的属性 样
14、式 可以定义选择区域的形状和比例。如对于矩形选取框工具，可以定义它的宽度和高度，对于椭圆选取框工具，可以定义它的外切矩形的高度和宽度。 边缘 用于设置所选区域边缘的样式。 选取框设置完成后，在没有退出选取框时，可以用鼠标单击选取框内部，然后移动选取框，以将选取框的位置调整到合适的地方。 2. 套索和多边形套索工具 套索工具主要用于产生自由形状或多边形的选区。使用方法为：选择套索或多边形套索工具，之后当鼠标移至画布中时，指针变成套索形状，单击并拖动(若选择的是多边形套索，则只需单击即可)鼠标。 在选择多边形套索工具时，如果末回到起点就想完成操作，可以双击鼠标左键，之后，系统会自动在起点和结束点之
15、间建立直线连接，产生选择区域。为了使选择区域更为精确，可以事先用放大工具将文档放大几倍，再使用多边形套索工具。 3. 铅笔工具 Fireworks MX 2004中的铅笔工具和我们实际中使用的铅笔+分类似。具体使用方法非常简单，只需选中铅笔工具后在画布中拖动鼠标即可。这里要介绍的重点是铅笔工具的属性选项，如图5-l 3所示。 图5-13 设置铅笔工具选项 消除锯齿 可以平滑地绘制直线的边缘。 自动擦除 可以在铅笔工具单击时用现有描边颜色替换原有颜色。 保持透明度 可以限制铅笔工具只在现有像素中绘制，而不能绘制图像的透明区域。 4. 笔刷工具 此工具是一个+分有用的工具，通过在其属性面板中选择不
16、同类型的笔触，指定笔尖大小、描边颜色、边缘羽化程度、纹理及透明度和混合模式等就可以绘制出各种不同效果的图像，笔刷的属性面板如图5-14所示。 图5-14 设置不同的笔触属性 5. 橡皮镶工具露 此工具可以摈除位图中的像素，达到修改位图图像的目的。同样，选择橡皮擦工具后，还可以在如图5-15所示的属性面板中进行如下设置：在边缘柔和度区域调节橡皮擦边缘的柔和废；在橡皮擦大小输入框中设置橡皮擦的大小；选择使用圆形橡皮擦还是方形橡皮擦。 图5-l 5 橡皮擦工具的属性面板 6. 橡皮图章工具 此工具可以将图像的一个区域复制到另一个区域中。使用橡皮图章工具的步骤如下： (1) 选择橡皮图章工具，将鼠标移至画布中时，鼠标指针变成一个取样标志。 (2) 单击鼠标左键，建立图像取样点和范围，在文档中用一个蓝色圆形指示，如图5-16 所示。 图5-16 建立图像取样点 (3) 在需要绘制的地方单击鼠标左键，拖动鼠标，开始绘制，最后的效果如图5-17所示。 图5-17 复制图像 在橡皮图章工具的属性面板中可以进行如图5-18所示的设置。 图5-
