美化你的网页Fireworks网页设计

1、第三章 美化你的网页Fireworks,在网页制作过程中，使用图像处理软件对Web图形图像进行创作和编辑是制作与美化网页必不可少的步骤。Macromedia公司出品的Fireworks ，是用来设计和制作专业化网页图形的应用软件。本章主要介绍Fireworks在网页图形图像制作与编辑方面的应用。,3.1 认识Fireworks,使用 Fireworks ，可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。在 Fireworks 中，可以在单个应用程序中创建和编辑位图和矢量两种图形，同时，Fireworks 与Macromedia 的其它多种产品集成在一

2、起（如 Dreamweaver、Flash、FreeHand、Director及 HTML 编辑器），为网页创作者提供了一个真正集成的 Web 处理平台。,3.1 认识Fireworks,Fireworks 的特点： 可以很方便的进行网页的设计布局,制作,优化；- 能和Dreamweaver、Flash很方便的合作开发网站和Flash程序- 小型动画图片的制作，LOGO、BANNER、ICON等等； 相比其他图形制作软件，下面的FIREWORKS的优点是否对你很有帮助？1.Fireworks简洁的软件界面更适合非设计人员学习2.更方便和DREAMWEAVER、FLASH合作开发3.更适合做排版

3、以及切图的设计4.Fireworks提供更优化的网页图形解决方案，能在图形质量以及大小上找到更好的平衡点，更适合网络传输,3.1 认识Fireworks,FIREWORKS的学习渠道- FIREWORKS官方手册（在软件中按查看）/LIVEDOCS- FIREWORKS的网络资源- FIREWORKS书籍（不推荐）,3.1 认识Fireworks,3.1.1 Fireworks 界面 标题栏 菜单栏 工具箱 “属性”面板 功能面板,3.2 Fireworks 基础,3.2.1 Fireworks的基本操作 文档的基本操作 新建文档 保存文档 Fireworks将文档保存为*.Png格式,这是其

4、工作格式。 文档的打开与导入 画布属性的修改 在编辑图像的过程中，经常需要将画布放大或缩小、修剪、旋转画布、重新设置画布的颜色等。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 位图图形工具 选取工具 矩形选取 创建一个选区后，按住Shift键再创建选区，后创建的选区与先创建的选区合并；按住Alt键则进行选区相减；和PS一样，Ctrl+D取消选区；Ctrl+shift+I反选 椭圆选取 套索工具 包括套索工具、多边形套索。 魔术棒工具 用行选择图像中颜色相似的像素区域。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑

5、 位图图形工具 选取工具 矩形选取 创建一个选区后，按住Shift键再创建选区，后创建的选区与先创建的选区合并；按住Alt键则进行选区相减；和PS一样，Ctrl+D取消选区；Ctrl+shift+I反选 椭圆选取 套索工具 包括套索工具、多边形套索。 魔术棒工具 用行选择图像中颜色相似的像素区域。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 位图图形工具 铅笔工具，使用铅笔工具可以绘制单像素的线段； 刷子工具，可以在工作区域中绘制任意粗细的线段，通过设置刷子的样式，可以绘制出特殊效果的线段。 像皮图章工具，可以将图像的一部分提制到其他位置； 颜色替换工

6、具， 橡皮擦工具 位图修饰工具，包括模糊工具、锐化工具、减淡工具、加深工具和涂抹工具。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 矢量图形工具 线条工具 基本形状工具 包括矩形工具、圆角矩形工具、椭圆工具、多边形工具， 钢笔工具 可以绘制直线或贝塞尔曲线，按住Alt键可以变它变成转换点工具。在绘制过程中，按住Ctrl键可以结束绘制。 矢量路径工具就像使用铅笔工具一样，可以绘制出任意的线段，只是使用矢量路径工具绘制的线段为矢量线段。 重绘路径工具可以重绘或扩展所选择的路径段，同时保留该路径的笔触、填充和效果等特性。,3.2 Fireworks 基础,3

7、.2.2 Fireworks图形对象的绘制与编辑 图形对象的编辑 使用选择工具编辑图形 指针工具 可以选择对象或移动对象，按住Alt键同时移动所选对象，可能复制该对象； 选择后方对象工具 可以使用选择后方对象工具选择被其他对象遮挡的对象。 部分选定工具 可以选择、移动或修改矢量路径上的节点或群组的对象。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图形对象的编辑 图形的变形 1.缩放图形：可以使用缩放工具来缩放图形。 2.倾斜图形： 3.扭曲图形： 4.也可以在“修改”菜单中选择“变形”子菜单来对图形进行变形操作。 图形的颜色的填充 图形的颜色包括笔触

8、颜色和填充颜色，可以工具箱中找到。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图形对象的编辑 图形对象的组织 组合对象：调节整体与个体的关系 排列对象：调节图形的层次关系 对齐对象：调节图形之间的位置关系,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图形对象的编辑 矢量图形的编辑 1.自由变形工具：可以直接对矢量对象进行弯曲和变形操作 2.更改区域形状工具：可以像自由变形工具一样对图形进行变形操作，不过更改区域形状工具的变形比较柔和，可以对整个曲线路径进行变形。 3.刀子工具：可以将一个矢量图形路径剪切为两个

9、图形路径。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图形对象的编辑 矢量图形的编辑 4.组合路径： 合并：可以将多个路径对象合并为单个路径对象，还可以将两个断开的路径端点连接到一起。 拆分：可以将组合的单个路径进行拆分。 联合：可以将选择的多个矢量图形合并为一个图形，合并后的图形将保持最底层图形对象的笔触和填充属性。 相交：可以从选择的多个矢量图形对象的交集创建对象。相交的图形将保持最底层图形对象的笔触和填充属性。 打孔：可以从选择的多个矢量图形对象中删除最上层对象重叠的部分。 裁切：另一个路径的形状来修剪路径。前面或最上面的路径定义修剪区域的形状

10、。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图形对象的编辑 矢量图形的编辑 5.改变路径 使用“改变路径”命令可以对矢量路径对象进行重新编辑。 1.简化：可以指定要删除的路径上多余节点的数量，删除路径中节点的同时将保持路径的总体形状。 扩展笔触：可以将选择的矢量路径向外扩展一定的像素，与原来的路径形成一个封闭区域。 伸缩路径，可以将选择的矢量路径向内收缩或向外扩展一定的像素。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图形对象的编辑 图形特效的形成 为了使自己绘制的图形在网页中更加生动，用户可以使用Fir

11、eworks提供的各种特效美化图形。 图形特效主要通过图形对象的属性面板中的效果来进行相应的设置； 斜角和浮雕； 阴影和光晕； 模糊； 调整颜色； 锐化；,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图形对象的编辑 样式的使用 通过“样式”面板，可以将系统中预设的多种填充、笔触、效果样式及文本样式直接应用于工作区中的对象，使其具备该样式的特效。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 文本的操作 文字是网页中很重要的一个元素，人们在网络上通过文字来了解各种各样的信息。在DW中设计时，一般都要使用大部分人都安

12、装的字体。 在Fireworks中，可以将文字制作得与图形一样精美和漂亮，然后将其导出转为图形，插入到网页中就不会产生在不同用户计算机中显示效果不同的现象，做到了最大的兼容性。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 文本的操作 文本的输入 有两种方法来输入文本，一是选择文字工具后，在工作区中单击鼠标创建文本输入框，用这种方法创建的文本输入框，在输入文本时将自动适应文本的宽度，文本输入框是动态的；另一种方法是选择文字工具后，在工作区中扡曳鼠标创建文本输入框，用这种方法创建的文本输入框其宽度是固定的，输入的文本到输入框的宽度后将自动换行。动态输入框档

13、案右上角为圆形，而固定宽度的输入框右上角为矩形。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 文本的操作 编辑文本 设置文字的基本属性 设置文字的对齐方式 设置段落属性 文字的填充、笔触、特效 将文本添加到路径 可以将文本吸附到路径上，这样文本可以按照路径的方向进行排列。 将文本转换为路径 将输入的文本转换为路径后，转换后的文本不再具有文字属性，成为一个文字形状的矢量图形，这时可以像矢量图形一样编辑转换为路径的文本。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图层与蒙版 图层 在FireWorks中，可以像P

14、S一样进行图层的操作，但又和PS有所不同，新建图层按钮创建的图层相当于PS中的图层文件夹，但是在Fireworks中称为“图层”，而真正的图层在Fireworks中称“对象层”。对象层有两种：一是矢量对象层，它是随着矢量图形的创建而产生的；另一种位图对象层，需要单击“新建位图对象”按钮来创建。 图层的操作包括：新建一个层、改变层的顺序、复制层、锁定/解锁图层、改变图层混合模式、改变图层的不透明度等。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图层与蒙版 蒙版 在Fireworks中，可以通过蒙版技术用上层图像遮住下面的图像，制作出一种镂空图像效果。蒙

15、版可以分为两种类型：矢量蒙版和位图蒙版。将矢量对象作蒙版将产生矢量蒙版，而将位图对象用作蒙版将产生位衅蒙版。另外，还可以使用多个对象或组合对象来创建蒙版。 矢量蒙版可以在下层图像中显示出上层图形路径遮住的图像，没有被遮住的图像将透明显示，产生一种生活中见到的镂空图形效果。矢量蒙版创建后，将在层面板中出现一个带铅笔图标的蒙版缩略图，表示已经创建了一个矢量蒙版。创建矢量蒙版后，在“层”面板中选择蒙版图层中的蒙版，“属性”面板中将显示相关的属性。 在Fireworks中，位图蒙版是以灰度色阶来表示的，通过蒙版中图形灰度色阶可以表达被蒙住的图形的透明度。蒙版与图像的关系为： 蒙版的颜色为白色，则其完全

16、显示下方的图像； 蒙版的颜色为黑色，则其完全覆盖下方的图像； 蒙版的颜色为灰色，则图像呈不同程度的透明效果。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图层与蒙版 蒙版 创建蒙版对象 1.对过现有的对象创建蒙版。 使用“粘贴为蒙版”命令可以创建出矢量蒙版或位图蒙版。如果粘贴的对象是矢量图形，将创建矢量蒙版，它使用矢量对象的路径轮廓来裁剪被蒙版对象；如果粘贴的对象是位图，将创建位图蒙版，它使用位图对象的灰度颜色值影响被蒙版对象的可见性。 也可以使用“贴入内部”命令来创建蒙版。 使用“贴入内部”命令时，剪切并粘贴的对象是要被蒙版的对象。而使用“粘贴为蒙版

17、”命令时，剪切粘贴的对象是蒙版对象。 对于矢量蒙版，“贴入内部”命令创建的蒙版可以显示蒙版对象本身的填充和笔触；使用“粘贴为蒙版”创建的矢量对象的填充和笔触是不可见的。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图层与蒙版 蒙版 创建蒙版对象 2.使用图层创建蒙版 在Fireworks中单击“创建图层蒙版”按键可以创建一个空的蒙版，使用位图工具在蒙版层中绘制图形，即可根据所绘图形的不同灰度值产生蒙版效果。使用这种方法创建的蒙版为位图蒙版。 3使用“修改”/“蒙版”子菜单中的命令也可以创建蒙版对象。 在画布中选择位图，单击菜单的“修改”/“蒙版”/“全

18、部显示”命令，将在当前图层中创建一个白色的蒙版，图形完全显示。 在画布中选择位图，单击菜单的“修改”/“蒙版”/“隐藏全部”命令，将在当前图层中创建一个黑色的蒙版，图形完全透明； 使用选取工具在图形上创建一个选区，单击菜单的“修改”/“蒙版”/“显示所选”命令，创建蒙版的图形，则选区的图形将显示出来，选区外的图形将被隐藏。,3.2 Fireworks 基础,3.2.2 Fireworks图形对象的绘制与编辑 图层与蒙版 蒙版 创建蒙版对象 组合对象创建蒙版，用户可以将叠加的图形全部选择，然后使用“组合为蒙版”命令创建蒙版图形；所选图形的堆叠顺序将决定所应用的蒙版类型，如果顶层对象是矢量对象，则

19、结果为矢量蒙版，如果顶层对象是位图对象，则结果为位图蒙版。 编辑蒙版对象 选择蒙版对象 移动蒙版与被蒙版的对象 改变蒙版的外观,3.3 Fireworks 高级操作,3.3.1 按钮与动画的制作 网页中经常会有大量的按钮和动画，Fireworks引入了元件的概念，可以方便地完成按钮的制作。 动画是网页中不可缺少的元素，近年来，Flash动画在网上大量流行，但是由于GIF直通车不需要在浏览器中安装插件就可以播放，并且在任何浏览器中都可以正常显示，所以仍然大量使用。在Fireworks中，可以方便地制作出精美的Gif动画。,3.3 Fireworks 高级操作,3.3.1 按钮与动画的制作 1.元

20、件 Fireworks中的元件和Flash的元件一样，都是存放在库面板中的各种元素，分为图形元件、按钮元件和动画元件。创建了元件以后，元件对象将存放到“库”面板中，用户可以从“库”面板中将元件拖曳到画布中反复作用，拖曳到舞台中的元件，叫做该元件的实例，一个元件可以拖曳多个实例，这些实例将保持元件的特性，如果对其中的实例进行编辑，所作的修改不会影响到元件，但对元件进行修改后，所有的实例都将进行相应的修改。 创建元件 有两种方法可以创建元件：一种是创建一个新的元件对象，然后编辑此元件；另一种是将编辑好的对象转换为元件。,3.3 Fireworks 高级操作,3.3.1 按钮与动画的制作 1.元件

21、编辑元件与实例 创建元件后，用户可以对它进行编辑修改。需要注意的是对元件重新编辑后，元件的实例也将随之改变。重新编辑元件的方法有以下几种： 双击实例，则进入到该实例的“元件”编辑窗口； 选择实例，单击菜单中的“修改”“元件”“编辑元件”命令； 在“库”面板中选择要编辑的元件，在元件上双击鼠标。 编辑实例时，如果双击实例，则编辑的是该实例的元件。重新编辑元件以后，画布上的实例也会随之更新，如果希望在编辑完元件以后，实例不发生变化，需要将实例与元件之间断开链接。,3.3 Fireworks 高级操作,3.3.1 按钮与动画的制作 2.创建按钮 按钮是制作网页时常用到的一个元素，通过按键可以制作网页

22、的超链接、网页的导航栏，从而实现网页的交互效果。使用Fireworks可以很容易地制作出漂亮、具有交互性的按钮，并可以导入到DW编辑的网页中。 创建按钮的方法：三种方法都可创建按钮。 制作按钮：执行了创建新按钮的操作后，将进入按键元件的编辑窗口，在该窗口中可以制作按钮。这个窗口中有5个标签：“释放”、“滑过”、“按下”、“按下时滑过”、“活动区域”，在前4个标签中可以制作按钮的不同状态，最后的“活动区域”标签来表示按钮的响应范围。,3.3 Fireworks 高级操作,3.3.1 按钮与动画的制作 2.创建按钮 创建导航按钮 导航按钮是指网站中可以链接不同网页的一组按钮，导航按钮通常在不同的网

23、页中保持一致的外观，并且存在于首页或者二级网页中。 在Fireworks中创建导航按钮的操作步骤如下： 首先创建按钮元件 将按钮元件从“库”面板拖曳到画布中，创建按钮实例； 选择按钮实例，将按钮实例复制多份； 在“属性”面板中对每个按钮实例设置不同的按钮文本与超链接； 按顺序排列这些按钮。,3.3 Fireworks 高级操作,3.3.1 按钮与动画的制作 3.动画的制作 1.制作逐帧动画 逐帧动画是一种比较原始的动画制作方法，需要用户对动画中的每一帧都有一个清楚的把握。 2.使用动画元件制作动画 一是先创建动画元件，然后通过动画元件来制作动画；另一种是先绘制动画对象，然后将动画对象转换为动画元件，再制作动画。 3.使用“补间实例”命令创建动画,3.3 Fireworks 高级操作,3.3.1 按钮与动画的制作 4.动画的导出 制作完成动画之后，需要导出动画，导出的动画文件可以应用到网页中。在Fireworks中，用户可以将动画导出为GIF或SWF动画格式。,3.3 Fireworks 高级操作,3.3.2 切片和热区 制作网页时，经常需要通过切片和热区实现网页的优化与交互。在Fireworks MX中创建切片与热区会出现在“网页层”中，用户可以通