1、网 站 设 计 与 建 设 Website design and developments,第4章 多媒体与Web设计,第一部分 Web基础知识,41 多媒体Web设计原则,多媒体技术不是各种信息媒体的简单组合，它是一种把文本、图形、图像、动画和声音等形式的信息结合在一起，并通过计算机进行综合处理和控制，能支持完成一系列交互式操作的信息技术。 特性：交互性和非线性。,网站使用多媒体应遵守的一般设计原则： 根据网站主题选择多媒体 重视网络带宽，慎用视频 网页应避免使用背景音频 避免网页使用零乱的动画 网页中避免使用滚动文本 网站中避免使用特别插件 例如Flash，Media Player，Qui
2、ckTime、RealPlay和Shockwave插件等。 网站拒绝最新最耀眼技术。 避免网站设计的版权侵害,42 动画与Web设计,Web动画从简单的动画GIF图像到3D动画以及虚拟环境 合理使用动画可以达到事半功倍的效果 在设计中切不可滥用,最常使用的基本动画类型 GIF 动画 有多幅静态GIF图片组合而成， 它制作简单，并得到了浏览器的广泛支持。其原理类似于播放幻灯片。 动画GIF一般用于条幅广告、口号或同一类多幅图片的展示。 但是它的缺点同样突出：没有声音，不能停止播放。 GIF 动画的制作工具有Photoshop，Ulead GIF Animator和GIF Movie Gear等。
3、 JavaScript 或VBScript 创建动画 可以使用DOM+CSS改变元素的外观，而通过每隔一段时间调用一次改变元素外观的函数，实现类似Flash的渐类动画。,翻转动画(Rollovers) 翻转动画主要用于按扭、图像或者网页上的其他指定区域， 当用户鼠标滑过时触发动作， 翻转动画通常用于导航元素，它们给用户创建交互事件，也可以是一个超级链接。 Flash动画 Flash功能强大并且被很多网站使用 需要下载Flash插件。 Adobe Flash现在已是Web动画的事实工业标准，因此Web Flash动画应采用Adobe Flash。2005年Adobe公司并购了Mediamedia
4、公司，Adobe Flash CS3 Professional 是Macromedia Flash的后继产品。,ImageReady 可以将Photoshop的图像操作最优化， 在图像质量不明显削弱的前提下，尽可能地减少文件的体积。 可以通过分割图像自动制作HTML文档 虽然在Photoshop中也可以进行一些基本的切片操作，但无法组合、对齐或分布切片。ImageReady具备专业的切片面板和菜单，其切片编辑功能要比Photoshop更强大 可以制作简单的GIF动画。 但ImageReady不支持CMYK色彩模式，无法进行与印刷相关的图像操作， 它是专门的网络图像处理工具。 例子,常见的动画设
5、计效果主要有： 条幅信息循环水平滚动播出 新闻通知等标示图标色彩图案交替显示(跳动与闪动) 纵向滚动新闻通知的标题超链接信息 沿某一定轨迹运动的悬浮通知 多幅新闻照片或风光照片的循环切换 某些元素的色彩循环动画 元素的缓慢旋转，旋转结束标示网页或图片等下载完成 元素的闪烁、淡入、淡出、爆炸与组合 图像之间的过渡与变形 子导航的弹出以及与主题相关的Flash动画,43 视频与Web设计,Web视频一般分辨率低、像素少、帧速率低、尺寸小 自动播放 / 用户启动1.5 MB AVI Video 下载后播放 使用Web视频流播放客户端应用程序播放视频 例如PPStream、PPLive和PPMate等
6、， http:/ (baidu 文库）,视频文件的几个主要格式： AVI格式(.avi) 音频视频交错(Audio Video Interleaved) 是计算机上最常见的音频和视频数据格式 Microsoft公司开发的, ,媒体播放器 AVI格式允许视频和音频交错在一起同步播放，支持256色和RLE压缩 AVI文件并未限定压缩标准，因此，AVI文件格式只是作为控制界面上的标准，兼容性差，文件比较大， 用不同压缩算法生成的AVI文件，必须使用相应的解压缩算法才能播放出来。 AVI文件目前主要应用在多媒体光盘上，用来保存电影、电视等各种影像信息，不适宜Web视频，但有时也出现在Internet上
7、，供用户下载、欣赏新影片的精彩片断。, 自动播放.avi格式的 注释：dynsrc 属性不是标准的 HTML 或 XHTML 元素。仅有 Internet Explorer 支持该属性。Internet Explorer 和 Netscape 都支持 元素 W3C 推荐使用 元素来代替它 ,QuickTime格式(.mov、.qt) QuickTime是Apple计算机公司开发的一种音频、视频文件格式， QuickTime文件格式支持25位彩色，支持RLE、JPEG等领先的集成压缩技术，提供150多种视频效果，并配有提供了200多种MIDI兼容音响和设备的声音装置。 新版的QuickTime进
8、一步扩展了原有功能，包含了基于Internet应用的关键特性，能够通过Internet提供实时的数字化信息流、工作流与文件回放功能， QuickTime还采用了一种称为QuickTime VR (简作QTVR)技术的虚拟现实(Virtual Reality， VR)技术，用户通过鼠标或键盘的交互式控制，可以观察某一地点周围360度的景像，或者从空间任何角度观察某一物体。 下载插件,在因特网上，QuickTime 是一种普遍的格式，但是如果没有额外的组件（免费），QuickTime 电影无法在非 Windows 的计算机上播放。 通过 object 元素，可轻松将播放 QuickTime 影片的
9、代码添加到网页中。如果用户计算机中未安装 QuickTime 播放器，则可将 object 设置为自动安装 QuickTime 播放器。,MPEG格式(.MPEG/.MPG/.DAT) MPEG文件格式是运动图像压缩算法的国际标准，它包括 MPEG-1，MPEG-7 MPEG标准包括MPEG视频、MPEG音频和MPEG系统(视频、音频同步)三个部分， MP3音频文件就是MPEG音频的一个典型应用 压缩原理,RealVideo格式(.RA/.RM/.RMVB) 流式传输 由RealNetworks 公司开发的RealVideo RealProducer G2 和RealEncoder 编码器 转
10、换其它格式的视频文件来实现，这种技术为视频的网上出版展示了美好的前景。 RMVB影片格式比原先的RM多了VB两字，在这里VB是VBR（Variable Bit Rate-可变比特率）的缩写 RealMedia是目前Internet上最流行的跨平台的客户/服务器结构多媒体应用标准，其采用音频/视频流和同步回放技术实现了网上全带宽的多媒体回放。 在RealMedia规范中主要包括三类文件：RealAudio（用以传输接近CD音质的音频数据）、RealVideo（用来传输连续视频数据）和RealFlash （RealNetworks公司与Macromedia公司合作推出的新一代高压缩比动画格式）。,
11、播放框： http:/“; width=“356“ height=“285“ ,ASF格式(.ASF) Microsoft公司推出的Advanced Streaming Format (ASF，高级流格式) 是一个在Internet上实时传播多媒体的技术标准， ASF 是存储同步多媒体数据的可扩展文件格式，它支持通过各种网络和协议传送数据。 Microsoft公司希望用ASF取代QuickTime之类的技术标准。 ASF的主要优点包括：本地或网络回放、可扩充的媒体类型、部件下载以及扩展性等。 ASF应用的主要部件是NetShow服务器和NetShow播放器。有独立的编码器将媒体信息编译成ASF
12、流，然后发送到NetShow服务器，再由NetShow服务器将ASF流发送给网络上的所有NetShow播放器，从而实现单路广播或多路广播。这和Real系统的实时转播则是大同小异。 ASF 文件能够被深度压缩，同时能够以连续的数据流进行传输（在线电视和广播）。该格式的文件可以是任何大小，同时能够被压缩以适应不同的带宽（连接速度）。,WMV格式(.WMV) WMV又是一种独立于编码方式的在Internet上实时传播多媒体的技术标准， Microsoft公司希望用其取代QuickTime之类的技术标准以及WAV、AVI之类的文件扩展名。 WMV的主要优点包括：本地或网络回放、可扩充的媒体类型、部件下
13、载、可伸缩的媒体类型、流的优先级化、多语言支持、环境独立性、丰富的流间关系以及扩展性等。 WMV 的设计目标是处理各种类型的视频内容。该格式的文件能够被深度压缩，且能够传输连续的数据流（在线广播）。WMA 文件可以是任何大小，同时能够被压缩以适应不同的带宽（连接速度）。 WMV 格式与 ASF 格式类似。,44 音频与Web设计,Web音频主要有内嵌音频和可下载音频 内嵌音频 在网页设计中一般是拒绝背景音频的。 内嵌音频一般主要用于视频、Flash动画的伴音or 可下载音频 音频文件完全下载到用户客户端后，使用Windows Media Player或RealOnePlayer等媒体播放器进行
14、播放，用户可以对音频完全控制：回放、暂停、停止、音量,1)midi Musial Instrument Digital Interface(乐器的数字化接口) 的缩写，用于在音乐器材、合成器和计算机之间交换音乐信息的标准协议。 在现代音乐制作上，MIDI的地位已不可取代，不论是影视音乐还是广告音乐，MIDI部分事实上占了主要地位，而真实乐器是表现旋律的载体。 MIDI 的最大特点是文件长度很小，但声音机械，一般用于背景音乐，不适合网上广播。 Music MasterWorks是一款MIDI制作软件,When would I use MIDI music?,Page 381,2)ra/.rm/.
15、ram RealNetworks 格式的文件扩展名有RA、RM、RAM， RA、RM文件是真正存储数据的文件；RA、RM格式的文件既有音频，也有视频； RAM文件通常应用在网页中，它是一个文本文件，其中包含RA或RM文件的路径，点击其链接后会启动RealPlayer来播放RA或RM文件。 3).mp3 此标准也是从早期的 MPEG 工作的基础上发展而来的。它是一种音频压缩技术，是 MPEG-1 和 MPEG-2 规范的一部分。 保真度 MP4，全称MPEG-4 Part 14，是一种使用MPEG-4的多媒体电脑档案格式，副档名为.mp4，以储存数码音讯及数码视讯为主 音频MP4格式：AAC 。
16、,4).wav Windows 使用“波形音频”(WAV)文件格式将声音存储为波形。 一分钟的使用“脉冲编码调制”(PCM) 编码的声音可以占用少则 644 KB或多达27MB的存储空间。 这一存储空间大小取决于采样频率、声音的类型（单声道或立体声）和用于采样的位数。 5).swf 6).mov/.qt 7).au Unix 音频(.au)文件是使用 UNIX 生成的声音文件。 8).wma,45 多媒体网站设计考虑的主要因素,网站主题：确定该网站适于哪些多媒体元素？选定最适宜的多媒体元素。 客 户 群：不同的客户群使用的多媒体元素也不一样，应该考虑客户群的接受能力。 用户感受：用户感受第一，
17、避免用户花费了大量时间看到一些不中意的多媒体内容。 网络带宽：应该考虑浏览客户群的带宽如何？如果是宽带可以选用更多的多媒体。 下载时间：应该测试在不同带宽下网页下载的时间，进行优化，从而适于更多用户。 浏 览 器：考虑客户群的浏览器及版本使用情况，不同浏览器支持技术是不一样的。,分 辨 率：要考虑多媒体的分辨率，在满足品质的情况下，分辨率越低越好。 慎用插件：尽量使用Web公认的多媒体事实标准插件，对特殊插件提供下载。 页面协调：考虑整个页面的多媒体元素的协调，避免页面凌乱。 慎用视频：应避免视频自动播放，一般提供选择播放或下载播放，视频窗口应较小。 背景音乐：应该避免背景音乐，除非特别需要背景音乐来表达页面意境。,
