网页布局结构有哪些？

一、简介：布局就是以最合适浏览的方式将和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。

二、网页布局有以下几种常见结构：

1“国字”型布局：

“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和****等。 

2T型布局

T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。

3标题正文型

标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。

4左右框架型布局

左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容

5上下框架型

上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。

6综合框架型

综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术。

7POP布局

POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。 

7FLASH布局

FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。

如图所示吧：

下面这种就是封面型的网页页面设计：

下面这种则是国字型网页页面设计：

最简单的分别方法，封面型看起来就如同一本杂志，而国字型网页则类似于国这个字一般，四四方方，一个模块一个模块的，就是这样子。

极简风：

越少，越经典“这是不少设计大师遵循的设计风格。

“好的设计是尽可能少的设计”这条原则也同样适用于网页设计中。

除非必要的信息，页面中每增加一个元素，都会引起用户过多的小，甚至成为用户完成目标任务的阻碍。

极简设计的好处就在于它能最大化节约用户的时间成本。

无边框风：

这里的边框是指任何类型的装饰性容器。

通过去掉装饰性的容器，加强基本内容的设计感。

提升质量和排版布局，从而改变整体因无装饰性容器的视觉表现。

插画风：除了使用大量作为背景或主体元素外，

图形插画的运用也是一种很好的方式。

网页Banner可以运用插画来表达网站主题，同时加上插画图标的点缀，使网页看起来清新有趣，加强网站本身的独特性。

扁平风:

扁平化设计可以说是时下最常用的网页设计风格了，它弱化了材质、渐变、阴影，去除了冗余信息的图形元素、排版。这种风格设计可以使画面显得更加平滑，提升了网站内容信息的视觉层级，更加方便用户快速寻找自己需要的内容。同时扁平化的界面能更好实现不同尺寸的转化。这也是现在互联网公司较长采用的一种风格。

3D风格:

这里所说的3D风格不是纯粹的使人感到身在其中的3D坏境，而是那些运用少量3D效果使整个网页显得更加灵动，通过扁平化的基础上，添加一些生动的非扁平元素，给网站带来了原本缺乏的纵深感，同时提升主体视觉吸引力。

纵向分割:

这里所说的3D风格不是纯粹的使人感到身在其中的3D坏境，而是那些运用少量3D效果使整个网页显得更加灵动，通过扁平化的基础上，添加一些生动的非扁平元素，给网站带来了原本缺乏的纵深感，同时提升主体视觉吸引力。

1、拐角型

这种类型其实与国字型很相近的，只是在形式上不一样，最上面的部分是网站的标题以及网站的横幅广告条，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

2、“三”字型布局

这种布局多用于国外网站，国内用得不多。特点是在页面上有横向两条色块，将页面整体分割开，色块中大多放广告条、更新和版权提示。

3、标题正文类型

上面是网站的标题，或者是类似的东西，接着就是网站的正文内容，例如是一些文章或者是注册登录页面。

4、对称对比型

对称对比型采取左右或上下对称的布局，一半深色，一半浅色，一般用于设计型网站。而其优点是视觉冲击力强，缺点是将两部分进行有机结合较难。

5、变化型

即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

6、左右框架类型

这是一种左右为分别两页的框架结构，一般布局是：片段含导航链接，最上面有时是一个小的标题或标志，而右面就是主要内容，最常使用是论坛网站，企业网站中的内页有很多是采用这种布局方式的而这种类型的布局的特点是结构清晰明了。

7、POP型式

POP形式是指页面布局像一张宣传海报，以一张精美作为页面设计中心。一般常用于时尚类网站，优点是漂亮吸引人，缺点则是速度慢。

网页设计的布局有哪几种？

1“国”字型：

网页设计也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、****、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

2拐角型：

这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3标题正文型：

这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

4左右框架型：

这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

5上下框架型：

与上面类似，区别仅仅在于是一种上下分为两页的框架。

6综合框架型：

上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

7封面型：

这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

8Flash型：网页设计

其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

9变化型：网页设计

即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

1、网站的准确设计风格

设计风格要联系到品牌风格，一个强大的品牌能使企业在同行中脱颖，网站建设的时候，考虑到品牌风格，能够有效的传达品牌和信息，为用户建立对品牌的信任感，帮助推广品牌。网站的整体风格，从配色、logo、图标、导航、背景等等，设计师创建的每一个元素都需要和品牌紧密挂钩，形成浑然一体的品牌风格，让用户在进入网站之后就能感知企业文化。

2、网站排版设计

网站排版要设计三大要素：网页尺寸、常用结构、排版趋势！

网页尺寸：在设计网站中要考虑不同屏幕尺寸下的展示方式，最基本的要求是要考虑好最大及最小的场景：1920×1080和1024×768，通过合理的布局，能够满足用户的浏览的舒适度。

常用结构：网站都有一套通用版的排版布局模式，即页头、页脚、侧边栏和内容区域，企业网站一般常用的布局包括国字型、拐角型、左右框架型、上下框架型等。

排版趋势：有些企业越来越重视视觉效果和公司形象的展现，网站布局不再拘泥于固定的传统模式，不少有创意的网站布局让排版方式进入了一个新的时代。

3、网站设计的配色方案

颜色在网站建设中占据着相当重要的位置，好的配色是创造成功网站的先决条件，是表达感情和传递信息的有力工具，设计网站时，配色包括四块内容：主体色，是占据网页面积最大的一块颜色；辅助色，一般是主体色在色轮90度以内的近似色，起到变化的作用；点睛色，一般取主色和辅色色轮的对比色或者补色，起到点睛作用；背景色，是网页上什么也没有的情况下显示的颜色。

吸引眼球的网站要内外兼修，网站外表不能差，要给人清晰、简洁、大方的舒适度，这些都满足后，不能在互联网中当个没用的花瓶，这个时候就需要给网站填充内在价值，需要根据企业所在的行业及其企业优势来扩充网站内容，受欢迎的网站大致如此。