网页图形处理工具FireworksCS.ppt

网站规划与网页设计 电子工业出版社同名教材配套电子教案2009 9 11 1FireworksCS3的基本概念11 2图形的优化11 3用FireworksCS3创建网页模型11 4创建网站相册 第11章网页图形处理工具FireworksCS3 11 1 1创建新文档第一次启动Fireworks中文版时 会出现一个初始页面 如图所示 在这里 用户可以快速访问最近编辑过的文档或创建一个新文档 也可以访问帮助文件或网页 当用户选择新建Fireworks文件后 就会弹出 新建文档 对话框 如图所示 11 1FireworksCS3的基本概念 图第一次启动Fireworks时的初始页面图 新建文档 对话框 11 1 2Fireworks的工作界面新建文档完成后进入Fireworks的工作界面 如图所示 Fireworks的工作界面由菜单栏 工具栏 工具箱 工作区 组合面板和属性面板6个部分组成 11 1FireworksCS3的基本概念 图Fireworks的工作界面 1 工作区在工作区中不仅可以绘制矢量图 也可以直接处理位图 工作区上有4个选项卡 当前为 原始 选项卡 也就是工作区 只有在此窗口中才能编辑图像文件 而在 预览 选项卡中可以模拟浏览器预览制作好的图像 2幅 和 4幅 选项卡则分别是在2个和4个窗口中显示图像的制作内容 2 工具箱Fireworks中的工具种类齐全 使用这些工具 用户可以在单个文件中创建和编辑矢量或位图图形 11 1FireworksCS3的基本概念 3 属性面板当选择对象或选取工具的时候 其相关信息都会在属性框中显示出来 同时也可以通过修改属性面板中的数据或内容来调整图像的相关属性 如图像的大小 位置及色彩等 4 组合面板Fireworks的组合面板共有18个 分别为 优化 层 公用库 页面 帧 历史记录 自动形状 样式 库 URL 混色器 样本 信息 行为 查找 对齐 自动形状属性 图像编辑和特殊字符 每个面板既可独立排列 又可与其他面板组合成一个新面板 但各面板的功能依然相互独立 单击面板上的名称可展开或折叠该面板 11 1FireworksCS3的基本概念 11 1 3打开和导入文件1 打开文件打开文件用于重新加载一幅新的图像 执行 文件 打开 命令 或者单击工具栏上的 打开 按钮 即可启动 打开 文件对话框 如图所示 11 1FireworksCS3的基本概念 图 打开 对话框 11 1 3打开和导入文件2 导入文件导入文件和打开文件的区别是 前者是将图像文件插入到目前正在编辑的文档中 而不是重新加载一幅图像 执行 文件 导入 命令 启动 导入 对话框 如图所示 11 1FireworksCS3的基本概念 图 导入 对话框 11 1 4修改画布Fireworks中的画布也就相当于图像的背景 在绘图的过程中 为了使画布的大小 色彩能够与前景的图像保持协调 用户经常要修改画布的相关属性 方法是 单击画布 或者在画布的工作区外单击一下 从而显示相应的画布属性面板 如图所示 在属性面板中 单击画布颜色选择框 可以重新设置新的画布颜色 如图所示 11 1FireworksCS3的基本概念 图画布属性面板图设置画布颜色 单击 画布大小 按钮将弹出 画布大小 设置对话框 如图所示 在 新尺寸 区内可以输入新的宽度 高度 并在 锚定 栏中设置画布的固定点 当画布的大小被改变时会以选中的固定点为基准来更改画布的大小 单击画布属性面板中的 图像大小 按钮 将弹出 图像大小 对话框 如图所示 在 像素尺寸 区中可以设置工作区的宽度和高度数值 若选中 约束比例 项 当宽度或高度二者之中某一数值被改变后 另一个数值也会等比例地随之改变 11 1FireworksCS3的基本概念 图设置画布大小图设置图像大小 网页图形设计的最终目标是创建能够尽可能快下载的精美图片 为此 必须在最大限度地保持图形品质的同时 选择压缩质量最高的文件格式 这种平衡就是优化 即寻找颜色 压缩和品质的最佳组合 在Fireworks中 使用优化面板可以轻松地对图形进行优化 在Fireworks中 优化图形涉及下列操作 选择最佳文件格式 每种文件格式都有不同的压缩颜色信息的方法 为某些类型的图形选择适当格式可以减小文件大小 设置格式特定的选项 每种图形文件格式都有一组惟一的选项 可以用诸如色阶这样的选项来减小文件大小 某些图形格式 如GIF和JPEG 还具有控制图形压缩的选项 调整图形中的颜色 仅限于8位文件格式 可以通过将图形局限于一个称为调色板的特定颜色集来限制颜色 然后修剪掉调色板中未使用的颜色 调色板中的颜色越少意味着图形中的颜色也越少 从而让使用该调色板的图形文件大小变小 11 2图形的优化 网页模型一般用于向用户显示建议的页面设计 一旦设计获得认可 网页设计人员便会将模型用作创建页面的蓝图 下面的实例讲述了一个诗词主题网站页面模型的建立过程 使读者能够了解Fireworks的基本操作 网页模型的规划和设计过程 11 3 1建立网站页面模型页面模型通常显示设计布局 技术组件 主题和颜色 图形图像以及其他媒体元素 11 3 2网页模型的切片与导出切片是FireworksCS3中用于创建交互的基本构造块 切片将Fireworks文档分割成多个较小的部分并将每部分导出为单独的文件 导出时 Fireworks还创建一个包含表格代码的HTML文件 以便在浏览器中重新装配图形 11 3用FireworksCS3创建网页模型 使用Dreamweaver和Fireworks相结合的方法 可以自动生成一个网站相册 显示在指定文件夹中存放的图像集合 其中 Fireworks可以为文件夹中的每个图像创建缩略图和大图 然后 Dreamweaver创建一个包含所有缩略图的Web页 Web页中提供了指向大图的链接 如果要创建Web相册 用户的系统中必须同时安装有Dreamweaver和Fireworks 另外 定义站点的本地文件夹 图片的文件名均不能使用中文名称 否则 创建网站相册将失败 11 4创建网站相册 1 使用Fireworks分别对JPEG图像和GIF图像进行优化并导出整个图像 2 制作一个