《项目四图像和媒体编排自然风景.ppt》由会员分享，可在线阅读，更多相关《项目四图像和媒体编排自然风景.ppt（30页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作网页设计与制作老虎工作室老虎工作室20122012年年1212月月Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.项目四项目四 图像和媒体图像和媒体编排编排自然风景自然风景网页网
2、页 任务一任务一 在网页中使用图像在网页中使用图像 任务二任务二 在网页中使用媒体在网页中使用媒体 实实 训训 设置设置“火焰山火焰山”网页网页 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd
3、. 在网页中文本固然是传递信息的最主要形式，在网页中文本固然是传递信息的最主要形式，但图像和媒体的作用也不可小视。当今互联网之但图像和媒体的作用也不可小视。当今互联网之所以具有极强的吸引力，与图像和媒体的普遍应所以具有极强的吸引力，与图像和媒体的普遍应用有着密切的关系。本项目以编排自然风景网页用有着密切的关系。本项目以编排自然风景网页为例，介绍使用为例，介绍使用Photoshop CS3处理图像、使用处理图像、使用Flash 8制作动画以及在网页中插入图像和制作动画以及在网页中插入图像和Flash动画、图像查看器和动画、图像查看器和ActiveX视频的方法。视频的方法。 Evaluation
4、only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Cop
5、yright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.任务一任务一 在网页中使用图像在网页中使用图像 （一）（一） 处理图像处理图像（二）（二） 插入图像插入图像Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 A
6、spose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.（一）处理图像（一）处理图像 需要掌握的内容主要有：需要掌握的内容主要有： 1、网页中图像的作用和常用格式、网页中图像的作用和常用格式 2、使用、使用Photoshop CS3处理图像处理图像 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.
7、0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. 网页中图像的作用基本上可分为两种情况，网页中图像的作用基本上可分为两种情况，一种是起装饰的作用，如背景图像，另一种是起一种是起装饰的作用，如背景图像，另一种是起传递信息的作用，它和文本的作用是一样的。传递信息的作用，它和文本的作用是一样的。 目前，网页中经常使用的图像格式是目前，网页中经常使
8、用的图像格式是GIF和和JPG。GIF格式文件小、支持透明色、下载时具格式文件小、支持透明色、下载时具有从模糊到清晰的效果，是网页中经常使用的图有从模糊到清晰的效果，是网页中经常使用的图像格式。像格式。JPG格式为摄影提供了一种标准的有损格式为摄影提供了一种标准的有损耗压缩方案，比较适合处理照片一类的图像。耗压缩方案，比较适合处理照片一类的图像。1 1、网页中图像的作用和常用格式、网页中图像的作用和常用格式Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2
9、011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.2 2、使用、使用Photoshop CS3Photoshop CS3处理图像处理图像需要掌握的内容有：需要掌握的内容有：（1） Photoshop CS3的界面的界面（2）创建文件的方法）创建文件的方法（3）工具箱中常用工具按钮的使用）工具箱中常用工具按钮的使用（4）设置图层样式的方法）设置图层样式的方法（5）保存文件的方法）保存
10、文件的方法（6）调整图像大小的方法）调整图像大小的方法Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. Evaluation only.Created with Aspose.Slides f
11、or .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.（二）（二） 插入图像插入图像 需要掌握的内容主要有：需要掌握的内容主要有： 1、插入图像、插入图像 2、设置图像属性、设置图像属性 3、图文混排、图文混排Evaluation only.Created with Aspose.Sl
12、ides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. 在网页中，插入图像的方法通常有在网页中，插入图像的方法通常有3种：种： （1）在主菜单中选择【插入】【图像】命令。）在主菜单中选择【插入】【图像】命令。 （2）在【插入】【常用】面板的【图像】下拉菜单）在【插入】【常用
13、】面板的【图像】下拉菜单中单击中单击 （图像）按钮。（图像）按钮。 （3）在【文件】【文件】面板中用鼠标选中文件，）在【文件】【文件】面板中用鼠标选中文件，然后拖到文档中适当位置。然后拖到文档中适当位置。1 1、插入图像、插入图像Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile
14、5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. 在图像【属性】面板中，比较常设置的参数有：【在图像【属性】面板中，比较常设置的参数有：【宽】和【高】、【替换】【垂直边距】、【水平边距】、宽】和【高】、【替换】【垂直边距】、【水平边距】、【边框】等。【边框】等。2 2、设置图像属性、设置图像属性Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Cre
15、ated with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. 在网页中，经常出现文本和图像混排的现象。在网页中，经常出现文本和图像混排的现象。在学习表格等网页布局技术之前，要做到这一点在学习表格等网页布局技术之前，要做到这一点就需要用到【属性】面板的【对齐】选项，【对就需要用到【属性】面板的【对齐】选项，【对齐】选项调整的是图像周围的文本或其他对象与齐】选项调整的是图像周围的文本或其他对象与图像的位置关系。在【对齐】下拉列表中共有图像的位置关系。在【对齐】下拉列表中
16、共有10个选项，其中经常用到的是个选项，其中经常用到的是“左对齐左对齐”和和“右对右对齐齐”两个选项。两个选项。 3 3、图文混排、图文混排Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.任务
17、二任务二 在网页中使用媒体在网页中使用媒体 （一）制作（一）制作Flash动画动画 （二）插入（二）插入Flash动画动画 （三）插入图像查看器（三）插入图像查看器 （四）插入（四）插入ActiveX视频视频 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Co
18、pyright 2004-2011 Aspose Pty Ltd.（一）（一）制作制作FlashFlash动画动画 需要掌握的内容主要有：需要掌握的内容主要有： 1、Flash 8的开始页的开始页 2、 Flash 8的工作界面的工作界面 3、创建、创建Flash文档的方法文档的方法 4、 Flash 8工具栏的使用工具栏的使用 5、设置文档属性的方法、设置文档属性的方法 6、【库】面板和【属性】面板、【库】面板和【属性】面板 7、【时间轴】面板、【时间轴】面板 8、导出影片、导出影片Evaluation only.Created with Aspose.Slides for .NET 3.5
19、 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation o
20、nly.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.（二）（二）插入插入FlashFlash动画动画 需要掌握的内容主要有：需要掌握的内容主要有： 1、插入、插入Flash动画动画 2、设置、设置Flash动画属性动画属性Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd
21、.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.1 1、插入、插入FlashFlash动画动画 插入插入Flash动画的方法通常有动画的方法通常有3种：种： （1）在主菜单中选择【插入】）在主菜单中选择【插入】/【媒体】【媒体】/【Flash】命令。命令。 （2）在【插入】）在【插入】/【常用】【常用】/【媒体】面板中单击【媒体】面板中单击 （Flash）图标。）图标。 （3）在【文件】【文件】面板中用鼠标选中文件
22、，）在【文件】【文件】面板中用鼠标选中文件，然后拖到文档中。然后拖到文档中。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.2 2、设置、设置FlashFlash动画属性动画属性 在【属性】面
23、板的【宽】和【高】文本框中分别输在【属性】面板的【宽】和【高】文本框中分别输入宽度和高度，勾选【循环】和【自动播放】选项，还入宽度和高度，勾选【循环】和【自动播放】选项，还可以根据需要设置其他参数。可以根据需要设置其他参数。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2
24、.0.0.Copyright 2004-2011 Aspose Pty Ltd. 需要掌握插入图像查看器的过程。需要掌握插入图像查看器的过程。 1、插入图像查看器、插入图像查看器Flash占位符占位符 2、设置、设置Flash占位符属性占位符属性 3、修改图像文件路径、修改图像文件路径 （三）插入图像查看器（三）插入图像查看器 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Creat
25、ed with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. 在主菜单中选择【插入】在主菜单中选择【插入】/【媒体】【媒体】/【图像查看器【图像查看器】命令，打开【保存】命令，打开【保存Flash元素】对话框，为新的元素】对话框，为新的Flash动动画命名画命名。保存文档后，在文档中插入一个保存文档后，在文档中插入一个Flash占位符。占位符。 1 1、插入图像查看器、插入图像查看器FlashFlash占位符占位符Evaluation only.Created with
26、 Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. 在在Flash占位符占位符 【属性】面板中定义宽度和高度等【属性】面板中定义宽度和高度等参数。参数。2 2、设置、设置FlashFlash占位符属性占位符属性Evaluation only.Crea
27、ted with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. 右键单击右键单击Flash占位符，在弹出的菜单中选择【编辑占位符，在弹出的菜单中选择【编辑标签标签】命令，打开【标签编辑器】命令，打开【标签编辑器Object】对话】对话框，切换至【
28、替代内容】选项，然后在文本框内找到默框，切换至【替代内容】选项，然后在文本框内找到默认的图像文件路径名，修改图像文件路径，使其可以显认的图像文件路径名，修改图像文件路径，使其可以显示预先准备好的图像。示预先准备好的图像。3 3、修改图像文件路径、修改图像文件路径Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5
29、 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.（四）插入（四）插入ActiveXActiveX视频视频 需要掌握的内容主要有：需要掌握的内容主要有： 1、在网页中播放、在网页中播放WMV视频文件视频文件 2、在网页中播放、在网页中播放RM视频文件视频文件 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Create
30、d with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.1 1、在网页中播放、在网页中播放WMVWMV视频文件视频文件 （1）在主菜单中选择【插入】）在主菜单中选择【插入】/【媒体】【媒体】/【ActiveX】命令，系统自动在文档中插入一个】命令，系统自动在文档中插入一个ActiveX占位符。占位符。 （2）在【属性】面板的【）在【属性】面板的【ClassID】列表文本框中添】列表文本框中添加加“CLSID:22D6f312-b0f6-11d0-94ab-0080c7
31、4c7e95”，然后按下然后按下Enter键。键。 （3）选择【嵌入】选项，然后在【属性】面板中打）选择【嵌入】选项，然后在【属性】面板中打开【参数】对话框，添加参数。开【参数】对话框，添加参数。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright
32、 2004-2011 Aspose Pty Ltd. （4）最后设置宽度和高度等属性。）最后设置宽度和高度等属性。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.2 2、在网页中播放、在网页中
33、播放RMRM视频文件视频文件 （1）在主菜单中选择【插入】）在主菜单中选择【插入】/【媒体】【媒体】/【ActiveX】命令，系统自动在文档中插入一个】命令，系统自动在文档中插入一个ActiveX占位符。占位符。 （2）在【属性】面板的【）在【属性】面板的【ClassID】选项中选择】选项中选择“RealPlayer/clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA”。 （3）选择【嵌入】选项，然后在【属性】面板中打）选择【嵌入】选项，然后在【属性】面板中打开【参数】对话框添加参数。开【参数】对话框添加参数。 （4）最后设置【宽】和【高】为固定尺寸。）最后设
34、置【宽】和【高】为固定尺寸。 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.实训实训 设置设置“火焰山火焰山”网页网页 本项目主要介绍了处理图像、制作本项目主要介绍了处理图像、制作Flash
35、动画动画以及在网页中插入图像和媒体的基本方法，本实以及在网页中插入图像和媒体的基本方法，本实训将让读者进一步巩固所学的基本知识。训将让读者进一步巩固所学的基本知识。 要求：把素材文件复制到站点根文件夹下，要求：把素材文件复制到站点根文件夹下，然后根据操作提示设置图像和然后根据操作提示设置图像和Flash动画。动画。 制作“送孟浩然之广陵”网页 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation on
36、ly.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. 制作“送孟浩然之广陵”网页 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile
37、 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.项目小结项目小结 本项目主要介绍了图像和媒体在网页中的应用和设置方本项目主要介绍了图像和媒体在网页中的应用和设置方法，概括起来主要有以下几点。法，概括起来主要有以下几点。 使用使用Photoshop CS3处理图像的方法。处理图像的方法。 使用使用Flash 8制作简单制作简单Flash动画的方法。动画的方法。 在网页中插入图像和图像占位符的方法。在网页中插入图像和图像占位符的方法。 通过【属性】面板设置图像属性和实现图文混排的方法。通过【属性】面板设置图像属性和实现图文混排的方法。 插入常用媒体的方法，如
38、插入常用媒体的方法，如Flash动画、图像查看器和动画、图像查看器和ActiveX视频。视频。 通过对这些内容的学习，希望读者能够掌握图像和媒体通过对这些内容的学习，希望读者能够掌握图像和媒体在网页中的具体应用及其属性设置的基本方法。在网页中的具体应用及其属性设置的基本方法。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.
