![]() |
|||||||
![]() |
|||||||
| 网页制作发展趋势及其流程 |
|||||||
Fireworks MX基础知识
网页图像是网页上的重要元素,是网页的灵魂,在设计和制作网页之前,首先要制作网页图像。本章主要讲述Fireworks MX 的基本概念和操作。通过学习,应该掌握以下内容: l 网页图像格式的种类及其特点
l
Fireworks MX工作界面的构成
l
矢量图形绘制与编辑工具的使用 7.1 网页图像概述
7.1.1图像的格式目前网络支持的图形格式主要有JPEG/JPG、GIF 和 PNG 3种。由于这3种格式各有利弊,在设计网页时,要根据实际情况来考虑选择使用何种图像格式。 这3种图像格式的特点如下:
7.1.2 矢量图像和位图图像矢量图像和位图图像是计算机显示图形的两种主要方法。 1. 矢量图像矢量图像是用包含颜色和位置属性的直线或曲线(即称为矢量)来描述图像属性的一种方法。比如,一个圆包括两部分:由通过圆的边缘的一些点组成的轮廓和轮廓内的点。 矢量图形是具有独立分辨率的,即它可以在不损失任何质量的前提下,以各种各样的分辨率显示在输出设备中。 2. 位图图像位图图像是对每一个栅格内不同颜色的点进行描述,这些点称为像素。例如,上面所说的圆图像,可以由所有组成该圆的像素点的位置和颜色来描述。因为编辑位图图像时,修改的是像素点,而不是直线和曲线。因而,不可能通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质。 对于矢量和位图图像的转化,可以举一个简单的例子来说明,在Fireworks MX中,把文字变为路径(转换为路径)时,可以看成是把文字变为矢量图像,若选择“修改”菜单中的“平面化所选”命令,则可以转变为位图图像。
7.2 认识 Fireworks MX
Fireworks MX是一个强大的网页图形设计工具,可以使用它创建和编辑位图、矢量图形,还可以非常轻松的做出各种网页设计中常见的效果,比如翻转图像,下拉菜单等。设计完成以后,如果要在网页设计中使用,可以将它输出为html文件,还能输出为可以在photoshop,illustrator和flash等软件中编辑的格式。 7.2.1 Fireworks MX的特点1. HTML与图像一体化。用Fireworks MX分割的图像可以自动输出HTML代码,无需为了分割紧密贴合的图像而在网页制作过程中仔细调整。制作复杂的图像轮换效果可以自动生成JavaScript 和HTML,使得初学者更容易掌握网页的设计与制作。 2.
图像功能强大。在Fireworks MX中,利用样式可以快速赋予对像各种艺术效果,可以在保持对像基本框架不改变的情况下任意改变效果。 3. 支持动画创建。利用Fireworks MX 强大的图像编辑能力可以轻松创建GIF动画中的各个图像,然后利用打开多文件命令自动创建完整的GIF动画。 4. 工作区域预览。在Fireworks MX中,可以不离开工作环境而直接进行预览,使得图像的编辑和创作变得更加简便。同时Fireworks MX还提供导出文件的比较机制,允许预览多种导出方案所生成的图像,通过比较就可以选择最佳的导出图像。 5.
文本增强功能。针对文本与字体的特性,Fireworks MX对文本作了相当多的增强功能,可以控制文本的方向为水平或垂直及文本的具体走向等。 6. 历史面板。历史面板提供撤消和恢复的灵活机制,以列表的形式记录和显示编辑图像时进行的所有操作步骤,拖动历史面板的滑块,可以对已经操作的步骤进行相关的操作。 7.2.2 Fireworks MX 的工作界面进入Fireworks MX工作状态之前,我们先要来熟悉Fireworks MX的工作界面。Fireworks MX 的界面大致可以分为文档窗口、工具栏、工具箱、面板和菜单等几项,如图7-1所示。
图7-1 Fireworks MX 工作界面 1. 菜单栏Fireworks
MX的主菜单共有文件、编辑
、视图、选择、修改、文本、命令、滤镜、窗口、帮助等十个主菜单项,每个主菜单项又有多个子菜单。在后面的应用中我们将具体讲解他们的功能和用法。 2. 文档窗口 Fireworks MX的文件窗口上有四个标签,可以同时编辑和预览四种不同的优化设定所产生的效果,选择最理想的一种设定。 3. 工具箱选择“窗口/工具”菜单,启动工具箱面板。工具箱面板由选择、位图、矢量、网页、颜色、视图等六个工具区域构成,他包括各种选择、创建、编辑图像的工具。有的工具按钮右下角有一个小箭头,说明这个工具包含有几种不同的模式,用鼠标左键点按这个工具按钮不放,就能显示出其他的可选模式,以供选择。工具箱的具体使用将在后面的图形绘制和编辑内容中讲解。 4. 浮动面板Fireworks MX的浮动面板包括有层,帧、历史记录、颜色混合器、行为、优化和属性等面板。在工作中你可能会发现有些面板经常会用到,你可以把工作起来最方便的面板排列方式保存起来(使用菜单“命令/面板布局设置/保存面板布局”)。如果下次要调出这种排列方式只要在“命令/面板布局设置”的子菜单内选择就行。浮动面板在“窗口”菜单中选择启动。 (1)属性面板:包括对像的大小、颜色等属性的优化设置,如图7-2所示。选中不同的对象显示出相应的设置参数,这是 Fireworks MX与以前版本相比所特有的,他大大提高了工作效率。
图7-3 属性面板 (2)信息面板:提供了所选中的对像的长、宽,和x、y坐标等信息。同时,当鼠标在画布上移动时,也能观测所经过点的色彩和坐标信息。如图7-3所示。
图7-3 信息面板 (3)优化面板和动作面板:优化面板用于优化文件输出大小和文件输出格式。动作面板管理那些能响应鼠标事件的热点和切片的动作。 (4)层面板、帧面板和历史面板:层面板用来组织文档的结构,包括创建、删除、操纵图层和帧等各种功能。帧面板中有创建动画的选项。历史面板列出了最近使用过的命令,设计者可以方便快捷地撤销、重复作过的各种操作,也可以保存命令序列,生成一个可以重复使用的命令钮,如图7-4所示。 (5)混色器和样本面板用于管理当前图像的调色板,如图7-5所示。
图7-4 层面板 图7- 5 颜色面板 7.2.3 文档的基本操作介绍了 Fireworks MX的工作环境之后,开始介绍文档的基本操作方法。文档操作是Fireworks MX中最基本的操作,包括新建文档、打开文档、导入文档等。 在Fireworks MX中,文档图像采用PNG格式。PNG是(Portable Network Graphic)便携网络图像的首字母缩写,是一种新型的图像格式。 1. 创建文档创建文档,就是创建一幅新的PNG格式的图像。可以直接创建一幅空白的图像文档,然后进行绘制和编辑,也可以利用剪贴板,从其它图像源中复制图像数据,然后在 Fireworks MX中生成新的文档。 (1)创建新文档选择“文件 / 新建”菜单,或单击主要工具栏中的“新建”按钮,打开如图7-6所示的“新建文档”对话框。在对话框中设置画布的“宽度”、“高度”、“分辨率”、“画布颜色”。设置完毕,单击“确定”按钮,便打开了新文档的编辑工作区。
图7-6 新建文档 (2)打开现有文档选择“文件/打开”菜单,或单击主要工具栏中的“打开”按钮。在弹出的对话框中选择要打开的文件,点击对话框右下角的“打开”按钮即可打开文件。 (3)导入图像文件选择“文件/导入”菜单,在打开的对话框中选择要导入的图像文件。单击“打开”按钮,这时对话框会关闭。将鼠标移动到文档窗口中,鼠标指针会变为一个折线形状,用于设置导入图像上角起始位置。如果希望以原始大小导入图像,可以在文档窗口中图像起始位置处单击鼠标,即可将图像导入:如果希望以新的大小导入图像,可以拖动鼠标绘制需要的大小尺寸,释放鼠标,图像被导入,同时大小被改变如图7-7所示。通过单击主工具栏上的“导入”按钮,也可以进行图像的导入。
图7-7 导入图像 2. 浏览和查看文档(1)平铺和重叠文档窗口在程序窗口中,如果有多个文档窗口,则可以改变各个文档窗口之间的相互位置,便于对文档的管理。打开“窗口”菜单,选择“重叠”命令,可以将多个文档窗口在程序窗口范围中重叠显示,可以通过单击各个窗口的标题栏将该文档切换到顶层以便进行编辑。 选择“窗口/水平平铺”菜单,可以将多个文档窗口在程序窗口范围中沿垂直方向平铺显示:选择“窗口/垂直平铺” 菜单,可以将多个文档窗口在程序窗口范围中沿水平方向平铺显示。平铺显示的优点在于文档窗口相互不会遮挡。 (2) 改变显示比例从工具箱中单击“放大镜”工具按钮,然后在文档窗口中单击鼠标。连续单击鼠标,可以在当前的显示比例基础上多次放大图像,直至最大(6400%)。缩小显示文档的操作过程与放大显示相同。 3.关闭文档要关闭文档,可以按照如下方法进行操作: (1)如果有多个文档窗口,将要关闭的文档窗口放置到最上端。 (2)打开“文件”菜单,选择“关闭”命令,或是直接单击文档窗口右上角的关闭按钮,即可关闭文档。如果文档经过修改尚未存储,会提示保存文档。 4. 保存文档经过对图像的编辑,保存所作的工作是至关重要的。在Fireworks MX 中,允许以PNG的形式保存文档,也可以通过导出的方式,以常用的JPEG 或GIF等方式保存图像。 (1)保存PNG文档选择“文件/ 保存”菜单,如果文档是新建的,并且尚未被保存过,则会出现标准的Windows文件存储对话框,选择要保存的文件路径,并输入文件名称,即可保存。 如果希望以另外的名称保存文档,可以打开“文件/ 另存为”菜单,重新输入新的文档路径和名称,保存文档。 (2)导出其它格式的文档假设我们希望将文档存储为JPEG格式的图像,这时可以按照如下方法进行操作: l 打开文档,使文档窗口显示在程序窗口中。 l 选择“窗口/ 优化”菜单,启动优化面板。在优化面板上,打开如图7-8所示的下 拉列表,然后选择“JPEG”。可以在面板上选择其它的选项,最常用的是“质量”选项,它用于设置JPEG图像的质量。
图7-8 优化面板 l 选择“文件/导出”菜单。对话框上会根据在“优化”面板上选择的文件格式,自 动添加需要的扩展名。 l 单击“保存”按钮,即可以相应的格式保存文件。 通过单击工具栏上的“导出”工具按钮,也可以实现文档的导出操作。 7.3 矢量图像的绘制与编辑
在利用Fireworks MX 绘制图像时,绘制矢量对像是所有操作中需要最先掌握的技术。 7.3.1 图像的绘制模式1 .图像绘制模式的种类。在Fireworks MX 中,有两种图像的绘制模式:对象模式和图像编辑模式。
在利用Fireworks MX 创建新的文档时,进入的是对象模式,这种模式是的默认模式。如果在Fireworks MX 中打开一幅位图编辑的话,则进入的模式是图像编辑模式。 一般说来,处于对象模式时的图像画布四周没有边框,而如果看到一个有斑纹的边框出现在画布四周时,这时的模式就时图像编辑模式。 2. 图像绘制模式的切换。对象模式和图像编辑模式之间可以进行切换,通常这种切换是自动进行的。例如,选择了某种工具,可能就自动进入了图像编辑模式,这时编辑的内容都是基于位图的;而选择了另外一种工具,可能就自动进入了对象模式,这时编辑的内容都是基于矢量的。 在图像编辑模式中,可以通过以下几种方法来直接切换回对象模式: (1)从工具箱上选中任何一种选择工具,然后双击文档窗口画布中的任意位置,即可切换回对象模式。 (2)使用一种只能在对象模式中才能使用的工具,例如文本工具,这时会自动切换回对象模式。 (3)当文档处于图像编辑时,在程序窗口的状态行上会出现一个圆形红色的“×”形按钮(通常这种按钮称作停止按钮)。单击该按钮,即可返回到对象模式中。 (4)在图像编辑模式中,按下Esc键,即可返回对象模式。 7.3.2 矢量图像的绘制绘制矢量图像就是绘制路径的过程,主要通过如图7-9所示的绘图工具箱中的工具完成。在进行路径绘制时,可以在工具箱下方的笔画颜色区域选择需要的笔画颜色,而在工具箱下方的填充区域选择需要的填充颜色。在使用填充颜色的时,只有在绘制矩形、椭圆和多边形时,才会自动填充设置的颜色,如果使用铅笔、画刷或钢笔绘制路径,路径内部不会填充颜色,必须在绘制完毕后选中对像,然后再从工具箱上的填充颜色区域选择需要的颜色。 路径绘制工具按钮右下角的小黑色箭头,表示该工具包含有具体的选择模式。鼠标左键按住工具按钮会弹出菜单以供选择。如图7-10所示,是图形工具的弹出菜单,在弹出菜单中可选择图形的具体模式:矩形、椭圆、多边形等。
图7-9 矢量路径工具图 7-10 路径模式的选择 利用属性面板,可以设置更多的笔画效果和填充效果。 1. 绘制直线(1)从工具箱中选中直线工具。 (2)在文档窗口中所需绘制直线的起点位置按下鼠标,拖动鼠标直到直线的终点位置。 (3)释放鼠标,直线就被绘制到文档中。 如果希望绘制同水平或垂直方向呈45°角的直线,可以在拖动鼠标的同时按住Shift键。 2. 绘制矩形(1)鼠标左键按住图形工具,从弹出菜单中选择矩形工具。 (2)在文档窗口中所需矩形的左上角位置按下鼠标,拖动鼠标直至矩形的右下角位置。 (3)释放鼠标,矩形就被绘制到文档中。 选中矩形工具后,启动“属性面板”,可设置矩形边角的弯曲度,对矩形的边角进行圆滑,获得特殊的矩形效果。 3. 绘制椭圆形(1)鼠标左键按住图形工具,从弹出菜单中选择椭圆形工具。 (2)在文档窗口中所需椭圆形外切矩形区域左上角位置按下鼠标右键,拖动鼠标直到外切矩形右下角位置。 (3)释放鼠标,椭圆形就被绘制到文档中。 如果希望绘制圆形,可以在拖动鼠标的同时按住Shift键。 4. 绘制三角形和其它多边形多边形包括三角形、矩形以及超过5条边的其它类型的多边形。 (1)鼠标左键按住图形工具,从弹出菜单中选择多边形工具。启动属性面板,如图7-11所示。
图7-11 多边形属性面板 (2)确保“形状”下拉列表中显示的是“多边形”。 (3)在“边”文本框中输入要绘制多边形的边数。 (4)在文档窗口中按下并拖动鼠标,即可绘制需要的多边形。 要在绘制多边形时使多边形的方向以45°角的增量改变,可以在拖动鼠标时按住Shift键。 说明:利用多边形工具绘制的多边形,总是以按下鼠标按钮的起始点作为多边形的中点。 5. 绘制星形绘制星形,同样需要使用多边形工具。只是在属性面板的“形状”下拉表中选择“星形”,然后在“边”文本框中输入星形的边数,即可象画其他多边形一样画出星形。 要在绘制星形时使边线的方向以45°角的增量改变,可以在拖动鼠标时按住Shift键。 6. 绘制自由路径如果希望在文档中绘制任意形状的路径,可以使用Fireworks MX的“矢量路径”工具,利用它可以像在位图编辑程序中绘制位图一样绘制任意形状的路径,当然,生成的结果仍然是矢量的,Fireworks MX会自动用点和路径来“拼”出复杂的路径形状。通常将任意形状的路径称作自由路径。 自由路径的绘制与Flash MX 中的矢量路径的绘制方法相同。 7.3.3 布局工具的使用绘制对象时,经常需要了解当前的坐标位置,Fireworks提供了“标尺”和“网格”等布局工具,帮助在文档中精确定位。 1. 显示标尺默认状态下,标尺是未被显示的,要显示标尺,选择“视图/标尺”菜单,或是按下Ctrl+Alt+R组合键。如果希望隐藏标尺,将“标尺”命令的选中状态消除,或是再次按下Ctrl+Alt+R组合键。 2. 显示网格默认状态下,网格也是隐藏的,要显示网络,选择“视图/视图”菜单。如果希望隐藏标尺,可以将“网格”命令的选中状态消除。 3. 靠齐网格为了保证文档中的对像排放整齐,可以利用靠齐网格命令。选择“视图/ 网格/对齐网格”菜单,即可激活这种特性。这时在文档中绘制的对像会自动和距离最近的网格靠齐。如果希望关闭该特性,可以清除“对齐网格”的选中状态。 4. 设置网格选项选择“视图/网格/编辑网格”菜单,即可打开对话框,定制网格。 7.3.4 标题文字的制作1. 编辑文本文本的编辑可以通过文本编辑器来实现,也可以通过“文本”菜单中的菜单命令来实现,这里介绍如何用文本编辑器来进行。 在工具箱中选择文本工具按钮,或者在”文本”菜单中选择“编辑器”命令,然后在所需要插入文本的地方直接按住鼠标左键,拖动鼠标出现一个方框,到合适时为止,接着就出现了如图7-11所示的文本属性对话框。 在文本属性面板中设置文本属性,设置完毕,按“确定”按钮结束操作。如过对编辑效果不满意,可以双击文本对像进入编辑窗口继续编辑。
图7-11 文字属性 2. 制作特效文本在Fireworks MX中可以对文本进行诸如图片一样的特效操作。如填充、效果、样式等。这样一来,属性面板、资源面板等就可以对文本进行设置了。 选择“窗口/样式”菜单,启动样式面板可对选中的文本样式进行设计,如图7-12所示。也可以通过滤镜菜单的菜单项进行设置。
图7-12 文字样式 3. 路径文字的编辑在一般的文本编辑器中文本的布置总是横向或者纵向的,最多也就有几种简单的变形。但是在Fireworks MX中可以随心所欲地对文本变形,只需要设置路径文字就可以了。 如图7-13所示,输入文本和绘制出所需要的路径,同时选择文本和路径;然后在“文本”菜单中选择“附加到路径”命令就可以将文本附加到路径上了。 通常在创建路径文字之后,还要对它进行调整。可以使用”文本”菜单中的“方向”菜单项进行设置。 如果想将文本与路径分开,执行“文本”菜单中“从路径脱离”命令就可以将文本和路径恢复到附加以前。
图7-13 路径文字实例 7.4 修改对像
在绘制了矢量对象之后,可能需要对对象进行修改,使之符合需要。例如,可能需要移动对象的位置、改变对象的重叠顺序,或是修改对象中的路径等。Fireworks MX提供了强大的工具,允许对对象进行随心所欲地修改。 7.4.1 选择对象4种选中对象的工具:“指针”工具、“部分选定”工具、“缩放”工具和“剪裁”工具,它们在工具箱上的位置如图7-14所示。
图7-14 选择工具 在Fireworks MX中,可以选中单个对象,也可以同时选中多个对象,甚至可以在选中多个对象时,任意改变对象的选中状态。 (1)用指针工具选择单个对象l 选择单个对象:从工具箱上选择指针工具。将鼠标光标移动到要选中的对象上方,如果对象被填充,也可以移动到任意的填充位置,这时对象的路径会被高亮显示,默认状态下显示为红色。单击鼠标,即可选中对象,默认状态下,被选中的对象,其路径被显示为蓝色。 l 选择多个对象:从工具箱上选择指针工具。在文档窗口中按住鼠标左键,拖动鼠标,将要选中的所有对象全部圈住。释放鼠标,多个对象就被同时选中,对象的路径被显示为蓝色。 (2)用部分选定工具选择对象用部分选定工具选择对象的操作与用指针工具选择对象的操作是相同的。但用部分选定工具选择对象后,会显示出对象的路径编辑节点,可以通过这些节点方便地编辑路径。 (3)用缩放工具选定对象从工具箱上选择缩放工具。在文档窗口中按住鼠标左键,拖动鼠标,将要选中的所有对象全部圈住。释放鼠标,对象就被选中,在选定对象的周围会出现缩放和旋转控制点,利用这些控制点可以方便地调整对象的大小和方向。 (4)用剪裁工具选定对象从工具箱上选择剪裁工具。在文档窗口中按住鼠标左键,拖动鼠标,将要选中的所有对象全部圈住。释放鼠标,对象就被选中,在选定对象的周围会出现剪裁边框,调整好边框大小后在边框内双击鼠标左键,则把边框外的内容剪裁掉。 7.4.2 组织和管理对象为了方便对对象的控制,合理组织对象是非常重要的。在Fireworks中,可以移动对象、设置对象的重叠顺序、显示或隐藏对象、复制、剪切或删除对象,也可以将多个对象组合起来,作为一个对象看待。 1. 移动对象在文档中,移动对象非常简单,只需选中对象,然后按住鼠标拖动对象,即可将它在文档中任意移动,在目标位置释放鼠标,对象就被移动到相应位置。 2. 对齐对象选中要对齐的多个对象。选择“修改/对齐”菜单,然后再选择需要的选项。 3. 设置对象的重叠顺序各个对象之间是相互独立的,因此在文档中它们可能发生重叠,Fireworks MX允许改变多个对象的重叠顺序,可以按照如下方法进行操作:选中要改变重叠顺序的对象。选择“修改/排列”菜单,然后从子菜单中选择需要的选项。 4. 隐藏和显示对象如果文档中的对象不再需要,可以将它从文档中删除,然而,有时候某个对象只是临时不再需要,将来还可能继续使用,这时可以将对象隐藏起来,在需要的时候再将之重新显示。操作如下:选中要隐藏的对象。选择“视图/ 隐藏所选”菜单,这时被选中的对象就被隐藏。 5. 组合对象如果多个对象之间的相对位置始终保持不变,则可以将这些对象组合起来,作为一个对象使用,在需要时,又可以重新将组合的对象拆分成为多个相互独立的对象。 (1)组合对象选中要进行组合的多个对象。选择“修改/组合”菜单,这时对象就被组合到一起。从工具箱中选择指针工具,在组合后的对象上单击鼠标,可以看到,这些被组合的对象被作为一个对象选中。 (2)取消对象的组合选中被组合的对象。选择“修改/取消组合”菜单,这时可以看到,原先被组合的对象全部脱离组合,又成为各个单独的对象。 7.4.3 整形路径前面介绍的主要是针对对象整体的操作方法,如果希望修改对象本身的形状,也即修改路径,则需要进行更多更细致的操作。 1. 通过编辑点整形路径 用部分选择工具选中对象后在会显示出对象的路径编辑点,拖动点或改变连接点的线条方向即可改变路径位置。如图7-15所示。
图7-15 编辑路径节点 2. 直接整形路径通过整形路径工具,可以进一步控制路径的形状。 选择自由形状工具中的编辑模式,鼠标会变成相应的工具形状通过拖拉或推动等方式就可以实现对路径的编辑。
图7-15 利用自由形状工具编辑路径 本章小结目前比较流行的网页图象格式有三种:JPEEG/JPG 格式,GIF格式和PNG格式。这三种格式的图象各有特点,在制作网页时根据需要选择使用。 Fireworks MX的工作界面由菜单栏、文档窗口、浮动面板区等几部分构成,熟悉工作界面有利于提高工作效率。Fireworks MX提供了强大的矢量路径绘制、编辑工具,通过这些工具可以方便地创建矢量图形。 思考练习1. 矢量图形和位图有什么区别,在Fireworks MX中如何转换。 2. 矢量图形的绘制工具有那些,其功能分别是什么。 3. 矢量图形的编辑工具有那些,其功能分别是什么。 |
|||||||||||||||||||
|
|
网页设计三剑客 htmldesign.51.net
Copyright 2003-2004. All Rights Reserved. QQ:18599123 联系邮箱:q_js888@sina.com 〓 梦空间·网页工作室 〓 |