第十章 美化网页

通过本章学习，应该掌握以下内容：Photoshop基本操作利用Photoshop7.0处理网页图像Fireworks8基本操作利用Fireworks8美化网页图像Flash8基本操作利用Flash8处理网页动画第10章

美化网页

10.1使用Photoshop7.0美化网页

Photoshop是美国Adobe公司自80年代推出的图像处理软件，是目前功能最为强大、最为流行的图形处理软件之一。它以强大的图像处理功能和丰富的美术处理技巧，为众多专业人士所青睐。在进行网页制作时，Photoshop更是不可缺少的得力助手。它可以通过一些简单操作对已有的图片、照片等素材进行进一步的修饰、合成，以达到美化网页的效果。

支持大量的图像文件格式。

文本处理更加方便，可以在任何时候修改文本内容，并可以对文本层进行多种格式设置。

增强的色彩功能，提供了更广泛的色彩范围。

增强图层的功能，可以建立文本层、效果层，并增加了图层操作命令。使用效果层可以轻而易举地实现多种特效。

10.1.1Photoshop的特点及功能

丰富的滤镜功能。新增了近百种滤镜，能充分地展现出创作者的设计风格。具有“Actions（动作）选项板”，能对图像处理操作进行有效的控制管理，对于大量的图像文件可进行批处理操作。

无限的撤消和重复操作为图像处理提供了更广泛的空间。新增了“魔术棒”、“磁性套索”等工具，使选区更加精确，并可对图像进行旋转、拉伸、扭曲等自由变换。

10.1.2Photoshop7.0的基本操作

菜单栏位于标题栏的下方，其中包括有关图像编辑处理的操作命令。共有9组下拉式菜单，即“文件”、“编辑”、“图像”、“图层”、“选择”、“滤镜”、“视图”、“窗口”和“帮助”菜单。

（1）“文件”菜单文件菜单主要用于图像文件的新建、打开、保存、导入、导出、打印等。

1．菜单栏的使用（2）“编辑”菜单编辑菜单中包括了还原、消褪、剪切、拷贝合并拷贝、粘贴、粘贴入、清除、填充、描边、自由变换、变形、定义图案、清理、预置等操作命令。（3）“图像”菜单“图像”菜单中主要对图像文件进行模式变化、色彩调节、图像的复制和混合、图像和画布大小调整、图像的旋转、裁切、修整等操作。（4）“图层”菜单“图层”菜单主要用来对图层进行各种操作和调整。

（5）“选择”菜单“选择”菜单中包括了全选、取消选择、重新选择、反选、色彩范围、羽化、修改、扩大选取、选取相似、变换选区、载入选区、存储选区等操作命令。

（6）“滤镜”菜单“滤镜”菜单主要用来对图像进行特殊处理，使图像的风格发生改变。

（7）“视图”菜单“视图”菜单主要用来控制图像显示的形态。

（8）“窗口”菜单“窗口”菜单主要用来打开Photoshop提供的各种浮动式对话框。该菜单允许用户将窗口层地叠或平铺，排列图标，显示或隐藏工具箱、选项栏、状态栏、信息、导航器、颜色、样式、图层、通道、路径、历史记录、动作等控制面板。

（9）“帮助”菜单主要提供各种有关的帮助信息。

Photoshop的工具箱包括了选区工具、绘图工具、编辑工具、填充工具、文本工具、前景和背景颜色选择框以及显示模式选择等50多种工具，可分别用于绘图、编辑处理图像、选区设定、屏幕模式选择等。工具箱一般出现在屏幕的左侧，也可以用鼠标按住其标题栏，拖动到屏幕的其他位置上。

（1）绘图工具绘图工具包括“毛笔”、“铅笔”、“图章”、“直线”工具等，利用这些工具可以在图像或选区中直接进行创作。2．工具箱的使用（2）选区工具“选区”工具用于在图像上选出特定的区域。选区设定后，区域边界上会出现不断流动的虚线，虚线内部就是选定区域。（3）编辑工具编辑工具主要对图像进行进一步的修饰。包括“移动”、“橡皮擦”、“裁剪”、“涂抹”、“模糊”、“锐化”、“减淡”、“加深”、“海绵”工具等。

（4）填充工具填充工具可对封闭的选区填充颜色或图案，包括“油漆桶工具”、“渐变工具”。（5）文字工具文字工具可以在图像中加入文字对象。选中该工具在图像区单击，会弹出文字对话框。从中可设置字体、文字大小、间距、对齐方式等文字属性，还可选择文字显示为扇形、弧形、贝壳形、波浪形等，也可选择文字的排列方向为竖排或横排。（1）导航器控制面板导航器控制面板用来观察图像，它以一个小窗口显示整个图像。（2）色板控制面板此面板也可用来改变前景色和背景色。（3）样式控制面板在样式控制面板中有许多现成的样式供用户直接使用。

3．控制面板的使用（4）图层控制面板通常情况下，使用Photoshop软件生成新文件时至少有一个背景层。用户在进行图像创作时可增加若干层，将组成图像的不同部分分别放在不同的层中。每个层都可以单独操作，对当前图层进行的操作不会影响到其他图层。

（5）通道控制面板通道控制面板用于创建和管理通道。通道不仅可以存放图像的颜色信息，还可以用来建立和存储选择区域。

（6）历史记录控制面板历史记录控制面板用来记录用户对图像的每一个操作，并根据执行的操作命令自动命名。它可帮助用户恢复到操作过程中的任何一步，可以完全恢复当时的状态。

10.1.3利用Photoshop美化网页

在对Photoshop软件有了初步认识之后，下面结合示例网页中的两个具体图片来介绍如何利用该软件来美化网页。示范演示：

1．制作首页特效图片

2．“办公电话”页面中“美丽的校园”图片的处理

10.2利用Fireworks8美化网页将Fireworks8程序安装完毕后，单击Windows“开始”菜单按钮，在显示的菜单中选择“程序”选项，在程序选项中此时将会显示出Windows所安装的程序列表，接着选择“程序”列表中Macromedia下的MacromediaFireworks8选项，即可启动Fireworks8程序用户界面。1．Fireworks8工作界面

10.2.1利用Fireworks8制作网页图片

（1）标题栏

Fireworks8中的标题栏主要用于显示软件名称和当前所编辑文件的名称。（2）菜单栏

Fireworks8的菜单栏中提供了10项下拉式菜单功能，使用这些菜单中的各个命令可以完成对于当前文件的编辑操作。

（3）工具箱在Fireworks8中，图像处理工具都放在工具箱中。工具箱通常固定在窗口的左边，也可以用鼠标拖动工具箱，改变它在窗口中的位置。（4）工具栏在Fireworks8的主要工具栏中提供了一些工作中常用的基本工具。这些工具按钮是一些常用菜单命令式操作选项的快捷方式.（5）属性面板属性面板用来显示所选对象或工具的属性，用户可以通过属性面板来调节这些属性。（6）状态栏

Fireworks8的状态栏位于用户界面的最底部，是显示用户操作的信息的位置。

（7）浮动面板

Fireworks8中的浮动面板组位于用户界面的右侧，控制着对象的更大范围的特征，包括对矢量对象的描边、填充等。浮动面板占去用户界面上很多空间，有时对操作带来不便。此时，可以按一下键盘上的“Tab”键，将显示的浮动面板一起隐藏，再一次按下键盘上的“Tab”键，还可以将浮动面板还原显示。2．Fireworks8基本操作（1）画面显示与调整与显示相关的功能主要位于“视图”菜单中。包括：放大、缩小、缩放比率、选区符合窗口大小、文档符合窗口大小、完整显示、隐藏所选、显示全部等。（2）对象选择方法和对象选择相关的几个工具为：“指针”工具、“部分选择”工具、“选择后方对象”工具、“导出区域”工具和位图对象选择工具。导航栏实际上是一组互斥按钮，因此，只要创建一个按钮，然后将其复制并适当修改其文字提示及链接就可以了。示范演示：制作示例网页导航栏3．利用Fireworks制作示例网页导航栏10.2.2将Fireworks8制作的图片放到网页上将制作的图片放到网页中，需要进行如下操作：（1）将图片或符号文件复制到Dreamweaver8管理的网站的本地文件夹中；（2）在Dreamweaver8的网页文件内选定要放图片的位置，然后选择“插入”|“图像”命令，打开“选择图像源”对话框；（3）在“选择图像源”对话框内选择要使用的图片或符号，然后单击“确认”按钮。10.3利用Flash8制作网页动画10.3.1利用Flash8制作网页动画

Flash是美国Macromedia公司出品的矢量图形编辑和动画创作专业软件，被广泛应用于网页设计和多媒体创作等领域。利用该软件制作的图形和动画具有文件品质高、体积小、交互性强、可带音效和兼容性好等特点，因而用它可创作出美观生动而极为复杂的网页作品。1．Flash8简介

（1）有关动画的一些基本概念①帧（Frame）

Flash在制作动画时，是由若干个帧来组成一个动画效果的。帧是装载Flash作品内容、进行Flash作品播放的基本单位，也是Flash动画的基本组成元素。Flash的时间线面板上的每一小格代表一帧。

帧有以下几种类型：关键帧、关键帧和中间过渡帧。

②组件（Symbol）与实例（Instance）组件只是一种人为的规范，它指的是动画中一些出现频率较高的物件对象。组件通常存放在图库中，使用时再把它从图库中拖曳出来。有人把组件形象地比喻为存储起来的演员，随时可以调出来扮演角色。把组件从图库中拖曳到舞台工作区中，就得到了组件的一个实例。可以把组件想象成一个源文件，它的实例就是它在不同地方的复制。

③层（Layer）层是为了方便操作者制作复杂的Flash动画作品而引入的一种手段。在时间线面板上，每个层都有各自的时间线。在每个层中都包含了一系列的帧，在各层中所使用的帧均是独立的。可用控制器来播放某个场景的动画效果。播放动画时，会从每个层的第一帧开始播放（即同步播放），不同层中的帧在同时播放中可以得到综合的效果。

④

场景（Scene）一个Flash作品可以由若干个场景组成，每个场景都分别拥有各自独立的动画内容。每个场景中的层和帧均相对独立。在播放时，Flash会自动按场景的顺序进行播放。⑤

影片一个或几个场景就可以组成一个影片。

Flash8的界面由以下几个部分组成：标题栏、菜单栏、标准工具栏、绘图工具栏、状态栏、时间线面板、控制器、工作区等。

（2）Flash8的界面组成①

菜单栏除了绘图命令以外的绝大多数命令都可以在菜单栏中实现。②常用工具栏常用工具栏也叫标准工具栏，它位于菜单栏的下方，该工具栏除了提供了多个用于文件和编辑操作常用的命令按钮外，还提供了几个Flash8所特有的工具按钮。

③控制工具条

Flash8的控制器是用来控制动画播放的，它是浮动面板，它可以在“窗口”菜单中的“工具栏”子菜单中打开或关闭，也可以用鼠标移动其位置。④工具栏工具栏即绘图工具栏，一般情况下出现在窗口的左边，也可用鼠标改变其位置。该工具栏提供了用于图形绘制和编辑的各种工具按钮。⑤工作区工作区位于窗口的中央，动画就是在这个舞台上生成和演出的。

⑥属性面板使用属性面板可以轻松地访问和更改文档最常见的属性。用户可以在属性面板中更改文档属性，而不用访问包含这些功能的菜单或面板。⑦时间线面板时间线面板是浮动面板，其预设位置在标准工具栏的下方，是用来管理不同场景中的层与处理帧的。

①帧的操作

改变帧的播放速率在默认情况下，Flash动画每秒播放的帧数为12格（帧/秒）。数值越大，播放帧数就越多，速度也就越快，动画的效果就越顺畅；反之，数值越小，速度就越慢，动画播放时就会有很明显的停格的现象。

（3）Flash8中的一些基本操作帧的选择用鼠标单击某一帧，该帧即被选中，并且成为当前帧，同时在工作区中显示出该帧中的内容。如果想一次选取许多帧，可以在所要选取的起始帧处，按下鼠标左键不放，同时拖曳鼠标至所需位置即可。或者先用鼠标单击起始帧，然后按下“Shift”键不放，在所要选取的终止帧处单击鼠标左键，这样做也可以同时选中多个帧。

创建各种类型的帧

在时间线上需要新建静止帧的位置处单击鼠标左键，然后选择“插入”|“帧\关键帧

\空白关键帧”命令，或单击鼠标右键，在弹出的菜单中选择“插入帧”，就可在所需位置上创建一个包含有与前一帧相同内容的帧。复制帧复制帧的方法为：首先将需要复制的一个或者多个帧选中；在其上单击鼠标右键，从弹出的菜单中选择“复制帧”命令；用鼠标单击需要粘贴的位置，再单击鼠标右键，从弹出的快捷菜单中选择“粘贴帧”命令，即可将相同的内容复制到所需的位置上。删除帧首先选取帧，然后选择“插入”|“删除帧”命令，或者是在被选中的帧上单击鼠标右键，从弹出的快捷菜单中选择“移除帧”命令，

②

层的操作

添加层在层编辑区的左下角的第一个按钮为“插入层”按钮，按下它之后，即可在当前所编辑的层上面插入一个新层；也可以在当前层上单击鼠标右键，从弹出的菜单中选择“插入层”选项，来新增一个层。

层的重命名在默认状态下，层名为“层1”、“层2”、…、“层n”，若想改变层的名称，可先选中该层，然后在层名上双击鼠标左键，此时出现一个小方框，只要在其中输入新的层名即可。

调整层的顺序如果想要改变层的先后顺序，可以用以下的方法：先用鼠标单击所要调整的层，把它选中；然后按住鼠标左键不放，同时拖动之，把它拖到所要放置的地方；再放开鼠标左键。

删除层选取要删除的层，在其上按住鼠标不放，把它拖至时间线面板上的层编辑区右下角的“删除层”按钮处即可；或在要删除的层上单击鼠标右键，从弹出的菜单中选取“删除层”命令。

③

场景的操作

新增场景选择“插入”|“场景”命令，即可新建一个场景；或选择“窗口”|“场景”命令，此时会弹出一个“场景”对话框，在对话框中单击添加场景按钮即可。

场景的更名选择“窗口”|“场景”命令，在打开的场景对话框中选中要更名的场景，然后双击鼠标左键，出现一个文本框，直接输入一个名称即可。

当前场景的切换

场景切换可按如下方法进行：在场景对话框中直接单击所需场景名；或单击“视图”菜单，从中选择“跳转到”选项，在该选项中再选择所需要的场景名称即可。删除场景

删除场景的方法如下：选择“插入”|“删除场景”菜单命令，即可将当前的场景删除；或选择“窗口”|“场景”命令，在弹出的场景对话框中，选择要删除的场景名，然后单击“Delete”按钮即可。

（1）Flash动画的类型

Flash动画分为两种类型：逐帧动画（frame-by-frameanimation）和过渡动画（tweenedanimation）。

逐帧动画是由位于时间线上的同一动画轨道上的一个连续的关键帧序列组成。每一个过渡动画序列由两个处于两端的关键帧和位于中间的一个过渡帧序列组成，两个关键帧分别定义了该动画序列的开始和结束的状态，过渡帧序列产生动画的中间效果。

2．利用Flash8制作网页动画

①

创建逐帧动画

由于逐帧动画需要对每一帧中的内容进行逐个的制作和编辑，因此对动画的效果具有很强的控制能力，适合于制作较为复杂的动画。但是，由于该类动画数据量大、编辑工作既耗时又复杂艰巨，故除非确实需要如此，否则应尽量避免采用该类动画。

（2）Flash动画的制作②创建过渡动画与逐帧动画不同，过渡动画是由起始和终止两个关键帧，以及由这两个关键帧