网页制作教程--CH9美化网页.ppt

通过本章学习，应该掌握以下内容： Photoshop基本操作 利用Photoshop CS处理网页图像 Fireworks 8基本操作 利用Fireworks 8美化网页图像 Flash 8基本操作 利用Flash 8处理网页动画,第9章 美化网页,9.1 使用Photoshop CS美化网页,Photoshop是美国Adobe公司自80年代推出的图像处理软件，是目前功能最为强大、最为流行的图形处理软件之一。它以强大的图像处理功能和丰富的美术处理技巧，为众多专业人士所青睐。 在进行网页制作时，Photoshop更是不可缺少的得力助手。它可以通过一些简单操作对已有的图片、照片等素材进行进一步的修饰、合成，以达到美化网页的效果。,和以前的版本进行比较，Photoshop CS包括如下的10大最新功能： 改进的文件浏览器 使用功能强大文件浏览器，可以快速预览、标注和排序图片；搜索或编辑图像的数据元或关键词；并且可以自动批量共享文件。 匹配颜色命令 通过匹配一幅图片和另一幅图片的色彩模式，可以使包装照片、时装照片及更多照片之间达到一直的外观。 直方图调色板 随时可以根据对图像的调整来更新直方图调色板（Histogram Palette）。,9.1.1 Photoshop的特点及功能,阴影/加亮区修正 使用“阴影/加亮区修正（Shadow/Highlight correction）” 能快速改善图像曝光过度或曝光不足区域的对比度，同时保持照片的整体平衡。 沿路径放置文本 可以像在Adobe Illustrator软件中一样把文本沿着路径放置，用户还可以在Adobe Illustrator软件中直接编辑文本。 支持数码相机的raw模式 支持多款数码相机的raw模式，让用户可以得到更真实的图像输入。,全面支持16位图像 能够借助对16位的图像的扩展支持，对图层、画笔、文字、图形等执行更为精确的编辑、润色操作。 Layer Comps面板 可以将同一文件内的不同图层进行组合，并另存为多个“图层组合”，以便更加快捷地展示不同组合设计的视觉效果。 Flash文件导出 使用ImageReady可以创建flash矢量文件（SWF）。 自定义快捷键 Photoshop CS允许用户自定义、保存并打印键盘快捷方式，以方便地使用最常用的功能。,9.1.2 Photoshop CS的基本操作,菜单栏位于标题栏的下方，其中包括有关图像编辑处理的操作命令。共有9组下拉式菜单，即“文件”、“编辑”、“图像”、“图层”、“选择”、“滤镜”、“视图”、“窗口”和“帮助”菜单，如图所示。 （1）“文件”菜单 文件菜单主要用于图像文件的新建、打开、保存、导入、导出、打印等。,1菜单栏的使用,Photoshop CS的界面,返 回,（2）“编辑”菜单 编辑菜单中包括了还原、消褪、剪切、拷贝、合并拷贝、粘贴、粘贴入、清除、填充、描边、自由变换、变形、定义图案、清理、预置等操作命令。 （3）“图像”菜单 “图像”菜单中主要对图像文件进行模式变化、色彩调节、图像的复制和混合、图像和画布大小调整、图像的旋转、裁切、修整等操作。 （4）“图层”菜单 “图层”菜单主要用来对图层进行各种操作和调整。,（5）“选择”菜单 “选择”菜单中包括了全选、取消选择、重新选择、反选、色彩范围、羽化、修改、扩大选取、选取相似、变换选区、载入选区、存储选区等操作命令。 （6）“滤镜”菜单 “滤镜”菜单主要用来对图像进行特殊处理，使图像的风格发生改变。 （7）“视图”菜单 “视图”菜单主要用来控制图像显示的形态。,（8）“窗口”菜单 “窗口”菜单主要用来打开Photoshop提供的各种浮动式对话框。该菜单允许用户将窗口层地叠或平铺，排列图标，显示或隐藏工具箱、选项栏、状态栏、信息、导航器、颜色、样式、图层、通道、路径、历史记录、动作等控制面板。 （9）“帮助”菜单 主要提供各种有关的帮助信息。,Photoshop的工具箱包括了选区工具、绘图工具、编辑工具、填充工具、文本工具、前景和背景颜色选择框以及显示模式选择等50多种工具，可分别用于绘图、编辑处理图像、选区设定、屏幕模式选择等。工具箱一般出现在屏幕的左侧，也可以用鼠标按住其标题栏，拖动到屏幕的其他位置上。 （1）绘图工具 绘图工具包括“毛笔”、“铅笔”、“图章”、“直线”工具等，利用这些工具可以在图像或选区中直接进行创作。,2工具箱的使用,（2）选区工具 “选区”工具用于在图像上选出特定的区域。选区设定后，区域边界上会出现不断流动的虚线，虚线内部就是选定区域。 选区工具包括规则选取工具、套索工具、“魔术棒”工具、路径工具等。 （3）编辑工具 编辑工具主要对图像进行进一步的修饰。包括“移动”、“橡皮擦”、“裁剪”、“涂抹”、“模糊”、“锐化”、“减淡”、“加深”、“海绵”工具等。,（4）填充工具 填充工具可对封闭的选区填充颜色或图案，包括“油漆桶工具”、“渐变工具”。 （5）文字工具 文字工具可以在图像中加入文字对象。选中该工具在图像区单击，会弹出文字对话框。从中可设置字体、文字大小、间距、对齐方式等文字属性，还可选择文字显示为扇形、弧形、贝壳形、波浪形等，也可选择文字的排列方向为竖排或横排。,（1）导航器控制面板 导航器控制面板用来观察图像，它以一个小窗口显示整个图像。 （2）图层控制面板 通常情况下，使用Photoshop软件生成新文件时至少有一个背景层。用户在进行图像创作时可增加若干层，将组成图像的不同部分分别放在不同的层中。每个层都可以单独操作，对当前图层进行的操作不会影响到其他图层。,3控制面板的使用,（3）通道控制面板 通道控制面板用于创建和管理通道。通道不仅可以存放图像的颜色信息，还可以用来建立和存储选择区域。 （4）历史记录控制面板 历史记录控制面板用来记录用户对图像的每一个操作，并根据执行的操作命令自动命名。它可帮助用户恢复到操作过程中的任何一步，可以完全恢复当时的状态。,（5）色板控制面板 此面板也可用来改变前景色和背景色。将鼠标移到色板区时，光标会自动变成“吸管”状。此时，用户单击某个样本来选择一种颜色以取代工具箱中当前的前景色，按住“Alt”键同时单击样本就可改变背景色。 （6）样式控制面板 在样式控制面板中有许多现成的样式供用户直接使用，如各种普通按钮、玻璃按钮、图像效果、文字效果、纹理等供用户直接使用 。,9.1.3 利用Photoshop美化网页,在对Photoshop软件有了初步认识之后，下面结合示例网页中的两个具体图片来介绍如何利用该软件来美化网页。 示范演示： 1制作首页特效图片 2“办公电话”页面中“美丽的校园”图片的处理,9.2 利用Fireworks 8美化网页,1Fireworks 8的新增功能,9.2.1 利用Fireworks 8制作网页图片,3）优化了批量处理流程：Macromedia也优化了批量处理流程，用户可以成批地重命名文件、在批量缩放文件的过程中检查文件大小，此外还新增了状态栏和日志文件，用于显示批处理状态信息和记录批处理的详细情况。 4）新增切片选项：当选中的对象是多边形路径时，Fireworks 8新增的切片选项允许用户插入多边形切片。 5）识别ActionScript颜色值：现在从Flash中将颜色值拷贝到Fireworks的颜色值区域，Fireworks能够识别出ActionScript颜色值。,6）移动设备界面组件：提供了可仿真移动设备实体模型的移动设备界面组件。 7）为路径与文本对象添加阴影 8）自动使用键入的文本命名图层 9）使用新的特殊字符面板直接在文本块中插入特殊字符 10）将选中对象转换为可编辑矢量路径(并且可以反转此操作) 11）在字体菜单顶部显示最近使用的字体,12）透视阴影与立体阴影效果 13）26种新的混合模式 14）Auto Shape属性面板 15）新增图像编辑面板,将Fireworks 8程序安装完毕后，单击Windows“开始”菜单按钮，在显示的菜单中选择“程序”选项， “程序”列表中Macromedia下的Macromedia Fireworks 8选项，即可启动Fireworks 8的开始页，在开始页提供了帮助用户使用该软件的选项，如打开文档、新建文档，并可以引导用户了解更多信息或获得帮助。 Fireworks 8不但提供了更为强大的功能，还具有便捷的工作界面。 Fireworks 8程序用户界面如图所示。,2Fireworks 8工作界面,Fireworks 8的用户界面,返 回,（1）标题栏 Fireworks 8中的标题栏主要用于显示软件名称和当前所编辑文件的名称。 （2）菜单栏 Fireworks 8的菜单栏中提供了10项下拉式菜单功能，使用这些菜单中的各个命令可以完成对于当前文件的编辑操作。 （3）工具箱 在Fireworks 8中，图像处理工具都放在工具箱中。工具箱通常固定在窗口的左边，也可以用鼠标拖动工具箱，改变它在窗口中的位置。,（4）工具栏 在Fireworks 8的主要工具栏中提供了一些工作中常用的基本工具。这些工具按钮是一些常用菜单命令式操作选项的快捷方式. （5）属性面板 属性面板用来显示所选对象或工具的属性，用户可以通过属性面板来调节这些属性。 （6）状态栏 Fireworks 8的状态栏位于用户界面的最底部，是显示用户操作的信息的位置。,（7）浮动面板组 Fireworks 8中的浮动面板组位于用户界面的右侧，控制着对象的更大范围的特征，包括对矢量对象的描边、填充等。 浮动面板占去用户界面上很多空间，有时对操作带来不便。此时，可以按一下键盘上的“Tab”键，将显示的浮动面板一起隐藏，再一次按下键盘上的“Tab”键，还可以将浮动面板还原显示。,1）“优化”面板 选择“窗口”|“优化”命令，即可打开优化面板如图9-33所示，该面板提供了可以根据需要对文件进行最佳化设置的选项，用户可以选择图像的品质、文件的格式、文件选择性品质、图像的色版以及品质等，并可通过Fireworks MX所提供的预览视窗观看其效果。通过使用该面板可以很轻松地获得体积又小，品质又高的图像文件。,返 回,图9-33 优化面板,2）“颜色混色器”面板 颜色混色器是Fireworks MX中主要的定义颜色的工具，选择“窗口”|“颜色混色器”命令，即可打开颜色混色器面板 ，如图9-34所示。 在颜色混色器中，定义颜色的方法有多种，单击混色器面板右上方按钮，即可打开其附属菜单，在其中有5种定义颜色的方法。可以从中选择一种定义方法后，将光标移到色谱图中在想要的颜色上单击即可获取该颜色。,返 回,图9-34 颜色混色器面板,3）“层”面板 层面板的作用主要是用来编辑和处理图层上的对象以及管理各图层之间的摆放方式的。用“窗口”菜单中的“层”命令可以打开该面板。,4）“历史记录”面板 选择“窗口”|“历史记录”命令，即可打开历史记录面板，历史记录面板与帧面板在一个面板组。默认情况下，在历史记录面板中记录下了在当前文件中所做过的最近的20步操作。,5）“样式”面板 样式面板中有多种可用于文字或图形的样式，可以帮助人们快速地实现某些效果，而不必一步一步地去制作。选择“窗口”|“样式”命令，即可打开样式面板，如图9-37所示。 有时需要将一些特殊的属性如笔画、填色、特效或文字属性等结合起来运用，并且要应用在多个对象上，此时，可以将这些属性组合在一起作为一种新的样式保存下来。那么，在下次要运用这些属性组合时，只需直接应用该样式，即可完成以前需要经过好几步操作才能完成的工作。,返 回,图9-37 样式面板,5）“库”面板 库面板与样式面板在一个面板组，如图9-38所示。库面板包括图形符号和按钮符号，用户可以很容易地将这些符号从库面板中拖入文档，从而创建自己的图形与按钮。,3Fireworks 8基本操作,（1）新建文档 在Fireworks 8中创建新文档就是创建一个PNG格式的图像文件，新建文档的方法如下： 1）用下列四种方法之一，打开“新建文档”对话框，如图9-39所示。 在Fireworks 8开始页中，单击“Fireworks文件”超链接； 执行“文件”|“新建”菜单命令； 按“Ctrl+N”快捷键； 单击“主要”工具栏的“新建”按钮。,返 回,图9-39 “建新文档”对话框,2Fireworks 8基本操作,（1）新建文档 在Fireworks 8中创建新文档就是创建一个PNG格式的图像文件，新建文档的方法如下： 1）用下列四种方法之一，打开“新建文档”对话框，如图9-39所示。 在Fireworks 8开始页中，单击“Fireworks文件”超链接； 执行“文件”|“新建”菜单命令； 按“Ctrl+N”快捷键； 单击“主要”工具栏的“新建”按钮。,（2）打开文档 在Fireworks 8中，不仅可以打开自身生成的PNG格式的图像文档，还可以打开GIF和JPEG等格式的文件，甚至可以打开并编辑RTF和纯文本文件。 打开文档的方法有以下四种： 1）在开始页中单击“打开最近的项目”超链接，即可打开该文件；也可单击“打开”超链接，在弹出的对话框选择文档，单击“打开”按钮。 2）单击菜单“文件”|“打开”命令，在弹出的“打开”对话框选择需要的文档，单击“打开”按钮。,3）利用“Ctrl+N”快捷键，弹出“打开”对话框，选择需要的文档，单击“打开”按钮。 4）单击“主要”工具栏的“打开”按钮，弹出“打开”对话框，其它操作同上。,（3）设置文档属性 在Fireworks 8中，允许用户在任何时候修改图像大小和画布颜色等属性，极大地方便了操作。 1）修改图像大小 2）修改画布大小 3）修改画布颜色,导航栏实际上是一组互斥按钮，因此，只要创建一个按钮，然后将其复制并适当修改其文字提示及链接就可以了。 示范演示： 制作示例网页导航栏,4利用Fireworks制作示例网页导航栏,9.2.2 将Fireworks 8制作的图片放到网页上,将制作的图片放到网页中，需要进行如下操作： （1）将图片或符号文件复制到Dreamweaver 8管理的网站的本地文件夹中； （2）在Dreamweaver 8 的网页文件内选定要放图片的位置，然后选择“插入”|“图像”命令，打开“选择图像源”对话框； （3）在“选择图像源”对话框内选择要使用的图片或符号，然后单击“确认”按钮。,9.3 利用Flash 8制作网页动画,9.3.1 利用Flash 8制作网页动画,Flash是美国Macromedia公司出品的矢量图形编辑和动画创作专业软件，被广泛应用于网页设计和多媒体创作等领域。利用该软件制作的图形和动画具有文件品质高、体积小、交互性强、可带音效和兼容性好等特点，因而用它可创作出美观生动而极为复杂的网页作品。,1Flash 8简介,（1）有关动画的一些基本概念, 帧（Frame） Flash在制作动画时，是由若干个帧来组成一个动画效果的。帧是装载Flash作品内容、进行Flash作品播放的基本单位，也是Flash动画的基本组成元素。Flash的时间线面板上的每一小格代表一帧。 帧有以下几种类型：关键帧、关键帧和中间过渡帧。, 组件（Symbol）与实例（Instance） 组件只是一种人为的规范，它指的是动画中一些出现频率较高的物件对象。组件通常存放在图库中，使用时再把它从图库中拖曳出来。有人把组件形象地比喻为存储起来的演员，随时可以调出来扮演角色。 把组件从图库中拖曳到舞台工作区中，就得到了组件的一个实例。可以把组件想象成一个源文件，它的实例就是它在不同地方的复制。, 层（Layer） 层是为了方便操作者制作复杂的Flash动画作品而引入的一种手段。在时间线面板上，每个层都有各自的时间线。在每个层中都包含了一系列的帧，在各层中所使用的帧均是独立的。可用控制器来播放某个场景的动画效果。播放动画时，会从每个层的第一帧开始播放（即同步播放），不同层中的帧在同时播放中可以得到综合的效果。, 场景（Scene） 一个Flash作品可以由若干个场景组成，每个场景都分别拥有各自独立的动画内容。每个场景中的层和帧均相对独立。在播放时，Flash会自动按场景的顺序进行播放。 影片 一个或几个场景就可以组成一个影片。,1）渐变增强：在Flash 8中用户可以对舞台上的对象应用复杂的渐变。最多可以渐变添加 16 种颜色，精确控制渐变焦点的位置，并对渐变应用其它参数。 2）对象绘制模型：以前版本 Flash 中，位于舞台上同一图层中的所有形状可能会影响其它重叠形状的轮廓。Flash 8中可以在舞台上直接创建形状，而不会与舞台上的其它形状互相干扰。,（2）Flash 8的新增功能,3）新的文本渲染引擎：新的文本渲染引擎保证在屏幕上更清晰地显示Flash中的文字，文本工具也有改进。 4）脚本助手模式：使用“动作”面板中新增的助手模式，用户能在不太了解 ActionScript 的情况下也能创建脚本。 5）扩展的舞台工作区：用户可以使用舞台周围的区域存储图形和其它对象，而在播放 SWF 文件时不在舞台上显示它们。,6）Macintosh 文档选项卡：用户可以在同一个 Flash 应用程序窗口中打开多个 Flash 文件，并使用位于窗口顶部的文档选项卡在它们中间进行选择。 7）改进的“首选参数”对话框： Macromedia 精简了“首选参数”对话框的设计，对其进行了重新布置，使其更简明好用。 8）单一库面板：用户可以使用一个库面板来同时查看多个 Flash 文件的库项目。,9）改进的发布界面：简化后的“发布设置“对话框，使得对 SWF 文件发布的控制更加轻松。 10）对象层级撤消模式：使用此模式时，舞台上和库中的每个对象都具有自己的撤消列表。在撤消对某个对象所做的更改时，不必撤消对任何其它对象的更改。,启动Flash 8，打开开始页，单击“Flash文档”超链接，即可进入Flash 8工作界面。 Flash 8的界面由以下几个部分组成：标题栏、菜单栏、标准工具栏、绘图工具栏、状态栏、时间线面板、控制器、工作区等，如图所示。,（3）Flash 8的界面组成,Flash 8主窗口,返 回, 菜单栏 除了绘图命令以外的绝大多数命令都可以在菜单栏中实现。 常用工具栏 常用工具栏也叫标准工具栏，它位于菜单栏的下方，该工具栏除了提供了多个用于文件和编辑操作常用的命令按钮外，还提供了几个Flash 8所特有的工具按钮。, 控制工具条 Flash 8的控制器是用来控制动画播放的，它是浮动面板，它可以在“窗口”菜单中的“工具栏”子菜单中打开或关闭，也可以用鼠标移动其位置。 工具栏 工具栏即绘图工具栏，一般情况下出现在窗口的左边，也可用鼠标改变其位置。该工具栏提供了用于图形绘制和编辑的各种工具按钮。 工作区 工作区位于窗口的中央，动画就是在这个舞台上生成和演出的。, 属性面板 使用属性面板可以轻松地访问和更改文档最常见的属性。用户可以在属性面板中更改文档属性，而不用访问包含这些功能的菜单或面板。 时间轴面板 时间轴面板是浮动面板，其预设位置在标准工具栏的下方，是用来管理不同场景中的层与处理帧的。, 帧的操作 改变帧的播放速率 在默认情况下，Flash动画每秒播放的帧数为12格（帧/秒）。数值越大，播放帧数就越多，速度也就越快，动画的效果就越顺畅；反之，数值越小，速度就越慢，动画播放时就会有很明显的停格的现象。 示范演示,（4）Flash 5中的一些基本操作,帧的选择 用鼠标单击某一帧，该帧即被选中，并且成为当前帧，同时在工作区中显示出该帧中的内容。如果想一次选取许多帧，可以在所要选取的起始帧处，按下鼠标左键不放，同时拖曳鼠标至所需位置即可。或者先用鼠标单击起始帧，然后按下“Shift”键不放，在所要选取的终止帧处单击鼠标左键，这样做也可以同时选中多个帧。,创建各种类型的帧 在时间线上需要新建静止帧的位置处单击鼠标左键，然后选择“插入”|“帧关键帧 空白关键帧 ”命令，或单击鼠标右键，在弹出的菜单中选择“插入帧”，就可在所需位置上创建一个包含有与前一帧相同内容的帧。,复制帧 复制帧的方法为：首先将需要复制的一个或者多个帧选中；在其上单击鼠标右键，从弹出的菜单中选择“复制帧”命令；用鼠标单击需要粘贴的位置，再单击鼠标右键，从弹出的快捷菜单中选择“粘贴帧”命令，即可将相同的内容复制到所需的位置上。 删除帧 首先选取帧，然后选择“插入”|“删除帧”命令，或者是在被选中的帧上单击鼠标右键，从弹出的快捷菜单中选择“移除帧”命令，, 层的操作 插入图层 在层编辑区的左下角的第一个按钮为“插入层”按钮，按下它之后，即可在当前所编辑的层上面插入一个新层；也可以在当前层上单击鼠标右键，从弹出的菜单中选择“插入层”选项，来新增一个层。 图层的重命名 在默认状态下，层名为“层1”、“层2”、“层n”，若想改变层的名称，可先选中该层，然后在层名上双击鼠标左键，此时出现一个小方框，只要在其中输入新的层名即可。,调整层的顺序 如果想要改变层的先后顺序，可以用以下的方法：先用鼠标单击所要调整的层，把它选中；然后按住鼠标左键不放，同时拖动之，把它拖到所要放置的地方；再放开鼠标左键。 删除层 删除层可以按如下步骤进行： 选取要删除的层，在其上按住鼠标不放，把它拖至时间线面板上的层编辑区右下角的“删除层”按钮处即可；或在要删除的层上单击鼠标右键，从弹出的菜单中选取“删除层”命令。, 场景的操作 插入场景 选择“插入”|“场景”命令，即可新建一个场景；或选择“窗口”|“场景”命令，此时会弹出一个“场景”对话框，在对话框中单击添加场景按钮即可。 场景的更名 选择“窗口”|“场景”命令，在打开的场景对话框中选中要更名的场景，然后双击鼠标左键，出现一个文本框，直接输入一个名称即可。,当前场景的切换 场景切换可按如下方法进行： 在场景对话框中直接单击所需场景名；或单击“视图”菜单，从中选择“跳转到”选项，在该选项中再选择所需要的场景名称即可。 删除场景 删除场景的方法如下： 选择“插入”|“删除场景”菜单命令，即可将当前的场景删除；或选择“窗口”|“场景”命令，在弹出的场景对话框中，选择要删除的场景名，然后单击“Delete”按钮即可。,（1）Flash动画的类型 Flash动画分为两种类型：逐帧动画和补间动画。 逐帧动画是由位于时间线上的同一动画轨道上的一个连续的关键帧序列组成。对于该序列中的每一帧中的内容都可以单独地进行编辑。在播放时，按顺序逐帧地进行播放而产生动画的效果。,2利用Flash 8制作网页动画,补间动画又称过渡动画，这种动画类型只需要用户绘制有限的关键帧，关键帧之间的过渡帧（即“间”）是由Flash 8自动生成的（即“补”）。补间动画有两种类型：动作补间和形状补间。在动作补间中，两个关键帧中的对象位置不同，Flash 8自动生成两个关键帧之间位置的过渡，形成连续的运动。在形状补间中，两个关键帧中的对象形状不同，Flash 8自动生成两个关键帧之间形状的过渡，从而形成动画。, 创建逐帧动画 由于逐帧动画需要对每一帧中的内容进行逐个的制作和编辑，因此对动画的效果具有很强的控制能力，适合于制作较为复杂的动画。但是，由于该类动画数据量大、编辑工作既耗时又复杂艰巨，故除非确实需要如此，否则应尽量避免采用该类动画。 示范演示,（2）Flash动画的制作, 创建补间动画 与逐帧动画不同，补间动画是由起始和终止两个关键帧，以及由这两个关键帧定义的若干个中间过渡帧所组成的动画帧序列。在制作过渡动画时不需要逐帧地进行编辑，只要将起始和