网页设计必备知识[精选].ppt

第2章 网页设计必备知识 教学提示和学习重点 教学提示：在前一章网站设计基础知识的内容中，我们了解到网页设计在整个网站开发中的重要性，本章将接着介绍与网页页面设计相关的必备知识，包括认识网页页面上丰富的设计元素，网页版式设计和配合理论，以及了解网页图像与动画的设计基础。 学习重点： 认识网页页面元素的种类 了解图像与多媒体网页元素 认识网页配色及基本配色方法 认识网页版式设计 了解网页图像元素设计 了解网页动画元素设计 2.1 认识网页页面元素 网页的页面元素主要包括浏览者所能看到的文字、图像、动画、影片，以及不可见的表格、图层等内容。本节先来了解什么是网页元素、页面元素有哪些不同的类型。 2.1.1 网页页面元素种类 2.1.2 网页图像元素的格式 2.1.3 网页多媒体元素的分类 2.1.4 网页动画元素 2.1.1 网页页面元素种类 若由网页具体内容的类型来区分，页面元素主要由文本、图像、表格、图层、音效、动画、影片、特效等，设计者在网页已规划好的版式区域中加入所需的元素并作进一步编辑，以最精美的外观组合呈现网页整体效果。 页面元素则可分为网站Logo、按钮、导航、搜索元件、联系信息、版权信息、信息栏横幅、广告等。 2.1.2 网页图像元素的格式 图像是构成页面最基本的元素之一，即提供了文本不可替代的信息传播作用，同时也是装饰页面外观所不可缺少的。在网页设计中，一般使用的图像格式主要为JPEG、PNG和GIF，它们具有不同的特性。 1) JPEG格式 JPEG(Joint Photographic Experts Group)的意思为“联合图像专家组”，一般也简称为JPG，是一种文档交换格式，采用失真编码技术以数字余弦转换法(DCT)去除图像数据的可忽略部分，仅保留本身重要的图像信息，达到高压缩率减少档案大小的目的。JPEG图像虽然去除了部分图像数据而产生失真效果，但此失真比例可用参数控制当图像压缩率为5%～25%时依然能保证其显示质量。 2) PNG格式 PNG(Portable Network Graphics)图像兼具高压缩率和透明色彩背景两大优点，不但使图像所占空间较小，而且支持24bit图像色彩，可产生无锯齿边缘的背景透明效果，增强了该类图像的用途。 3) GIF格式 GIF(Graphics Interchange Format)是CompuServe公司开发的一种强压缩图像格式，同样具有文件体积小和支持透明背景的优点。 2.1.3 网页多媒体元素的分类 网页中的多媒体元素可分为音频和视频两种。 音频格式主要包括WAV、MIDI、MP3、WMA四种。 网络视频格式包括ASF、RM、RMVB、MOV等，此外MPEG、AVI由于具备较高画质，常常作为资源下载传播。 2.1.4 网页动画元素 在网页设计中只有两种多媒体动画素材，一种是作为图像衍生格式的GIF文件，另一种则是具备影音效果的Flash动画。下面分别介绍这种动画元素的特性。 1) GIF动画图像 GIF格式图像具有无损高压缩性和支持透明背景，而除了这些优点，GIF图像还有一个突出的特点就是具备动画效果。 2) Flash动画 Flash动画具有体积小、兼容性强，同时支持互动和影音效果等诸多优点，因此自面世以来就成为一种流行的网络动画格式。 图2.4 GIF动画原理 2.2 网页设计规格 640*480 实际尺寸620*311 800*600 实际尺寸780*428（760~788） 1024*768 实际尺寸1007*600（788~1007） 2.3 网页版型与配色 网页设计的过程就是将不同的内容完整地集合在一个页面上，为了产生精美的页面效果，如何规划网页的版型布局就显得非常重要。此外，作为设计领域另一项重要的工作，配色处理在网页设计工作中同样不可忽视。由于网页设计的特殊性，网页配色又与其他设计配色工作有很大不同，例如会涉及网页安全色概念。本节内容将介绍网页版型设计和页面配色的基础知识，分析不同的版面类型和版面布局的规划处理，认识何为网页安全色和基本的配色技巧。 2.3.1 页面版型结构 2.3.2 基本配色的方法 2.3.3 认识网页安全色 2.3.1 页面版型结构 网页版型就是网页的页面布局，版式设计指在指定的页面空间上将各种视听元素规划组合在一起，形成所需的某种布局。设计者应该根据主题定位为网页规划合适的版式，使网页呈现个性风格，让浏览者产生视觉美感。 界面指某种设计的综合布局形式，具有与外界交流及相互操作的作用。网页界面要求具有一定版型的同时，能够与浏览者交流互动，相互施加影响。与网页版型不同，界面设计除了一般的布局处理，还要添加相关的操作功能。 1.2 通栏设计 通栏设计，顾名思义，从上到下一通到底，也可以