网页艺术设计课件（第三章）.ppt

第三章 网页设计的视听元素 网页设计包括多种视听元素，如文字、图形、动画、视频、声音等，这些元素在艺术上都具有相对独立性，其中有些视听元素本身就是一门艺术。 第一节 文字 一、文本文字 所谓文本，是指在网页编辑软件中可以编辑和更改内容的字符，它具有字体、字号、色彩等的基本属性。 使用CSS具有以下主要优点： 1.丰富了文本的表现形式。 2.简化了文本的控制方式。 3.兼容性强。 二、图形文字 图形文字是指内容不可编辑、已经图形化的各种文字。 三、网页文字的设计准则 1.文字的风格和编排符合网页主题。 2.保持文字的可读性。 3.保持文字设计的整体性。 4.大量的文字适合使用文本文字，文本文字应选用常用的系统字体。 5.图形文字要注意控制文件的大小。 第二节 图形图像 一、矢量图和位图 1.矢量图 矢量图也称为向量图，矢量图是通过数学方法计算对象的轮廓线和填充属性来描述图形的。 目前，能够在网页中直接应用的矢量图形只有FLASH动画，其它格式的矢量图形只有转换为FLASH格式才能在网页中应用。 2.位图 位图也称为点阵图或像素图，它由网格上的点组成，这些点称为像素。位图是连续色调图像（如照片或数字绘画）最常用的电子媒介，因为它可以表现阴影和颜色的细微层次。 3.矢量图和位图相互转化 二、网页中常用的图形图像格式 （一） GIF图像格式 GIF是Graphic Interchange Format（图像交换格式）的缩写，以.gif作为扩展名。 优点： 1.跨平台显示能力。 2.无损压缩。 2.支持透明底图。 3.支持隔行（Interlaced）显示模式。 4.可制成动画。 缺点： 只支持256种颜色。无法用它来表现超过256色的图像色彩效果。 只适合表现图标、按钮等颜色单纯的图像。 （二） JPEG图像格式 JPEG是Joint Picture Expert Group（联合图像专家组）的缩写。由于它支持全彩色模式，所以很适合用来优化颜色丰富的图像。 优点： 1.JPEG可以跨平台操作和显示。 2.支持全彩色模式高倍率有损压缩。 3.支持逐行（non-interlaced）显示模式。 缺点： 1.不适合优化颜色单纯的图像，容易使图像模糊。 2.不支持透明底图。 3.不能做成动画。 （三） PNG图像格式： PNG是Portable Networt Graphics（可移植网络图像）的缩写，它汲取了GIF和JPG的优点。 优点： 1.无损压缩连续色调图像。 2.支持真彩色图像透明背景。 3.显示速度很快； 4.支持监视器的伽码设置修正。 缺点： 1.文件存储容量比JPEG格式大；没有GIF格式拥有的动画功能。 2.PNG格式不完全支持所有浏览器。 三、图形图像的设计要点 在进行网页图形图像设计时，要根据网页的特点注意以下要点： 1.96dpi是网页图像的最佳分辨率。 2.控制图像文件的大小。 3.根据不同目的，选择适当图像文件格式。 4.调整好网页图片的位置、面积、多少、主次、色调等，对于形成网页的整体视觉印象十分重要。 第三节 网络动画 一、网页动画生成原理 1. 逐帧动画 逐帧动画是指动画的每一帧都需要绘制的动画生成方式。 2. 补间动画 补间动画是指动画中重要和关键的画面（关键帧）需要绘制，其它的帧（普通帧）由计算机根据关键帧的变化计算自动生成的动画生成方式。 3. 控件动画： 控件动画是指通过编写程序代码，使图形或文字在一定的触发条件下产生各种变形的动画生成方式。 二、网页动画的种类 （一）Flash动画 通过Micromedia公司的Flash软件能够制作出一种扩展名为SWF（Shockwave Format）的动画，通常我们叫这种动画为Flash动画。 Flash动画具有以下特点： 1. 具有高清晰度的画质和小巧的文件体积。 2. 具有多媒体特征。 3. 采用流式技术。 4. 具有交互性。 5. 插件工作方式。