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