网 站 设 计 与 建 设 Website design and developments

Presentation on theme: "网 站 设 计 与 建 设 Website design and developments"— Presentation transcript:

1 网 站 设 计 与 建 设 Website design and developments

2 第一部分 Web基础知识 第4章 多媒体与Web设计

3 4．1 多媒体Web设计原则 多媒体技术不是各种信息媒体的简单组合，它是一种把文本、图形、图像、动画和声音等形式的信息结合在一起，并通过计算机进行综合处理和控制，能支持完成一系列交互式操作的信息技术。 特性：交互性和非线性。

4

5

6 网站使用多媒体应遵守的一般设计原则： ①根据网站主题选择多媒体 ②重视网络带宽，慎用视频 ③网页应避免使用背景音频 ④避免网页使用零乱的动画
⑤网页中避免使用滚动文本 ⑥网站中避免使用特别插件 例如Flash，Media Player，QuickTime、RealPlay和Shockwave插件等。 ⑦网站拒绝最新最耀眼技术。 ⑧避免网站设计的版权侵害 珍惜Web用户时间-时刻吸引用户

7 4．2 动画与Web设计 Web动画从简单的动画GIF图像到3D动画以及虚拟环境 合理使用动画可以达到事半功倍的效果 在设计中切不可滥用

8 动画：利用人的视觉暂留特性，快速播放一系列连续运动变化的图形图像，也包括画面的缩放、旋转、变换、淡入淡出等特殊效果。
动画是由一系列静态画面连续地播放形成的，每个动画页面称为帧(Frame)，一秒钟动画所包含的帧数称为帧速率(fps)，计算机上的动画一般达到15fps时，播放就已经很流畅了。(DVD帧速率：30fps；电影帧速率：24fps)

9 ②JavaScript 或VBScript 创建动画
最常使用的基本动画类型 ①GIF 动画 有多幅静态GIF图片组合而成， 它制作简单，并得到了浏览器的广泛支持。其原理类似于播放幻灯片。 动画GIF一般用于条幅广告、口号或同一类多幅图片的展示。 但是它的缺点同样突出：没有声音，不能停止播放。 GIF 动画的制作工具有Photoshop，Ulead GIF Animator和GIF Movie Gear等。 ②JavaScript 或VBScript 创建动画 可以使用DOM+CSS改变元素的外观，而通过每隔一段时间调用一次改变元素外观的函数，实现类似Flash的渐类动画。

10 ③翻转动画(Rollovers) ④Flash动画 翻转动画主要用于按扭、图像或者网页上的其他指定区域， 当用户鼠标滑过时触发动作，
翻转动画通常用于导航元素，它们给用户创建交互事件，也可以是一个超级链接。 ④Flash动画 Flash功能强大并且被很多网站使用 需要下载Flash插件。 Adobe Flash现在已是Web动画的事实工业标准，因此Web Flash动画应采用Adobe Flash。2005年Adobe公司并购了Mediamedia公司，Adobe Flash CS3 Professional 是Macromedia Flash的后继产品。

11 可以将Photoshop的图像操作最优化，
ImageReady 可以将Photoshop的图像操作最优化， 在图像质量不明显削弱的前提下，尽可能地减少文件的体积。 可以通过分割图像自动制作HTML文档 虽然在Photoshop中也可以进行一些基本的切片操作，但无法组合、对齐或分布切片。ImageReady具备专业的切片面板和菜单，其切片编辑功能要比Photoshop更强大 可以制作简单的GIF动画。 但ImageReady不支持CMYK色彩模式，无法进行与印刷相关的图像操作， 它是专门的网络图像处理工具。 例子

12 常见的动画设计效果主要有： ①条幅信息循环水平滚动播出 ②新闻通知等标示图标色彩图案交替显示(跳动与闪动) ③纵向滚动新闻通知的标题超链接信息 ④沿某一定轨迹运动的悬浮通知 ⑤多幅新闻照片或风光照片的循环切换 ⑥某些元素的色彩循环动画 ⑦元素的缓慢旋转，旋转结束标示网页或图片等下载完成 ⑧元素的闪烁、淡入、淡出、爆炸与组合 ⑨图像之间的过渡与变形 ⑩子导航的弹出以及与主题相关的Flash动画

13 4．3 视频与Web设计 Web视频一般分辨率低、像素少、帧速率低、尺寸小 自动播放 / 用户启动 点击播放
<EMBED SRC=“ducks.avi width=145 height=60> 点击播放 <A HREF = “ducks.avi> 1.5 MB AVI Video </A>

14 视频文件的几个主要格式： ①AVI格式(.avi) 音频视频交错(Audio Video Interleaved)
是计算机上最常见的音频和视频数据格式 Microsoft公司开发的, ,媒体播放器 AVI格式允许视频和音频交错在一起同步播放，支持256色和RLE压缩 AVI文件并未限定压缩标准，因此，AVI文件格式只是作为控制界面上的标准，兼容性差，文件比较大， 用不同压缩算法生成的AVI文件，必须使用相应的解压缩算法才能播放出来。 AVI文件目前主要应用在多媒体光盘上，用来保存电影、电视等各种影像信息，不适宜Web视频，但有时也出现在Internet上，供用户下载、欣赏新影片的精彩片断。

15 <embed src=“video.avi” />
<img   src= “image/brocast.gif ”   dynsrc= “End07.avi ”   > 自动播放.avi格式的 注释：dynsrc 属性不是标准的 HTML 或 XHTML 元素。仅有 Internet Explorer 支持该属性。 <embed src=“video.avi” /> Internet Explorer 和 Netscape 都支持 <embed> 元素 W3C 推荐使用 <object> 元素来代替它 <object data="video.avi" type="video/avi" />

16 ②QuickTime格式(.mov、.qt)
QuickTime是Apple计算机公司开发的一种音频、视频文件格式， QuickTime文件格式支持25位彩色，支持RLE、JPEG等领先的集成压缩技术，提供150多种视频效果，并配有提供了200多种MIDI兼容音响和设备的声音装置。 新版的QuickTime进一步扩展了原有功能，包含了基于Internet应用的关键特性，能够通过Internet提供实时的数字化信息流、工作流与文件回放功能， QuickTime还采用了一种称为QuickTime VR (简作QTVR)技术的虚拟现实(Virtual Reality， VR)技术，用户通过鼠标或键盘的交互式控制，可以观察某一地点周围360度的景像，或者从空间任何角度观察某一物体。 拥有称为 H.264 的先进视频压缩技术 下载插件

17 在因特网上，QuickTime 是一种普遍的格式，但是如果没有额外的组件（免费），QuickTime 电影无法在非 Windows 的计算机上播放。
通过 object 元素，可轻松将播放 QuickTime 影片的代码添加到网页中。如果用户计算机中未安装 QuickTime 播放器，则可将 object 设置为自动安装 QuickTime 播放器。

18 <object width="160" height="144" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase=" <param name="src" value="sample.mov"> <param name="autoplay" value="true"> <param name="controller" value="false"> <embed src="sample.mov" width="160" height="144" autoplay="true" controller="false" pluginspage=" </embed> </object>

19 ③MPEG格式(.MPEG/.MPG/.DAT)
MPEG的全名为Moving Pictures Experts Group/Motin Pictures Experts Group，中文译名是动态图像专家组 MPEG文件格式是运动图像压缩算法的国际标准，它包括 MPEG-1，MPEG-7 MPEG标准包括MPEG视频、MPEG音频和MPEG系统(视频、音频同步)三个部分， MP3音频文件就是MPEG音频的一个典型应用 利用 MPEG Audio Layer 3 的技术，将音乐以1:10 甚至 1:12 的压缩率，压缩成容量较小的文件，而对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降 H.264，同时也是MPEG-4第十部分，高度压缩数字视频编解码器标准 离散余弦变换是jpeg标准的，你还可以增加jpeg2000的内容，它是以小波变换压缩

20 <object align=center class=OBJECT classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 height=320 id=MediaPlayer width=356>  <param name="ShowStatusBar" value="-1">  <param name="Filename" value="电影地址">  <embed type=application/x-oleobject codebase= flename=mp src=电影地址 width=356 height=320>  </embed>　  </object>

21 ④RealVideo格式(.RA/.RM/.RMVB)
流式传输 由RealNetworks 公司开发的RealVideo RealProducer G2 和RealEncoder 编码器 转换其它格式的视频文件来实现，这种技术为视频的网上出版展示了美好的前景。 RMVB影片格式比原先的RM多了VB两字，在这里VB是VBR（Variable Bit Rate--可变比特率）的缩写 RealMedia是目前Internet上最流行的跨平台的客户/服务器结构多媒体应用标准，其采用音频/视频流和同步回放技术实现了网上全带宽的多媒体回放。 在RealMedia规范中主要包括三类文件：RealAudio（用以传输接近CD音质的音频数据）、RealVideo（用来传输连续视频数据）和RealFlash （RealNetworks公司与Macromedia公司合作推出的新一代高压缩比动画格式）。

22 播放框：  <object classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA height=285 id=RAOCX name=rmplay width=356>  <param name="SRC" value="影片地址">  <param name="CONSOLE" value="Clip1">  <param name="CONTROLS" value="imagewindow">  <param name="AUTOSTART" value="true">  <embed src="影片地址" autostart="true" controls="ImageWindow" console="Clip1" pluginspage=" target="_blank" > width="356" height="285">  </embed>　  </object>

23 RM和ASF格式可以说各有千秋，通常RM视频更柔和一些，而ASF视频则相对清晰一些
⑤ASF格式(.ASF) Microsoft公司推出的Advanced Streaming Format (ASF，高级流格式) 是一个在Internet上实时传播多媒体的技术标准， ASF 是存储同步多媒体数据的可扩展文件格式，它支持通过各种网络和协议传送数据。 Microsoft公司希望用ASF取代QuickTime之类的技术标准。 ASF的主要优点包括：本地或网络回放、可扩充的媒体类型、部件下载以及扩展性等。 ASF应用的主要部件是NetShow服务器和NetShow播放器。有独立的编码器将媒体信息编译成ASF流，然后发送到NetShow服务器，再由NetShow服务器将ASF流发送给网络上的所有NetShow播放器，从而实现单路广播或多路广播。这和Real系统的实时转播则是大同小异。 ASF 文件能够被深度压缩，同时能够以连续的数据流进行传输（在线电视和广播）。该格式的文件可以是任何大小，同时能够被压缩以适应不同的带宽（连接速度）。 RM和ASF格式可以说各有千秋，通常RM视频更柔和一些，而ASF视频则相对清晰一些

24 ⑥WMV格式(.WMV) WMV又是一种独立于编码方式的在Internet上实时传播多媒体的技术标准，
Microsoft公司希望用其取代QuickTime之类的技术标准以及WAV、AVI之类的文件扩展名。 WMV的主要优点包括：本地或网络回放、可扩充的媒体类型、部件下载、可伸缩的媒体类型、流的优先级化、多语言支持、环境独立性、丰富的流间关系以及扩展性等。 WMV 的设计目标是处理各种类型的视频内容。该格式的文件能够被深度压缩，且能够传输连续的数据流（在线广播）。WMA 文件可以是任何大小，同时能够被压缩以适应不同的带宽（连接速度）。 WMV 格式与 ASF 格式类似。 WMV-HD的数据压缩率与H.264一样，两者的应用领域也极其相似，一般采用.wmv为后缀的HDTV文件就是采用的WMV-HD压缩的。

25 4．4 音频与Web设计 Web音频主要有内嵌音频和可下载音频 ⒈ 内嵌音频 ⒉ 可下载音频 在网页设计中一般是拒绝背景音频的。
内嵌音频一般主要用于视频、Flash动画的伴音 <EMBED SRC = “daisy.wav”> or <BGSOUND = “imagine.wav”> ⒉ 可下载音频 音频文件完全下载到用户客户端后，使用Windows Media Player或RealOnePlayer等媒体播放器进行播放，用户可以对音频完全控制：回放、暂停、停止、音量

26 1)midi Musial Instrument Digital Interface(乐器的数字化接口)
的缩写，用于在音乐器材、合成器和计算机之间交换音乐信息的标准协议。 在现代音乐制作上，MIDI的地位已不可取代，不论是影视音乐还是广告音乐，MIDI部分事实上占了主要地位，而真实乐器是表现旋律的载体。 MIDI 的最大特点是文件长度很小，但声音机械，一般用于背景音乐，不适合网上广播。 Music MasterWorks是一款MIDI制作软件

27 When would I use MIDI music?
Page 381

28 2)ra/.rm/.ram 3).mp3 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 。

29 4).wav 5).swf 6).mov/.qt 7).au 8).wma
Windows 使用“波形音频”(WAV)文件格式将声音存储为波形。 一分钟的使用“脉冲编码调制”(PCM) 编码的声音可以占用少则 644 KB或多达27MB的存储空间。 这一存储空间大小取决于采样频率、声音的类型（单声道或立体声）和用于采样的位数。 5).swf 6).mov/.qt 7).au Unix 音频(.au)文件是使用 UNIX 生成的声音文件。 8).wma

30 10.多媒体网站设计考虑的主要因素 网站主题 客 户 群 用户感受 网络带宽 下载时间 浏 览 器 分 辨 率 慎用插件 页面协调 慎用视频
背景音乐