新媒体网页设计与制作-Dreamweaver-CS6基础、案例、技巧实用教程第7章课件.ppt

1、第第7 7章章 新媒体网页中的多媒体元素新媒体网页中的多媒体元素本章学习要点：本章学习要点：1 1网页图像及多媒体文件格式网页图像及多媒体文件格式 2 2插入及编辑网页图像插入及编辑网页图像 3 3插入插入flashflash对象对象 4 4插入其他媒体元素插入其他媒体元素7.1 7.1 网页中的图像网页中的图像 图像是网页中最重要的多媒体元素之一，俗话说“一图胜千文”，它的引入不仅美化了网站页面，也使网页变得多姿多彩。在Dreamweaver CS6中，不但提供了普通图像的插入功能，还可以结合软件的内置功能添加鼠标经过图像。7.1.1 7.1.1 网页图像格式网页图像格式 虽然图像的文件格式

2、很多，但并不是所有图像都适用于网页，通常用于网页的格式有3种，即JPG格式、GIF格式和PNG格式。JPG：联合图像专家组,也被称为JPEG。GIF：图像交换格式。PNG：便携网络图像。7.1.2 7.1.2 插入图像插入图像1插入图像 选择【插入】/【图像】命令，弹出【选择图像源文件】对话框，如图7-1所示。在该对话框中设置插入图像所在的位置，并找到需要插入的图像，单击【确定】按钮，打开【图像标签辅助属性功能】对话框，如图所示。7.1.2 7.1.2 插入图像插入图像2图像的属性设置 选中网页文档中的图像，在【属性】检查器中可对图像的宽、高等属性进行设置，如图所示。7.1.2 7.1.2 插

3、入图像插入图像7.1.3 7.1.3 插入图像占位符插入图像占位符 图像占位符是在准备好将最终图像添加到网页之前使用的图形，在发布站点之前，用适用于网页的图像文件替换所有添加的图像占位符。7.1.3 7.1.3 插入图像占位符插入图像占位符1插入图像占位符 首先将鼠标光标定位到目标位置，选择【插入】/【图像】/【图像占位符】命令，弹出【图像占位符】对话框，为图像占位符设置大小和颜色等属性，如图所示。7.1.3 7.1.3 插入图像占位符插入图像占位符2替换图像占位符 在文档窗口中双击图像占位符或单击图像占位符，在属性检查器中单击【源文件】文本框旁边的图标，弹出【选择图像源文件】对话框，选择要用

4、于替换图像占位符的图像即可。7.1.4 7.1.4 插入鼠标经过图像插入鼠标经过图像 鼠标经过图像是一种在浏览器中查看并使用鼠标指针滑过它时发生变化的图像，这种图像由原始图像和鼠标经过图像两部分组成，因此要插入这种图像，应选用一对或多对图像。选择【插入】/【图像】/【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框，如图所示。设置所需的选项，单击【确定】按钮即可。7.1.4 7.1.4 插入鼠标经过图像插入鼠标经过图像7.1.5 7.1.5 课堂案例课堂案例插入鼠标经过图像插入鼠标经过图像具体操作步骤：1打开素材文件“examplechapter07zhiqingchun.html”。2 插

5、入鼠标经过图像。将鼠标光标置于网页中间名为“apDiv2”的 AP DIV中，选择【插入】/【图像】/【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框，设置属性如图所示。7.1.5 7.1.5 课堂案例课堂案例插入鼠标经过图像插入鼠标经过图像网页显示效果如图所示。7.1.5 7.1.5 课堂案例课堂案例插入鼠标经过图像插入鼠标经过图像3插入图像。将鼠标光标置于“apDiv2”右侧的名为“apDiv3”的第一个单元格中，选择【插入】/【图像】命令，在弹出的对话框中选择文件名为“80d.jpg”的图片文件，单击【确定】按钮完成图像的插入。用同样的方法在第二个单元格中插入文件名为“qc.jpg”

6、的图片文件。7.1.5 7.1.5 课堂案例课堂案例插入鼠标经过图像插入鼠标经过图像4插入图像占位符。将鼠标光标置于“apDiv2”右侧的名为“apDiv3”的第三个单元格中，选择【插入】/【图像】/【图像占位符】命令，弹出【图像占位符】对话框，设置图像占位符属性如图所示。7.1.5 7.1.5 课堂案例课堂案例插入鼠标经过图像插入鼠标经过图像7.1.5 7.1.5 课堂案例课堂案例插入鼠标经过图像插入鼠标经过图像 单击【确定】按钮完成图像的插入，如图所示。5替换图像占位符。选中图像占位符，在【属性】检查器的【源文件】文本框中输入“images/hait.jpg”，完成图像占位符的替换。6编辑

7、图像大小。选中替换的图像，单击【属性】检查器的【宽】右侧的按钮，使之变成状态，然后在【宽】文本框中输入“150”，返回设计窗口。7.1.5 7.1.5 课堂案例课堂案例插入鼠标经过图像插入鼠标经过图像整个网页显示效果如图所示。7.1.5 7.1.5 课堂案例课堂案例插入鼠标经过图像插入鼠标经过图像 FLASH是一种重要的网页元素，它不仅表现力丰富、带给人们极强的视听感受，而且它体积小，能够被绝大多数浏览器支持。因此，FLASH被广泛应用于网页设计领域。7.2 7.2 网页中的网页中的FLASHFLASH（1）.fla：FLASH的源文件。（2）.swf：FLASH电影文件（3）.swt：FLA

8、SH模板文件。（4）.flv：FLASH视频文件。7.2.1 FLASH7.2.1 FLASH的文件类型的文件类型7.2.2 7.2.2 插入插入FLASHFLASH动画动画1插入SWF格式的FLASH动画 首先将鼠标光标定位在目标位置，选择【插入】/【媒体】/【SWF】命令，弹出【选择SWF】对话框，如图所示。选择已经备好的SWF格式的FLASH动画，单击【确定】按钮，打开【对象标签辅助功能属性】对话框，如图所示。7.2.2 7.2.2 插入插入FLASHFLASH动画动画 在该对话框中设置FLASH标题、快速访问键和Tab键索引，单击【确定】按钮完成FLASH动画的插入，如图所示。7.2.

9、2 7.2.2 插入插入FLASHFLASH动画动画2设置FLASH动画 选中插入的FLASH动画文件，在【属性】检查器中可以对宽、高等属性进行设置，如图所示。7.2.2 7.2.2 插入插入FLASHFLASH动画动画 Flash视频即扩展名为.flv的Flash文件，是目前网络上比较流行的视频文件格式，用户可以脱离Flash创作工具向网页中轻松地添加FLV视频。7.2.3 7.2.3 插入插入FLASH FLASH 视频视频1插入FLV视频文件 将鼠标光标定位到目标位置，选择【插入】/【媒体】/【FLV】命令，弹出【插入FLV】对话框，如图所示。7.2.3 7.2.3 插入插入FLASH

10、FLASH 视频视频7.2.3 7.2.3 插入插入FLASH FLASH 视频视频 在该对话框中单击【URL】后的【浏览】按钮，在弹出的【选择FLV】对话框中选择视频文件，如图所示。7.2.3 7.2.3 插入插入FLASH FLASH 视频视频 如果在“视频类型”中选择“流视频”选项，则进入流视频界面，如图所示。具体操作步骤：1打开素材文件“examplechapter07flash.html”。2插入flash动画。将鼠标光标置于网页顶部单元格中，选择【插入】/【媒体】/【SWF】命令，在弹出的【选择SWF】对话框中选择swf文件夹下的“pigeon.swf”文件，如图所示，单击【确定】

11、按钮。7.2.4 7.2.4 课堂案例课堂案例插入插入flashflash动画动画7.2.4 7.2.4 课堂案例课堂案例插入插入flashflash动画动画3设置flash动画属性。选中插入的SWF文件，在【属性】检查器中设置【宽】属性值为“960”，【Wmode】属性值为“透明”。4插入flash视频。将鼠标光标置于菜单下面的单元格中，选择【插入】/【媒体】/【FLV】命令，设置属性如图所示。7.2.4 7.2.4 课堂案例课堂案例插入插入flashflash动画动画7.2.4 7.2.4 课堂案例课堂案例插入插入flashflash动画动画网页预览效果如图所示 7.2.4 7.2.4 课

12、堂案例课堂案例插入插入flashflash动画动画 在Dreamweaver CS6中，除了支持FLASH动画、FLV视频等多媒体元素外，HMTL网页还支持一种比FLASH具有更强多媒体交互功能的元素，即Shockwave影片。7.3 7.3 网页中的网页中的ShockwaveShockwave影片影片 Shockwave是由Adobe Director软件制作而成，影片文件较小，可以被快速下载。常用于制作较复杂的网页小游戏、多媒体课件等，文件格式有DCR、DXR及DIR等几种。7.3.1 7.3.1 认识认识ShockwaveShockwave影片影片 7.3.2 7.3.2 插入插入Sho

13、ckwaveShockwave影片影片 首先将鼠标光标定位在目标位置，选择【插入】/【媒体】/【Shockwave】命令，在弹出的【选择文件】对话框中选择要插入的Shockwave影片即可。7.4 7.4 网页中的声音网页中的声音 声音在传达信息中有着不可比拟的优势，也是多媒体网站重要的组成要素之一，选择合适的音频能使网站内容更加丰富，有更强的感染力。网页中支持的音频格式有很多种，下面是常用的音频格式。MIDI或MID：乐器数字接口格式。MP3：全称为动态影像专家压缩标准音频层面3。WAV：Waveform扩展名格式。RA、R AM、RPM：是一种压缩程序很高的音频格式文件。7.4.1 7.4

14、.1 网页支持的音频格式网页支持的音频格式7.4.2 7.4.2 链接到声音文件链接到声音文件 链接到音频文件是将声音添加到网页的一种简单而有效的方法。要创建指向某一声音文件的链接，首先要选中用于指向音频文件链接的文本或图像等对象，然后在【属性】检查器的【链接】文本框中输入音频文件的路径及名称，或单击【链接】后的 图标，在弹出对话框中选择音频文件即可，如图所示。7.4.2 7.4.2 链接到声音文件链接到声音文件 首先将鼠标光标定位到目标位置，选择【插入】/【媒体】/【插件】命令，弹出【选择文件】对话框，从中选择要添加的声音文件，单击【确定】按钮，即在网页中插入一个插件占位符。选中插件占位符，

15、在【属性】检查器设置声音文件属性，如图所示。7.4.3 嵌入声音文件7.4.4 课堂案例制作默默音乐盒具体操作步骤：1打开素材文件“examplechapter07playmusic.html”。2链接音乐文件。将鼠标光标置于网页第一幅图片下方名为“text”的DIV中，选中“Yesterday Once More”文本，在其【属性】检查器【链接】文本中输入“music/Yesterday Once More.mp3”。7.4.4 课堂案例制作默默音乐盒3嵌入音乐。将鼠标光标置于第二幅图片下方名为“text1”的DIV中，选择【插入】/【媒体】/【插件】命令，在弹出的【选择文件】对话框中打开站

16、点的“music”文件夹，选择“Go home.mp3”，单击【确定】按钮。7.4.4 课堂案例制作默默音乐盒4设置嵌入音乐属性。选中插件占位符，在【属性】检查器中设置插件【宽】为“180”。单击【参数】按钮，在弹出的【参数】对话框中，设置“autoplay”属性值为“false”，单击【确定】按钮，如图所示。网页预览效果如下图所示。7.4.4 课堂案例制作默默音乐盒7.5 网页中的其他媒体对象 7.5.1 插入传统视频文件 传统视频是区别于FLV格式的视频而言，这些视频文件可以通过传统的视频播放器进行播放，包括AVI、WMV、MOV、RM和 RMVB等。传统视频的插入方法与使用插件添加声音文

17、件的方法完全相同，只是需要设置插件的【宽】和【高】属性，以使能正常观看视频。Applet即Java小程序，是一种动态、安全、跨平台的、能够嵌入在网页中的、可以执行一定小任务的网络应用程序，扩展名常为.class。用户访问服务器的Applet时，这些Applet就在网络上传输，然后在支持Java的浏览器中运行。在执行带有Java效果的页面中，浏览器会启动Java解释器以执行Java Applet。7.5.2 7.5.2 插入插入AppletApplet7.5.3 7.5.3 插入插入ShockwaveShockwave影片影片 Shockwave压缩格式的影片文件较小，允许在Director软件中创建的多媒体文件快速下载，并可以通过大多数的浏览器进行播放。ActiveX 控件是用于互联网的很小的程序，有时称为插件程序，它允许播放动画或帮助执行任务，是宽松定义的、基于COM的技术集合。7.5.4 7.5.4 插入插入ActiveXActiveX