网页首页排版设计展示，探讨不同网页布局框架

一、概述：布局指的是将图片与文字以最适宜的浏览方式分布在网页的各个区域。不同的设计者会有各自的布局构思。

二、网页布局包含以下几种常见模式：

【1】“国”字型布局：

“国”字型布局源自“同”字型布局，因其布局结构与汉字“国”形似而得名。网页顶部通常放置网站标志、导航栏或横幅广告，中部主要展示网站内容，底部一般放置版权信息、联系方式等。

【2】T型布局

T型布局因其结构与英文字母T相似而得名。网页顶部一般放置横幅广告或网站标志，左侧为导航栏，右侧为网页正文等主要内容。

【3】标题正文型

标题正文型布局常用于文章页面、新闻页面和注册页面等。

【4】左右框架型布局

左右框架型布局是大型论坛和企业常用的布局结构。其布局分为左右两侧，左侧为导航栏，右侧为网站主要内容。

【5】上下框架型

上下框架型布局与左右框架型布局类似，区别在于将页面分为上下两部分框架。

【6】综合框架型

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

【7】POP布局

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

【7】FLASH布局

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

网页制作的结构布局包括：

布局指的是将图片与文字以最适宜的浏览方式分布在网页的各个区域。不同的设计者会有各自的布局构思。网页布局包含以下几种常见模式：

1.“同”字型结构布局

同字型布局指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。

2.“国”字型布局

国字型布局是在同字型布局基础上演化而来的，在保留同字型的同时，在页面的下方增加一横条状的菜单或广告，是一些大型网站所喜欢的类型。

3.T型布局

T型布局是指页面的顶部是“网站标志+广告条”，左面是主菜单，右面是主要内容。

4.“三”字型布局

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

5.对比布局

这种布局采用左右或者上下对比的方式：一半深色，一半浅色。一般用于设计型站点。

6.POP布局

POP布局指页面布局像一张宣传海报，一张精美的图片作为页面的设计中心。

7.Flash布局

这种布局是指整个或大部分幅面的网页本身就是一个Flash动画。

不同性质的网站，其页面内容安排是不同的。一般网页的基本内容包括标题、网站标识图案（LOGO）、页眉、页脚、主体内容、广告栏等。以下简单说明：

A、页面标题在站点的每个页面中都有一个标题，用来提示页面的主要内容，这一信息将出现在浏览器的标题栏中，而不是在页面的布局中。

B、网站标识（LOGO）网站作为一个对外交流的重要窗口，创建者都会用来进行自身形象的宣传。

C、页眉页眉指的是页面上端的部分，有的页面划分比较明显，有的页面没有明确的区分或者没有页眉。

D、页脚页脚是页面底端部分，通常用来显示站点所属公司（社团）的名称、地址、版权信息、电子信箱的超连接等。

E、导航导航是网页设计中的重要部分，也是整个WEB站点设计中的一个独立部分。

F、主体内容主体内容是页面设计的主体元素。它一般是二级连接内容的标题，或者是内容提要，或者是内容的部分摘录。

这种布局指的是整个或大部分网页页面本身就是一个Flash动画，它本身是动态的，画面一般不称华丽、有趣，是一种较为前卫的布局方式。实际上，这与封面式结构相似，只是这种类型才开始使用目前非常流行的Flash，与封面式不同的是，由于Flash强大的功能，页面所传达的信息更加丰富，其视觉效果及听觉效果如果处理得当，绝不逊色于传统的多媒体。不同类型的网站，其页面内容安排各不相同。一般网页的基本内容包括标题、网站标识图案（LOGO）、页眉、页脚、主体内容、广告栏等。下面简要说明：

A、页面标题：在站点的每一个页面中都有一个标题，用来提示页面的主要内容，这一信息将出现在浏览器的标题栏中，而不是在页面的布局中。它的重要作用就是引导访问者清楚地浏览网站的各项内容，不至于迷失方向。标题的加入在HTML语言中相对简单，标题名称。

B、网站标识（LOGO）：网站作为一个对外交流的重要窗口，创建者都会用来进行自身形象的宣传。如果该企业（社团）已经导入了CIS（Corporate Identity System）形象识别系统，那么在网站建设过程中应依据该系统为指导进行网页设计，其中标志性图案就是网站的LOGO。一个成功的网站和创建者实体一样，有着独特的形象识别，在网站推广过程中将起到事半功倍的效果。如果还没有导入CIS，在网站建设之前应该根据网站的总体定位，设计制作一个网站的LOGO，这如同一个产品的商标，集中体现了该网站的特色、内容及其内在的文化内涵和理念。LOGO一般设置在主页面的显要位置，二级页面的页眉位置。

C、页眉：页眉指的是页面上端的部分，有的页面划分比较明显，有的页面没有明确的区分或者没有页眉。页眉的注意力值较高，大多数网站制作者在此设置网站宗旨、宣传口号、广告语等，有的则把它设计成广告位出租。

D、页脚：页脚是页面底端部分，通常用来显示站点所属公司（社团）的名称、地址、版权信息、电子信箱的超连接等。

E、导航：导航是网页设计中的重要部分，也是整个WEB站点设计中的一个独立部分。一般来说，一个网站年的导航位置在每个页面中出现的位置是固定的。导行的位置对于站点的结构与整体布局有着举足轻重的作用。导航的位置一般有四种标准的显示位置：左侧、右侧、顶部和底部。有的站点运用了多种导航，是为了增加页面的可访问性。

F、主体内容：主体内容是页面设计的主体元素。它一般是二级连接内容的标题，或者是内容提要，或者是内容的部分摘录。表现手法一般是文字和图像相结合。它的布局通常按内容的分类进行分栏安排。页面的注意力值一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的上方位置，次要的内容安排在右下方。

原发布者：menwai2018

电子商务网站的主页内容布局授课：花小琴常见的网页布局结构国字型布局——国字型布局由同字型布局进化而来，因布局结构与汉字国相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。常见的网页布局结构T型布局——T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。常见的网页布局结构标题正文型——标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。常见的网页布局结构左右框架型布局——左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容常见的网页布局结构上下框架型——上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。常见的网页布局结构综合框架型——综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术常见的网页布局结构POP布局——POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。常见的网页布局结构FLASH布局——FLASH布局是指网页页面以一个或多个Flash作为页面主体的学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？

对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图，你需要根据这张图做出一个符合标准的页面，这里所说的标准，即w3c标准，参考w3school在线教程。那么做出一个完整的符合标准的网页第一步就是要划分网页的结构。一般来讲，网页结构的划分需要遵循几个原则：

一、自上而下原则

因为浏览器在渲染一个网页的顺序是自上而下的。这里提到了渲染这一个词，所谓的渲染就是浏览器将代码转换为页面显示内容的过程。浏览器会自上而下读取你写的代码并自上而下的显示。

二、从左至右原则

在自上而下的同时，同一行的内容是从左至右渲染，所以在划分结构的时候有从左至右的顺序。

三、一像素原则

这个原则对于初学者来说必须坚持，但也并不是说无论什么时候都得死认这个道理。前期我们在划分网页的时候一定要划分准确，尤其是横向。试想，如果外面的盒子宽度是1200像素，里面两个盒子一个600像素另一个601像素，加起来超过了父级的宽度那么必然第二个盒子会换到下一行进行显示。

这个规则对新手而言必须恪守，然而并不意味着无论何时都必须死守这个观点。初期我们在分割网页时必须保证精确，特别是横向的分割。试想，假如外围的盒子宽度为1200像素，内部两个盒子分别600像素和601像素，其总和超过父级的宽度，那么必然第二个盒子将换行显示。

在阐述完上述三个规则之后，有些人就会盲目地追求遵循这些规则，例如在结构划分时一定要分为上下两部分，但是例如下面的网页截图，图片和文字实际上是属于一个整体，文字是对图片的解释，因此不应该分为上下，而应该水平方向划分，将每张图文作为一个独立的内容单元，水平分为四个部分：

我们提到一般网页包含header（头部区域）、banner（广告横幅区域）、main（主体内容区域）、footer（底部区域），但并非所有网页都是如此，有些网页没有banner，而新手容易将header下方区域硬划分为banner，有些网页除了这些部分，还可能包含icon等区域，新手可能会将它们划分到main区域中。

谈及main区域，其结构划分方式多种多样。有些网页有一个从左到右贯穿全屏的背景色甚至背景图片，那么我们结构的划分也应该有一个外围贯穿全屏的盒子，为其设置背景色或背景图，然后在里面嵌套一个inner盒子，为可视区域设定固定宽度并居中。如果没有贯穿全屏的背景，那么此时不需要设置贯穿全屏的盒子，直接为main区域设置固定宽度并居中即可。

那么在结构划分时，如何划分盒子区域之间的间距也是新手最容易感到困难的问题。实际上，在结构划分时，这些空白区域并不会造成影响，因为空白区域都可以通过代码实现。不过，一些文字区域不能紧贴文字的上下进行划分，因为文字都自带行高。

另外，有些地方可能有一部分小图片或内容覆盖在较大盒子上，这部分在结构划分时可以忽略，因为在后期代码实现时，我们可以利用定位技术来处理。