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

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

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

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

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

5、07zhiqingchun.html”。2 插入鼠标经过图像。将鼠标光标置于网页中间名为“apDiv2”的 AP DIV中，选择【插入】/【图像】/【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框，设置属性如图所示。7.1.5 课堂案例插入鼠标经过图像具体操作步骤：7.1.5 课堂案例插入鼠标经过图像7.1.5 课堂案例插入鼠标经过图像网页显示效果如图所示。7.1.5 课堂案例插入鼠标经过图像网页显示效果如图所示。7.1.5 课堂案例插入鼠标经过图像3插入图像。将鼠标光标置于“apDiv2”右侧的名为“apDiv3”的第一个单元格中，选择【插入】/【图像】命令，在弹出的对话框中选择文件名为

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

7、课堂案例插入鼠标经过图像 单击【5替换图像占位符。选中图像占位符，在【属性】检查器的【源文件】文本框中输入“images/hait.jpg”，完成图像占位符的替换。6编辑图像大小。选中替换的图像，单击【属性】检查器的【宽】右侧的按钮，使之变成状态，然后在【宽】文本框中输入“150”，返回设计窗口。7.1.5 课堂案例插入鼠标经过图像5替换图像占位符。选中图像占位符，在【属性】检查器的【源文整个网页显示效果如图所示。7.1.5 课堂案例插入鼠标经过图像整个网页显示效果如图所示。7.1.5 课堂案例插入鼠标经过 FLASH是一种重要的网页元素，它不仅表现力丰富、带给人们极强的视听感受，而且它体积小

8、，能够被绝大多数浏览器支持。因此，FLASH被广泛应用于网页设计领域。7.2 网页中的FLASH FLASH是一种重要的网页元素，它不仅表现力（1）.fla： FLASH的源文件。（2）.swf：FLASH电影文件（3）.swt：FLASH模板文件。（4）.flv： FLASH视频文件。7.2.1 FLASH的文件类型（1）.fla： FLASH的源文件。7.2.1 FLASH7.2.2 插入FLASH动画1插入SWF格式的FLASH动画 首先将鼠标光标定位在目标位置，选择【插入】/【媒体】/【SWF】命令，弹出【选择SWF】对话框，如图所示。 7.2.2 插入FLASH动画1插入SWF格式的

9、FLASH 选择已经备好的SWF格式的FLASH动画，单击【确定】按钮，打开【对象标签辅助功能属性】对话框，如图所示。 7.2.2 插入FLASH动画 选择已经备好的SWF格式的FLASH动画，单 在该对话框中设置FLASH标题、快速访问键和Tab键索引，单击【确定】按钮完成FLASH动画的插入，如图所示。 7.2.2 插入FLASH动画 在该对话框中设置FLASH标题、快速访问键和2设置FLASH动画 选中插入的FLASH动画文件，在【属性】检查器中可以对宽、高等属性进行设置，如图所示。7.2.2 插入FLASH动画2设置FLASH动画7.2.2 插入FLASH动画 Flash视频即扩展名为

10、.flv的Flash文件， 是目前网络上比较流行的视频文件格式，用户可以脱离Flash创作工具向网页中轻松地添加FLV视频。7.2.3 插入FLASH 视频 Flash视频即扩展名为.flv的Flash1插入FLV视频文件 将鼠标光标定位到目标位置，选择【插入】/【媒体】/【FLV】命令，弹出【插入FLV】对话框，如图所示。 7.2.3 插入FLASH 视频1插入FLV视频文件7.2.3 插入FLASH 视频7.2.3 插入FLASH 视频 在该对话框中单击【URL】后的【浏览】按钮，在弹出的【选择FLV】对话框中选择视频文件，如图所示。 7.2.3 插入FLASH 视频 在该对话框中7.2.

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

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

13、等多媒体元素外，HMTL网页还支持一种比FLASH具有更强多媒体交互功能的元素，即Shockwave影片。7.3 网页中的Shockwave影片 在Dreamweaver CS6中，除了支持 Shockwave是由Adobe Director软件制作而成，影片文件较小，可以被快速下载。常用于制作较复杂的网页小游戏、多媒体课件等，文件格式有DCR、DXR及DIR等几种。7.3.1 认识Shockwave影片 Shockwave是由Adobe Direc7.3.2 插入Shockwave影片 首先将鼠标光标定位在目标位置，选择【插入】/【媒体】/【Shockwave】命令，在弹出的【选择文件】对话

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

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

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

17、/【插件】命令，在弹出的【选择文件】对话框中打开站点的“music”文件夹，选择“Go home.mp3”，单击【确定】按钮。7.4.4 课堂案例制作默默音乐盒3嵌入音乐。将鼠标光标7.4.4 课堂案例制作默默音乐盒4设置嵌入音乐属性。选中插件占位符，在【属性】检查器中设置插件【宽】为“180”。单击【参数】按钮，在弹出的【参数】对话框中，设置“autoplay”属性值为“false”，单击【确定】按钮，如图所示。7.4.4 课堂案例制作默默音乐盒4设置嵌入音乐属性。选网页预览效果如下图所示。7.4.4 课堂案例制作默默音乐盒网页预览效果如下图所示。7.4.4 课堂案例制作默默音乐盒7.5 网

18、页中的其他媒体对象 7.5.1 插入传统视频文件 传统视频是区别于FLV格式的视频而言，这些视频文件可以通过传统的视频播放器进行播放，包括AVI、WMV、MOV、RM和 RMVB等。传统视频的插入方法与使用插件添加声音文件的方法完全相同，只是需要设置插件的【宽】和【高】属性，以使能正常观看视频。7.5 网页中的其他媒体对象 7.5.1 插入传统视频文件 Applet即Java小程序，是一种动态、安全、跨平台的、能够嵌入在网页中的、可以执行一定小任务的网络应用程序，扩展名常为.class。 用户访问服务器的Applet时，这些Applet就在网络上传输，然后在支持Java的浏览器中运行。在执行带有Java效果