第9章 美化网页 《网页制作宝典》教学课件

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