第3章 网页版式的设计

第3章网页版式的设计本章学习目标(1)理解网页中的各类元素及其作用；(2)掌握各类网页的版式设计方法；(3)掌握网页模板的创建方法；(4)理解网页版式设计的主要策略.本章知识结构网页排版典型风格网页排版原则网页排版设计规则网页版面基本概念网页排版步骤3.2网页版面设计3.1网页基础知识3.1网页基础知识3.1.1虚拟界面

由于网页是通过计算机的显示通道与人们交流的，并不是现实世界中的实际物体，因此又被称为“虚拟界面”。从网络的角度来看，虚拟界面是一个网站的窗口，网站中的数据库信息、链接功能以及各种网络服务都通过这个界面进行实施。一个网站的网页可以有多个，通常根据需要分层设置。从平面设计的角度来看，每个虚拟界面就是一个版面，可以利用平面设计理念对其进行设计。但是，网页毕竟是计算机技术和多媒体技术的产物，具有某些一般版面所没有的特点和性质。为了对虚拟版面进行设计，就必须拓展设计的范围，丰富设计的手段，如对于版面各种媒介的设计与制作，要应用一些新的技术。1．版面尺寸规范化通常采用显示器的标准显示模式，下面是常用的显示器的标准显示模式1）800像素×600像素。2）1024像素×768像素。3）1280像素×1024像素或更高。3.1.2网页界面的特点3.1.2网页界面的特点图3-1包含多种多媒体的网页2．媒介形式的多样化3．有限的界面颜色数量（一般采用256色模式）4．界面的嵌套性（嵌套和链接，整体风格统一和部分表现个性化协调）5．具有控制功能（能实现跳转和检索等功能，完成网络操作）3.1.2网页界面的特点3.1.3网页的功能其主要功能包括：展示功能超链接功能检索功能统计和计算功能等3.2.1版面编排原则

版面编排的首要任务就是根据网页传达内容的需要，将不同的文字和图片按照一定的次序用最合理的编排和布局组成一个有机的整体并展现出来。3.2.1版面编排原则版面编排应注意以下几项基本原则：1．突出中心，理清主次2．搭配合理，大小呼应3．图文并茂，相得益彰3.2.2网页排版布局的一般步骤（1）构思根据网站内容的整体风格，设计版面布局。（2）初步填充内容这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。3.2.2网页排版布局的一般步骤（3）细化在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。3.2.3版面典型风格对称型对称型，又称国字型或同字型，是最常见的结构类型，具有典型的版面平衡，视觉感受沉稳大气、实力感较强等特点，通常被一些政府部门、大型公司等大型网站所采用偏置型网站布局偏置型，又称拐角型或厂字型，其特点是在沉稳大气的同时略显个性，版面所容纳的信息量大，各种社会服务机构、大专院校、教育机构的网站多采用这种类型。偏置型标题型网站布局标题型网页风格简练，传达内容直观，标题型网页的特点是功能具有单一性，常用于某些产品的宣传、单一作品的说明和发布、搜索引擎和软件注册页面等。标题型POP网站布局FLASH布局网站3.2.4网页排版布局的常用技术（1）CSS（层叠样式表）布局

使用CSS布局技术能完全精确地定位文本图片。目前，CSS运用的好坏是一个网站优秀与否的关键。（2）表格布局

表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且表格在定位图片和文本上比用CSS更加方便。表格布局惟一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度。（3）框架布局

从布局上考虑，框架结构不失为一个好的布局方法。3.2.5色彩搭配色彩和谐与否，是整个网页设计是否成功的关键。色彩总的应用原则是“总体协调，局部对比”色彩的特征色彩的基本特征主要有色调亮度饱和度色相色相：色彩的相貌色彩的外观特征其实就是色彩的色相。

我们把色相接近的那些色（色相环中相距30度左右的色）称为同类色；

色相差别较大的那些色（色相环中相距90~180度左右的色）称为对比色或互补色；

色相差别适中的那些色（色相环中相距50度左右的色）称为类似色。明度明度色标是我们认识和区别色彩明度的重要工具。不同的颜色之间存在着明度的不同，从色相环中我们可以看到黄色最亮，即明度最高；蓝色最暗，即明度最低。不同明度的色彩，给人的印象和感受是不同的。一般情况下，人们把明度低于3度的颜色叫暗色，明度高于7度的颜色叫明色，3度和7度之间的色叫中明色。

饱和度又称纯度：色彩的艳丽程度在一个大红色里逐步添加白色或者是黑色，这个大红色就会变的不象以前那么艳丽了，这是因为它的纯度下降了。根据色彩纯度的特征，自然界的色彩可以分为两大类，有彩色，即红，黄，蓝等。无彩色，即黑，白，灰。无彩色不带任何色彩倾向，纯度为0。在这个纯度色谱中，接近纯色的色叫高纯度色，接近灰色的色叫低纯度色，处于中间状态的叫中纯度色。

色彩搭配在进行网页色彩搭配时，应遵循如下要点：确定主体色遵循主从关系，是处理色彩的主要原则使用相近色设计时选择色彩相近的颜色，易于搭配。同一页面尽量不要多出4种颜色色彩均衡原则当运用了较多明度较高的颜色时可以用黑色或同色相的深色小面积色块点缀，以增加页面分量，达到色彩均衡色彩搭配在进行网页色彩搭配时，应遵循如下要点：黑白灰运用遇到色彩凌乱或纯度很高的颜色时，可以大面积的增加白、灰等浅色，小面积增加黑色，以调节颜色搭配不当的情况。色彩心理与情感不同的颜色会使浏览者产生不同的心理感受3.2.6设计规则1．首屏页面的设计所谓首屏页面，是指在打开一个网站首页时，不拖动画面右侧的滚动条能够看到的部分，如图所示。首屏页面的设计（1）首屏页面的尺寸与显示器的显示模式有关，不可采用过高的显示模式，要考虑多数显示器的显示模式。网页的宽度应小于屏幕内浏览器窗口的宽度，网页向下延伸的长度可随意些，但不可过长。（2）首屏页面的把握应着重安排在第一时间里呈现在读者面前的内容（3）设法抓住读者的视线避免大段文字叙述；以标题或概要的形式提供重点内容，并提供超链接；善于制造悬念，并把握悬念的时效性。2．导航栏的设计导航栏是网页非常重要的组成部分，是引导阅读、扩大信息量的有力手段。下图是网站的导航栏。导航栏的设计导航栏的设计应遵循以下原则：1）导航的数量适当2）导航提示要明确、清晰、醒目3）导航栏尽量采用横向设置，可在不使用滚动条的情况下一览无余。3．媒介规格设计（1）图像为减少数据量，图像应以能够清晰辨认的最小尺寸为尺度，分辨率采用72dpi，颜色采用256色，格式采用GIF/JPGE/BMP/PNG等（2）动画动画数量不可过多，尺寸不可过大，采用256色，文件格式采用GIF或SWF（3）声音简单的音效课采用MIDI声音，文件格式为MID；对于音乐、语音等要求有一定保真度的声音，可采用WAV格式或MP3格式的声音；声音长度尽可能短4．网页效果与网页效率（1）避免滥用媒体形式（2）文字的使用不要轻易使用艺术字体（3）图形的使用尽量减少使用数据量较大的动画或图片（4）背景的处理可使用GIF图片但要避免喧宾夺主5．强调整体6．网页与读者群7．及时更新网页3.2.7设计误区1．片面追求版面效果2．使用纵向的导航栏3．使用多种媒体形式4．规则化案例共享右图所示的是曙光大学的首页版式，该网页版面设计如下：（1）确定网页的版面风格（2）确定网页排版布局的技术（3）页面色彩搭配（4）首页的尺寸设计（5）导航栏的设计（6）首页内容设计（7）素材的使用（8）页面的整体性设计实践项目上网浏览网页，找出书中所述的网页版式的类型，即书中所提及的典型的网页布局结构，每种布局结构请分别找出三个以上的网站，将其主页即对应网址抓屏备注于对应的网页布局类型之下。注意：课堂上已经介绍的网站不能使用。

实践项目(2)“爱家美食”网站首页版面的效果如右图所示。请使用网页版面设计技术设计“爱家美食”网站首页版面。(3)在访问网站过程中，借助于课本的帮助，请思考“主页”“导航页”“链接页”这三个概念的区别联系课后思考题1．对于现在普遍使用的24in显示器，网页的版面尺寸设置为多少像素合适？为什么？2．上网浏览网页，指出这些网页版面属于哪种类型。3．色彩搭配有哪些原则？请