Dreamweaver网页设计与应用（Dreamweaver CC 2019）（微课版）课件 3图像和多媒体

项目引入：图像和多媒体是网页中的重要元素，在网页中的应用非常广泛。本项目主要讲解图像和多媒体在网页中的应用方法和技巧，通过对这些内容的学习，学生可以设计、制作出更加美观、生动、丰富且具有动感和吸引力的网页。项目3图像和多媒体掌握在网页中插入和编辑图像的方法掌握多媒体在网页中的应用方法和技巧项目目标掌握“环球旅游网页”的关键制作步骤掌握“物流运输网页”的关键制作步骤技能目标培养解决实际问题的能力培养团队协作意识和技能，提升与他人合作的能力素养目标任务3.1图像的基本操作网页中的图像格式在网页中插入图像设置图像属性给图像添加文字说明跟踪图像任务实践—环球旅游网页3.1.1网页中的图像格式网页中常用的图像格式有JPEG、GIF、PNG这3种，但大多数浏览器只支持JPEG和GIF两种图像格式。为了保证网页的加载速度，网站设计者常使用JPEG和GIF这两种压缩格式的图像。3.1.2在网页中插入图像要在DreamweaverCC2019文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内，否则图像不能正确显示。所以在建立站点时，网站设计者通常会创建一个名为“images”的文件夹，并将需要的图像复制到其中。“选择图像源文件”对话框3.1.3设置图像属性插入图像后，“属性”面板中会显示该图像的属性。插入图像后的“属性”面板3.1.4给图像添加文字说明当图像不能在浏览器中正常显示时，网页中图像的位置就变成空白区域。为了让浏览者在图像不能正常显示时也能了解图像的信息，常为网页的图像设置“替换”属性，将图像的说明文字输入“替换”文本框中。“属性”面板效果图3.1.5跟踪图像在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。DreamweaverCC2019利用“跟踪图像”功能来实现上述网页设计方式。任务实践—环球旅游网页使用“Image”按钮插入图像，使用“CSS设计器”面板控制图像的水平边距。效果图任务3.2多媒体在网页中的应用插入Flash动画插入FLV文件插入Animate作品插入HTML5Video插入音频插入插件任务实践—物流运输网页3.2.1插入Flash动画DreamweaverCC2019提供了在文档中插入Flash动画的功能，虽然Flash中使用的文件类型有Flash源文件（扩展名为“.fla”）、FlashSWF文件（扩展名为“.swf”）、Flash模板文件（扩展名为“.swt”），但DreamweaverCC2019只支持FlashSWF文件（扩展名为“.swf”），因为它是Flash源文件（扩展名为“.fla”）的压缩版本，已进行了优化，便于在网络上查看。3.2.2插入FLV文件FLV全称FlashVideo。在网页中可以轻松添加FLV文件，而无须使用Flash创作工具。但在操作之前必须有一个经过编码的FLV文件。使用Dreamweaver插入一个显示FLV文件的SWF（ShockWaveFlash）组件，当在浏览器中查看时，此组件会显示所选的FLV文件以及一组播放控件。3.2.3插入Animate作品Animate是Adobe公司出品的用于制作HTML5动画的可视化工具。使用该软件可以在网页中轻而易举地插入动画效果，而不需要编写烦琐复杂的代码。3.2.4插入HTML5Video使用DreamweaverCC2019可以在网页中插入HTML5Video。HTML5Video元素提供了一种将视频嵌入网页中的标准方式。“属性”面板3.2.5插入音频1．插入背景音乐HTML提供了背景音乐标签<bgsound></bgsound>，使用该标签可以为网页添加背景音乐。2．插入音乐插入音乐和插入背景音乐的效果不同，插入音乐后可以在页面中看到播放器的外观，如播放、暂停、定位和音量等按钮。3．嵌入音乐上面介绍了背景音乐及音乐的插入，下面来讲解如何嵌入音乐。嵌入音乐和插入音乐相同，只不过嵌入音乐播放器要比插入音乐播放器多几个按钮。3.2.6插入插件利用“插件”按钮，可以在网页中插入AIV、MPG、MOV、MP4等格式的视频文件，也可以插入音频文件。在网页中插入插件的方与嵌入音乐的方法一样，具体操作步骤如下。（1）在文档窗口的“设计”视图中，将光标置于想要插入插件的位置。（2）通过以下几种方法启用“插件”命令。①在“插入”面板“HTML”选项卡中单击“插件”按钮。②选择“插入>HTML>插件”命令。任务实践—物流运输网页使用“FlashSWF”按钮在网页中插入