网页设计-5 多媒体
第五章 多媒体网页的制作
5.2.1 行为概述
• Dreamweaver 8中的行为是一系列 中的行为是一系列JavaScript程序的 中的行为是一系列 程序的 集成， 集成，通过行为使得网页制作人员不用编程而实现动态效果 行为包括两部分的内容，一个部分是事件， 。行为包括两部分的内容，一个部分是事件，另一个部分是 动作。动作是特定的JavaScript程序，只要在事件发生后 程序， 动作。动作是特定的 程序 该程序就会自动运行； ，该程序就会自动运行；行为是事件和该事件所触发的动作 的结合， 中主要通过【 的结合，在Dreamweaver中主要通过【行为】面板来控 中主要通过 行为】 制行为的使用。 制行为的使用。 • （1）行为面板 ） • （2）动作 ） • （3）事件 ）
5.1.2 插入声音
-常见的声音文件格式有：WAV格式、MID格式和MP3格 常见的声音文件格式有：WAV格式、MID格式和MP3格 格式 格式和MP3 式。 -WAV格式文件：声音品质很高的一种声音文件，但文 WAV格式文件：声音品质很高的一种声音文件， 格式文件 件量较大，在网上播放时要受到一定的限制。 件量较大，在网上播放时要受到一定的限制。 -MID格式文件：是由电子乐器产生的，文件量小，品 MID格式文件：是由电子乐器产生的，文件量小， 格式文件 质很好。 质很好。 -MP3格式文件：是压缩比较大的文件，音质也很好； MP3格式文件：是压缩比较大的文件，音质也很好； 格式文件 它的播放采用流的方式，文件边下载边播放， 它的播放采用流的方式，文件边下载边播放，节约了 等待时间，很适合网上播放， 等待时间，很适合网上播放，但需要浏览器有相应的 插件或者是播放器，如：Windows Media Player。 插件或者是播放器， Player。
• • • 事件：是浏览器对每一个网页元素的响应途径，与具体的网页对象相关。 动作：是一段事先编辑好的脚本，可用来选择某些特殊的任务。如播放声音、打开 浏览器窗口、弹出菜单等。 行为：实质上是事件和动作的合成体。
HTML5图像和多媒体
HTML5图像和多媒体网页图像有很多种，如图标，Logo, 新闻图片，人物流，产品小图，广告大图等。
本文将介绍如何在HTMLS中插入图像、图标、视频，以及如何对图像和图标进行布局。
1.1定义图像使用<img>标签可以把图像插入网页中。
<img src=”image.jpg”width =“400”alt=”图片链接”>src: 定义显示图像的URL。
alt: 设置图像的替代文本。
1.2定义流流表示图表，照片，图形，插图，代码片段等独立的内容。
HTML使用figure和figcaption 引入流，其中figcaption表示流的标题。
<figure><figcation>九月份汽车销量排行榜</figcation><img src=”peihang.png”width=”300”></figure>1.3定义图标网站图标一般显示在浏览器选项卡，历史记录，书签，收藏夹或地址栏中。
图标大小为16*16px,透明背景。
<link rel=”icon”, href=”/text.ico” type = “image/x-icon”>1.4响应式图像<picture>标签仅作为容器，可以包含一个或者多个子标签。
包含如下属性：Srcset: 设置图片文件路径。
Media：设置媒体查询。
Sizes：设置宽度。
Type: 设置MIME类型。
<picture><source media=”(min-width: 650px)”srcset=”images/test.png”></source></picture>响应屏幕方向Orientation用来表示响应屏幕方向，纵向显示portrait，横向显示landscape。
<picture><source media=” orientation: portrait”srcset=”images/test.png”></source><source media=” orientation: landscape)”srcset=”images/test.png”></source></picture>1.5响应像素密度当设计像素密度为2x时，后缀加载为text_2x.png图片，当像素密度为1x时加载text.png 图片。
网页设计 第五讲 网页多媒体
框架的分割方式和<frameset>的属性 的属性 框架的分割方式和
框架分割方式两种：一种是水平分割，另一种是垂直分割。 框架分割方式两种：一种是水平分割，另一种是垂直分割。
格式： 格式： <frameset rows=“值１,值2,…,值n”> <frameset cols=“值１,值2,…,值n”>
cols的值，说明窗口横向分割的情况，rows的值，说明窗口垂直分隔 的值，说明窗口横向分割的情况， 的值， 的值 的值 的情况。 的情况。
子窗口设置标签<frame>的属性 的属性 子窗口设置标签
<frame>标签的属性： 标签的属性： 标签的属性
src：设定子窗中要显示的网页文件名称，每个子窗一定要链接一个网页文件。 name：设定这个子窗的名称，这样才能在超链接中指定此子窗口作为链接打 开的窗口。 scrolling：设定是否显示滚动条，YES 表示要显示，NO 表示无论如何都不 显示，AUTO 视情况而定。 noresize：设定不让使用者可以改变这个窗口的大小，如没有设定此参数， 使用者可随意地拉动窗口边框改变其大小。 marginwidth：表示窗口左右边缘保留的空隙。 marginheight：表示窗口上下边缘保留的空隙。
属性： 属性：
src=“your.mp3” 设定背景音乐文件所在的位置。 autostart=“true” 是否在音乐档下载完之后就自动播放。True/-1是， false/0否 (默认值)。 loop=“true” 是否自动反复播放。LOOP=2 DEN=“true” 是否完全隐藏控制画面，true和no (默认值)。 WIDTH="整数" 和 HIGH="整数" 设定控制面板的高度和宽度。 (HIDDEN=“no”有效) ALIGN="center" 设定控制面板和旁边文字的对齐方式，其值可以是 top、 bottom、left 、center 、right。
网页设计-任务十二动感页面—多媒体
网页中的动感元素
随着网络速度与品质的提升，越来越多的 网站开始使用Flash来表达网站的内容，以 Flash强大的动画与向量画效果来弥补一般动 画与HTML指令的不足。 Adobe公司的Flash 技术中是当前网络上传输矢量和动画的主要解 决方案，通过自定义对象技术，将复杂的图像、 音频、演示文稿等媒体快速地插入到网页中， 从而使网页展现出丰富多彩的动画效果。 Flash文件类型有.fla、.swf、.swt、.swc、.flv。
项目五 美化网页
任务十二 动感页面—多媒体—问题探究
Spry菜单栏构件
单击菜单栏中的“插入记录/Spry/Spry菜单栏”命令， 或单击插入栏的Spry菜单栏构件按钮。在如图所示的对 话框，根据页面布局的需要来决定是使用水平Spry菜单
栏还是垂直Spry菜单栏。
项目五 美化网页
任务十二 动感页面—多媒体—问题探究
插入Flash视频
Flash视频是目前互联网上较为流行的视频传送格式，其格式为.flv， 即Flash Video的简称。FLV流媒体格式是一种新的视频格式。单击菜单 栏中的“插入记录/媒体/Flash视频”命令或单击“插入”面板中的“常 用”选项卡中的媒体按钮下的按钮，弹出“插入Flash视频”对话框。如 图所示。
项目五 美化网页
任务十二 动感页面—多媒体—问题探究
HTML5+CSS3网页设计基础 第十一章 多媒体技术
HTML5+CSS3网页设计基础
第11章 多媒体技术
第21页
11.4.2 video和audio的事件
volumechange 在音量改变时触发
canplay
以当前播放速率，需要缓冲时触发
canplaythrough 以当前播放速率，不需要缓冲时触发
durationchange 当播放时长改变时触发
表8-6 video和audio的事件
方法
描述
play
当执行方法play()时触发
playing
正在播放时触发
pause
当执行了方法pause()时触发
timeupdata
当播放位置被改变时触发
ended
当播放结束后停止播放时触发
waiting
在等待加载下一帧时触发
ratechange
在当前播放速率改变时触发
在HTML5页面上，用width和height属性设置视频文件 的宽度和高度。
参考代码：11-3-1.html
HTML5+CSS3网页设计基础
第11章 多媒体技术
第18页
11.4 视频和音频的方法和事件
本节主要内容： video和audio的方法 video和audio的事件
HTML5+CSS3网页设计基础
11.1 HTML5多媒体特性
本节主要内容： 多媒体格式 支持多媒体的浏览器
HTML5+CSS3网页设计基础
第11章 多媒体技术
第5页
11.1.1 多媒体格式
1. 视频格式。视频格式包含视频编码、音频编码和容器格 式。在HTML5中嵌入的视频格式主要包括Ogg、MPEG4 、WebM等，具体介绍如下。
网页设计中对多媒体技术的运用
网页设计中对多媒体技术的运用提纲：1.多媒体技术在网页设计中的应用概述2.多媒体素材的选用和使用技巧3.多媒体素材的呈现方式和效果4.多媒体技术在网页交互中的应用5.多媒体技术在网页设计中面临的挑战和解决方法1.多媒体技术在网页设计中的应用概述随着网络技术的不断发展，网站已经从单纯的信息传递工具变成了互动和展示平台。
在这个变化的过程中，多媒体技术应运而生，它丰富了网站的内容呈现形式，为用户带来更加丰富、直观、生动、易懂的用户体验。
目前，常用的多媒体技术包括音频、视频、动画、Flash等。
2.多媒体素材的选用和使用技巧在选用和使用多媒体素材时，需要注意以下几点：2.1 合理选用素材：多媒体素材不是必须要使用的，它需要结合具体情况进行选择。
如果使用多媒体素材能够更好的表达信息或体现网站风格，那么可以使用。
否则，为了不增加网站加载时间，应该尽量避免使用。
2.2 控制文件大小：多媒体文件通常比较大，如果使用不当，会使得网站加载速度过慢，影响用户体验。
因此，在使用多媒体素材时，需要尽可能减小文件大小，保证加载速度。
2.3 考虑音频和视频的配合：音频和视频可以产生相辅相成的效果，能够更好的表达网站主题或意图。
在使用音频和视频时，需要根据实际情况，考虑它们之间的关系，尽可能达到最佳效果。
3.多媒体素材的呈现方式和效果在呈现多媒体素材时，需要注意以下几点：3.1 充分利用层叠效果：层叠效果能够产生立体感，使用户感受到物体的深度、高度等。
在呈现多媒体素材时，可以将多个素材进行叠加，使其产生更加丰富、多样的视觉效果。
3.2 控制动画过度程度：动画效果的过渡过度、频次过多都会影响用户体验。
因此，在使用动画效果时，需要根据实际情况，掌握过渡程度和频次，尽可能达到最佳效果。
3.3 让图片、视频等与网站内容相一致：多媒体素材是要与网站内容相一致、相统一的。
如果多媒体素材与网站内容不一致，那么会给用户造成非一种不协调、混乱的感觉。
多媒体网页制作课程设计
多媒体网页制作课程设计一、课程目标知识目标：1. 让学生掌握多媒体网页制作的基本概念，如HTML、CSS、JavaScript等；2. 让学生了解网页设计原则，如页面布局、色彩搭配、字体选择等；3. 使学生能够运用多媒体元素，如图片、音频、视频等，丰富网页内容。
技能目标：1. 培养学生运用网页制作软件（如Dreamweaver、Sublime Text等）进行网页设计与制作的能力；2. 培养学生解决网页制作过程中遇到的实际问题的能力；3. 提高学生团队协作和沟通能力，能与他人共同完成网页制作项目。
情感态度价值观目标：1. 培养学生对多媒体网页制作的兴趣和热情，激发创新意识；2. 培养学生认真负责的态度，对待网页制作过程中的每一个细节；3. 培养学生遵守网络安全和知识产权法律法规，尊重他人劳动成果。
分析课程性质、学生特点和教学要求：1. 课程性质：本课程为信息技术课程，旨在培养学生的网页制作技能，提高信息技术素养；2. 学生特点：学生为初中生，具有一定的计算机操作基础，对新鲜事物充满好奇；3. 教学要求：注重实践操作，以学生为中心，充分调动学生的主观能动性。
二、教学内容1. 多媒体网页制作基础知识：- HTML语言基础：学习HTML标签、属性、文档结构等；- CSS样式表：掌握选择器、盒模型、布局、颜色与字体样式等；- JavaScript基础：了解变量、函数、事件处理等基本概念。
2. 网页设计原则：- 页面布局设计：学习网页布局方法，如固定布局、流体布局等；- 色彩搭配与字体选择：掌握网页色彩搭配原则，了解字体选择与应用；- 网页界面设计：了解界面设计原则，提高网页美观性。
3. 多媒体元素应用：- 图片处理：学习图片格式、优化方法以及在网页中的应用；- 音频与视频：掌握音频、视频格式及在网页中的嵌入与控制方法；- 动画与交互：了解动画制作方法，如GIF、CSS3动画等，学习交互设计。
4. 网页制作实践：- 网页制作软件应用：学习使用Dreamweaver、Sublime Text等软件进行网页制作；- 项目实践：分组进行网页制作项目，锻炼实际操作能力；- 问题解决：在实践过程中，培养学生解决问题的能力。
多媒体网页设计教程ch05
本章要点
创建动画的各种方式：逐帧动画、形 状补间动画、动作补间动画、引导路 径动画、遮罩动画、时间轴特效等 在动画中使用声音 Flash动画简单脚本
目 录
5.1 逐帧动画
5.2 形状补间动画
5.3 动作补间动画 5.4 引导路径动画 5.5 遮罩动画 5.6 时间轴特效 5.7 声音的应用 5.8 Flash动画简单脚本
【案例5.6】小车碰撞。
【案例5.7】旋转的金箍棒。
效果
效果
提示：与形状补间动画相反，构成动作补间动画的元素必须是 对象组合或是元件，否则不能设置动作补间动画。
5.4 引导路径动画
引导路径动画 将一个或多个层链接到一个运动引导层， 使一个或多个对象沿同一条路径运动的动画形式。这 种动画可以使一个或多个元件完成曲线或不规则运动。 制作方法
if（条件1）{ 语句1 }else{ 语句2 }
循环控制语句for 。
for（表达式1；条件表达 式；表达式2） { 语句 }
【案例5.17】移动的球
效果
【案例5.18】随机小球
效果
作业
5.8.1 Flash动画脚本基础
5.8.2 添加动作的位置 5.8.3 流程控制语句
5.8.1 Flash动画脚本基础
“动作”面板的组成 。
实例的命名
点语法的使用 常用时间轴控制函数
函数 Play() Stop() gotoAndPlay() gotoAndStop() 开始播放动画 停止播放动画 跳转到某帧处继续播放动画 跳转到某帧处停止播放动画 说明
【案例5.8】鱼儿游。
【案例5.9】流动文字。
效果
网页设计——多媒体互动网页设计
6-3-1 插入Flash动画文件
（1）将光标移到要插入Flash动画文件的位置，然后到常 用模式上单击Flash按钮。
单击Flash按钮
光标位置
6-3-1 插入Flash动画文件
（2）从打开的“选择文件”对话框中找到所需的文件， 然后单击“确定”按钮。
6-3-1 插入Flash动画文件
（3）回到Dreamweaver窗口后，光标位置会出现插入的 动画文件图标，移动鼠标在属性面板单击“播放”按钮 预览动画。
6-3-2 插入影片
输入影片的 宽度和高度
6-3-2 插入影片
适当的 影片尺寸
返回
6-3-3内嵌跑马灯动态效果的JavaApplet程序
（1）将光标移到要插入跑马灯的位置，然后到常用模式 上单击 Applet按钮。
单击 Applet按钮
（2）在“选择文件”对话框中选择文件所在磁盘与文件 夹，接着在列表中选择文件名，然后单击“”确定按钮。
返回
Flash动画 的背景变 透明了
6-4-2 加入网页背景音乐
（1）将光标移到要插入音乐文件的位置，然后到常用模 式上单击 外挂程序按钮。
选择外挂程序按钮
将光标移到要插入 音乐文件的位置
6-4-2 加入网页背景音乐
（2）在打开的“选择文件”对话框中选取文件。 （3）回到Dreamweaver窗口后，光标位置会出现图标， 移动鼠标在属性面板单击“参数”按钮。
选择类型
选择颜色
6-1-2 发光的文字与边框
（3）接着在“分类”栏中选择“扩展”，然后在“过滤 器”栏中选择Glow。
6-1-2 发光的文字与边框
（4）在“过滤器”栏输入Glow所需要的参数 (Color=#308148 Strenth=3)，然后选择按钮。
HTML5+CSS3网站设计多媒体技术
第8章多媒体技术《HTML5+CSS3网站设计基础教程》学习目的/Target熟悉HTML5多媒体特性。
了解HTML5支持地音频与视频格式。
掌握HTML5视频地有关属性,能够在HTML5页面添加视频文件。
掌握HTML5音频地有关属性,能够在HTML5页面添加音频文件。
了解HTML5视频,音频地一些常见操作,并能够应用到网页制作。
章节概述/Summary在网页设计,多媒体技术主要是指在网页上运用音频视频传递信息地一种方式。
在网络传输速度越来越快地今天,音频与视频技术已经被越来越广泛地应用在网页设计,比起静态地图片与文字,音频与视频可以为用户提供更直观,丰富地信息。
本章将对HTML5多媒体地特性以及创建音频与视频地方法进行详细讲解。
/Contents01HTML5多媒体地特性02多媒体地支持条件03嵌入视频与音频04CSS控制视频地宽高/Contents05视频与音频地方法与06HTML5音视频发展趋势07阶段案例——制作音乐播放界面01HTML5多媒体地特性了解HTML5多媒体地特性。
能够说出HTML5嵌入音视频地优势。
学习目的在HTML5出现之前并没有将视频与音频嵌入到页面地标准方式,多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器地应用程序置于页面。
复杂冗长02多媒体地支持条件8.2多媒体地支持条件了解视频与频频地编解码器,能够通过视频与音频编解码器对视频与音频文件进行压缩。
学习目的1.视频与音频编解码器1.视频与音频编解码器由于视频与音频地原始数据一般都比较大,如果不对其进行编码就放到互联网上,传播时会消耗大量时间,无法实现流畅地传输或播放。
1.视频与音频编解码器视频编解码器定义了多媒体数据流编码与解码地算法。
其编码器主要是对数据流进行编码操作,用于存储与传输。
•H.264是际标准化组织（ISO）与际电信联盟（ITU）同提出地继MPEG4之后H.264地新一代数字视频压缩格式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• .wav格式：这种格式声音品质也比较好，不需要 提供额外插件作为运行条件。缺点是这种格式的 文件比较大，占用空间大，可能会影响网页的运 行速度。
• .mp3格式：在3种音频类型中，它的声音品质最 好。缺点是文件容量比较大，再就是.mp3需要插 件的支持，例如Windows Media Player以及 RealPlayer等播放软件的支持。
在使用Dreamweaver提供的Flash命令以前， 应当知道不同的Flash文件的类型特点。
Flash影片文件（扩展名为.SWF）：是一种视 频文件的压缩版本，可在浏览器和Dreamweaver 中播放，但不能再在Flash软件中进行编辑处理。
Flash视频文件（扩展名为.flv）：是一种视频 文件，用于通过Flash Player传送。
多媒体技术（Multimedia Technology）是利 用计算机对文本、图形、图像、声音、动画、视 频等多种信息综合处理、建立逻辑关系和人机交 互作用的技术。
利用Dreamweaver CS自带的Flash功能，能 够在不需要专门的Flash软件的情况下，把不同的 Flash文件添加到网页中。 1. Flash文件类型概述
• 2 插入FLV视频 FLV是当前视频文件的主流格式，其文件扩展
名为.flv。FLV视频极小，加载的速度非常快，它 有效地解决了视频文件导入Flash后，其导出的 SWF文件体积比较大，不能在网络上很好地使用 这样一个缺点。 Dreamweaver提供以下两种类型的FLV视频： （1）累进式下载视频：将FLV文件下载到站点访 问者的硬盘上，然后进行播放。但与传统的“下 载并播放”视频传送方式不同，其允许在下载完 成之前就开始播放视频文件。 （2）流视频：对视频内容进行流式处理，缓冲很 短的一段时间，而这段时间可确保视频在网页上 流畅播放。
在“属性”面板中，还可以对Flash作更多的 设置，下面主要说明几个主要的Flash “属性”的 作用：
“循环”与“自动播放”：当选上这两项时， 在浏览窗口就会自动、循环播放。
“背景颜色”：选择一种背景颜色，则可改变 Flash在浏览窗口播放时的背景颜色。
“播放”按钮：可以在当前网页编辑页面中看 到Flash动画的播放效果，在放状态时“播放”按 钮变成“停止”按钮形式，此时按“停止”可中 断播放。
“Wmode”为SWF文件设置Wmode参数以避 免与DHTML元素“例如Spry构件”相冲突。
“编辑”启动Flash以更新.fla文件（即使用 Flash创作工具创建的文件）。
（4）按F12键，可以在浏览窗口看到如图15-19所示的效 果。
图5-19 浏览效果
注意：如果在所设计的网页中，包括多个Flash文件 时，而想一次性预览所有的动画，则可通过同时按下 Ctrl+Alt+Shift+P组合建，可在浏览窗口看到所有动画同时 播放的效果。
多媒体的使用
1 多媒体在网页中的应用
“多媒体”一词译自英文“Multimedia”，媒体 （medium）原有两重含义，一是指存储信息的实 体，如磁盘、光盘、磁带、半导体存储器等，中 文常译作媒质；二是指传递信息的载体，如数字、 文字、声音、图形等，中文译作媒介。多媒体就 是由单媒体复合而成的。一般理解为多种媒体的 综合。
下面介绍插入FLV具体方法：
（1）打开或创建一个网页。并将光标定位在要插 入FLV文件的位置。
（2）选择“播入”→“媒体”→“FLV”命令。
（3）在弹出的 “插入FLV”对话框，在“视频类 型”可选择“累进式下载视频”或“流视频”方 式。
在“插入”对话框中选择“限制高宽比”，同 时单击右侧的“检测大小”按钮，则会自动测出 Flash动画的宽度和高度的值。
（2）打开或新建一个网页，并将光标定位在页面 中要插入的位置。
（3）在菜单栏中选择“插出的“选择SWF”对话框中选择Flash文件， 如f1.swf文件。“确定”后 “对象标签功能属性” 对话框，并在“标题”文本框中输入“生长的树 木动画演示”，然后“确定” 。
Flash源文件（扩展名为.fla）：是在Flash软 件中生成的，此类型文件只能在Flash软件中打开， 不能在浏览器和Dreamweaver中打开。
2. 添加Flash动画
（1）在把Flash动画（.swf）插入网页之前，需 要把准备好的Flash动画素材保存到站点相应的文 件夹下，以便操作使用。
（5）在添加声音文件后，插入空格时，选择 “loop”。
（6）在选择“loop”后，双击“-1” 。应当注意在 “loop=“-1””左边输入“/>”。“loop”参数的作用 是定义音频插件循环播放次数。
（７）保存文档。按F12键，即可在浏览器听到刚 才添加到页面中的背景音乐，可伴随图像或动画 的视听效果。
（4）单击“确定”在页面中出现有FLV占位符， 说明所选择的FLV文件已经添加到页面中。占位 符
的大小不能用鼠标进行大小调整。可通过在“属 性”面板中“高”和“宽”文本框中输入相应值 进行大小调整。
（5）保存文档。按F12键，则在浏览器中预览到 添加的FLV效果。
• 3 网络中的音频文件类型
在网页设计中常用音频文件格式主要有以下3种。
• 5 在网页中插入音频
在网页中插入音频与背景音乐不同的是，在网 页上浏览时会显示播放器的外观，包括播放、暂 停、停止等控制按钮。具体操作如下。
• 4 在网页插入背景音乐 网页添加背景音乐可在“代码”视图中完成。
操作处理方法如下。
（1）打开一个网页如page2.html。 （2）单击工具栏的“代码”按钮，则将窗口转换 成“代码”视图，在<body>左侧输入“<”同时出 现标签列表，选择“bgsound”选项。 （3）选择“bgsound”后，插入“空格”时出现 下拉标签，选择“src”选项。 （4）选择“src” ，单击图中所示“浏览”在出现 的对话框中选择要添加的声音文件。