网站设计与建设-第4章 多媒体与Web设计

《网站设计与建设》普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院第4章多媒体与Web设计普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》2 u多媒体网站的重要性u多媒体Web设计原则u动画与Web设计u视频与Web设计u音频与Web设计u多媒体需要考虑的问题概概述述普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》1.多媒体重要性u文本、图形、图像、动画和声音等组合为多媒体网站u纯文本Web网站几乎不存在uWeb因为多媒体成为最具活力和吸引力的媒体u多媒体可以补充网站的视觉设计、音调和消息u多媒体的网页会导致网页下载减过慢，造成网站浏览品质下降。u多媒体需要大带宽、浏览器插件或第三方应用程序的支持u多媒体、网站品质、带宽和插件的关系u时间因素：珍惜Web用户时间-时刻吸引用户普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》1.多媒体重要性–续普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》2.多媒体Web设计原则u根据网站主题选择多媒体u重视网络带宽，慎用视频u网页应避免使用背景音频u避免网页使用零乱的动画u网页中避免使用滚动文本u网站中避免使用特别插件u网站拒绝最新最耀眼技术u避免网站设计的版权侵害u珍惜Web用户时间-时刻吸引用户普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》6 3.动画与Web设计u动画是由一系列静态画面连续地播放形成的，每个动画页面称为帧(Frame)，一秒钟动画所包含的帧数称为帧速率(fps)，计算机上的动画一般达到15fps时，播放就已经很流畅了。(录像带帧速率：30fps；电影帧速率：24fps)u动画是利用人的视觉暂留特性，快速播放一系列连续运动变化的图形图像，也包括画面的缩放、旋转、变换、淡入淡出等特殊效果。u通过动画可以把抽象的内容形象化，使许多难以理解的内容变得生动有趣。u确保动画和内容紧密关联，网页应该浑然一体，切忌Web动画是一个孤立个体，合理使用动画可以达到事半功倍的效果。普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》7 4.最常使用的基本动画类型uGIF动画：对GIF图形格式的一种扩展，有多幅静态GIF图片组合而成，它制作简单，并得到了浏览器的广泛支持。uJavaScript或VBScript创建动画：这些作为客户端使用的脚本语言，使用时不需要服务器任何形式的介入，并且可使用浏览器支持的各种图像格式。u翻转动画(Rollovers)：翻转动画主要用于按扭、图像或者网页上的其他指定区域，当用户鼠标滑过时触发动作，翻转动画通常用于导航元素，给用户创建交互事件，也可以是一个超级链接。uFlash动画：在使用时还需要下载Flash插件。AdobeFlash现在已是Web动画的事实工业标准。普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》8 5.常见的动画设计效果①条幅信息循环水平滚动播出②新闻通知等标示色彩图案交替显示(跳动与闪动)③纵向滚动新闻通知的标题超链接信息④沿某一定轨迹运动的悬浮通知⑤多幅新闻照片或风光照片的循环切换⑥某些元素的色彩循环动画⑦元素的缓慢旋转，旋转结束标示网页或图片等下载完成⑧元素的闪烁、淡入、淡出、爆炸与组合⑨图像之间的过渡与变形⑩子导航的弹出以及与主题相关的Flash动画普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》9 6.视频与Web设计uWeb视频具有时序性与丰富的信息内涵，常用于交待事物的发展过程，视频类似于电影和电视，有声有色，在多媒体中充当起重要的角色。uWeb视频是一个正在发展和非常有前途的技术，但现在频带还不足够的宽，因此，Web视频的品质很低，实时播放使用的还是比较少。uWeb视频一般分辨率低、像素少、帧速率低、尺寸小，Web视频观看品质比有限电视差很多，比电影的品质就更差了u电影的品质是Web视频追求的目标。u实时直播主要有视频会议、远程教育、视频聊天、视频电话、WebTV直播、Web电影直播、Web监控视频、电视台Web直播等；u录像点播或下载播放主要有Web电影点播、Web电视点播、广告小视频、录制节目点播等等。普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》10 6.视频与Web设计：Web嵌入视频播放–续1普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》11 6.视频与Web设计：Web视频客户端播放软件，例如PPStream、PPLive和PPMate、TVAnts等–续2普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》12 7.视频文件的几个主要格式uAVI格式(.avi)：Microsoft公司开发的一种符合RIFF文件规范的数字音频与视频文件格式。视音频交错同步播放，支持256色和RLE压缩，但并未限定压缩标准，因此，兼容性差，文件较大，不同压缩算法生成的AVI文件，必须使用相应的解压缩算法才能播放出来。uQuickTime格式(.mov、.qt)：Apple计算机公司开发的一种音频、视频文件格式，QuickTime文件格式支持25位彩色，支持RLE、JPEG等领先的集成压缩技术，提供150多种视频效果，并配有提供了200多种MIDI兼容音响和设备的声音装置。可以观察某一地点周围360度的景像，或者从空间任何角度观察某一物体。普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》13 7.视频文件的几个主要格式–续1uMPEG格式(.MPEG/.MPG/.DAT)：MPEG文件格式是运动图像压缩算法的国际标准，它包括MPEG-1，MPEG-2，MPEG-3和MPEG-4，几乎所有的计算机平台共同支持，其压缩效率非常高，同时图像和音响的质量也非常好。4MPG-1，1.5Mbps，VCD是MPEG1其中的一个标准。以每秒30帧(30fps)的速度提供352x240的视频分辨率。4MPEG-2，DVD，HDTV（高清晰电视广播）。MPEG-2的压缩算法压缩一部120分钟长的电影可以到压缩到4到8GB的大小，图象质量要比MPEG-1高。4MPEG-3(.MP3)，此标准也是从早期的MPEG工作的基础上发展而来的。它是一种音频压缩技术，是MPEG-1和MPEG-2规范的一部分。4MPEG-4(.MP4)具有优于MPEG-2两倍的音视频编解码能力。特点是压缩比高、成像清晰，容量小，一部DVD-9碟，可以存贮10多部高清晰MPEG4网络电影。普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》14 7.视频文件的几个主要格式–续2uRealVideo格式(.RA/.RM/.RMVB)：RealNetworks公司开发的RealVideo能把影像信息从视频服务器经流式传输向用户计算机连续、实时传送。在RealMedia规范中主要包括三类文件：RealAudio（用以传输接近CD音质的音频数据）、RealVideo（用来传输连续视频数据）和RealFlash（RealNetworks公司与Macromedia公司合作推出的新一代高压缩比动画格式）。uASF格式(.ASF)：Microsoft公司推出的ASF高级流格式是一个在Internet上实时传播多媒体的技术标准，ASF是存储同步多媒体数据的可扩展文件格式，它支持通过各种网络和协议传送数据。uWMV格式(.WMV)：WMV又是一种独立于编码方式的在Internet上实时传播多媒体的技术标准，Microsoft公司希望用其取代QuickTime之类的技术标准以及WAV、AVI之类的文件扩展名。普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》15 8.音频与Web设计u内嵌音频：内嵌音频是一种“音频流”技术，内嵌在HTML网页中，用于背景音乐、视频伴音或Flash动画伴音等，不能下载，除非网站整体需要，否则不要内嵌音频。允许用户下载。u可下载音频：将音频文件完全下载到用户客户端后，使用WindowsMediaPlayer或RealOnePlayer等媒体播放器进行播放，用户可以对音频完全控制：回放、暂停、停止、音量等，如MP3音乐等，Flash由内嵌压缩音频。u流式音频：缓存，“实时”播放。u播放工具：RealOnePlayer,MidiaPlayer普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》16 9.音频格式u.mid：“MIDI”是乐器的数字化接口的缩写，用于在音乐器材、合成器和计算机之间交换音乐信息的标准协议。MIDI的最大特点是文件长度很小，但声音机械，一般用于背景音乐，不适合网上广播。u.ra/.rm/.ram：RealNetworks格式的文件扩展名有RA、RM、RAM，RA、RM文件是真正存储数据的文件；RA、RM格式的文件既有音频，也有视频；u.mp3：它是一种音频压缩技术，是MPEG-1和MPEG-2规范的一部分。1991年，德国的Fraunhofer学院开发出MP3。MP3使用感知音频编码压缩CD音质的声音，得到的保真度几乎一模一样。普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》17 9.音频格式–续u.wav：Windows使用“波形音频”(WAV)文件格式将声音存储为波形。WindowsMediaPlayer就可以播放使用各种编解码器压缩的以及存储为.wav文件的音频内容。u.swf：Adobe制作后缀名为SWF的动画，高清晰度的画质和小巧的体积，目前已成为网上动画的事实标准。u.mov/.qt：AppleComputer开发了QuickTime文件格式，以创建、编辑、发布和查看多媒体文件。QuickTime格式可以包括视频、动画、图形、3D和虚拟现实内容。u.au：Unix音频文件是使用UNIX生成的声音文件。u.wma：“WindowsMedia音频”(.wma)文件是包括使用WMA编解码器压缩的音频的“高级流格式”(.asf)文件普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》18 10.多媒体网站设计考虑的主要因素网站主题客户群用户感受网络带宽下载时间浏览器分辨率慎用插件页面协调慎用视频背景音乐普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》19第4章小结u多媒体网站的重要性u多媒体Web设计原则u动画与Web设计u视频与Web设计u音频与Web设计u多媒体需要考虑的问题普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》20第4章思考问题endu4-2在网站设计中一般都有哪些位置使用何种多媒体元素？u4-4多媒体在网站设计中应遵守的一般设计原则是什么？u4-5多媒体在网页设计中用的越多越好？为什么？u4-8动画在Web设计中主要有哪几种？u4-14Web多媒体与文件尺寸、网络带宽和下载时间的关系如何？u4-15对于重要信息为什么不要采用滚动文本？u4-16国、内外著名大学网站使用多媒体都