2.1 网页布局
网页布局是指在有限的显示器屏幕空间上将网页元素进行排列组合，使网页在传递信息的同时也能给浏览者的视觉感官上带来美的享受。要想使网页页面产生最近的视觉效果，设计师需要仔细推敲版面布局的合理性，给浏览者一个流畅的视觉体验。
2.1.1 网页的形式语言
点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本形式语言。网页页面中的点可以是一个按钮或一个图标，线可以是一行文字或一行按钮，面可以是一张图片或一段文字，网页的视觉形象就是通过这些点、线、面的构成营造起来的。点、线、面相互作用组合成千变万化的视觉形象。在网页设计中处理好三者之间的关系，合理地运用形式语言，可以创造出独特的网页视觉形象，从而进一步吸引浏览者。
点
在网页中可以把一个单独的形象称为点，比如一个标志或一个按钮。单个的点在画面中形成视觉中心，产生吸引力。点的位置、聚集、发散和方向都会给人带来不同的心理感受，页面通过点以不同的色彩出现，起到活跃画面的作用。图2-1～图2-3所示的网页是以点为主要形式语言的。
图2-1 以点为主要形式语言的网页1
图2-2 以点为主要形式语言的网页2
图2-3 以点为主要形式语言的网页3
线
线在页面中起到分割画面和引导视线的作用。在网页设计中，利用线对页面空间进行分割的方法也十分常见。经过线的分割可以产生各种特征的面，如图2-4所示。
图2-4 通过线分割画面
不同形态的线会给人以不同的感受，垂直的线给人以挺拔的感觉，水平的线显得平稳，曲线给人以动感和活力。在如图2-5所示的网站中，运用线条勾勒出不同的形态，贯穿整个网站始终，给网站增添了活力和感情。
图2-5 线贯穿多个网页引导视线
面
面是网页中最常见的构成元素，表格、图片等都是面。面的大小、形态和变化关系到页面的整体布局。通过面的分割、组合和虚实交替的方式，可以使网页产生井然有序的效果，如图2-6和图2-7所示。
图2-6 以面为页面中的主要形式1
图2-7 以面为页面中的主要形式2
2.1.2 网页布局类型
根据不同的组织形式，可以将网页的版式分成很多种，最常见的是网格型、封面型、分割型和焦点型4种，其他的版面布局方式多是在这4种方式的基础上经过变异和加工而成。
网格型
网格型是网页设计中最常用的一种布局方式，主要以横向两栏、三栏或纵向两栏、三栏居多。网格版式是一种规范、严谨的版面布局方式，给人以条理清晰的感觉。综合类门户网站基本都采用网格型的版式布局方式，如图2-8和图2-9所示。
图2-8 网格型布局方式1
图2-9 网格型布局方式2
封面型
封面型布局通常用在网站的首页，以图像充满整个版面，再加上链接的按钮或文字。封面型的网页视觉效果直观突出，给人以生动、大方的感觉，如图2-10和图2-11所示。
图2-10 封面型布局方式1
图2-11 封面型布局方式2
分割型
分割型布局是指把页面分成上下或左右两部分，分别安排图片和文字内容。图片和文字部分的比例相当，形成对比效果。在整个页面中图片部分感性而有表现力，文字部分则理性有说服力，如图2-12和图2-13所示。
图2-12 分割型布局方式1
图2-13 分割型布局方式2
焦点型
焦点型布局是指将图片或文字置于页面的视觉中心，然后安排其他视觉元素引导浏览者的视线向页面中心聚集或向外辐射，形成收缩或膨胀的视觉感受。通过对视觉流程的设计在页面中形成焦点，给浏览者带来强烈的视觉效果，如图2-14和图2-15所示。
图2-14 焦点型布局方式1
图2-15 焦点型布局方式2
2.1.3 网页布局方法
在开始动手制作网页之前，要先构思页面的布局方式，这是第一步工作。在实际网页设计工作中，页面布局的划分有固定的基本流程，具体步骤如下。
建立秩序
版面布局的第一步就是根据网页的风格、主题和页面内容多少来确定页面要采取的版式类型。如果是主题比较庄重的网页，可采用网格型布局方式；如果是风格比较轻松的网页，则可采用封面型或焦点型布局方式；如果是页面内容较多的网页，也可采用网格型布局方式，帮助建立页面秩序；如果是页面内容较少的网页可采用封面型或焦点型布局方式，着重宣传主体对象。
确定页面采用的布局类型后，将页面涵盖的内容依整体布局的需要进行分组归纳，将有一定内在联系的页面进行组织排列，推敲标题文字和图形在页面中的主次地位，从而确定其在页面中的位置。另外，还要考虑页面排版要符合浏览者的阅读习惯、思维发展等逻辑顺序，例如，网站制作者或者公司信息通常放置在页脚，这是为了符合浏览者已经形成的浏览习惯。通过设计者的精心构思，将页面中的构成元素组合成为丰富多彩、简洁明确的统一整体。
突出中心
网页中的构成元素根据其传递信息的内容不同有着主次之分，所以在构思页面布局时，注意将重要的图片和文字安排在页面的视觉中心部分，稍次要的内容安排在视觉中心以外的位置。网页页面的视觉中心通常在屏幕中央或中央偏上的部位，将主要内容放在这些位置可以强调重点。另外，页面上方或左侧的醒目位置通常用来放置像导航栏这样有着重要功能的页面构成元素，这样可以方便浏览者顺利浏览该网站。
整体协调
形式多变的布局可以给网页带来丰富的表现力，但在组织页面内容时要努力做到布局的有序化和整体化，也就是整个页面的协调统一。如果只考虑将各种网页构成元素强加进页面，或是各个页面构成元素的位置安排不合理，这都将会使页面陷入杂乱、失去均衡的整体美感。所以，在设计中注意对比与调和、对称与平衡、节奏与韵律，以及留白等手法的运用，可以让页面形成不同的造型效果，从而创造出风格新颖、效果独特的页面。