通过本章学习，应该掌握以下内容：
1,Photoshop基本操作
2,利用 Photoshop 6.0处理网页图像 利用
Dreamweaver编辑各种超连接的方法
3,Fireworks 4.0基本操作
4,利用 Fireworks 4.0美化网页图像
5,Flash5基本操作
6,利用 Flash5处理网页动画
第 9章 美化网页
9.1 使用 Photoshop 6.0美化网页
9.1.1 Photoshop的特点及功能
新版 Photoshop软件增加了许多新功能, 设计了更加友好的
界面, 提供了更为方便的操作工具 。 它主要具有以下特点及功
能：
1,支持大量的图像文件格式,
2,文本处理更加方便,可以在任何时候修改文本内容, 并可以对文
本层进行多种格式设置 。
3,增强的色彩功能, 提供了更广泛的色彩范围 。
4,增强图层的功能, 可以建立文本层, 效果层, 并增加了图层操
作命令 。
5,丰富的滤镜功能 。
6,具有, Actions（ 动作 ） 选项板,, 能对图像处理操作进行有效
的控制管理,
7,无限的撤消和重复操作为图像处理提供了更广泛的空间,
8,新增了, 魔术棒,,, 磁性套索, 等工具,
9.1.2 Photoshop 6.0的基本操作
Photoshop 6.0的界面主要由标题栏, 菜单栏, 工具箱, 选项栏,
控制面板和状态栏组成,
1,菜单栏的使用
（ 1）, 文件, 菜单
（ 2）, 编辑, 菜单
（ 3）, 图像, 菜单
（ 4）, 图层, 菜单
（ 5）, 选择, 菜单
（ 6）, 滤镜, 菜单
（ 7）, 视图, 菜单
2,工具箱的使用
工具箱一般出现在屏幕的左侧, 也可以用鼠标按住其标题栏, 拖
动到屏幕的其它位置上 。
（ 1）绘图工具
绘图工具包括, 毛笔,,, 铅笔,,, 喷枪,,, 印章,,
,直线, 工具等, 利用这些工具可以在图像或选区中直接进行创
作 。
（ 2） 选区工具
,选区, 工具用于在图像上选出特定的区域 。 选区设定后, 区域
边界上会出现不断流动的虚线, 虚线内部就是选定区域 。
（ 3） 编辑工具
编辑工具主要对图像进行进一步的修饰 。 包括, 移动,,, 橡
皮擦,,, 裁剪,,, 涂抹,,, 模糊,,, 锐化,,, 减淡,,
,加深,,, 海绵,,, 缩放,,, 抓手, 工具等 。
（ 4） 填充工具
填充工具可对封闭的选区填充颜色或图案, 包括, 油漆桶工
具,,, 渐变工具, 。
（ 5）文字工具
文字工具可以在图像中加入文字对象。选中该工具在图像区单
击，会弹出文字对话框。
（ 6） 其它工具
利用, 注释工具, 可为图像添加文字注释或语音注释 。
利用, 测量工具, 可测量图像中两个像素点之间的距离, 角度等 。
利用“颜色拾取工具”可从图像中拾取某一像素点的颜色来改
变前景色和背景色,.
“显示模式选择工具, 使用户可根据实际情况在标准屏幕模式,
带菜单栏的全屏模式, 全屏模式中进行选择 。
3,控制面板的使用
控制面板是 Photoshop提供的一种很有特色且非常有
用的功能, 主要用于图像及工具的属性显示与参数设置
等 。
（ 1） 导航器控制面板
导航器控制面板用来观察图像, 它以一个小窗口显
示整个图像 。
（ 2） 信息控制面板
信息控制面板用于显示光标在图像上所处位置的坐标,
颜色信息以及选择区域的大小 。
（ 3） 颜色控制面板
颜色控制面板用来设置前景色和背景色 。
（ 4） 色板控制面板
此面板也可用来改变前景色和背景色 。
（ 5） 样式控制面板
在样式控制面板中有许多现成的样式, 供用户直接使
用 。
（ 6） 图层控制面板
利用图层控制面板可以控制图层的新建, 删除, 显示,
隐藏, 连接, 合并, 添加效果层, 添加蒙板等 。
（ 7） 通道控制面板
通道控制面板用于创建和管理通道 。 通道不仅可以存
放图像的颜色信息, 还可以用来建立和存储选择区域 。
（ 8） 路径控制面板
路径是使用钢笔, 自由钢笔等工具绘制的线条或形状,
它提供了一种有效的方法来绘制精确的选区边界 。
（ 9） 历史记录控制面板
历史记录控制面板用来记录用户对图像的每一个操作,
并根据执行的操作命令自动命名 。 它可帮助用户恢复到
操作过程中的任何一步, 可以完全恢复当时的状态 。
9.1.3 利用 Photoshop美化网页
9.2 利用 Fireworks 4.0美化网页
9.2.1 利用 Fireworks4.0制作网页图片
1,Fireworks 4.0工作界面
（ 1） 标题栏
（ 2） 菜单栏
（ 3） 工具栏
（ 4） 标准工具栏
（ 5） 状态栏
（ 6） 浮动面板
2,Fireworks 4.0基本操作
（ 1） 画面显示与调整
与显示相关的功能主要位于, View”菜单中,
（ 2） 对象选择方法
3,利用 Fireworks网页导航栏
4,利用 Fireworks制作按钮符号
9.2.2 将 Fireworks制作的图片放到网页上
在 Fireworks 4.0中制作完图片或符号后, 要将其放
到网页中, 需要进行如下操作：
（ 1） 将图片或符号文件复制到 Dreamweaver 4.0管理的网
站的本地文件夹中；
（ 2） 在 Dreamweaver 4.0的网页文件内选定要放图片的位
置, 然后选择, Insert”|“Image” 命令；
（ 3） 在插入图片的对话框内选择要使用的图片或符号,
然后单击, OK”按钮 。
9.3 利用 F1ash5制作网页动画
9.3.1 利用 F1ash5制作网页动画
1,F1ash5简介
（ 1） 有关动画的一些基本概念
① 帧 （ Frame）
Flash在制作动画时, 是由若干个帧来组成一个动画
效果的 。 帧是装载 Flash作品内容, 进行 Flash作品播放
的基本单位, 也是 Flash动画的基本组成元素 。 Flash的
时间轴面板上的每一小格代表一帧 。
帧有以下几种类型：
? 关键帧：关键帧是一个包含有内容, 或是对内容的改变
起决定性作用的帧 。
? 静止帧：时间轴上的静止帧是相邻静止关键帧的延续 。
? 中间过渡帧：中间过渡帧出现于过渡动画的两个关键帧
之间 。
② 图层 （ Layer）
图层是为了方便操作者制作复杂的 Flash动画作品而引
入的一种手段 。 在时间轴面板上, 每个图层都有各自的
时间轴 。 在每个图层中都包含了一系列的帧, 在各图层
中所使用的帧均是独立的 。 可用控制器来播放某个场景
的动画效果 。 播放动画时, 会从每个图层的第一帧开始
播放 （ 即同步播放 ）, 不同图层中的帧在同时播放中可
以得到综合的效果 。
③ 场景 （ Scene）
一个 Flash作品可以由若干个场景组成, 每个场景都分
别拥有各自独立的动画内容 。 每个场景中的图层和帧均
相对独立 。 在播放时, Flash会自动按场景的顺序进行播
放 。
（ 2） Fhsh5的界面组成
① 菜单栏
② 标准工具栏
③ 绘图工具栏
④ 状态栏
⑤ 控制器
⑥ 时间轴面板
（ 3） F1ash 5中的一些基本操作
① 帧的操作
改变帧的播放速率
方法是：在, Edit（ 修改 ）, 菜单中选择, Movie
（ 影片 ）, 选项, 在弹出的, Movie Properties（ 影片
属性 ）, 对话框中的, Frame Rate（ 帧频 ）, 框内输
入所需数值, 然后单击, OK”按钮即可 。
帧的选择
用鼠标单击某一帧, 该帧即被选中, 并且成为当
前帧, 同时在工作区中显示出该帧中的内容 。
创建各种类型的帧
在时间轴上需要新建静止帧的位置处单击鼠标左键,
然后选择, Insert（ 插入 ）, |“Frame（ 帧 ）, 命令,
就可在所需位置上创建一个包含有与前一帧相同内容
的静止帧 。
在时间轴上需要新建关键帧的位置处单击鼠标左键,
然后选择, Insert”|“Key frame（ 关键帧 ）, 命令, 就
可在所需位置上创建一个包含有与前一个关键帧相同
内容的关键帧 。
在时间轴上需要新建空白关键帧的位置处单击鼠标左
键, 然后选择, Insert”|“Blank Key frame（ 空白关键
帧 ）, 命令, 就可在所需位置上创建一个不包含任何
内容的空白关键帧 。
复制帧
复制帧的方法为：首先将需要复制的一个或者多个
帧选中；在其上单击鼠标右键, 从弹出的菜单中选择
,Copy Frames（ 复制帧格 ）, 命令；用鼠标单击需要
粘贴的位置, 再单击鼠标右键, 从弹出的快捷菜单中
选择, Paste Frames（ 粘贴帧格 ）, 命令, 即可将相同
的内容复制到所需的位置上 。
删除帧
无论是静止帧, 关键帧还是空白关键帧, 其删除的
方 式 都 是 一 样 的 。 首 先 选 取 帧, 然 后 选 择
,Insert”|“Remove Frame”命令, 或者是在被选中的帧
上单击鼠标右键, 从弹出的快捷菜单中选择, Remove
Frame”命令, 这两种方法都可以将所选取的帧以及该
帧中的内容一起删除掉 。
② 图层的操作
添加图层
对图层的重命名
调整图层的顺序
删除图层
③ 场景的操作
新增场景
场景的更名
当前场景的切换
删除场景
2,利用 Flash5制作网页动画
（ 1） F1ash动画的类型
Flash动画分为两种类型：逐帧动画和过渡动画 。
逐帧动画是由位于时间轴上的同一动画轨道上的一个
连续的关键帧序列组成 。 对于该序列中的每一帧中的内
容都可以单独地进行编辑 。 在播放时, 按顺序逐帧地进
行播放而产生动 画的效果 。
每一个过渡动画序列由两个处于两端的关键帧和位于
中间的一个过渡帧序列组成, 两个关键帧分别定义了该
动画序列的开始和结束的状态, 过渡帧序列产生动画的
中间效果 。 只需要编辑动画对象在两个关键帧中的位置,
形状, 颜色和大小等属性, 然后定义过渡帧序列的渐变
类型以及效果, 即可自动生成一定效果的平滑的过渡动
画 。 用这种方法制作动画操作简单, 占用的存储空间小 。
（ 2） Flash动画的制作
① 创建逐帧动画
② 创建过渡动画
9.3.2 在网页中加入 Flash动画
1,准备工作
要在页面中插入 Flash动画, 首先就要把 Flash动
画输出成,swf文件,
2,文件的发布设置 （ Publish Settings）
3,在 Dreamweaver 4.0制作的网页中加入,swf文件
4,在要加入,swf文件的网页中直接插入 HTML引导程序
1,Photoshop基本操作
2,利用 Photoshop 6.0处理网页图像 利用
Dreamweaver编辑各种超连接的方法
3,Fireworks 4.0基本操作
4,利用 Fireworks 4.0美化网页图像
5,Flash5基本操作
6,利用 Flash5处理网页动画
第 9章 美化网页
9.1 使用 Photoshop 6.0美化网页
9.1.1 Photoshop的特点及功能
新版 Photoshop软件增加了许多新功能, 设计了更加友好的
界面, 提供了更为方便的操作工具 。 它主要具有以下特点及功
能：
1,支持大量的图像文件格式,
2,文本处理更加方便,可以在任何时候修改文本内容, 并可以对文
本层进行多种格式设置 。
3,增强的色彩功能, 提供了更广泛的色彩范围 。
4,增强图层的功能, 可以建立文本层, 效果层, 并增加了图层操
作命令 。
5,丰富的滤镜功能 。
6,具有, Actions（ 动作 ） 选项板,, 能对图像处理操作进行有效
的控制管理,
7,无限的撤消和重复操作为图像处理提供了更广泛的空间,
8,新增了, 魔术棒,,, 磁性套索, 等工具,
9.1.2 Photoshop 6.0的基本操作
Photoshop 6.0的界面主要由标题栏, 菜单栏, 工具箱, 选项栏,
控制面板和状态栏组成,
1,菜单栏的使用
（ 1）, 文件, 菜单
（ 2）, 编辑, 菜单
（ 3）, 图像, 菜单
（ 4）, 图层, 菜单
（ 5）, 选择, 菜单
（ 6）, 滤镜, 菜单
（ 7）, 视图, 菜单
2,工具箱的使用
工具箱一般出现在屏幕的左侧, 也可以用鼠标按住其标题栏, 拖
动到屏幕的其它位置上 。
（ 1）绘图工具
绘图工具包括, 毛笔,,, 铅笔,,, 喷枪,,, 印章,,
,直线, 工具等, 利用这些工具可以在图像或选区中直接进行创
作 。
（ 2） 选区工具
,选区, 工具用于在图像上选出特定的区域 。 选区设定后, 区域
边界上会出现不断流动的虚线, 虚线内部就是选定区域 。
（ 3） 编辑工具
编辑工具主要对图像进行进一步的修饰 。 包括, 移动,,, 橡
皮擦,,, 裁剪,,, 涂抹,,, 模糊,,, 锐化,,, 减淡,,
,加深,,, 海绵,,, 缩放,,, 抓手, 工具等 。
（ 4） 填充工具
填充工具可对封闭的选区填充颜色或图案, 包括, 油漆桶工
具,,, 渐变工具, 。
（ 5）文字工具
文字工具可以在图像中加入文字对象。选中该工具在图像区单
击，会弹出文字对话框。
（ 6） 其它工具
利用, 注释工具, 可为图像添加文字注释或语音注释 。
利用, 测量工具, 可测量图像中两个像素点之间的距离, 角度等 。
利用“颜色拾取工具”可从图像中拾取某一像素点的颜色来改
变前景色和背景色,.
“显示模式选择工具, 使用户可根据实际情况在标准屏幕模式,
带菜单栏的全屏模式, 全屏模式中进行选择 。
3,控制面板的使用
控制面板是 Photoshop提供的一种很有特色且非常有
用的功能, 主要用于图像及工具的属性显示与参数设置
等 。
（ 1） 导航器控制面板
导航器控制面板用来观察图像, 它以一个小窗口显
示整个图像 。
（ 2） 信息控制面板
信息控制面板用于显示光标在图像上所处位置的坐标,
颜色信息以及选择区域的大小 。
（ 3） 颜色控制面板
颜色控制面板用来设置前景色和背景色 。
（ 4） 色板控制面板
此面板也可用来改变前景色和背景色 。
（ 5） 样式控制面板
在样式控制面板中有许多现成的样式, 供用户直接使
用 。
（ 6） 图层控制面板
利用图层控制面板可以控制图层的新建, 删除, 显示,
隐藏, 连接, 合并, 添加效果层, 添加蒙板等 。
（ 7） 通道控制面板
通道控制面板用于创建和管理通道 。 通道不仅可以存
放图像的颜色信息, 还可以用来建立和存储选择区域 。
（ 8） 路径控制面板
路径是使用钢笔, 自由钢笔等工具绘制的线条或形状,
它提供了一种有效的方法来绘制精确的选区边界 。
（ 9） 历史记录控制面板
历史记录控制面板用来记录用户对图像的每一个操作,
并根据执行的操作命令自动命名 。 它可帮助用户恢复到
操作过程中的任何一步, 可以完全恢复当时的状态 。
9.1.3 利用 Photoshop美化网页
9.2 利用 Fireworks 4.0美化网页
9.2.1 利用 Fireworks4.0制作网页图片
1,Fireworks 4.0工作界面
（ 1） 标题栏
（ 2） 菜单栏
（ 3） 工具栏
（ 4） 标准工具栏
（ 5） 状态栏
（ 6） 浮动面板
2,Fireworks 4.0基本操作
（ 1） 画面显示与调整
与显示相关的功能主要位于, View”菜单中,
（ 2） 对象选择方法
3,利用 Fireworks网页导航栏
4,利用 Fireworks制作按钮符号
9.2.2 将 Fireworks制作的图片放到网页上
在 Fireworks 4.0中制作完图片或符号后, 要将其放
到网页中, 需要进行如下操作：
（ 1） 将图片或符号文件复制到 Dreamweaver 4.0管理的网
站的本地文件夹中；
（ 2） 在 Dreamweaver 4.0的网页文件内选定要放图片的位
置, 然后选择, Insert”|“Image” 命令；
（ 3） 在插入图片的对话框内选择要使用的图片或符号,
然后单击, OK”按钮 。
9.3 利用 F1ash5制作网页动画
9.3.1 利用 F1ash5制作网页动画
1,F1ash5简介
（ 1） 有关动画的一些基本概念
① 帧 （ Frame）
Flash在制作动画时, 是由若干个帧来组成一个动画
效果的 。 帧是装载 Flash作品内容, 进行 Flash作品播放
的基本单位, 也是 Flash动画的基本组成元素 。 Flash的
时间轴面板上的每一小格代表一帧 。
帧有以下几种类型：
? 关键帧：关键帧是一个包含有内容, 或是对内容的改变
起决定性作用的帧 。
? 静止帧：时间轴上的静止帧是相邻静止关键帧的延续 。
? 中间过渡帧：中间过渡帧出现于过渡动画的两个关键帧
之间 。
② 图层 （ Layer）
图层是为了方便操作者制作复杂的 Flash动画作品而引
入的一种手段 。 在时间轴面板上, 每个图层都有各自的
时间轴 。 在每个图层中都包含了一系列的帧, 在各图层
中所使用的帧均是独立的 。 可用控制器来播放某个场景
的动画效果 。 播放动画时, 会从每个图层的第一帧开始
播放 （ 即同步播放 ）, 不同图层中的帧在同时播放中可
以得到综合的效果 。
③ 场景 （ Scene）
一个 Flash作品可以由若干个场景组成, 每个场景都分
别拥有各自独立的动画内容 。 每个场景中的图层和帧均
相对独立 。 在播放时, Flash会自动按场景的顺序进行播
放 。
（ 2） Fhsh5的界面组成
① 菜单栏
② 标准工具栏
③ 绘图工具栏
④ 状态栏
⑤ 控制器
⑥ 时间轴面板
（ 3） F1ash 5中的一些基本操作
① 帧的操作
改变帧的播放速率
方法是：在, Edit（ 修改 ）, 菜单中选择, Movie
（ 影片 ）, 选项, 在弹出的, Movie Properties（ 影片
属性 ）, 对话框中的, Frame Rate（ 帧频 ）, 框内输
入所需数值, 然后单击, OK”按钮即可 。
帧的选择
用鼠标单击某一帧, 该帧即被选中, 并且成为当
前帧, 同时在工作区中显示出该帧中的内容 。
创建各种类型的帧
在时间轴上需要新建静止帧的位置处单击鼠标左键,
然后选择, Insert（ 插入 ）, |“Frame（ 帧 ）, 命令,
就可在所需位置上创建一个包含有与前一帧相同内容
的静止帧 。
在时间轴上需要新建关键帧的位置处单击鼠标左键,
然后选择, Insert”|“Key frame（ 关键帧 ）, 命令, 就
可在所需位置上创建一个包含有与前一个关键帧相同
内容的关键帧 。
在时间轴上需要新建空白关键帧的位置处单击鼠标左
键, 然后选择, Insert”|“Blank Key frame（ 空白关键
帧 ）, 命令, 就可在所需位置上创建一个不包含任何
内容的空白关键帧 。
复制帧
复制帧的方法为：首先将需要复制的一个或者多个
帧选中；在其上单击鼠标右键, 从弹出的菜单中选择
,Copy Frames（ 复制帧格 ）, 命令；用鼠标单击需要
粘贴的位置, 再单击鼠标右键, 从弹出的快捷菜单中
选择, Paste Frames（ 粘贴帧格 ）, 命令, 即可将相同
的内容复制到所需的位置上 。
删除帧
无论是静止帧, 关键帧还是空白关键帧, 其删除的
方 式 都 是 一 样 的 。 首 先 选 取 帧, 然 后 选 择
,Insert”|“Remove Frame”命令, 或者是在被选中的帧
上单击鼠标右键, 从弹出的快捷菜单中选择, Remove
Frame”命令, 这两种方法都可以将所选取的帧以及该
帧中的内容一起删除掉 。
② 图层的操作
添加图层
对图层的重命名
调整图层的顺序
删除图层
③ 场景的操作
新增场景
场景的更名
当前场景的切换
删除场景
2,利用 Flash5制作网页动画
（ 1） F1ash动画的类型
Flash动画分为两种类型：逐帧动画和过渡动画 。
逐帧动画是由位于时间轴上的同一动画轨道上的一个
连续的关键帧序列组成 。 对于该序列中的每一帧中的内
容都可以单独地进行编辑 。 在播放时, 按顺序逐帧地进
行播放而产生动 画的效果 。
每一个过渡动画序列由两个处于两端的关键帧和位于
中间的一个过渡帧序列组成, 两个关键帧分别定义了该
动画序列的开始和结束的状态, 过渡帧序列产生动画的
中间效果 。 只需要编辑动画对象在两个关键帧中的位置,
形状, 颜色和大小等属性, 然后定义过渡帧序列的渐变
类型以及效果, 即可自动生成一定效果的平滑的过渡动
画 。 用这种方法制作动画操作简单, 占用的存储空间小 。
（ 2） Flash动画的制作
① 创建逐帧动画
② 创建过渡动画
9.3.2 在网页中加入 Flash动画
1,准备工作
要在页面中插入 Flash动画, 首先就要把 Flash动
画输出成,swf文件,
2,文件的发布设置 （ Publish Settings）
3,在 Dreamweaver 4.0制作的网页中加入,swf文件
4,在要加入,swf文件的网页中直接插入 HTML引导程序
