网页设计三剑客基础练习典型案例第11章.ppt

1,第11章 使用Fireworks网页图像编辑,Macromedia Fireworks MX 2004是用来设计制作专业化网页图像的应用软件，可以切实帮助网页设计和开发人员解决所面临的特殊问题。使用Fireworks，你可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。在Fireworks中，可以在单个应用程序中同时创建和编辑位图与矢量图两种图形。除此之外，工作流程可以实现自动化，从而提高工作效率。,2,本章学习要点：,熟悉Fireworks工作环境 在Fireworks中绘制图形 编辑图形的方法和技巧 利用层和蒙版编辑图像 制作与优化网页动画,3,11.1 Fireworks工作环境,打开Fireworks应用程序的其工作界面。Fireworks MX 2004的工作界面由4部分组成：文件视图、功能面板、工具箱和属性面板。 同其他Windows环境下的应用软件类似，Fireworks将常用工具和命令集合成工具栏的形式方便设计人员操作使用。通过【窗口】菜单命令可以控制工具栏的显示和隐藏。,4,11.1.2 视图方式,Fireworks主要用来编辑网页图像，而网页图像的大小将直接影响图像的质量和浏览速度。如何解决图像质量和浏览速度之间的矛盾，成为网页设计人员的工作重点。Fireworks提供了四种视图显示方式，即可编辑的原始视图、预览视图、2幅预览视图和4幅预览视图，方便网页设计者在编辑网页图像时直观地预览图像的显示效果，并且可以明确预知图像的下载速度。,5,11.2 绘制图形,Fireworks具有强大的绘图功能，绘制图形的方法可以使用位图绘制和绘画工具，剪切、复制和粘贴像素选区，或者将矢量图像转换成位图对象。另一种创建位图对象的方法是在文档中插入一个空的位图图像，然后对其进行绘制、绘画或填充。,6,11.2.1 绘图工具,【钢笔工具】 使用钢笔工具可以绘制直线、曲线以及封闭和开放路径。绘制直线时，选择【钢笔】工具，单击画布以放置第一个角点，移动指针，然后单击以放置下一个点。一条直线段将这两个点连接起来，继续绘制点，直线段连接点与点之间的每个间隙。执行下列操作之一结束该路径（路径为断开或封闭的）：双击最后一个点结束路径并使其成为断开路径。选择其他工具结束路径并使其成为断开路径。若要封闭该路径，请单击所绘制的第一个点。封闭路径的起点和终点相同。如果需要绘制曲线路径，在绘制点时单击并拖动。绘制时，当前点显示点柄。不论是使用【钢笔】工具还是使用其他Fireworks绘制工具进行绘制，所有矢量对象上的所有点都有点手柄，但这些手柄只在曲线点上才可见。,7,11.3 编辑图像,对图像进行编辑的软件很多，Fireworks是其中一款比较出色的网页图像编辑软件。Fireworks可以进行两种图像模式的编辑操作，一种是对基于路径的矢量对象（简称对象模式）的操作，另一种是对基于像素的图形对象（简称图像模式）的操作。与此相应，工具箱中的工具作用也各个不同，有些工具适用于处理对象模式，有些工具则适用于处理图像模式。,8,11.3.1 填充图像,填充就是为绘制的图形填充颜色或者图案。在Fireworks中可以利用填充功能来得到形象化的矢量图形，比如制作简单的按钮。,9,11.3.2 应用样式,样式主要用于图形及文字对样式的直接套用。在实际使用Fireworks制作诸如导航项目的背景时，除了自己动手制作以外，还有一种简单快捷的方法，那就是使用Fireworks的样式面板。【样式】面板位于浮动面板集中的【资源】面板中，利用样式制作一些简单的按钮，要使用这些样式，只需在绘制图形之后从中选择一个样式就可以了。,10,11.4 层与蒙版,到目前为止，我们对位图以及矢量图有了一定程度的认识，不过这还不够，因为还有Fireworks重要的概念图层以及蒙版，而蒙版通常被人们当作图形和图像的高级应用，事实上蒙版的应用极其简单，简言之，蒙版就是一幅图片，它的作用是掩盖住其他图片的一部分，不让它完全显示。现在就让我们开始了解Fireworks图层以及蒙版的应用。,11,11.4.1 层的基本操作,【层】把一个Fireworks文档分成不连续的平面，一个文档可以包含很多层，而每一个层又可以包含很多对象。在Fireworks中，【层】面板列出层以及每一层包含的对象。利用层面板不仅可以合并位图以及合并位图蒙版，还可以命名、隐藏、显示和改变层及对象的层叠顺序，利用层面板还可以添加和删除层。,12,11.6 制作与优化动画,在Fireworks MX 2004中制作动画的一种方法是通过创建元件并不停地改变它们的属性来造成运动的错觉。一个元件就像是一个演员，其动作是由你设计的。每个元件的动作储存在一个帧中。当按顺序播放所有帧时，就成了动画。,13,11.6.1 制作GIF动画,GIF动画的原理其实很简单，就是把几幅图像不停地轮流播放；而在Fireworks中动画里的每幅图像都以一个单独的帧存在，这里所说的帧是我们平时观看的电影，跟组成整部电