计算机网页设计与制作第2章网页素材制作

第2章网页素材制作

网页是由不同的媒体素材组成的，这些媒体素材也称为网页元素，主要包括文本、图像、超级链接、表格、动画、音乐和交互式表单等。在制作网页之前，首先要对网页素材有一定的了解，同时要掌握不同素材制作工具，只有具备了优秀的素材，才能够做出内容丰富、外表美观的网页，为此我们必须了解网页素材制作技术。本章我们将介绍网页素材的特点与制作方法，并重点介绍图形图像和网页动画制作技术，为后期制作网页打下基础。2.1网页文字素材

文本一直是人类最重要的信息载体与交流工具，网页中的信息也以文本为主。与图像相比，文字虽然不如图像那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文字固有的缺点，人们赋予网页中文本更多的属性，如字体，字号，颜色，底纹和边框等，通过不同格式的设置，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表，来清晰表达一系列项目。这些功能都给网页中的文本赋予了新的生命力。2.1.1文本素材的特点与属性1．文本素材的特点在现实生活中，文字（包括字符和各种专用符号）是使用最多的信息交流工具。用文本表达信息，可以给人以充分的想象空间，在多媒体作品中文字主要用于对知识的描述性表示，比如阐述概念、定义、原理和问题以及显示标题、菜单等内容。

多媒体素材中的文字有两种形式：文本文字和图形文字，它们的区别如下。（1）产生的软件不同文本文字多使用字处理软件（如记事本、Word、WPS等），通过输入、编辑排版后生成；而图形文字多需要使用图形处理软件（如画笔、3DSMAX、Photoshop等）来制作。（2）文件的格式不同文本文字为文本文件格式（如.TXT、.DOC、.WPS等），除包含所输入的文字以外，还包含排版信息；而图形文字为图像文件格式（如.BMP、.C3D、.JPG等），它们都取决于所使用的软件和最终用户所选择的保存格式，图像格式所占的字节数要大于文本格式。（3）应用场合不同文本文字多以文本文件形式（如帮助文件、说明文件等）出现在系统中；而图形文字可以制成图文并茂的艺术字，成为图像的一部分，以提高作品的感染力。

2．文本文件的格式对于文本信息的处理，可以在文字编辑软件中完成，如使用记事本、WORD、WPS等软件；也可以在多媒体编辑软件中直接制作。建立文本素材的软件非常多，而每种软件大都保存为特定的格式，于是就有了许多不同的文件格式。常用的文本格式有以下几种。（1）TXT格式纯文本格式。在不同操作系统之间可以通用，兼容于不同的文字处理软件。因无文件头，不易被病毒感染。（2）WRI格式一个非常流行的文档文件格式，它是Windows自带的写字板程序所生成的文档文件。（3）DOC格式由文字处理软件Word生成的文档格式，表现力强、操作简便。不过Word文档向下的兼容性不太好，用Word高版本编辑的文档无法在低版本中打开，在一定程度上影响了使用。

（4）WPS格式由国产文字处理软件WPS生成的文档格式，老版本的WPS所生成的*.WPS文件实际上只是一个添加了1024字节控制符的文本文件，它只能处理文字信息。而WPS97/2000所生成的*.WPS文件则在文档中添加了图文混排的功能，大大扩展了文档的应用范围。值得一提的是，WPS向下的兼容性较好，即使是采用WPS2000编辑的文档，只要没有在其中插入图片，仍然可以在DOS下的老版本WPS中打开。（5）RTF格式一种通用的文字处理格式，几乎所有的文字处理软件都能正确地对其进行存取操作。对相同的文本信息，不同的格式生成的文件大小不同。表2.1列出了不同文件格式存储一页16开版面信息的文件大小。

3．文字素材的属性丰富多彩的文本信息是由文字的多种变化而构成的。即由字体（Font）、大小（Size）、格式（Style）、定位（Align）等组合形成的。文字素材的属性一般包含以下内容。（1）字体（Font）由于计算机系统上安装的字库不是完全相同的，所以字体的选择也会有所不同。我们可以通过安装字库来扩充可选择的字体，它们默认保存在Windows系统下的Fonts文件夹中。字体文件的扩展名多为FON及TT（TrueType），TT支持无级缩放、美观、实用，因此，一般字体都是TT形式。常用的一些装饰标志也可以以字体的形式出现。（2）格式（Style）字体的格式主要有：普通、加粗、斜体、下划线、字符边框、字符底纹和阴影等。通过字体的格式设置，可以使文字的表现更加丰富多样。（3）大小（Size）字的大小在中文里通常是以字号为单位的，从初号到八号，由大到小；而在西文中却以磅为单位，磅值越大，字就越大。为了使用方便，表2.2列出了文字字号、磅以及毫米之间的对应关系。（4）定位（Align）字体的定位主要有：左对齐、右对齐、居中、两端对齐以及分散对齐。一般标题采用居中，其它应根据具体情况设置。（5）颜色（Color）对文字采用不同的颜色，可以使画面更加美观漂亮。在网页设计中巧妙地应用文本信息的各种属性，可以生成绚烂多彩的页面。常规的文字处理软件，在计算机基础课程中已经有所介绍，此处不再赘述，下面我们介绍一下动态文字制作与处理软件COOL3D。

2.1.2文字素材制作——COOL3D文字素材制作软件很多，大家熟悉的有：MSWord、写字板、记事本、国产文字处理软件WPS等，这些软件甚至可以制作出十分漂亮的艺术字，操作方法简单、易学。相信大家都有一定的文字处理基础。使用平面设计或三维设计等软件也可以制作出美丽的艺术字，这些内容在以后介绍。本节重点介绍两个艺术字制作工具：COOL3D和Swish，通过这两款艺术字处理软件的介绍，将会使大家制作的文档更加美观漂亮。

1．功能及界面介绍COOL3D属于文字制作软件，是Ulead公司出品的一个专门制作文字3D效果的软件，它可以方便地生成具有各种特殊效果的3D动画文字。UleadCOOL3D作为一款优秀的三维立体文字特效工具，主要用来制作文字的各种静态或动态的特效，如立体、扭曲、变换、色彩、材质、光影、运动等，并可以把生成的文字动画保存为GIF和AVI文件格式，因此广泛地应用于平面设计和网页制作领域。

最新的COOL3D3.5版本中，添加了对3D物体的制作，并能输出Flash格式的动画，使文本作品如虎添翼。运行“UleadCOOL3D3.5”程序，出现主界面，如图所示。

其主界面可分为上、中、下三部分，可自由调整各部分的大小及布局，上面部分是菜单栏与工具栏；中间部分是工作区域，即所见即所得的立体字图形制作区间；下面部分是特效工具箱，其中左侧是特效功能选项，右侧为该特效的示例。菜单栏包括File、Edit、View、Image、Windows、Help等六项，提供了常用的New（新建）、Open（打开）、Save（保存）、Print（打印）、Undo（撤销）、Copy（拷贝）、Paste（粘贴）、Cut（剪切）等命令和设置窗口布局以及帮助等功能。2．工具栏介绍工具栏中有众多的快捷命令按钮，主要有下述五种。①

对象工具栏。该工具栏如图2.2所示，主要用于插入及编辑文字、图形等。②对象编辑工具栏。如图2.3所示，包括以下三个按钮。图2.2文字对象工具栏

图2.3对象编辑工具栏移动按钮：通过拖动鼠标，来改变对象在屏幕上的位置。旋转按钮：通过拖动鼠标，使对象在某个方向上旋转。缩放按钮：缩小或放大对象。③面板调整工具栏。该工具栏如图2.4所示。COOL3D把文字对象看作是由五个部分组成的，分别是前面、前面的斜切边缘、边面、后面的斜切边缘和后面。许多效果可以选择施加到不同的面上，按钮按下就代表该面能被添加效果，缺省时是所有面有效。

图2.4面板调整工具栏图2.5精确定位工具栏④精确定位工具栏。该工具栏如图2.5所示。可以将对象精确定位。⑤

动画控制工具栏。该工具栏如图2.6所示。在动画控制工具栏中，可在“选择对象”下拉列表框中选择一种属性，然后针对这种属性制作动画。这时在关键帧标尺中显示的只是这种属性的关键帧，这样就可以只处理这种效果的动画，而不会影响其它的效果。

图2.6动画控制工具栏3．效果工具栏COOL3D中提供了强大的特效功能，使做出的立体字更加生动、丰富。其操作方法都是相同的，首先从左侧功能选择区中选择特效类型，然后，再在右侧列出的图例上双击，则该图例中的模式就会应用到工作区中所制作的立体字上。下面着重介绍工具箱中的六大类特效。①工作室（Studio）选项。Studio列表共有7种选项，如图2.7所示。作品（Compositions）选项：有5种做好的COOL3D范例供选用。背景（Background）选项：COOL3D默认的背景色是黑色的，如果未选任何背景图案，则新建图的背景色将是黑色的，COOL3D提供了大量的背景图案，可以通过选择这些图案使制作的图形具有指定的背景。组合对象（GroupedObjects）、形状（Shapes）、对象（Objects）：这三个选项中提供了现成的物体元素或组合，下图所示的就是Shapes中的5个可选元素。

运动（Motion）选项：可使文字有5种不同的运动方式。摄影机（Camera）选项：可以通过摄影机中的不同镜头选项，使图形以选定的角度显示，有5种摄影机镜头可供选择。②

对象风格（ObjectStyle）选项。如图所示，有图库、斜面、亮度颜色和纹理三种选项。

图库（Gallery）选项：所谓图库，就是预先设置好的一些光影、色彩、纹理、斜面等的组合，这里列出了5种可供选取，如果要选中某种立体风格，只要把鼠标移到图库中对应的风格图上，然后双击它，做出立体字的颜色和三维风格就会随之改变。斜面（Bevel）选项：用来决定3D对象的厚度、粗细，边缘是直角边还是圆角边。光线与色彩（Light&Color）选项：调整对象的阴暗与明亮，颜色的变化等。通过该选项，可以完成对所选对象的上光与上色，但要注意的是当选择了本选项时，既会对所选对象上光与上色，同时也将影响到图中的所有对象。

纹理（Texture）选项：用来设置对象的表面底纹。主要完成对所选对象表面进行花纹处理的功能，使该对象看起来具有木材、石料等材质的效果，有很多材质可供选择。综合运用斜面、光线与色彩、纹理可以任意设置想要的效果。③整体效果（GlobalEffects）。通过该选项，可以对整个图形进行一些特殊处理，如加入阴影（Shadow）、火焰（Fire）、闪电（Lightning）、使图形发光（Glow）等特效，从而使做好的立体字看起来更有特色。如图

是闪电特效。

④

对象效果（ObjectEffects）。该选项可以对选择的目标进行一些特效处理，如弯曲、倾斜、移动、旋转、跳动、扭曲、爆炸以及按一定的路径运动等。共有13类65种效果。如图是扭曲（Twist）效果。

⑤

过渡效果（TransitionEffects）。在制作视频文件或GIF动画时用来设置对象出现时的过渡效果。COOL3D提供了跳跃（Jump）、爆炸冲击波（Blast）、撞击（Bump）等15种动画效果，只要双击某个动画效果，所做的立体字就会按照对应的方式动起来。如图2.11是冲击波（Blast）效果。

图2.11Blast过渡效果⑥斜面效果（BevelEffects）。在对象风格中已经简单介绍了斜面特效，但那里只是简单的设置。进一步运用斜面效果，可以制作立体字招牌。如图是Hollow（空心）效果。

烙印（Imprint）效果：模仿将3D对象在招牌上刻成阴文。框架（Frame）效果：给3D对象加上花边。空心（Hollow）效果：将3D对象镂空在招牌上。招牌（Board）效果：模仿将3D对象在招牌上刻成阳文，正好与烙印（Imprint）效果相反。自定义斜面（CustomBevel）效果：允许用户自己设置立体字的倾斜角度、立体字的厚度和倾斜后的形状。

2.2图形图像素材图形和图像是人们非常乐于接受的信息载体，是网页中最重要的组成部分。一幅图画可以形象生动地表示大量的信息，具有其他媒体无法比拟的优点。图像在网页中具有提供信息，展示作品，装饰网页，表达个人情调和风格的作用。因此了解图形图像处理技术是非常必要的。2.2.1图形和图像在计算机领域，图形（Graphics）和图像（Picture或Image）是两个不同的概念。1．图形图形又称矢量图形。是计算机根据数学模型计算而生成的几何图形，如直线、圆、矩形、任意曲线和图表等。图形是由点、线、二维或三维图片构成的，构成图形的点、线和图片由坐标及相关参数生成。如用CorelDraw等绘制的图形。优点是可以不失真缩放、占用存储空间小。但矢量图形仅能表现对象结构，表现对象质感方面的能力较弱。2．图像图像是指由输入设备捕获的实际场景画面或以数字化形式存储的任一画面，是真实物体重现的影像。对图片逐行、逐列进行采样（取样点），并用光点（称为象素点）表示并存储，即为数字图像，又称为位图。图像主要用于表现自然景色、人物等，能表现对象的颜色细节和质感。具有形象、直观、信息量大的优点。但图像文件的数据量很大，存储一幅640×480大小、24位真彩色的BMP格式图像，约需900KB存储空间。所以需要对图像数据进行压缩，即利用视觉特征，去除人眼不敏感的冗余数据。目前最为流行、且压缩效果好的位图压缩格式为JPEG，其压缩比高达30:1以上，而且图像失真较小。图形和图像的共同特点是：二者都是静态的，和时序无关。它们之间的差别是：图形是用一组命令通过数学计算生成的，这些命令用来描述画面的直线、圆、曲线等的形状、位置、颜色等各种属性和参数；而图像是通过画面上的每一个像素的亮度或颜色来形成画面的；图形可以容易地分解成不同成分单元，分解后的成分间有明显的界限，而要将图像分解成不同的成分则较难，各个成分间的分界往往有模糊之处，有些区间很难区分该属于哪个成分，它们彼此平滑地连接在一起。2.2.2图像的文件格式在网页制作过程中，可以通过扫描仪、数字化仪或者光盘上的图像文件等多种方式获取图像，每种获取方法又是由不同的软件开发商研制开发的，因而就出现了多种不同格式的图像文件。常见的图形图像文件格式有以下几种。1．GIF格式（GraphicsInterchangeFormat）2．BMP格式（Bitmap）3．PCX格式4．TIFF格式（TaggedImageFileFormat）在网页制作中，我们可以使用GIF，JPEG(JPG)，PNG三种图象格式，其中使用最广泛的是GIF和JPEG两种格式。当用户使用所见即所得的网页设计软件，在网页上添加其他非GIF，JPEG，或PNG格式的图片并保存时，这些软件通常会自动将少于8位颜色的图片转化为GIF格式，或将多于8位颜色的图片转化为JPEG。2.2.3图像的属性参数图像的属性参数主要包含分辨率、像素深度、表示法和种类等。1.分辨率常见的分辨率有三种：显示（屏幕）分辨率、图像分辨率和像素分辨率。（1）

显示分辨率显示（屏幕）分辨率是指显示屏上能够显示出的像素数目。它与显示模式有关，例如，标准VGA图形卡的最高屏幕分辨率为640×480像素，整个显示屏就含有307200个像素点。同样大小屏幕能够显示的像素越多，分辨率就越高，显示的图像质量越高。（2）

图像分辨率图像分辨率与显示分辨率是两个不同的概念。图像分辨率是确定组成一幅图像的像素数目，而显示分辨率是确定显示图像的区域大小。如果显示器的分辨率为640×480，那末一幅320×240的图像只占显示屏的1/4；相反，2400×3000的图像在这个显示屏上就不能显示一个完整的画面，只能通过滚动的方式浏览全部图像内容。（3）

像素分辨率像素分辨率是指一个像素的宽和高之比，不同的像素的宽、高比将导致图像变形，因此在这种情况下必须进行比例调整。图像分辨率是指组成一幅图像的像素密度。同一幅图，如果组成该图的图像像素数目越多，则说明图像的分辨率越高，看起来就越逼真。相反，图像就显得粗糙。

2.像素深度像素深度是指存储每个像素所用的位（bit）数，它用来度量图像的颜色数。图像深度决定彩色图像的每个像素可能有的颜色数，或者确定灰度图像的每个像素可能有的灰度级数。位图中每个点的色彩深度可分为2色、16色、256色或16位、24位、32位真彩色等格式。如果用若干位表示位图中像素的颜色信息，这些位的个数（或称长度）就称为像素深度。深度为1的图像只能有两种颜色（黑色和白色），通常称为单色图像；深度为4的图像可以有16种颜色（24）；深度为8的图像可表示256种颜色（28）。

图像的每个像素都是用R（red）、G（green）、B（blue）三个分量表示的，即每个像素是由红、绿、蓝三种颜色按一定的比例混合而得到的，若每个分量用8位，那末一个像素共用24位表示，就说像素的深度为24，每个像素可以是224=16777216（16M）种颜色中的一种，由于组成的颜色数目几乎可以模拟出自然界中的任何颜色，所以也称为真彩色。

2.2.4图形图像的获取与输入计算机获取图像的方法常用的有以下几种。１.用图形工具软件生成２.图像扫描３.数字摄像输入４.利用录像机和电视机捕获图像５.视频抓帧６.从图片库中获取除去以上获取图片的方法外，我们还可以使用键盘上的PrintScreen键来截取显示器上的静止图像；通过Alt+PrintScreen键来截取当前活动窗口。截取后的图像存放在系统的粘贴板上，通过在应用程序中粘贴操作，将截取的内容展现在程序文件中。

2.3FireworksMX

FireworkMX是Macromedia公司的产品，是目前最流行的网页图像制作软件。只要将Dreamweaver的默认图像编辑器设为Fireworks，那么在Fireworks中制作完成网页图像后将其输出就会立即在Dreamweaver中更新。Fireworks还可以安装使用所有的Photoshop滤镜，并且可以直接导入PSD格式图像。更方便的是它不仅结合了Photoshop位图功能以及CorelDRAW矢量图的功能，而且提供了大量的网页图像模板供用户使用。其最方便之处是，它可以将图像切割，图像映射，悬停按钮，图像翻转等效果直接生成HTML代码，或者嵌入到现有的网页中，或者作为单独的网页出现。

2.3.1FireworkMX的界面1.界面组成FireworksMX安装运行后，主界面如图所示。FireworksMX的界面大致可以分为文档窗口、工具栏、工具箱、面板和菜单等几项。

（1）菜单栏FireworksMX的主菜单共有文件、编辑、视图、选择、修改、文本、命令、滤镜、窗口、帮助等十个主菜单项，每个主菜单项又有多个子菜单。（2）文档窗口FireworksMX的文件窗口上有四个标签，可以同时编辑和预览四种不同的优化设定所产生的效果，选择最理想的一种设定。（3）工具箱选择“窗口/工具”菜单，启动工具箱面板。工具箱面板由选择、位图、矢量、网页、颜色、视图等六个工具区域构成，包括各种选择、创建、编辑图像的工具。如图2.22所示。①

选择工具要修改对像，首先要选中对象，在FireworksMX中，有4种选中对像的工具：“指针”工具、“部分选定”工具、“缩放”工具和“剪裁”工具，它们在工具箱上部的位置。

②位图工具位于工具箱中第二个工具组，主要用于位图的编辑处理。

③矢量工具位于工具箱中第三个工具组，主要用于矢量图的编辑处理。④WEB工具对网页进行设置的工具。主要包括热点设置、切片工具、显示/隐藏热点（切片）工具。⑤颜色工具改变当前工作区的前景色和填充色。⑥视图工具改变当前的工作区的视图方式。包括标准屏幕模式、带菜单的全屏视图以及缩放工具和手形工具。

（4）浮动面板FireworksMX的浮动面板包括有层、帧、历史记录、颜色混合器、行为、优化和属性等面板。①属性面板：单击“窗口”菜单中的“属性”选项，出现属性面板，如图所示。其中包括文档名称、图像的大小、画布大小、图像颜色等属性的优化设置。单击相应按钮，完成对应的功能。

②信息面板：提供了所选中的对像的长、宽值和颜色信息，和x、y坐标等信息。同时，当鼠标在画布上移动时，也能观测所经过点的色彩和坐标信息，如图2.24所示。

图2.24信息面板

③优化面板和动作面板：优化面板用于优化文件输出大小和文件输出格式。动作面板管理那些能响应鼠标事件的热点和切片的动作。④层面板、帧面板和历史面板：层面板用来组织文档的结构，包括创建、删除、操纵图层和帧等各种功能；帧面板中有创建动画的选项；历史面板列出了最近使用过的命令，设计者可以方便快捷地撤销、重复做过的各种操作，也可以保存命令序列，生成一个可以重复使用的命令组。⑤

资源面板：提供样式、URL、库和形状面板等，主要用于对文本进行诸如图片一样的效果操作，如填充、效果、样式等设置。

2．文档操作FireworksMX的工作环境熟悉之后，我们开始介绍文档的基本操作方法。文档操作是FireworksMX中最基本的操作，包括新建文档、打开文档、导入文档等。在FireworksMX中，文档图像采用PNG格式。PNG是PortableNetworkGraphic（便携网络图像）的缩写，是一种新型的图像格式。（1）创建文档创建文档，就是创建一幅新的PNG格式的图像。可以直接创建一幅空白的图像文档，然后进行绘制和编辑，也可以利用剪贴板，从其他图像中复制图像数据。①创建新文档单击“文件”菜单中的“新建”命令，或者单击常用工具栏中的“新建”按钮，出现“新建文档”对话框，如图2.25所示。

图2.25新建文档

在对话框中设置画布的“宽度”、“高度”、“分辨率”、“画布颜色”等。设置完毕，单击“确定”按钮，即可打开新文档的编辑工作区。

②把已有的文档导入图像文件中选择“文件”菜单中的“导入”命令，在出现的对话框中，选择要导入的图像文件，单击“打开”按钮，对话框关闭。将鼠标移动到文档窗口中，鼠标指针变为一个折线形状，用于设置导入图像上角的起始位置，然后拖拉即可导入图像，图像的大小会根据拖拉的虚线框确定。如图所示。

如果希望以原始大小导入图像，可以在文档窗口中图像起始位置处单击鼠标，即可将图像导入。在程序窗口中，可以同时打开多个文档窗口，通过单击工作区间上部的文档标题进行切换文档。也可以采用单击“窗口”菜单中的“水平平铺”、“层叠”、“垂直平铺”命令来改变多个文档显示的方式。如图所示，为两张文档窗口的“水平平铺”效果（2）关闭文档关闭文档的方法，与其他应用程序相似，单击文档窗口右上角的“关闭”按钮即可。如果有多个文档窗口，将要关闭的文档窗口放置到最上端。也可以打开“文件”菜单，选择“关闭”命令。（3）保存文档对图像处理完毕后，必须保存文档，可以保存为PNG文档，也可以以导出的形式，将文档保存为JPEG或GIF等格式。①保存PNG文档选择“文件→保存”菜单，如果文档是新建的，并且尚未被保存过，则会出现标准的Windows文件存储对话框，选择要保存的文件路径，并输入文件名称，即可保存。②导出其它格式的文档假如我们希望将文档存储为JPEG格式的图像，这时可以按照如下方法进行操作：打开文档，使文档窗口显示在程序窗口中；选择“窗口”菜单中的“优化”命令，启动优化面板，如图所示.在下拉菜单中，选择文档格式，还可以设置图片的质量等属性；设置完成后，选择“文件”菜单中的“导出”命令，系统会根据设置，为文档添加扩展名，单击“保存”按钮即可。2.3.2矢量图像的绘制与编辑1．图像绘制模式的种类在FireworksMX中，有两种图像的绘制模式：对像模式和图像编辑模式。对像模式是编辑矢量图像时的模式，而图像编辑模式则是进行位图编辑时的模式。在利用FireworksMX创建新的文档时，进入的是对像模式，这种模式是默认模式。如果在FireworksMX中打开一幅位图编辑的话，则进入的模式是图像编辑模式。一般说来，处于对像模式时的图像画布四周没有边框，而如果看到一个有斑纹的边框出现在画布四周时，这时的模式就是图像编辑模式。2.图像绘制模式的切换对像模式和图像编辑模式之间可以进行切换，通常这种切换是自动进行的。例如，选择了某种工具，可能就自动进入了图像编辑模式，这时编辑的内容都是基于位图的；而选择了另外一种工具，可能就自动进入了对像模式，这时编辑的内容都是基于矢量的。在图像编辑模式中，可以通过以下几种方法来直接切换到对像模式：（1）从工具箱上选中任何一种选择工具，然后双击文档窗口画布中的任意位置，即可切换到对像模式。（2）使用一种只能在对像模式中才能使用的工具，例如文本工具，这时会自动切换到对像模式。（3）当文档处于图像编辑时，在程序窗口的状态行上会出现一个圆形红色的“×”形按钮(即停止按钮)，单击该按钮，即可返回到对像模式中。（4）在图像编辑模式中，按下Esc键，即可返回对像模式。

3．矢量图像的绘制绘制矢量图像就是绘制路径的过程，主要通过绘图工具箱中的工具完成。如图所示。在进行路径绘制时，可以在工具箱下方的笔画颜色区域选择需要的笔画颜色，而在工具箱下方的填充区域选择需要的填充颜色。在使用填充颜色时，只有在绘制矩形、椭圆和多边形时，才会自动填充设置的颜色，如果使用铅笔、画刷或钢笔绘制路径，路径内部不会填充颜色，必须在绘制完毕后选中对像，然后再从工具箱上的填充颜色区域选择需要的颜色。

路径绘制工具按钮右下角的小黑色箭头，表示该工具包含有具体的选择模式，如图2.30所示是图形工具的弹出菜单，鼠标左键按住工具按钮会弹出菜单以供选择，在弹出菜单中可选择图形的具体模式：矩形、椭圆、多边形等，如图2.31所示。

图2.30绘制路径工具

图2.31图形工具面板

（1）绘制直线绘制直线的方法十分简单，在工具面板中选中直线工具，在文档窗口中拖拉鼠标就可以绘制直线。如果希望绘制水平、垂直或者呈45º角的直线，则在拖拉鼠标的同时，按住Shift键。（2）绘制矩形、圆型、多变形等在工具面板中选择图形工具，在文档窗口中拖拉鼠标就可以绘制各类图形，如矩形、圆型、多变形等。如果希望标准的正方形、圆，则在拖拉鼠标的同时，按住Shift键。也可以在选定工具后，在属性面板中进行设置，制作不同形状的图形。矢量图绘制工具使用简单，很容易上手，和Windows自带的画图工具有点相似。请大家自由练习掌握。（3）改变图片文件的大小在网页制作过程中，我们常常需要改变图片文档的大小，操作步骤如下。①打开一个图片，此图片大小为宽1280，高960。现在修改图片，把这个图片变成宽400的图片，高度自动适应。

图2.32图片属性

②打开“修改”菜单，单击“画布”里的“图像大小”，如图所示。

③在弹出的对话框中，输入宽度值为400。如图所示。④选择“文件”菜单中的“导出”选项，给文件命名，保存即可，此时会发现文件大小已经发生改变。

2.3.4位图的编辑1．工具介绍FireworksMX是一款用于图像设计和网页设计的优秀应用软件，是编辑矢量图和位图的综合工具。新版本在原来基础上，增加了位图编辑处理功能，提供了更加丰富的位图编辑工具，这些工具和Photoshop中的工具十分相似。工具面板如图所示。

（1）选择工具“选取框”工具：用于在图像中选择一个矩型区域。“椭圆选取框”工具：用于在图像中选择一个椭圆区域。“套索”工具：用于在图像中选择一个自由变形区域。“多边形套索”工具：用于在图像中选择一个直边的自由变形区域。“魔术棒”工具：用于在图像中选择一个颜色相似的区域。（2）绘图工具“铅笔”工具：用于在图像中绘制单像素自由直线。“刷子”工具：用于在图像中绘制位图，和铅笔工具相似。“橡皮”工具：用于在图像中擦除所选位图对象或像素选区中的像素。（3）修饰工具“模糊”工具：用于在图像中强化或弱化局部区域，降低相邻像素的对比度，使图像更加柔和。“锐化”工具：与模糊工具相反，用于在图像中增加相邻像素的对比度，使图像的边缘更加清晰。“加深”工具：用来使细节部分变暗。设置不同的曝光度，该工具作用的程度不同，曝光度越高，作用越明显。“减淡”工具：用来使细节部分变亮，其含义同加深工具相反，曝光度设置越高，作用越明显。“涂抹”工具：模拟手指涂抹油墨的效果，在修正图像时可以使斑点与周围混在一起，使其不明显。

（4）图章工具及属性“橡皮图章”工具：用于在图像中克隆图像的部分区域。使用方法为：选择工具后，单击图像中某一区域设置源位置，取样指针变为十字型指针，在需要复制的地方拖拉鼠标即可完成克隆。若要改变克隆区域，则要按住Alt键，再单击源区域，然后再克隆。“替换颜色”工具：用于在图像中将一种颜色改变为另一种颜色。在属性面板中，设置想“更改”的颜色和“终止”的颜色。然后在图像中拖拉鼠标即可替换颜色。图2.43替换颜色属性面板

“红眼消除”工具：用于在人像中消除红眼。（５）填充工具“油漆桶”工具：用于在图像中填充颜色。“渐变”工具：用于在图像中按照一定的颜色变化来填充图像某个区域。（６）滴管工具“滴管”工具：用于在图像中选取一种颜色来指定新的前景色或填充色

2.3.6图像的优化与输出网页图像设计的最终目的是创建能够下载的优美图案，因此必须在最大限度保持图像品质的同时，选择压缩质量最高的文件格式，对图像进行优化、输出，达到整体效果最佳。1．图像的优化（1）图像优化的途径

①使用优化面板单击“窗口→优化”命令，启动优化面板。如图2.56所示。

图2.56优化面板

图中各项含义如下：GIF网页216：强制所有颜色为网页安全色。该调色板最多包含216种颜色。GIF接近网页256：将非网页安全色转换为与其最接近的网页安全色。该调色板最多包含256种颜色。GIF接近网页128：将非网页安全色转换为与其最接近的网页安全色。该调色板最多包含128种颜色。GIF最适合256：是一个只包含图像中实际使用的颜色的调色板。该调色板最多包含256种颜色。JPEG-较高品质：将品质设为80、平滑度设为0，生成的图像品质较高但占用空间较大。JPEG-较小文件：将品质设为60、平滑度设为2，生成的图像大小不到“JPEG-较高品质”的一半，但品质有所下降。动画GIF接近网页128：将文件格式设为“GIF动画”，并将非网页安全色转换为与其最接近的网页安全色。调色板最多包含128种颜色。通过优化面板，可以很方便的在工作区内进行图像优化，并且同时看到优化后的效果。在优化面板上预先设置了几种优化设定可供选择，也可以按照自己的需要进行设定。②切片优化可以对分割的图像的每一个切片进行不同的优化设定，比如我们可以将图像上色彩丰富的部分设置为jpeg格式，色彩单一的部分设置为gif格式。③优化效果预览单击文档窗口上的“预览”标签，可以预览优化后的效果。单击“2幅”标签和“4幅”标签可以比较几种不同的优化设定所产生的效果。④

JPEG选择压缩JPEG选择压缩可以对图像的不同区域选择不同的压缩比率，在图像比较重要的部分可以选择较高的质量，不太重要的部分可以压缩得大一些。

2．图像的输出（1）常规输出①选择“文件”菜单中的“保存”或者“另存为”可以直接进行输出。

②选择“导出”输出图像。（2）输出一个图像的区域

①选择工具箱中“选择”工具区里的“导出区域”工具，选择需要输出的区域范围。

②双击输出区域，跳出输出预览窗口，在输出预览窗口内可以调整图像输出的设置。

③最后单击“导出”按钮就可以输出图像。（3）输出切片将一幅大的图像使用切割工具分成一个个小的切片以后，就需要把这些切片输出。①选择“文件”菜单中的“导出”命令。②

在“切片”选项栏下有几个选项：

l

无：忽略所有的切片对像，输出成当前格式的整幅图像。l

导出切片：该默认的设置输出切片包括所有的行为设置。l

沿引导线切片：输出切片，但忽略所有该对像的行为设置。如果只输出选中的一个或几个切片，可以勾选下面的“仅已选切片”。（4）输出Flash格式可以将图像和动画输出为flash的Swf格式

①选择“文件”菜单中的“导出”选项，弹出设置对话框。②选择保存类型下拉表中的“MicrosoftFlashSwf”，单击“选项”按钮弹出设置对话框，对导出的动画进行设置。设置完成后保存导出文件。

（5）使用“导出向导”如果对优化和导出网页图像不太熟悉，可以使用“导出向导”帮助完成这些工作。“导出向导”通过问题和建议逐步引导完成优化和导出过程，即使不了解优化和导出的细节，也可以轻松导出图像。2.4网页声音素材声音是多媒体网页的一个重要组成部分。目前存在着不同类型的声音文件和格式，可以采用不同的方法将这些声音添加到Web页中。在决定添加声音之前，需要考虑的因素包括其用途、格式、文件大小、声音品质和浏览器差别等。不同浏览器对于声音文件的处理方法是不同的，彼此之间可能存在不兼容情况。支持网络的声音文件的格式很多，常用的有MIDI、WAV、MP3和AIF等。在设计使用这些文件的格式时，需要加以区别。很多浏览器不要插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。一般来说，不要使用声音文件作为背景音乐，否则影响网页的下载速度。可以在网页中添加一个打开声音文件的链接，让声音播放可以控制。视频文件的格式也非常多，常见的有Realplayer，MPEG，AVI和DivX等。视频文件的采用让网页变得精彩而有情感。

2.4.1声音文件格式与特点声音文件格式很多，常用的主要有以下几种。1．WAV格式2．MIDI格式3．MP3格式4．CD-DA格式5．VOC格式

2.4.2音频编辑工具软件现成的一些声音素材，往往并不符合我们的需要，通常要经过编辑处理后才可以使用，这样，音频编辑软件便应运而生了。目前，各种各样的音频编辑软件一般都有友好直观的操作界面，只是在处理的细节上各有特点，如Windows自带的录音机，尽管功能不是很强大，但它确实是小巧实用；AnimatorStudio中的

SoundLab和UleadMediaStudio中的AudioEditor都非常不错；超级解霸中的音频解霸能将波形文件存为MP3格式的文件；同时，一些声卡自带的声音处理软件也很方便，像SoundBlaster系列所带的WaveStudio等。因此，只要掌握了其中的一种，便可触类旁通。

2.5网页动画素材

随着计算机技术的发展，人们对计算机动画已不再感到陌生，从日常生活中的动画电影到多媒体课件中的动画演示，人们逐渐地接受了这种直观生动的媒体形式。电脑动画以其生动、形象、直观等突出特点，为多媒体课件和网页制作增添了无穷的活力，动画媒体可以使制作的网页更加富有个性特色和感染力，起到事半功倍的效果.2.5.1动画的概念和分类1.动画的基本概念动画是由很多内容连续且互不相同的画面组成的。动画利用了人类眼睛的视觉暂停效应。人在看物体时，画面在人脑中大约要停留1/10~1/20秒，如果每秒有十多幅或更多画面进入人脑，那么人们在来不及忘记前一幅画面时，就看到了后一幅，形成了连续的影像。这就是动画形成的基本原理。图像显示所需的最慢速度因图而异，较高的速度会使动作看起来较流畅，较慢的速度会使图像闪烁或产生跳动性的画面。卡通动画的播放速率为每秒12或24张，电视画面播放速率为每秒25帧。传统动画的画面是由大批的动画设计者手工完成的。在制作动画时必须人工制作出大量的画面，一分钟动画所需的画面约在720到1800张之间，用手工来画制图像是一项很大的工程，因此就出现关键帧。关键帧是由经验丰富的动画大师绘制的主要画面，关键帧之间的画面称为中间画面，中间画面则由助手画出。随着计算机技术的发展，动画技术也从原来的手工绘制进入了电脑动画时代。使用电脑制作动画，表现力更强，内容更丰富，制作也更简单。经过人们不断的努力，电脑动画已从简单的图形变换发展到今天真实的模拟现实世界。同时，电脑动画制作软件也日益丰富，且更易于使用，制作动画也不再需要十分专业的训练。2.动画的分类动画从本质上说，分为两大类：帧动画和矢量动画。帧动画是由一帧一帧的画面，连续播放而形成的。这种动画也是传统的动画表现方式，构成动画的基本单位是帧。我们创作帧动画时就要将动画的每一帧描绘下来，然后将所有的帧排列并播放，工作量会很大。现在我们使用计算机作为动画制作的工具，只要设置能表现动作特点的关键帧，中间的动画过程会由计算机计算得出。这种动画常用来创作传统的动画片、电影特技等。矢量动画是经过计算机计算生成的动画，表现为变换的图形、线条和文字等。这种动画画面其实只有一帧，通常由编程或是矢量动画软件来完成的，是纯粹的电脑动画形式。动画从表现形式上，又分为二维动画、三维动画和变形动画。二维动画是指平面的动画表现形式，它运用传统动画的概念，通过平面上物体的运动或变形，来实现的动画，具有强烈的表现力和灵活的表现手段。创作平面动画的软件有Flash、GIFAnimator等。三维动画是指模拟三维立体场景中的动画效果，虽然它也是由一帧帧的画面组成的，但它表现了一个完整的立体世界。

2.5.2FlashMX介绍1．FlashMX特点Flash是一款用于矢量图创作和矢量动画制作的专业软件，主要应用在网页设计和多媒体制作中，具有强大的功能且性能独特。Flash制作的矢量图动画大大增加了网页和多媒体设计的观赏性。由于它存储容量小，而且具有矢量图的特性，放大而不失真，图像效果清晰、可以同步音效等特点，因此很快受到了广大设计人员和电脑爱好者的青睐。FlashMX是Macromedia公司的产品，是目前最流行的矢量动画制作软件。与其它的动画软件相比，它具有一些优点：（1）制作的是矢量图像。只要用少量矢量数据就可以描述一个复杂的对象，而占有的存储空间只是位图的几千分之一，非常适合在网络上使用。同时，矢量图像不会随浏览器窗口大小的改变而改变画面质量。（2）使用插件方式工作。

（3）提供了一些增强功能。例如，支持位图、声音、渐变色和Alpha透明等。拥有了这些功能，用户就完全可以建立一个全部由Flash制作的站点。（4）Flash影片也是一种流式文件。这就是说，浏览者在观看一个大动画时，可以不必等到影片全部下载到本地在观看，而是可以随时观看，即使后面的内容还没有完全下载，也可以开始欣赏动画。

2．FlashMX界面组成Flash的最新版本是MX版本，安装后程序界面如图2.62所示。

图2.62FlashMX主界面窗口的最上面是标题栏，当前影片自动给了一个名称“无标题-1”，在“保存”文件时要改为一个有意义的文件名称。标题栏下面是菜单栏，菜单是一组命令，其中存放着各种操作命令。菜单栏下面是工具栏，其中显示的是最常用的菜单命令，而且是用图标来表示的。工具栏下面就是工作区了，在工作区的左边是工具箱，里面有许多的绘图和修改工具，跟Windows中的画图程序差不多，按钮功能如图所示.

工作区上部是时间轴窗口，该窗口分成了两部分，如图2.64所示。左边是图层面板，其中有一个黑色的“图层1”标题，标题上面有三个按钮：一个眼睛、一个小锁和一个方框，用来控制图层操作，下部有四个按钮用来控制图层的添加、删除、选中等操作。右边是时间轴，上面有许多小格子，每个格子代表一帧，整数的帧上有数字序号，而且颜色也深一些，一帧可以放一幅图片，动画就是由许许多多帧组成的。帧上面有一个红色的线，这是时间指针，表示当前的帧位置，同时下面的时间轴状态栏也有一个数字，用来表示第几帧。

图2.64时间轴窗口时间轴的下面白色区域是工作区，也称为场景。所有的画图和操作都在这个白色的区域中实现，也只有这个区域的图像才能在动画中播放出来。2.5.3FlashMX基础概念1．帧帧代表动画中的图像，很多的帧以顺序排列播放就形成了动画。帧具有时间性：一是它自身的长度，就是显示一帧从头到尾的时间，我们可以调节帧率来控制一帧的长度；二是一帧在帧序列中的位置，不同的位置会产生不同的动画效果。2．关键帧Flash采用关键帧处理技术的插值动画，这样在Flash中只要设置动画的开始帧和结束帧，中间的帧动画效果就会由计算机自动计算完成，而设定的开始帧和结束帧就称为关键帧。在动作多变的动画中，有时就需要设置两个以上的关键帧来表示动画在特定时间位置的动作。

3．元件在Flash动画中大量的动画效果是依靠一个个小物件、小动画组成的，这些物件在Flash中可以进行独立的编辑和重复使用。这些物件和动画就称为元件（也称为符号）。元件分为三种：影片剪辑元件、按钮元件和图形元件。图形元件可以是单帧的矢量图、图像、声音或动画，它可以实现移动、缩放等动画效果，同时具有相对独立的编辑区域和播放时间，在场景中要受到当前场景帧序列的限制。按钮元件是Flash实现交互性的重要组成部分，它的作用就是在交互过程中激发某一事件。按钮元件可以设置四帧动画，表示在不同操作下的四种状态：一般、鼠标经过、鼠标按下和反应区。影片剪辑元件（也称为动画片段符号）和图形元件有一些共同点，影片剪辑元件不受当前场景中帧序列的影响。影片剪辑元件和按钮元件要通过“控制”菜单下的测试影片和测试场景命令才能观看到效果。

4．层同Photoshop一样，Flash也有图层的概念，其作用也和Photoshop中的相似，这样就可以单独编辑每层的内容而不必担心会引起误操作。同时，为了动画设计的需要，Flash还添加了遮罩层和运动引导层。遮罩层决定了与之相连接的被遮罩层的显示情况。遮罩层相当于一个完整的罩子，而里面的动画就像罩子上的洞，可以看到下面被遮罩层的图形；也可以理解为与普通层刚好相反，有动画的地方表示透明，而没有动画的地方表示遮罩。在设置动画沿路径运动的时候，我们就可以设置运动引导层。用户可以在运动引导层中绘制曲线路径，而与之相连接的被引导层中的对象则沿着此曲线路径运动。单击图标就可以新建一个运动引导层。5．时间线也称为时间轴或时间链，是表示整个动画的时间和动画进程之间关系的。帧在时间线中以时间先后顺序排列，也表示了动画发生的顺序。在时间线面板上包含了层、帧和动画等元素，在这里可以设置不同层在不同时间发生动作的每一帧动画。

2.5.5FlashMX动画输出FlashMX动画的输出，共有三种方式，分别适用于不同的场合。1．保存或另存为单击“文件”菜单中的“保存”或“另存为”选项，选择文件保存的路径和文件名，该方式文件格式为Fla（Flash文档），为Flash默认的文件格式，如果最终文件要保留具体的图层信息和后期的可编辑权，就采用该方式，该方式文件比较大。2．导出影片如果最终文件直接输出成影片，就用导出影片方式。单击“导出”菜单中的“导出影片”选项，出现对话框，如图2.76所示。

图2.76导出影片对话框

输入要保存的文件名，选择保存位置，如果需要，还可以在“保存类型”下