《使用Fireworks创建Web对象.ppt》由会员分享，可在线阅读，更多相关《使用Fireworks创建Web对象.ppt（29页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第7 7章章 使用使用FireworksFireworks创建创建WebWeb对象对象 Fireworks 8提供了许多专门针对网页制作的功能，可以直接制作与图像有关的网页对象，如GIF动画、交互按钮、弹出菜单、图像地图等，还可以生成可以方便页面布局设计、提高网页传输速度的切片网页。另外，Fireworks 8还能对图形进行优化和导出，达到图像颜色、压缩和品质的最佳组合。7.1 7.1 制作制作GIFGIF动画动画 动画相当于将连续的多幅图像逐个显示，网页中常用的GIF89a格式的图像动画，这种动画特别适合动作效果简单、颜色不复杂的动画。Fireworks 8可以直接生成GIF动画，还可以将
2、动画作为Flash的SWF格式文件导出或直接导入到 Flash中进行编辑。创建动画创建动画 创建动画前首先要将要产生运动效果的对象单独放在一个层中。1创建动画 2查看和修改动画效果使用使用“帧帧”面板面板 使用“帧”面板可以设置更详细的动画效果，还可以方便地编辑动画效果。1编辑帧 2设置动画播放次数 3同时查看多帧 4设置帧延时时间 5在帧间共享层 【实例7.1】制作一个文字在画面上由左到右沿曲线运动的动画效果。将多个文件用作一个动画将多个文件用作一个动画 Fireworks 可基于一组图像文件创建一个动画。例如，打开几个现有的图形并将它们放在同一文档中的不同帧中，就可以创建一个横幅广告。【实
3、例7.2】制作一个横幅广告。导出动画导出动画 动画制作完成后，可以将动画文件导出为GIF格式的文件或Flash文件。1导出为GIF 2导出为Flash动画 7.2 7.2 切片和热点切片和热点 使用热点和切片可以直接制作网页对象，生成HTML文件。使用切片使用切片 切片将 Fireworks文档分割成多个较小部分，并将每部分导出为单独的文件。【实例7.3】将网页设计效果图使用切片处理。1创建切片 2编辑切片 3添加超链接 4制作交换图像 5添加行为导出切片导出切片 包 含 切 片 的 图 像 可 以 导 出 为 网 页 文 件，通 过Dreamweaver等网页编辑软件编辑，或在浏览器中浏览。
4、1导出切片 2导出的文件 3编辑切片网页创建热点创建热点 使用Fireworks创建热点类似于在制作图像地图，可使图像的一部分成为超链接对象。1创建热点 2设置热点 3编辑热点 4添加行为 5导出热点图像7.3 7.3 制作按钮和弹出菜单制作按钮和弹出菜单 按钮和弹出菜单是网页中最常见的两种元素。按钮在光标移过、离开等状态会呈现不同的外观；弹出菜单在光标移过一个区域时，出现一个菜单，可以进行选择。Fireworks会自动产生按钮、弹出菜单所需的JavaScript，生成对应的网页。制作按钮制作按钮 Fireworks通过定义一个对象在释放、滑过、按下、按下时滑过等4种状态下的图像，生成一个具有
5、动态效果的按钮。1创建按钮 2导入按钮 3编辑按钮 4设置交互按钮属性创建元件创建元件 如果希望在文档中重复使用某些图形，可将该图形创建为元件。定义元件后，将该元件拖入文档便创建了该元件的一个实例。当用户编辑元件时，所有实例自动改变。Fireworks 8提供3种类型的元件：图形、动画和按钮。1创建元件 2编辑元件 3编辑实例 4导入、导出元件制作弹出菜单制作弹出菜单 利用Fireworks 8的“弹出菜单编辑器”，可以在切片、热点和按钮上都可以创建弹出菜单，Fireworks 8创建的弹出菜单的排列方式、位置、颜色等都可以随意设置。1制作文字按钮 2制作导航栏 3制作菜单 4编辑弹出菜单 5
6、导出弹出菜单 【实例7.5】制作一个有3个栏目的弹出菜单，其中有一个栏目的菜单中还包含子菜单。7.4 7.4 优化与导出优化与导出 网页图形设计的最终目标是创建能够尽可能快地下载的精美图像，因此必须在最大限度地保持图像品质的同时，选择压缩质量最高的文件格式。这种平衡就是优化，即寻找颜色、压缩和品质的最佳组合。图像的优化图像的优化 1图像优化的方法 2使用“优化”面板进行优化 使用导出向导使用导出向导 1导出图像 2使用导出向导 填充填充 Fireworks的填充可以将路径变为实际应用中的各种图形效果。1填充对象 2设置填充 3设置渐变填充 4调整填充效果 5为填充增加纹理和设置边缘 【实例6.
7、7】制作一个立体效果的按钮。使用样式和形状使用样式和形状 Fireworks的“资源”面板组中提供了大量定义好的样式和图形，可以在制作图像时直接使用。1使用样式 2使用形状 6.4 6.4 编辑位图编辑位图 位图又称点阵图，其图形是由屏幕上许多细微的小点组成，基于位图的图形程序实际上就是把图形中的像素点作为处理的对象，所以图形的分辨率取决于像素点的多少，增加分辨率可以使图形显得更加细腻。但分辨率越高，计算机需要记录的像素越多，存储图形的文件就越大。位图最显著的优点是它能够真实地模拟现实生活中的色彩，缺点是放大后会失真。创建和编辑位图创建和编辑位图 1绘制图形 2导入外部图像 3擦除位图 编辑选
8、区编辑选区 在网页制作时对位图的处理主要是进行修饰处理，如改变大小、修改颜色、增加特效、去除红眼和多余的色斑等。修饰图像前一般先要选取要修饰的区域，形成一个闪烁虚线组成的选区。1增加选区 2选区边缘设置 3编辑选区 【实例6.8】制作羽化的图像。修饰位图修饰位图 如果没有选取位图的局部，则修饰可以在整个图像上进行，实际工作中一般是选取位图的一部分，然后在选区中进行修饰。可以使用工具箱中的位图工具绘制和编辑位图对象。【实例6.9】制作火焰字。6.5 6.5 图像的后期处理图像的后期处理 将图像应用于网页时，一般需要对图像进行一些后期处理，如增加效果、改变大小、修改颜色、裁取一部分等。使用滤镜、蒙
9、版功能等可以进行各种后期处理，使用层可以制作更复杂的图像。使用滤镜使用滤镜 滤镜能够针对位图对象产生各种特殊的图像效果。Fireworks 8提供了大量滤镜效果，并允许使用第三方插件的滤镜。1滤镜和动态滤镜 2滤镜效果 【实例6.10】制作一个翡翠手镯。使用层使用层 当制作和加工包含很多对象的图像时，在画布中管理图形对象将是很麻烦的事情，使用层可以很容易地解决这个问题。1“层”面板 2操作层面板 3编辑层 使用蒙版使用蒙版 蒙版又称为遮罩，是一种由上层对象为下层对象提供外形，而下层对象为上层对象提供内容的一种图像处理效果。上层对象称为蒙版对象，下层对象称为被蒙版对象。矢量和位图对象都可以成为蒙版对象或被蒙版对象。1使用矢量路径轮廓创建蒙版 2创建位图蒙版 3粘贴于内部 【实例6.11】制作心形图片。混合和不透明度混合和不透明度 当两个图像对象位置重叠时，使用混合和不透明度设置，可以使其产生一些特殊的效果。1不透明度 2混合 处理照片处理照片 使用数码相机、扫描仪等得到的图像，以及从网页上下载的图像，往往需要进行简单的处理后，才能应用到网页中。1修改图像大小 2裁取图像 3调整颜色、亮度、对比度 4融合图像 【实例6.12】将两个图像融合。