Dreamweaver-CS6-第3章图像和多媒体课件

第3章图像和多媒体本章简介：图像在网页中的作用是非常重要的，图像、按钮、标记可以使网页更加美观、形象生动，从而使网页中的内容更加丰富多彩。所谓“媒体”是指信息的载体，包括文字、图形、动画、音频和视频等。在DreamweaverCS6中，用户可以方便快捷地向Web站点添加声音和影片媒体，并可以导入和编辑多个媒体文件和对象。课堂学习目标掌握图像的格式掌握图像的插入、图像的属性、图像占位符、跟踪图像的应用掌握Flash动画、Flv、Shockwave影片、Applet、ActiveX控件的插入3.1图像的插入课堂案例——纸杯蛋糕网页网页中的图像格式插入图像设置图像属性给图片添加文字说明插入图像占位符跟踪图像3.1.1课堂案例—纸杯蛋糕网页使用“图像”按钮，插入图像；使用“CSS样式”命令，控制图像的水平边距。效果图3.1.2网页中的图像格式Web页中通常使用的图像文件有JPEG、GIF、PNG3种格式，但大多数浏览器只支持JPEG、GIF两种图像格式。因为要保证浏览者下载网页的速度，所以网站设计者也常使用JPEG和GIF这两种压缩格式的图像。1．GIF文件2．JPEG文件3．PNG文件3.1.3插入图像要在DreamweaverCS6文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内，否则图像不能正确显示，所以在建立站点时，网站设计者常先创建一个名叫“image”的文件夹，并将需要的图像复制到其中。3.1.4设置图像属性插入图像后，在“属性”面板中显示该图像的属性。插入图像后的“属性”面板3.1.5给图片添加文字说明当图片不能在浏览器中正常显示时，网页中图片的位置就变成空白区域。为了让浏览者在不能正常图片显示时也能了解图片的信息，常为网页的图像设置“替换”属性。“属性”面板效果图3.1.6插入图像占位符在网页布局时，网站设计者需要先设计图像在网页中的位置，等设计方案通过后，再将这个位置变成具体图像。DreamweaverCS6提供的“图像占位符”功能，可满足上述需求。在网页中插入图像占位符的具体操作步骤如下。（1）在文档窗口中，将插入点放置在要插入占位符图形的位置。（2）通过以下几种方法启用“图像占位符”命令，弹出“图像占位符”对话框。选择“插入”面板“常用”选项卡，单击“图像”展开式工具按钮，选择“图像占位符”选项。选择“插入图像对象图像占位符”命令。3.1.7跟踪图像在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。DreamweaverCS6利用“跟踪图像”功能来实现上述网页设计的方式。3.2多媒体在网页中的应用课堂案例——五谷杂粮网页插入Flash动画插入FLV插入Shockwave影片影片插入Applet程序插入ActiveX控件3.2.1课堂案例—绿色农场网页使用“FlashSWF”按钮，为网页文档插入Flash动画效果；使用“属性”面板，设置动画为透明；使用“播放”按钮在文档窗口中预览效果。效果图3.2.2插入Flash动画DreamweaverCS6提供了使用Flash对象的功能，虽然Flash中使用的文件类型有Flash源文件(.fla)、FlashSWF文件(.swf)、Flash模板文件(.swt)，但DreamweaverCS56支持FlashSWF(.swf)文件，因为它是Flash(.fla)文件的压缩版本，已进行了优化，便于在Web上查看。3.2.3插入FLV在网页中可以轻松添加FLV视频，而无需使用Flash创作工具。但在操作之前必须有一个经过编码的FLV文件。使用Dreamweaver插入一个显示FLV文件的SWF组件，当在浏览器中查看时，此组件显示所选的FLV文件以及一组播放控件。3.2.4插入Shockwave影片Shockwave是Web上用于交互式多媒体的Macromedia标准，是一种经过压缩的格式，使得在MacromediaDirector中创建的多媒体文件能够被快速下载，而且可以在大多数常用浏览器中进行播放。3.2.5影片插入Applet程序Applet是用Java编程语言开发的、可嵌入Web页中的小型应用程序。DreamweaverCS6提供了将JavaApplet插入HTML文档中的功能。3.2.6插入ActiveX控件ActiveX控件也称OLE控件，它是可以充当浏览器插件的可重复使用的组件，像微型的应用程序。ActiveX控件只在Windows系统上的InternetExplorer中运行。DreamweaverCS6中的ActiveX对象可为浏览者浏览器中的ActiveX控件提供属性和参数。3.3课堂练习—咖啡网页使用“图像”按钮，插入图像；使用“代码”命令，设置图像边距效果。效果图3.4课后习题—木工网页使用“SWF”按钮，为网页文档插入Flash动画效果；使用“播放”按钮，在文档窗口中预览效果。效果图