网站设计与建设4.ppt

1、网 站 设 计 与 建 设Website design and developments,第4章 多媒体与Web设计,第一部分 Web基础知识,41 多媒体Web设计原则,多媒体技术不是各种信息媒体的简单组合，它是一种把文本、图形、图像、动画和声音等形式的信息结合在一起，并通过计算机进行综合处理和控制，能支持完成一系列交互式操作的信息技术。 特性：交互性和非线性。,网站使用多媒体应遵守的一般设计原则： 根据网站主题选择多媒体 重视网络带宽，慎用视频 网页应避免使用背景音频 避免网页使用零乱的动画 网页中避免使用滚动文本 网站中避免使用特别插件 例如Flash，Media Player，Quic

2、kTime、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、，,视频文件的几个主要格式： 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进一步扩展了原有功能，包含了基于In

8、ternet应用的关键特性，能够通过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公司合作推出的新一代高压缩比动画格式）。, ,ASF格式(.ASF

11、) Microsoft公司推出的Advanced Streaming Format (ASF，高级流格式) 是一个在Internet上实时传播多媒体的技术标准， ASF 是存储同步多媒体数据的可扩展文件格式，它支持通过各种网络和协议传送数据。 Microsoft公司希望用ASF取代QuickTime之类的技术标准。 ASF的主要优点包括：本地或网络回放、可扩充的媒体类型、部件下载以及扩展性等。 ASF应用的主要部件是NetShow服务器和NetShow播放器。有独立的编码器将媒体信息编译成ASF流，然后发送到NetShow服务器，再由NetShow服务器将ASF流发送给网络上的所有NetSho

12、w播放器，从而实现单路广播或多路广播。这和Real系统的实时转播则是大同小异。 ASF 文件能够被深度压缩，同时能够以连续的数据流进行传输（在线电视和广播）。该格式的文件可以是任何大小，同时能够被压缩以适应不同的带宽（连接速度）。,WMV格式(.WMV) WMV又是一种独立于编码方式的在Internet上实时传播多媒体的技术标准， Microsoft公司希望用其取代QuickTime之类的技术标准以及WAV、AVI之类的文件扩展名。 WMV的主要优点包括：本地或网络回放、可扩充的媒体类型、部件下载、可伸缩的媒体类型、流的优先级化、多语言支持、环境独立性、丰富的流间关系以及扩展性等。 WMV 的

13、设计目标是处理各种类型的视频内容。该格式的文件能够被深度压缩，且能够传输连续的数据流（在线广播）。WMA 文件可以是任何大小，同时能够被压缩以适应不同的带宽（连接速度）。 WMV 格式与 ASF 格式类似。（,44 音频与Web设计,Web音频主要有内嵌音频和可下载音频 内嵌音频 在网页设计中一般是拒绝背景音频的。 内嵌音频一般主要用于视频、Flash动画的伴音 or 可下载音频 音频文件完全下载到用户客户端后，使用Windows Media Player或RealOnePlayer等媒体播放器进行播放，用户可以对音频完全控制：回放、暂停、停止、音量,1)midi Musial Instrum

14、ent Digital Interface(乐器的数字化接口) 的缩写，用于在音乐器材、合成器和计算机之间交换音乐信息的标准协议。 在现代音乐制作上，MIDI的地位已不可取代，不论是影视音乐还是广告音乐，MIDI部分事实上占了主要地位，而真实乐器是表现旋律的载体。 MIDI 的最大特点是文件长度很小，但声音机械，一般用于背景音乐，不适合网上广播。 Music MasterWorks是一款MIDI制作软件,When would I use MIDI music?,Page 381,2)ra/.rm/.ram RealNetworks 格式的文件扩展名有RA、RM、RAM， RA、RM文件是真正存

15、储数据的文件；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 。,4).wav Windows 使用“波形音频”(WAV)文件格式将声音存储为波形。 一分钟的使

16、用“脉冲编码调制”(PCM) 编码的声音可以占用少则 644 KB或多达27MB的存储空间。 这一存储空间大小取决于采样频率、声音的类型（单声道或立体声）和用于采样的位数。 5).swf 6).mov/.qt 7).au Unix 音频(.au)文件是使用 UNIX 生成的声音文件。 8).wma,45 多媒体网站设计考虑的主要因素,网站主题：确定该网站适于哪些多媒体元素？选定最适宜的多媒体元素。 客 户 群：不同的客户群使用的多媒体元素也不一样，应该考虑客户群的接受能力。 用户感受：用户感受第一，避免用户花费了大量时间看到一些不中意的多媒体内容。 网络带宽：应该考虑浏览客户群的带宽如何？如果是宽带可以选用更多的多