终极博鳌网页设计：第9章美化网页设计

1、1 通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容： Photoshop基本操作基本操作 利用利用Photoshop 6.0处理网页图像处理网页图像利用利用Dreamweaver编辑各种超连接的方法编辑各种超连接的方法 Fireworks 4.0基本操作基本操作 利用利用Fireworks 4.0美化网页图像美化网页图像 Flash5基本操作基本操作 1. 利用利用Flash5处理网页动画处理网页动画 第第9章章 美化网页美化网页 29.1 使用使用Photoshop 6.0美化网页美化网页 9.1.1 Photoshop的特点及功能的特点及功能 新版新版Photoshop软件

2、增加了许多新功能，设计了更加友好的软件增加了许多新功能，设计了更加友好的界面，提供了更为方便的操作工具。它主要具有以下特点及功界面，提供了更为方便的操作工具。它主要具有以下特点及功能：能：支持大量的图像文件格式支持大量的图像文件格式.文本处理更加方便文本处理更加方便 ,可以在任何时候修改文本内容，并可以对文可以在任何时候修改文本内容，并可以对文本层进行多种格式设置。本层进行多种格式设置。增强的色彩功能，提供了更广泛的色彩范围。增强的色彩功能，提供了更广泛的色彩范围。 增强图层的功能，可以建立文本层、效果层，并增加了图层操增强图层的功能，可以建立文本层、效果层，并增加了图层操作命令。作命令。 丰

3、富的滤镜功能。丰富的滤镜功能。 具有具有“Actions（动作）选项板（动作）选项板”，能对图像处理操作进行有效，能对图像处理操作进行有效的控制管理的控制管理. 无限的撤消和重复操作为图像处理提供了更广泛的空间无限的撤消和重复操作为图像处理提供了更广泛的空间.1.新增了新增了“魔术棒魔术棒”、“磁性套索磁性套索”等工具等工具 . 3 9.1.2 Photoshop 6.0的基本操作的基本操作 Photoshop 6.0的界面主要由标题栏、菜单栏、工具箱、选项栏、的界面主要由标题栏、菜单栏、工具箱、选项栏、控制面板和状态栏组成控制面板和状态栏组成. 1菜单栏的使用菜单栏的使用（1）“文件文件”菜

4、单菜单（2）“编辑编辑”菜单菜单（3）“图像图像”菜单菜单（4）“图层图层”菜单菜单（5）“选择选择”菜单菜单（6）“滤镜滤镜”菜单菜单（7）“视图视图”菜单菜单42工具箱的使用工具箱的使用 工具箱一般出现在屏幕的左侧，也可以用鼠标按住其标题栏，拖工具箱一般出现在屏幕的左侧，也可以用鼠标按住其标题栏，拖动到屏幕的其它位置上。动到屏幕的其它位置上。 （1）绘图工具）绘图工具 绘图工具包括绘图工具包括“毛笔毛笔”、“铅笔铅笔”、“喷枪喷枪”、“印章印章”、“直线直线”工具等，利用这些工具可以在图像或选区中直接进行创工具等，利用这些工具可以在图像或选区中直接进行创作。作。（2）选区工具）选区工具 “

5、选区选区”工具用于在图像上选出特定的区域。选区设定后，区域工具用于在图像上选出特定的区域。选区设定后，区域边界上会出现不断流动的虚线，虚线内部就是选定区域。边界上会出现不断流动的虚线，虚线内部就是选定区域。（3）编辑工具）编辑工具 编辑工具主要对图像进行进一步的修饰。包括编辑工具主要对图像进行进一步的修饰。包括“移动移动”、“橡橡皮擦皮擦”、“裁剪裁剪”、“涂抹涂抹”、“模糊模糊”、“锐化锐化”、“减淡减淡”、“加深加深”、“海绵海绵”、“缩放缩放”、“抓手抓手”工具等。工具等。 （4）填充工具）填充工具 填充工具可对封闭的选区填充颜色或图案，包括填充工具可对封闭的选区填充颜色或图案，包括“油

6、漆桶工油漆桶工具具”、“渐变工具渐变工具”。5 （5）文字工具）文字工具 文字工具可以在图像中加入文字对象。选中该工具在图像区单文字工具可以在图像中加入文字对象。选中该工具在图像区单击，会弹出文字对话框。击，会弹出文字对话框。 （6）其它工具）其它工具 利用利用“注释工具注释工具”可为图像添加文字注释或语音注释。可为图像添加文字注释或语音注释。 利用利用“测量工具测量工具”可测量图像中两个像素点之间的距离、角度等。可测量图像中两个像素点之间的距离、角度等。 利用利用“颜色拾取工具颜色拾取工具”可从图像中拾取某一像素点的颜色来改可从图像中拾取某一像素点的颜色来改变前景色和背景色，变前景色和背景色

7、，. “显示模式选择工具显示模式选择工具”使用户可根据实际情况在标准屏幕模式、使用户可根据实际情况在标准屏幕模式、带菜单栏的全屏模式、全屏模式中进行选择。带菜单栏的全屏模式、全屏模式中进行选择。63控制面板的使用控制面板的使用 控制面板是控制面板是Photoshop提供的一种很有特色且非常有提供的一种很有特色且非常有用的功能，主要用于图像及工具的属性显示与参数设置用的功能，主要用于图像及工具的属性显示与参数设置等。等。 （1）导航器控制面板）导航器控制面板 导航器控制面板用来观察图像，它以一个小窗口显导航器控制面板用来观察图像，它以一个小窗口显示整个图像。示整个图像。 （2）信息控制面板）信息

8、控制面板 信息控制面板用于显示光标在图像上所处位置的坐标、信息控制面板用于显示光标在图像上所处位置的坐标、颜色信息以及选择区域的大小。颜色信息以及选择区域的大小。（3）颜色控制面板）颜色控制面板 颜色控制面板用来设置前景色和背景色。颜色控制面板用来设置前景色和背景色。 （4）色板控制面板）色板控制面板 此面板也可用来改变前景色和背景色。此面板也可用来改变前景色和背景色。 （5）样式控制面板）样式控制面板 在样式控制面板中有许多现成的样式，供用户直接使在样式控制面板中有许多现成的样式，供用户直接使用。用。7（6）图层控制面板）图层控制面板 利用图层控制面板可以控制图层的新建、删除、显示、利用图层

9、控制面板可以控制图层的新建、删除、显示、隐藏、连接、合并、添加效果层、添加蒙板等。隐藏、连接、合并、添加效果层、添加蒙板等。（7）通道控制面板）通道控制面板 通道控制面板用于创建和管理通道。通道不仅可以存通道控制面板用于创建和管理通道。通道不仅可以存放图像的颜色信息，还可以用来建立和存储选择区域。放图像的颜色信息，还可以用来建立和存储选择区域。（8）路径控制面板）路径控制面板 路径是使用钢笔、自由钢笔等工具绘制的线条或形状，路径是使用钢笔、自由钢笔等工具绘制的线条或形状，它提供了一种有效的方法来绘制精确的选区边界。它提供了一种有效的方法来绘制精确的选区边界。（9）历史记录控制面板）历史记录控制

10、面板 历史记录控制面板用来记录用户对图像的每一个操作，历史记录控制面板用来记录用户对图像的每一个操作，并根据执行的操作命令自动命名。它可帮助用户恢复到并根据执行的操作命令自动命名。它可帮助用户恢复到操作过程中的任何一步，可以完全恢复当时的状态。操作过程中的任何一步，可以完全恢复当时的状态。89.1.3 利用利用Photoshop美化网页美化网页 9.2 利用利用Fireworks 4.0美化网页美化网页9.2.1 利用利用Fireworks 4.0制作网页图片制作网页图片1Fireworks 4.0工作界面工作界面（1）标题栏）标题栏（2）菜单栏）菜单栏（3）工具栏）工具栏（4）标准工具栏）标

11、准工具栏（5）状态栏）状态栏（6）浮动面板）浮动面板92Fireworks 4.0基本操作基本操作（1）画面显示与调整）画面显示与调整 与显示相关的功能主要位于与显示相关的功能主要位于“View”菜单中菜单中.（2）对象选择方法）对象选择方法3利用利用Fireworks网页导航栏网页导航栏4利用利用Fireworks制作按钮符号制作按钮符号9.2.2 将将Fireworks制作的图片放到网页上制作的图片放到网页上 在在Fireworks 4.0中制作完图片或符号后，要将其放中制作完图片或符号后，要将其放到网页中，需要进行如下操作：到网页中，需要进行如下操作：（1）将图片或符号文件复制到）将图片

12、或符号文件复制到Dreamweaver 4.0管理的网管理的网站的本地文件夹中；站的本地文件夹中；（2）在）在Dreamweaver 4.0的网页文件内选定要放图片的位的网页文件内选定要放图片的位置，然后选择置，然后选择 “Insert”|“Image” 命令；命令；（3）在插入图片的对话框内选择要使用的图片或符号，）在插入图片的对话框内选择要使用的图片或符号，然后单击然后单击“OK”按钮。按钮。109.3 利用利用F1ash5制作网页动画制作网页动画9.3.1 利用利用F1ash5制作网页动画制作网页动画1F1ash5简介简介（1）有关动画的一些基本概念）有关动画的一些基本概念 帧（帧（Fr

13、ame） Flash在制作动画时，是由若干个帧来组成一个动画在制作动画时，是由若干个帧来组成一个动画效果的。帧是装载效果的。帧是装载Flash作品内容、进行作品内容、进行Flash作品播放作品播放的基本单位，也是的基本单位，也是Flash动画的基本组成元素。动画的基本组成元素。Flash的的时间轴面板上的每一小格代表一帧。时间轴面板上的每一小格代表一帧。帧有以下几种类型：帧有以下几种类型： 关键帧：关键帧是一个包含有内容，或是对内容的改变关键帧：关键帧是一个包含有内容，或是对内容的改变起决定性作用的帧。起决定性作用的帧。 静止帧：时间轴上的静止帧是相邻静止关键帧的延续。静止帧：时间轴上的静止帧

14、是相邻静止关键帧的延续。 中间过渡帧：中间过渡帧出现于过渡动画的两个关键帧中间过渡帧：中间过渡帧出现于过渡动画的两个关键帧之间。之间。 11 图层（图层（Layer） 图层是为了方便操作者制作复杂的图层是为了方便操作者制作复杂的Flash动画作品而引动画作品而引入的一种手段。在时间轴面板上，每个图层都有各自的入的一种手段。在时间轴面板上，每个图层都有各自的时间轴。在每个图层中都包含了一系列的帧，在各图层时间轴。在每个图层中都包含了一系列的帧，在各图层中所使用的帧均是独立的。可用控制器来播放某个场景中所使用的帧均是独立的。可用控制器来播放某个场景的动画效果。播放动画时，会从每个图层的第一帧开始的

15、动画效果。播放动画时，会从每个图层的第一帧开始播放（即同步播放），不同图层中的帧在同时播放中可播放（即同步播放），不同图层中的帧在同时播放中可以得到综合的效果。以得到综合的效果。 场景（场景（Scene） 一个一个Flash作品可以由若干个场景组成，每个场景都分作品可以由若干个场景组成，每个场景都分别拥有各自独立的动画内容。每个场景中的图层和帧均别拥有各自独立的动画内容。每个场景中的图层和帧均相对独立。在播放时，相对独立。在播放时，Flash会自动按场景的顺序进行播会自动按场景的顺序进行播放。放。 12（2）Fhsh5的界面组成的界面组成 菜单栏菜单栏 标准工具栏标准工具栏 绘图工具栏绘图工具

16、栏 状态栏状态栏 控制器控制器 时间轴面板时间轴面板（3）F1ash 5中的一些基本操作中的一些基本操作 帧的操作帧的操作改变帧的播放速率改变帧的播放速率 方法是：在方法是：在“Edit（修改）（修改）”菜单中选择菜单中选择“Movie（影片）（影片）”选项，在弹出的选项，在弹出的“Movie Properties（影片（影片属性）属性）”对话框中的对话框中的“Frame Rate（帧频）（帧频）”框内输框内输入所需数值，然后单击入所需数值，然后单击“OK”按钮即可。按钮即可。 13帧的选择帧的选择 用鼠标单击某一帧，该帧即被选中，并且成为当用鼠标单击某一帧，该帧即被选中，并且成为当前帧，同时

17、在工作区中显示出该帧中的内容。前帧，同时在工作区中显示出该帧中的内容。 创建各种类型的帧创建各种类型的帧 在时间轴上需要新建静止帧的位置处单击鼠标左键，在时间轴上需要新建静止帧的位置处单击鼠标左键，然后选择然后选择“Insert（插入）（插入）”|“Frame（帧）（帧）”命令，命令，就可在所需位置上创建一个包含有与前一帧相同内容就可在所需位置上创建一个包含有与前一帧相同内容的静止帧。的静止帧。 在时间轴上需要新建关键帧的位置处单击鼠标左键，在时间轴上需要新建关键帧的位置处单击鼠标左键，然后选择然后选择“Insert”|“Key frame（关键帧）（关键帧）”命令，就命令，就可在所需位置上创

18、建一个包含有与前一个关键帧相同可在所需位置上创建一个包含有与前一个关键帧相同内容的关键帧。内容的关键帧。 在时间轴上需要新建空白关键帧的位置处单击鼠标左在时间轴上需要新建空白关键帧的位置处单击鼠标左键，然后选择键，然后选择“Insert”|“Blank Key frame（空白关键（空白关键帧）帧）”命令，就可在所需位置上创建一个不包含任何命令，就可在所需位置上创建一个不包含任何内容的空白关键帧。内容的空白关键帧。14复制帧复制帧 复制帧的方法为：首先将需要复制的一个或者多个复制帧的方法为：首先将需要复制的一个或者多个帧选中；在其上单击鼠标右键，从弹出的菜单中选择帧选中；在其上单击鼠标右键，从

19、弹出的菜单中选择“Copy Frames（复制帧格）（复制帧格）”命令；用鼠标单击需要命令；用鼠标单击需要粘贴的位置，再单击鼠标右键，从弹出的快捷菜单中粘贴的位置，再单击鼠标右键，从弹出的快捷菜单中选择选择“Paste Frames（粘贴帧格）（粘贴帧格）”命令，即可将相同命令，即可将相同的内容复制到所需的位置上。的内容复制到所需的位置上。删除帧删除帧 无论是静止帧、关键帧还是空白关键帧，其删除的无论是静止帧、关键帧还是空白关键帧，其删除的方 式 都 是 一 样 的 。 首 先 选 取 帧 ， 然 后 选 择方 式 都 是 一 样 的 。 首 先 选 取 帧 ， 然 后 选 择“Insert”

20、|“Remove Frame”命令，或者是在被选中的帧命令，或者是在被选中的帧上单击鼠标右键，从弹出的快捷菜单中选择上单击鼠标右键，从弹出的快捷菜单中选择“Remove Frame”命令，这两种方法都可以将所选取的帧以及该命令，这两种方法都可以将所选取的帧以及该帧中的内容一起删除掉。帧中的内容一起删除掉。15 图层的操作图层的操作添加图层添加图层对图层的重命名对图层的重命名调整图层的顺序调整图层的顺序删除图层删除图层 场景的操作场景的操作新增场景新增场景场景的更名场景的更名当前场景的切换当前场景的切换删除场景删除场景162利用利用Flash5制作网页动画制作网页动画（1）F1ash动画的类型动画的类型 Flash动画分为两种类型：逐帧动画和过渡动画。动画分为两种类型：逐帧动画和过渡动画。 逐帧动画是由位于时间轴上的同一动画轨道上的一个逐帧动画是由位于时间轴上的同一动画轨道上的一个连续的关键帧序列组成。对于该序列中的每一帧中的内连续的关键帧序列组成。对于该序列中的每一帧中的内容都可以单独地进行编辑。在播放时，按顺序逐帧地进容都可以单独地进行编辑。在播放时，按顺序逐帧地进行播放而产生动行播放而产生动 画的效果。画的效果。 每一个过渡动画序列由两个处于两端的关键帧和位于每一个过渡动画序列由两个处于两端的关键帧和位于中间的一