第9章美化网页 通过本章学习,应该掌握以下内容 1. Photoshop基本操作 2.利用 Photoshop6.0处理网页图像利用 Dreamweaver编辑各种超连接的方法 3. Fireworks40基本操作 4.利用 Fireworks4.0美化网页图像 5.Fash5基本操作 6.利用Fash5处理网页动画
通过本章学习，应该掌握以下内容： 1. Photoshop基本操作 2. 利用Photoshop 6.0处理网页图像利用 Dreamweaver编辑各种超连接的方法 3. Fireworks 4.0基本操作 4. 利用Fireworks 4.0美化网页图像 5. Flash5基本操作 6. 利用Flash5处理网页动画 第9章 美化网页
91使用 Photoshop6.0美化网页 911 Photoshop的特点及功能 新版 Photoshop软件增加了许多新功能,设计了更加友好的 界面,提供了更为方便的操作工具。它主要具有以下特点及功 能 支持大量的图像文件格式 2.文本处理更加方便,可以在任何时候修改文本内容,并可以对文 本层进行多种格式设置 3.增强的色彩功能,提供了更广泛的色彩范围 4.增强图层的功能,可以建立文本层、效果层,并增加了图层操 作命令。 丰富的滤镜功能 6.具有“ Actions(动作)选项板”,能对图像处理操作进行有效 的控制管理 7.无限的撤消和重复操作为图像处理提供了更广泛的空间 8.新增了“魔术棒”、“磁性套索”等工具
9.1 使用Photoshop 6.0美化网页 9.1.1 Photoshop的特点及功能 新版Photoshop软件增加了许多新功能，设计了更加友好的 界面，提供了更为方便的操作工具。它主要具有以下特点及功 能： 1. 支持大量的图像文件格式. 2. 文本处理更加方便 ,可以在任何时候修改文本内容，并可以对文 本层进行多种格式设置。 3. 增强的色彩功能，提供了更广泛的色彩范围。 4. 增强图层的功能，可以建立文本层、效果层，并增加了图层操 作命令。 5. 丰富的滤镜功能。 6. 具有“Actions（动作）选项板” ，能对图像处理操作进行有效 的控制管理. 7. 无限的撤消和重复操作为图像处理提供了更广泛的空间. 8. 新增了“魔术棒” 、 “磁性套索”等工具
912 Photoshop60的基本操作 Photoshop6.0的界面主要由标题栏、菜单栏、工具箱、选项栏 控制面板和状态栏组成 菜单栏的使用 (1)“文件”菜单 (2)“编辑”菜单 3)“图像菜单 (4)“图层”菜单 (5)“遄择”菜单 (6)“滤镜”菜单 (7)“视图”菜单
9.1.2 Photoshop 6.0的基本操作 Photoshop 6.0的界面主要由标题栏、菜单栏、工具箱、选项栏、 控制面板和状态栏组成. 1．菜单栏的使用 （1）“文件”菜单 （2）“编辑”菜单 （3）“图像”菜单 （4）“图层”菜单 （5）“选择”菜单 （6）“滤镜”菜单 （7）“视图”菜单
2.工具箱的使用 工具箱一般出现在屏幕的左侧,也可以用鼠标按住其标题栏,拖 动到屏幕的其它位置上。 (1)绘图工具 绘图工具包括“毛笔”、“铅笔”、“喷枪”、“印章” “直线”工具等,利用这些工具可以在图像或选区中直接进行创 作 (2)选区工具 “选区”工具用于在图像上选出特定的区域。选区设定后,区域 边界上会出现不断流动的虚线,虚线内部就是选定区域。 (3)编辑工具 编辑工具主要对图像进行进一步的修饰。包括“移动”、“橡 皮擦”、“裁剪”、“涂抹”、“模糊”、“锐化”、“减淡” “加深”、“海绵”、“缩放”、“抓手”工具等 (4)填充工具 填充工具可对封闭的选区填充颜色或图案,包括“油漆桶工 具”、“渐变工具
2．工具箱的使用 工具箱一般出现在屏幕的左侧，也可以用鼠标按住其标题栏，拖 动到屏幕的其它位置上。 （1）绘图工具 绘图工具包括“毛笔” 、 “铅笔” 、 “喷枪” 、 “印章” 、 “直线”工具等，利用这些工具可以在图像或选区中直接进行创 作。 （2）选区工具 “选区”工具用于在图像上选出特定的区域。选区设定后，区域 边界上会出现不断流动的虚线，虚线内部就是选定区域。 （3）编辑工具 编辑工具主要对图像进行进一步的修饰。包括“移动” 、 “橡 皮擦” 、 “裁剪” 、 “涂抹” 、 “模糊” 、 “锐化” 、 “减淡” 、 “加深” 、 “海绵” 、 “缩放” 、 “抓手”工具等。 （4）填充工具 填充工具可对封闭的选区填充颜色或图案，包括“油漆桶工 具” 、 “渐变工具”
(5)文字工具 文字工具可以在图像中加入文字对象。选中该工具在图像区单 击,会弹出文字对话框。 (6)其它工具 利用“注释工具”可为图像添加文字注释或语音注释。 利用“测量工具”可测量图像中两个像素点之间的距离、角度等。 利用“颜色拾取工具”可从图像中拾取某一像素点的颜色来改 变前景色和背景色, “‘显示模式选择工具”使用户可根据实际情况在标准屏幕模式、 带菜单栏的全屏模式、全屏模式中进行选择
（5）文字工具 文字工具可以在图像中加入文字对象。选中该工具在图像区单 击，会弹出文字对话框。 （6）其它工具 利用“注释工具”可为图像添加文字注释或语音注释。 利用“测量工具”可测量图像中两个像素点之间的距离、角度等。 利用“颜色拾取工具”可从图像中拾取某一像素点的颜色来改 变前景色和背景色，. “显示模式选择工具”使用户可根据实际情况在标准屏幕模式、 带菜单栏的全屏模式、全屏模式中进行选择
3.控制面板的使用 控制面板是 Photoshop提供的一种很有特色且非常有 用的功能,主要用于图像及工具的属性显示与参数设置 (1)导航器控制面板 导航器控制面板用来观察图像,它以一个小窗口显 示整个图像。 (2)信息控制面板 信息控制面板用于显示光标在图像上所处位置的坐标 颜色信息以及选择区域的大小 (3)颜色控制面板 颜色控制面板用来设置前景色和背景色 (4)色板控制面板 此面板也可用来改变前景色和背景色 (5)样式控制面板 在样式控制面板中有许多现成的样式,供用户直接使 用
3．控制面板的使用 控制面板是Photoshop提供的一种很有特色且非常有 用的功能，主要用于图像及工具的属性显示与参数设置 等。 （1）导航器控制面板 导航器控制面板用来观察图像，它以一个小窗口显 示整个图像。 （2）信息控制面板 信息控制面板用于显示光标在图像上所处位置的坐标、 颜色信息以及选择区域的大小。 （3）颜色控制面板 颜色控制面板用来设置前景色和背景色。 （4）色板控制面板 此面板也可用来改变前景色和背景色。 （5）样式控制面板 在样式控制面板中有许多现成的样式，供用户直接使 用
(6)图层控制面板 利用图层控制面板可以控制图层的新建、删除、显示 隐藏、连接、合并、添加效果层、添加蒙板等 (7)通道控制面板 通道控制面板用于创建和管理通道。通道不仅可以存 放图像的颜色信息,还可以用来建立和存储选择区域 (8)路径控制面板 路径是使用钢笔、自由钢笔等工具绘制的线条或形状, 它提供了一种有效的方法来绘制精确的选区边界 9)历史记录控制面板 历史记录控制面板用来记录用户对图像的每一个操作, 并根据执行的操作命令自动命名。它可帮助用户恢复到 操作过程中的任何一步,可以完全恢复当时的状态
（6）图层控制面板 利用图层控制面板可以控制图层的新建、删除、显示、 隐藏、连接、合并、添加效果层、添加蒙板等。 （7）通道控制面板 通道控制面板用于创建和管理通道。通道不仅可以存 放图像的颜色信息，还可以用来建立和存储选择区域。 （8）路径控制面板 路径是使用钢笔、自由钢笔等工具绘制的线条或形状， 它提供了一种有效的方法来绘制精确的选区边界。 （9）历史记录控制面板 历史记录控制面板用来记录用户对图像的每一个操作， 并根据执行的操作命令自动命名。它可帮助用户恢复到 操作过程中的任何一步，可以完全恢复当时的状态
913利用 Photoshop美化网页 92利用 Fireworks4.0美化网页 921利用 Fireworks4.0制作网页图片 1. Fireworks40工作界面 (1)标题栏 (2)菜单栏 (3)工具栏 (4)标准工具栏 (5)状态栏 (6)浮动面板
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. Fireworks40基本操作 1)画面显示与调整 与显示相关的功能主要位于“vew”菜单中 (2)对象选择方法 3.利用 Fireworks网页导航栏 4.利用 Fireworks制作按钮符号 922将 Fireworks制作的图片放到网页上 在 Fireworks4.0中制作完图片或符号后,要将其放 到网页中,需要进行如下操作 (1)将图片或符号文件复制到 Dreamweaver40管理的网 站的本地文件夹中; (2)在 Dreamweaver40的网页文件内选定要放图片的位 置,然后选择“ Insert”“ Image”命令; (3)在插入图片的对话框内选择要使用的图片或符号 然后单击“OK”按钮
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”按钮
93利用F1ash5制作网页动画 931利用F1ash5制作网页动画 1.Fash5简介 (1)有关动画的一些基本概念 ①帧( Frame) Flash在制作动画时,是由若干个帧来组成一个动画 效果的。帧是装载Fash作品内容、进行Fash作品播放 的基本单位,也是Fash动画的基本组成元素。 Flash的 时间轴面板上的每一小格代表一帧。 帧有以下几种类型: 关键帧:关键帧是一个包含有内容,或是对内容的改变 起决定性作用的帧。 ·静止帧:时间轴上的静止帧是相邻静止关键帧的延续。 中间过渡帧:中间过渡帧出现于过渡动画的两个关键帧 之间
9.3 利用F1ash5制作网页动画 9.3.1 利用F1ash5制作网页动画 1．F1ash5简介 （1）有关动画的一些基本概念 ① 帧（Frame） Flash在制作动画时，是由若干个帧来组成一个动画 效果的。帧是装载Flash作品内容、进行Flash作品播放 的基本单位，也是Flash动画的基本组成元素。Flash的 时间轴面板上的每一小格代表一帧。 帧有以下几种类型： • 关键帧：关键帧是一个包含有内容，或是对内容的改变 起决定性作用的帧。 • 静止帧：时间轴上的静止帧是相邻静止关键帧的延续。 • 中间过渡帧：中间过渡帧出现于过渡动画的两个关键帧 之间