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