网页布局设计方法

一、大框套小框的网站布局

这种布局方式即是我在上面提到的常见的网站布局网页布局有哪几种类型，不是说这种网站布局方式一无是处，但我们总不能只会这一种布局方式，次次套用吧?按照这种布局当然也可以做出来漂亮的设计，但毕竟方框限制的视线的扩展，如果客户要求做出大气的感觉，一般不会按照这种方式来布局，通常来讲，大气意味着开阔视野。

二、通栏布局

这种布局方式让视线不再受到方框的限制，比起上面的布局方式，自然多了些大气、开阔的味道来。另外，主视觉部分还可以灵活处理，既可以向上拓展到logo和导航的顶部位置，也可以向下拓展到内容区域，这种布局方式也是非常常见的布局方式。

三、导航在主视觉下方的布局

这种虽然不多，但也时不时能看到，导航放在banner下面的好处是可以弥补banner中设计素材截断的缺点，让设计看上去完整、自然。所以说布局的方式受到多方面因素的影响，不仅考虑到信息内容所占据的空间，还包括你手头现有的素材。

四、左中右布局

这种布局方式不常见到，但却是非常富有新鲜感的布局方式，如果你已经做腻歪了水平分割的设计，尝试一下这种布局也未尝不是一种好的选择。

五、环绕式布局

这种布局方式看上去更加灵活，banner区域相对较小，就可以在页面放置更多的信息内容。

六、穿插式布局

这种布局在企业站中较难看到，用的不多，banner区域相对较大，可以作为一种布局的选择。

上面的六种布局方式只是一些常见的企业类网站页面布局，布局的方式还有更多。实际上，布局就像是摆积木，只要遵循重要信息靠左、靠上，次要信息靠右、靠下的原则即可，并没有规定一定要怎么布局，或者这种布局方式要比那种更好，只能说某种布局方式更为合适某个页面而已。所以，大家多做尝试，从你手头正在做的项目开始，尝试一下不同的布局方式，给你的设计增加一些创意和新鲜感。

网站设计的几种布局方式

在设计网站前，我们首先要知道网站是怎么构成的。做网站肯定是离不开网页设计的，而网页的布局是整个网站设计的重中之重，网站选择什么样的布局直接影响到访客在浏览器上看到的整体页面。页面设计的好与不好又直接影响到访客在网站的停留时间长短。

一般设计师在进行网页设计布局前期，都会对客户的需求进行整合和分布，来达到良好的视觉效果。网站大致可以分为三大类：功能型网站、形象型网站、信息型网站等。客户需求不同采用不同的网页设计方案。

1、区块型：为了网站优化的效果，目前区块型布局现在出现非常频繁，在网页上各个区域具有封闭的边界，经过合理放置显得清晰美观。但这种布局有一个缺点，就是由于片面固定，各区域很难根据其中的内容的多少而调整大小，因此该布局不太适用与那些区域内容长度经常变化的网页。

2、国字型：国字形也可以称之为是同字型，通常顶部是网站的标题，广告横幅，然后是网站的主体内容，而左右分别是一些较小的内容条，中间就是主要内容，最底部经常会展示网站的一些基本信息、联系方式、版权声明等，这种布局方式是目前网上最常见，出现频率最高的。

3、门户型：这种网页布局最大的特点就是内容多，信息量大，图片较少，一般都是通过文字排版产生视觉上的分区效果。如果以用户角度分析的话，很容易让用户产生视觉疲劳，很可能会对用户体验造成影响。

4、左右框架型：该框架结构是将左右分为两页，一般布局都是左边是导航链接，最上面是一个小的标题或标致，而右面就是主要内容。通常论坛类的网站经常会采用此种布局，该布局的特点是结构清晰明了。

5、拐角型：其实，这种类型的网站布局与国字型有很多的相似之处，只是形式上不同而已。最顶部也是网站的标题以及网站的横幅广告条，最常见的类型就是最上面是标题及广告，左侧是导航链接。

6、封面型：这种类型最常出现的就是一些网站的首页，多事精美的平面结合小动画，另外在加上几个简单的链接或仅是一个“进入”链接，没有任何的提示。

7、T 结构型：所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。

8、标题正文型：这种形式的网站布局也非常的常见，一般上面是网站的标题，或是类似的东西，接着就是网站的正文内容，例如一些文章或注册登录页面。

9、上下框架型：这种局部类型与左右框架布局非常的类似，唯一的不同时这种类型是上下两页的框架。

10、综合框架型：作为的综合框架型其实就是左右框架和上下框架的结合体。

目前在网站建设行业中存在的网站布局的方式有很多的，对于企业而言，想要建设一个高端优质的网站，那么就要结合自己企业的特点，找到适合自己企业的布局模式，才能发展它最大的价值。

网站常用的布局方案

一、“T”结构布局。

所谓“T”结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”,所以我们称之为"T"形布局。

这是网页设计中用的最广泛的一种布局方式。这种网页设计布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“食之无味”。

二、“口”型布局。

这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。

三、“三”型布局。

这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。

四、对称对比布局。

顾名思义，采取左右或者上下对称的布局网页布局有哪几种类型，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。

五、POP布局。

POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。优点是漂亮吸引人，缺点是速度慢。作为版面布局还是值得借鉴的，常用于时尚类站点。