搜索
高等教育电子音像出版社第三章网页设计的视听元素【内容提要】网页的视听元素属于网页的形态要素，主要由文字、图形图像、动画、音频、视频、交互元素等组成。能够根据网页的主题合理安排各视听元素的设计、组织和应用，是网页设计师的应具备的基本素质。【关键词】网页文字网页图形图像网页动画网页音、视频网页交互元素网页设计包括多种视听元素，如文字、图形、动画、视频、声音等，这些元素在艺术上都具有相对独立性，其中有些视听元素本身就是一门艺术。老蒋Flash作品《新长征路上的摇滚》第一节文字一、文本文字所谓文本，是指在网页编辑软件中可以编辑和更改内容的字符，它具有字体、字号、色彩等的基本属性。具有以下主要优点：1.丰富了文本的表现形式。2.简化了文本的控制方式。3.兼容性强。二、图形文字图形文字是指内容不可编辑、已经图形化的各种文字。三、网页文字的设计准则1.文字的风格和编排符合网页主题。2.保持文字的可读性。3.保持文字设计的整体性。4.大量的文字适合使用文本文字，文本文字应选用常用的系统字体。5.图形文字要注意控制文件的大小。第二节图形图像一、矢量图和位图1.矢量图矢量图也称为向量图，矢量图是通过数学方法计算对象的轮廓线和填充属性来描述图形的。目前，能够在网页中直接应用的矢量图形只有FLASH动画，其它格式的矢量图形只有转换为FLASH格式才能在网页中应用。矢量图放大位图放大敦煌图案矢量图2.位图位图也称为点阵图或像素图，它由网格上的点组成，这些点称为像素。位图是连续色调图像（如照片或数字绘画）最常用的电子媒介，因为它可以表现阴影和颜色的细微层次。PierreMendell创作的招贴3.矢量图和位图相互转化二、网页中常用的图形图像格式（一）GIF图像格式GIF是GraphicInterchangeFormat（图像交换格式）的缩写，以.gif作为扩展名。优点：1.跨平台显示能力。2.无损压缩。2.支持透明底图。3.支持隔行（Interlaced）显示模式。4.可制成动画。缺点：只支持256种颜色。无法用它来表现超过256色的图像色彩效果。只适合表现图标、按钮等颜色单纯的图像。（二）JPEG图像格式JPEG是JointPictureExpertGroup（联合图像专家组）的缩写。由于它支持全彩色模式，所以很适合用来优化颜色丰富的图像。优点：1.JPEG可以跨平台操作和显示。2.支持全彩色模式高倍率有损压缩。3.支持逐行（non-interlaced）显示模式。缺点：1.不适合优化颜色单纯的图像，容易使图像模糊。2.不支持透明底图。3.不能做成动画。（三）PNG图像格式：PNG是PortableNetwortGraphics（可移植网络图像）的缩写，是由Netscape公司开发出来的图像格式。它汲取了GIF和JPG的优点。优点：1.无损压缩连续色调图像。2.支持真彩色图像透明背景。3.显示速度很快；4.支持监视器的伽码设置修正。缺点：1.文件存储容量比JPEG格式大；没有GIF格式拥有的动画功能。2.PNG格式不完全支持所有浏览器。（四）SWF格式SWF文件格式是一种基于矢量的图形文件格式，也是目前Internet上唯一获广泛支持的矢量图形格式。三、图形图像的设计要点在进行网页图形图像设计时，要根据网页的特点注意以下要点：1.96dpi是网页图像的最佳分辨率。2.控制图像文件的大小。3.根据不同目的，选择适当图像文件格式。4.调整好网页图片的位置、面积、多少、主次、色调等，对于形成网页的整体视觉印象十分重要。第三节网络动画一、网页动画生成原理1.逐帧动画逐帧动画是指动画的每一帧都需要绘制的动画生成方式。动画电影《三个和尚》2.补间动画补间动画是指动画中重要和关键的画面（关键帧）需要绘制，其它的帧（普通帧）由计算机根据关键帧的变化计算自动生成的动画生成方式。Flash补间动画3.控件动画：控件动画是指通过编写程序代码，使图形或文字在一定的触发条件下产生各种变形的动画生成方式。二、网页动画的种类（一）Flash动画通过Micromedia公司的Flash软件能够制作出一种扩展名为SWF（ShockwaveFormat）的动画，通常我们叫这种动画为Flash动画。Flash网络动画MTV《喝馄饨》，荧光粉作品Flash动画具有以下特点：1.具有高清晰度的画质和小巧的文件体积。2.具有多媒体特征。3.采用流式技术。4.具有交互性。5.插件工作方式。（二）GIF动画GIF动画是像素图像动画，通过若干变化的256色位图图像间隔一定时间连续播放产生动画效果，属于逐帧动画。GIF动画中的连续帧变化过程（三）控件动画控件动画我们可以理解为计算机脚本（控件）作用于对象（图像、文字等）的作用过程记录。控件动画没有固定的文件格式，而是一些附加在对象上的计算机语言代码。三、网页动画应用－旗帜广告旗帜广告(Banner)又称为条幅广告，是网页中重要的宣传形式。设计旗帜广告应注意以下要点：1.控制文件大小。2.安排好旗帜广告的位置。3.有创意。4.在视觉上与网页相协调。5.注意文字的可读性。第四节网络音频与视频网络音频和视频是指网络中应用的各种声音和影片形式。网络音频和视频可应用于网络多媒体演示、网络动画、网络广告、互动点播、远程交流、电子商务等多种领域。一、流媒体流媒体是指采用流式传输的方式在网络播放的多媒体文件。流媒体技术就是把连续的影像和声音信息经过压缩处理后放上服务器，让用户一边下载一边观看、收听，而不需要等整个压缩文件下载到自己机器后才可以观看的网络传输技术。流媒体技术包括三个要素，分别是编码器（编码技术）、流服务器和播放器（解码播放）。目前网络应用上主流的流媒体技术有三种，分别是RealNetworks公司的RealMedia、Microsoft公司的WindowsMedia和Apple公司的QuickTime。二、音频1.MIDI文件MIDI（扩展名为.midi或.mid）文件只能用于器乐，不能表现自然人声。MIDI文件并不是一段录制好的声音，而是记录声音的信息，然后再告诉声卡如何再现音乐的一组指令，MIDI文件重放的效果完全依赖声卡的档次。许多浏览器不需要插件就支持MIDI文件。2.WAV文件和AIF文件WAV文件（扩展名为.wav）是微软公司开发的一种声音文件格式，AIF文件（扩展名为.aif或.aiff）是苹果公司开发的声音文件格式。两种音乐文件的都是无损音乐格式，都可以支持多种压缩算法；声音质量和CD相差无几，都具有很好的声音品质；许多浏览器都支持两种格式文件并且不要求插件；两种文件都具有较大的数据量，常常用于较短的网页音效中。3.MP3文件MP3文件（即MPEG-音频层-3，扩展名为.mp3）是一种压缩格式，它可令声音文件明显缩小，MP3是现在网络音频文件格式的主流。MP3音频文件的压缩是一种有损压缩。MP3可以运用流媒体技术。播放MP3文件，用户端需安装播放程序或插件即可播放。4.RealAudio文件RealAudio文件(扩展名为.ra、.ram、.rpm)具有非常高的压缩程度，文件数据量要小于MP3。RealAudio可以根据不同的网络带宽而设置不同声音的质量，主要适用于在网络上的在线音乐广播和欣赏。RealAudio是典型的音频流媒体文件，用户安装RealPlayer程序或插件就可以边下载边播放声音，RealAudio在低带宽环境下的传输性能非常突出。5.WMA文件WMA(WindowsMediaAudio，扩展名为.wma)格式是微软公司开发的压缩音乐格式。WMA的优点是压缩率可以达到1:18左右，且音质要强于MP3格式；WMA支持音频流技术，适合在线播放，并且Windows平台已自带WindowsMediaPlayer软件，无需安装额外的播放器；WMA还内置了版权保护技术，便于正版音乐的传播。三、视频RealMedia（文件扩展名为.RM）是RealNetworks公司首先推出的流媒体技术，它是目前主流网络视频格式，拥有最多的用户数量，其对应播放器是RealPlayer或RealOnePlayer。QuickTime：（文件扩展名为：.qt、.qtm、.mov）是Apple公司开发的音频、视频规范，它是目前数字媒体领域事实上的工业标准。其默认的播放器是苹果的QuickTimePlayer。WindowsMedia：是微软公司推出的流媒体技术，媒体文件为ASF格式（AdvancedStreamingFormat，扩展名为.asf或.wmv），对应的播放器是微软公司的WindowsMediaPlayer。第五节交互式视觉元素互动是网页的显著特征，网页的互动功能是通过各种交互式视觉元素实现的。除通过为文字、图像、动画添加超链接可以实现页面间的跳转和人机互动外，网页中用于互动的视觉元素还有按钮、表单、导航条、虚拟现实等，它们是网页设计中实现人机交流的主要手段。一、按钮按钮在网页中最为常见，它可以实现超链接功能。按钮点击后能够产生某种行为，或实现某种操作，多用于页面导航、信息提交以及各种功能的激活。网页中的按钮具有以下功能：1.导航提示功能2.形象化功能3.趣味化功能二、导航条导航条实际上是一系列不同功能按钮或链接图标的组合，由于多个按钮或链接图标排列形成横条或竖条，所以被称为导航条。大部分导航条的排列分为横向排列和纵向排列，也有一部分不规则排列。三、表单表单是用于信息收集和用户反馈的一类对象。设计表单时应尽量简单。四、网络虚拟现实虚拟现实（VirtualReality，VR）是一项以计算机技术为核心的融合视、听、触觉为一体的模仿现实的三维空间再现技术。在网络中我们也可以运用虚拟现实技术，我们通常所说的Web3D就是网络虚拟现实。网络虚拟现实需要通过专门的软件来制作，并且需要安装相应的插件才能实现。这类软件技术有许多，其中相对比较成熟的网络虚拟现实制作技术有：Cult3D、Viewpoint、Atmosphere、Shockwave3D、Pulse3D、QuickTimeVR等。【思考与练习】1.将自己的照片处理后转化为矢量图形。2.将一个WAV音频转换为MP3格式。3.在网络搜索一个将视频文件转换为RM格式的转换工具，并在教师指导下自学学会使用。4.制作一个GIF格式的广告条。【学习方法提示】1.各种工具软件的使用大同小异，要善于举一反三。2.主动培养自己的自学能力和信息搜索能力。【学习链接】1.网页陶吧：网狐学院：新浪学园