网页设计必备知识.ppt

《网页设计必备知识.ppt》由会员分享，可在线阅读，更多相关《网页设计必备知识.ppt（93页珍藏版）》请在三一办公上搜索。

1、第2章 网页设计必备知识,教学提示和学习重点2.1 认识网页页面元素2.2 网页设计规格2.3 网页版型与配色2.4 设计网页图像元素2.5 设计网页动画元素,教学提示和学习重点,教学提示：在前一章网站设计基础知识的内容中，我们了解到网页设计在整个网站开发中的重要性，本章将接着介绍与网页页面设计相关的必备知识，包括认识网页页面上丰富的设计元素，网页版式设计和配合理论，以及了解网页图像与动画的设计基础。学习重点：认识网页页面元素的种类了解图像与多媒体网页元素认识网页配色及基本配色方法认识网页版式设计了解网页图像元素设计了解网页动画元素设计,2.1 认识网页页面元素,网页的页面元素主要包括浏览者所

2、能看到的文字、图像、动画、影片，以及不可见的表格、图层等内容。本节先来了解什么是网页元素、页面元素有哪些不同的类型。2.1.1 网页页面元素种类2.1.2 网页图像元素的格式2.1.3 网页多媒体元素的分类2.1.4 网页动画元素,2.1.1 网页页面元素种类,若由网页具体内容的类型来区分，页面元素主要由文本、图像、表格、图层、音效、动画、影片、特效等，设计者在网页已规划好的版式区域中加入所需的元素并作进一步编辑，以最精美的外观组合呈现网页整体效果。页面元素则可分为网站Logo、按钮、导航、搜索元件、联系信息、版权信息、信息栏横幅、广告等。,标题,网页页眉,网页导航,搜索引擎,用户登录,广告栏

3、,网页页脚,文本,图像,表格,图层,动画,Logo,按钮,搜索元件,联系信息,版权信息,信息栏横幅,广告,导航,2.1.2 网页图像元素的格式,图像是构成页面最基本的元素之一，即提供了文本不可替代的信息传播作用，同时也是装饰页面外观所不可缺少的。在网页设计中，一般使用的图像格式主要为JPEG、PNG和GIF，它们具有不同的特性。1)JPEG格式JPEG(Joint Photographic Experts Group)的意思为“联合图像专家组”，一般也简称为JPG，是一种文档交换格式，采用失真编码技术以数字余弦转换法(DCT)去除图像数据的可忽略部分，仅保留本身重要的图像信息，达到高压缩率减少

4、档案大小的目的。JPEG图像虽然去除了部分图像数据而产生失真效果，但此失真比例可用参数控制当图像压缩率为5%25%时依然能保证其显示质量。2)PNG格式PNG(Portable Network Graphics)图像兼具高压缩率和透明色彩背景两大优点，不但使图像所占空间较小，而且支持24bit图像色彩，可产生无锯齿边缘的背景透明效果，增强了该类图像的用途。3)GIF格式GIF(Graphics Interchange Format)是CompuServe公司开发的一种强压缩图像格式，同样具有文件体积小和支持透明背景的优点。,2.1.3 网页多媒体元素的分类,网页中的多媒体元素可分为音频和视频两

5、种。音频格式主要包括WAV、MIDI、MP3、WMA四种。网络视频格式包括ASF、RM、RMVB、MOV等，此外MPEG、AVI由于具备较高画质，常常作为资源下载传播。,2.1.4 网页动画元素,在网页设计中只有两种多媒体动画素材，一种是作为图像衍生格式的GIF文件，另一种则是具备影音效果的Flash动画。下面分别介绍这种动画元素的特性。1)GIF动画图像GIF格式图像具有无损高压缩性和支持透明背景，而除了这些优点，GIF图像还有一个突出的特点就是具备动画效果。2)Flash动画Flash动画具有体积小、兼容性强，同时支持互动和影音效果等诸多优点，因此自面世以来就成为一种流行的网络动画格式。,

6、图2.4 GIF动画原理,图2.5 网页中的Flash动画,2.2 网页设计规格,640*480实际尺寸620*311800*600实际尺寸780*428（760788）1024*768实际尺寸1007*600（7881007）,2.3 网页版型与配色,网页设计的过程就是将不同的内容完整地集合在一个页面上，为了产生精美的页面效果，如何规划网页的版型布局就显得非常重要。此外，作为设计领域另一项重要的工作，配色处理在网页设计工作中同样不可忽视。由于网页设计的特殊性，网页配色又与其他设计配色工作有很大不同，例如会涉及网页安全色概念。本节内容将介绍网页版型设计和页面配色的基础知识，分析不同的版面类型和

7、版面布局的规划处理，认识何为网页安全色和基本的配色技巧。2.3.1 页面版型结构2.3.2 基本配色的方法2.3.3 认识网页安全色,2.3.1 页面版型结构,网页版型就是网页的页面布局，版式设计指在指定的页面空间上将各种视听元素规划组合在一起，形成所需的某种布局。设计者应该根据主题定位为网页规划合适的版式，使网页呈现个性风格，让浏览者产生视觉美感。界面指某种设计的综合布局形式，具有与外界交流及相互操作的作用。网页界面要求具有一定版型的同时，能够与浏览者交流互动，相互施加影响。与网页版型不同，界面设计除了一般的布局处理，还要添加相关的操作功能。,根据目前网页设计现况，以及在网络上能呈现的设计条

8、件，可以把网页框架归类为三大类：分栏式结构、区域排版和非规律的页面排版。分栏式结构和区域排版是两种较常见的基本构架形式，在商业网页设计方面有较广泛的应用，同时也是非商业网页设计构架的首选。,框架的分类,1.1 最常见的分栏式骨架结构分栏式结构是最常见的网页框架，也可以称为竖分栏。这是一种超过一屏半，把页面从上到下分割为几列构架的设计结构，类似于新浪()的二分栏页面骨架设计(见图4)。,1 分栏式结构,图4 分栏式框架结构,分栏式结构是竖长方形页面的框架。最常见的分栏式骨架结构，还有如L的三分栏(见图5)，以及国外常见的四分栏式结构(见图6)。另外还有较为特殊的通栏(见图7)和五分栏(见图8、图

9、9)。,图5 L三分栏框架结构,图6 最典型的四分栏框架结构,1.2 通栏设计通栏设计，顾名思义，从上到下一通到底，也可以称为一栏。这种结构一般用于显示信息内容、注册信息页面等，是竖分栏式骨架结构的特殊情况。,图7 通栏注册信息页面,竖分栏数越多，列宽越窄，一行排列的文字越少，显得过于拥挤，不易于阅读。根据屏幕分辨率、字号和每行字数等具体情况分析，五分栏结构已经是最大分栏数了。五分栏设计本身已经很特殊，网络上非常少见。图8所示是标准五分栏框架的页面。由于方块汉字略大于西方字母，因而中文网站能使用五分栏结构的情况更加少。,图8 标准五分栏H,图9 五分栏韩国短信商业站点,1.3 分栏式结构的变化

10、在新浪网二分栏框架的解析图(图10)上，我们可以清楚地看到右列被分成了多个小的区域，这些利用列宽而划分出的多个小区域，可以配合网站内容放置不同的信息和功能区。并且能灵活地处理页面元素，以活跃页面气氛。,图10 形式可爱的二分栏页面设计,在竖分栏内增加多个小分区的方式，可以使分栏式结构产生多种变化形式，打破分栏式的死板架构，加强了分栏式结构的应变能力。根据常见的分栏式布局，我们绘制了一张简单变化结构图(见图11)。和以二分栏作为基础结构。其中，是Logo和导航处在页面下方的情况。二分栏结构一般是左窄右宽，导航居左，底色加重表示强调。也有的情况是右窄左宽，导航居右，但非主流。,图11 分栏布局情况

11、,是以三分栏作为基础结构的。三分栏属于开放式结构，给人的感觉十分大气，适用于门户和流量大的网站。常规内容设置是：导航横排在页面上部，左右两栏为功能区和附加信息区。中栏为主要信息显示区和重要资料显示区。根据信息源，将中栏进行一些小分栏变化，以确立网站特色。色彩分布则主要是左右两栏色彩深一些，而中栏为白色等常见情况。,图12 Y,中的前两个是四分栏的结构框架，后两个是五分栏的结构框架。四分栏式结构会使得页面相对很拥挤，给人一种网站的信息量很大的感觉。信息储备少的站点采用这种框架，可以在视觉感观上调整信息量少的不足。由于英文字比中文方块汉字占用空间小，因而四分栏在国外比较多见。作为突破性的设计，应该

12、有一些尝试，也许会发现它的妙用之处。如果细心观察，你会注意到在变化了的二分栏或三分栏骨架中会出现小的四分栏式结构。图13、图14和图15展示了三种不同的分栏结构。,图13 右栏宽式三分栏骨架,图14 四分栏结构设计,图15 韩国的Web.st内嵌五分栏式结构骨架设计,图16 多变化分栏式骨架设计,图16所示的网页结构，是在通栏里内嵌小二分栏，使得页面色彩鲜明，极活泼又大气。,图17 简洁的二分栏结构骨架设计,图17是典型的二分栏，但是却没有明显的界限，导航区和信息区自然分割为两栏，使页面既简洁大方、色彩搭配合理，又不失独特的风韵。,图18 别致的三分栏骨架设计,图18是别致的三分栏式结构骨架的

13、页面设计。信息量少却运用了开放型的三分栏骨架，利用背景颜色、图案互补，把文字留白区填充完整，使页面既不显得空荡，反而更显特色。,分栏式结构的页面容易过长，过长的页面载入非常慢，从而失去分栏式的优越性。为了不给访客带来太大的麻烦，应尽量保证页面的长度在两屏到三屏为佳。,2 区域编排,利用辅助线、插图、色彩把网页平面分为几个规则的或不规则的区域，形成类似图19所示的网页框架，这种网页框架笼统称为区块分布式结构，也叫做区域编排式结构设计。横向割断分栏式结构，就可以变成区域排版，所以也可以称区域排版为分栏结构的变异。,图19 区域编排结构的网站,区域编排的结构灵活，变化多，通常可利用颜色、线条、文字的

14、断口或插图的变换等手段来划分区域。划分出来的区域的大小、形式都可以自行定义，格局则变化莫测。,图20 标准区域分布的骨架结构,图20中，四个网站抓图均是标准的区域编排框架。此类框架适合于信息量小，信息源有规律的网站。区域编排不适用于门户开放式站点和信息交错紧密的站点；比较适用于企业站点和产品单一的电子商务类站点，以及对页面要求较高、信息流通量小的专业性信息站点。,图21 浓烈的气息，精彩的摇滚站点,图21为没有明显的分栏结构。它表面看似杂乱，实际上却是用很规则的方块来编排页面信息的。动静结合的页面，鬼魅而血腥，给我们带来摇滚乐最直接的震撼。,图22 既属于分栏式结构又属于区域编排式结构,图22

15、为小巧的Flash站点，区域分割比例恰到好处，大方轻快。虽使用了明确的区域划分，却没有局限作品的风格，作品中依然体现出更多的时尚感和数码感。由此看来，采用区域排版的页面伸缩性很好，适用于更广泛的不同信息类型的网站形式。,图23 特色的区域编排结构类站点(一),图23显示的是一种十分具有特色的区域编排结构类站点。,图24 特色的区域编排结构类站点(二),图24中的页面使用了插图、色彩作为分割的界限，艺术味道十足，是韩国十分有名的艺术网站。,图25 特色的区域编排结构类站点(三),图25中页面插图跨越了几个分割区域的情况。插图的运用使得页面显得更具有张力感和空间感，开阔大气。,图26 特色的区域编

16、排结构类站点(四),图26中的页面较长，信息量很大，插图位置明显，难以忽略。新闻区的长度不够，则在页面内使用滚动条，解决了页面空间问题，同时能够快速、便捷地查找短期过往新闻。,图27 竖四分栏的分栏式结构骨架和横四分栏区域编排,图27中的两个页面，一个是无变化的分栏式骨架结构，一个是无分割的区域排版骨架结构，两种最典型的骨架结构，各有其妙用之处。浏览过那么多精致的页面后，对比这两个页面设计，或多或少有一些返璞归真的感觉。,总体来说，分栏式和区域编排没有严格的界限。只要能设计出风格独特的网页，就是好的框架。在进行设计时，不要给自己太多的条条框框和先入为主的思想，它们会妨碍思路的开阔和创意的展开。

17、,3 非规律框架设计,3.1 非规律框架设计 分栏式结构和区域编排以外的网页框架归属为一类，即非规律框架。非规律框架设计真的没有规律吗？也不尽然。非规律框架按整体效果可先分为动态网页和静态网页。,其中，静态网页主要有以下三种情况：第一类：由无框架式的整张图片分割生成的网页。第二类：横向页面很长，有些怪异的网页。第三类：整个信息区很小的袖珍型网站。,3.2 静态页面设计第一类如果把静态的网页设计归为平面设计的一种，则应把网页当作平面出版物创意设计，信息与背景画面融为一体，没有清晰的界限区分，导航、信息区等属于网页本身的特征。设计好的网页图片采取分割整张图片生成网页的形式去制作。此种情况就是非规律

18、框架的静态网页第一类，如图28所示。,图27 无框架页面设计(X),图28 S,图29 P,如图29所示，页面中文字信息较多，但也可以使用静态页面设计。页面分左右两部分，左部是图片，右部是文字和超链接，导航置顶。这是一个享誉国际的工作室主页。,图30 蓝色虎牙H,如图30所示，蓝色虎牙属于典型的信息量少、个性化强的个人主页。大面积的插图、小面积的文字、图片式导航条，确定了活泼俏皮的个人风格。此站属于个人主页的典范。,如图31所示的网页设计，在高雅的淡色背景上，搭配小面积的插图，而将文字信息集中在一起，导航和条目信息分居两旁，有张有弛，视觉效果不亚于图28中的黑色背景的网页。,图31 INFRO

19、NT,3.3 静态页面设计第二类图32中的非主流的网页设计即是非规律静态网页第二类。通常在设计分栏式或区域排版风格的网页时，设计师们十分介意浏览器出现横向滚动条。一方面只带一个滚动键的鼠标不能滚动横向页面，在鼠标操作上多有不便；另一方面，在商业类或门户类站点中出现滚动条，是十分不美观的。出现此类情况，人们会认为是设计师或制作者由于粗心而造成的制作疏漏，有点大煞风景的味道。,一旦横向能够滚动两屏或两屏以上(如图33所示)，特殊怪异的个性美就展现出来了。信息平铺到该页，无所谓导航的概念，其内页信息都是以弹出窗口的形式连接。横向滚动的同时，好似观看一场展览。沿着墙壁一路过去，滋味别样。,图33 横向

20、滚动加长页面,3.4 静态页面设计第三类袖珍型的页面设计，同样适用于信息量少的网站。个人主页五花八门，甚至一些小信息的网站，设计起来只占整个浏览器页面的一个小块区域，内页信息也只展示在这小小的区域内，再有特殊的信息就只好使用弹出式窗口或展开新页了。如系列图3436所示，是韩国某插画家的个人网站。整个站点仅有一个风格不变的立体长方形区域。,图34 韩国插画站首页,图35 韩国插画站内页(一),图36 韩国插画站内页(二),图37 日本站点channel*924325 首页,图38 日本站点channel*924325 内页,通过袖珍型的设计模式，也可以设计出多种不同风格的网站来。比如图39中的网

21、站就给人以幽雅、怀旧和神秘的感觉。黑色的背景呼应白色曲线的字符，有点欧洲古典的味道。,这种框架结构也可以用做商业、企业站点，如图40所示，方框和长边线在视觉上传达出一种严谨、沉稳的信任感。灰色与红色的搭配也起到了类似的作用。,3.5 多变化Flash网页设计动态的Flash网页设计，通常表现出互动感、时代感和科技感。它为网络设计开辟了新的领域和篇章。随着网络带宽的加大，电脑技术的普及，广大Flash网页设计也会有更宽广的用途和发展。动态的形式无法用框架把握。在以上的所有网页结构里，都可以嵌套局部的Flash，或利用Flash制作。,一个完全由Flash制作的网站大多不外乎两种情况：一种是静止后

22、的页面，类似分栏式或区域排版结构。另一种情况是根本没有边际可寻，完全是一个动画场景或整张图的视觉效果。,图41 Flash制作的网页,如图41所示，假设我们不知道它是利用Flash制作的，最后的静止页面就是三分栏框架了,图42 Flash制作的网页,图42所示的站点风格就是Flash网页的主流设计风格。,图43 多变化Flash新媒体设计,图44 德国WM Team公司站点,作业及练习,查找符合下列要求的网页各一幅，实验课上交分栏式结构分栏式结构变化区域排版无框架式页面结构多变化Flash页面结构非主流网页结构,2.3.2 基本配色的方法,见色彩搭配ppt,2.3.3 认识网页安全色,由于网页

23、上的颜色一般都在电脑屏幕上显示，它属于数字颜色，跟自然色不一样。所以网页中的颜色会受到各种不同环境的影响，即使网页使用了非常合理、非常漂亮的配色方案，但也有可能因环境的不同产生不同的效果。网页安全色就是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，而使用网页安全色作为配色方案可以解决网页颜色失真的问题。网页安全色总共包含216种颜色，因此网页安全色也称为216安全色，如图2.11所示，为网页的安全色项目。,2.4 设计网页图像元素,图像有着比文本更加形象直观的信息传播力量，很多无法通过文字表达的信息却可以用一张简单的图片快速传达，由此可见，图像元素在网页设计中的重要性，

24、本节主要介绍网页中较为重要的几种图像设计元素的应用。2.4.1 Logo设计2.4.2 设计横幅2.4.3 设计按钮2.4.4 设计导航条,2.4.1 Logo设计,Logo的中文意思是标志、徽标、商标，在商品意识强烈的现代社会里，几乎大部分商业或商品都具有品牌Logo。此外，网站的Logo大小的设计还有一套比较常用的规格，主要有三种规格大小：最普遍的小型规格8831(单位为像素，下同)、中型规则12060、大型的12090。,网站Logo的表现形式主要有以下几种：图案形式：由单纯图案组合的表象符号，融合了隐喻、联想、概括、抽象，呈现出网站的理念和宗旨，独特、醒目，令图案易区别、记忆，当要求持

25、久记忆时，更应以独特的图案形象示人，如图2.22所示，为大众汽车官方网站就使用了该品牌Logo作为网站Logo。,文本形式：主要用文本表意的设计形式，在一般的沟通与传播中，经常涉及品牌名称或产品名称时，可用文本形态加以统一。图2.23所示为谷歌网站的纯文本形式的Logo设计。,图文结合：这是一种表象表意的综合，是文字与图案相结合的设计效果，兼具文字与图案的属性，但都削弱了相关属性的影响力。制作偏图案或偏文字的Logo，在表达时会产生较大差异。图2.24所示为VeryCD网站上图文结合的Logo设计。,2.4.2 设计横幅,网页横幅主要是指页面上方的横跨整个内容区域的部件，由于横幅在网页中所占位

26、置比较重要，同时也是最具有价值的区域，一般都用于放置最重要的页面信息，例如网站的标题、网站Logo、重要的广告等。,网页的横幅与Logo都是人们辨识一个网站的重要视觉元素。图2.26所示为TOM网站首页横幅中的广告。,2.4.3 设计按钮,按钮是网页中一种重要的链接，是网页设计中除了超链接文本之外，另一种重要的链接元素。按钮的制作方法主要是：先设计具备按钮外观的图像效果，然后添加超链接从而产生按钮功能。图2.27所示为网页中具有重要作用的各种按钮。,网页中的按钮主要有两种类型:一种是单纯以图案作为按钮，例如箭头、三角形等简单的图案或符号作为示意；另一种是附有文字的按钮，如例“首页”、“进入”、

27、“下一步”等，能够直观地表达按钮的作用。,2.4.4 设计导航条,一个网站通常综合了各种丰富的信息，并以多个页面(频道)将不同的内容呈现，为了在网页中提供链接到其他页面的通道，一般会设计导航条(如图2.29所示)并将同一个导航条放置在所有网页的相同位置，以便浏览者快速打开其他网页获得更多的信息。,2.5 设计网页动画元素,在网页中添加动画元素可使页面看起来更加活泼生动，而且动画具有比静态图像更为丰富的信息。以广告动画为例，静态图像只能表现单一画面的信息，而动画则可以用多个场景表现丰富而有价值的信息，同时动画元素也比一般的静态内容更吸引浏览者的目光。随着Flash动画设计软件的普及应用，具备丰富

28、而精美的动画元素将是未来网页的设计方向。本节内容将介绍网页设计中常见的按钮动画、横幅动画和广告动画的应用。2.5.1 设计按钮动画2.5.2 设计横幅动画2.5.3 设计动画广告,2.5.1 设计按钮动画,按钮动画主要是指能够与浏览者产生互动的按钮效果，例如网页中的按钮在一般状态下呈现某个外观，当浏览者将鼠标经过、按住、按住后放开按钮等一系列操作时会产生不同外观变化，如图2.31所示。Flash动画制作软件提供了按钮的设计方法，只通过编辑弹起、指针经过、按下、单击四个状态的变化效果(如图2.32所示)来快速完成一个按钮的动画设计。,2.5.2 设计横幅动画,为了使网页的页面效果更动感，同时展现

29、更丰富的信息，很多网页设计中都以动画的方式显示横幅，特别是一些商业广告，更是充分利用一系列的动画效果，以便完整地呈现广告或其他的宣传内容。由于网页的横幅位置通常会放置网站Logo、导航条等内容，因此并不一定要通栏应用动画，也就是说有些只需要静态呈现的内容可与动画横幅切割开来，以“华军软件园”网站首页上的横幅为例，其左侧放置网站的Logo，而右边较大部分放置动画横幅广告，如图2.33所示。,2.5.3 设计动画广告,网页中动画广告的形式非常丰富，主要包括横幅广告(banner)、悬浮广告、弹出式广告、竖式旗帜广告、全屏广告、通栏广告、翻页广告等。图2.34所示为“太平洋电脑网”首页中多种常见的广

30、告形式。,下面详细介绍几种比较典型的网络广告。弹出式广告：这是指浏览者登录网页时强制插入的一个广告页面或窗口，类似于电视里中断正常的节目播放而强迫观众接收的广告，因此也称为插播式广告。悬浮广告：这也是网页中常见的一种动画广告形式，该形式的广告会悬浮在网页页面上，以特定或随机的路径缓慢移动，同时以动画形式呈现广告内容。通栏广告：这是横幅广告的一种升级，虽然横幅广告初期得到较高认可，然而随着时间的推移，人们对横幅广告已经缺乏新鲜感，于是才有了通栏广告。它比横幅广告更长，面积更大，具有更好的表现力，因此也更吸引人。竖式旗帜广告：其位置一般在网站主页的两侧，也是网络广告中的有效宣传位置，如今已成为一种常见的广告形式。,作业,设计符合要求的网页图像元素，实验课上交：Logo横幅按钮导航动画按钮动画横幅动画动画广告网页按照网页设计规格分别设计出一下规格显示器下的网页整体框架：800*6001024*768,