第3章 网页版式的设计.pptVIP

第3章 网页版式的设计 本章学习目标 (1) 理解网页中的各类元素及其作用； (2) 掌握各类网页的版式设计方法； (3) 掌握网页模板的创建方法； (4) 理解网页版式设计的主要策略. 本章知识结构 3.1 网页基础知识 3.1.1 虚拟界面 由于网页是通过计算机的显示通道与人们交流的，并不是现实世界中的实际物体，因此又被称为“虚拟界面”。从网络的角度来看，虚拟界面是一个网站的窗口，网站中的数据库信息、链接功能以及各种网络服务都通过这个界面进行实施。一个网站的网页可以有多个，通常根据需要分层设置。 从平面设计的角度来看，每个虚拟界面就是一个版面，可以利用平面设计理念对其进行设计。但是，网页毕竟是计算机技术和多媒体技术的产物，具有某些一般版面所没有的特点和性质。为了对虚拟版面进行设计，就必须拓展设计的范围，丰富设计的手段，如对于版面各种媒介的设计与制作，要应用一些新的技术。 3.1.2 网页界面的特点 1．版面尺寸规范化 通常采用显示器的标准显示模式，下面是常用的显示器的标准显示模式 1）800像素×600像素。 2）1024像素×768像素。 3）1280像素×1024像素或更高。 3.1.2 网页界面的特点 2．媒介形式的多样化 3.1.2 网页界面的特点 3．有限的界面颜色数量 （一般采用256色模式） 4．界面的嵌套性 （嵌套和链接，整体风格统一和部分表现个性化协调） 5．具有控制功能 （能实现跳转和检索等功能，完成网络操作） 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度之间的色叫中明色。 饱和度 又称纯度：色彩的艳丽程度 在一个大红色里逐步添加白色或者是黑色，这个大红色就会变的不象以前那么艳丽了，这是因为它的纯度下降了。 根据色彩纯度的特