1.网页设计的布局

“国”字型布局：

国型布局也称为同型布局，布局结构与“国”字相似而得名

是一些大型网站所喜欢的类型

页面最上部分一般放置网站的标志和导航栏或Banner广告，

接下来是网站的主要内寄，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，

最下部分一般放置网站的版权信息和联系方式等

其主要优点是页面容纳内容很多，信息量大。

T型布局：

T型结构也称拐角型，因与大写字母T相似得名

页面顶部一般放置横网站的标志或Banner广告，

下方左侧是导航栏菜单，

下方右侧用来放置网页正文等主要内容

这是网页设计中用得最广泛的一种布局方式。

这种布局的优点是页面结构清晰，主次分明，是初学者最容易上手的布局方法。

缺点是规矩呆板，如果不注意细节色彩，很容易让人”看之无味“

标题正文型：

这种布局的最上方是标题或广告等内容，下面是正文。

一般用于显示文章页面、新闻页面和一些注册页面等

其特点是简洁明快，干扰信息少，较为正规。

左右框架型布局：

该布局结构是一些大型论坛和企业经常使用的一种布局结构

该布局结构主要分为左右两侧的页面

左侧一般为导航栏链接，右侧则放置网站的主要内容

这种类型结构非常清晰，一目了然。

上下框架型：

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

综合框架型：

该布局是结合左右框架型布局和上下框架型布局的页面布局设计

一般分为上框架页面和左下框架页面和右下框架页面

POP布局：

POP布局又叫封面型，POP布局是一种极具艺术感和时尚感的网页布局方式。

常用于时尚类站点

页面设计通常以一张精美的海报画面为布局的主体

优点显而易见：漂亮吸引人。

缺点就是速度慢。作为版面布局，还是值得借鉴的。

FLASH布局：

FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。

在这种布局中，大部分甚至整个页面都是Flash。

与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

变化型：

即上面几种类型的结合与变化，

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

什么样的布局是最好的

这是初学者可能会问的问题。其实这要具体情况具体分析的：

比如如果内容非常多，就要考虑用“国字型”或拐角型；

而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；

那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；

而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；

Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。

还没有提到的就是变化型了，我只是想把这个留给读者了，因为，只有不断的变化才会提高，才会不断丰富我们的网页。

2.HTML常用的布局结构：

1.固定布局

固定布局，顾名思义就是使用固定的width与height来布局网站，如下图所示。

利：

固定宽度布局的设计更简便，更容易自定义。

任意浏览器下的显示宽度都一样，对于图像、表单、视频等宽度固定的内容，潜在的冲突更少。

不用设定min-width（最小宽度）和max-width（最大宽度），这两个属性并不被所有浏览器支持。

即使网页被设计成兼容最小屏幕分辨率800×600的大小，在大分辨率显示器下，内容仍然足够易读。

弊：

固定宽度的布局可能会给高分辨率屏幕用户带来巨大的页面空白，从而破坏“神圣比例”、“三分割法则”、整体平衡，乃至其他设计原则。

小屏幕上可能会出现水平滚动条，影响用户体验。

无缝材质拼图，纹样和其他连续图像需要针对大分辨率做出优化。

总体来说，固定宽度的可用性更低。

2.流动布局

也被成为流体布局，主体部分都是用了百分比宽度，因此可以自适应用户的分辨率。如下图所示

利：

流动网页布局拥有更强的亲和力，因为它能根据客户端的情况自适应。

在不同浏览器和屏幕分辨率下的额外空白量都差不多，更符合视觉吸引力要求。

如果设计得当，流动布局能避免在小屏幕上的水平滚动条。

弊：

设计师对客户端的显示效果更难以控制，由于他们使用特定大小的屏幕，也更不容易发现潜在问题。

图片、视频以及其他拥有固定宽度的内容不得不被设置上不同宽度，以配合不同的屏幕分辨率。

对于特别大的显示屏，内容不够多的话就会造成过量空白，破坏美感。

减少弊端的方法：

（1）采用简单设计，应用到流动网页布局的图案和复杂技巧越少，其建立和维护也就越容易。同时也能更方便地适应不同屏幕分辨率。有了更加精炼的代码和设计，就能更好得避免、发现和解决兼容问题。

（2）设置最小宽度(min-width)和最大宽度(max-width)，使页面有最小和最大的缩放程度

3.弹性布局

糅合了两种主要布局类型特点的布局即所谓“弹性布局(elastic layout)”。其要点就在于使用单位em来定义元素宽度。

下面的引言介绍了何谓em，而它又是如何发挥作用的：

电脑屏幕上的‘像素’是一个不可缩放的点，而em则是相对于字体大小的单位宽度。它随着字体大小的变化而变化，反应用户对字体大小的设定。

利：

如果合理运用，这种布局设计能带来非常友好的用户界面。目标效果是所有东西都能根据用户的偏好增大或缩小尺寸。

弹性布局更适合面对流动和固定布局难以抉择的设计师，因为二者的优点弹性布局都有。

弊：

尽管第一条“利”说得没错，弹性布局还是为可用性埋下了很多地雷。得需要十分的聪明才智和不断测试才能让布局适合所有用户。

这种布局比前述两种要难实现得多，可能那一小点的可用性并不值得你花这么多功夫。

由于这种布局的特殊性，有些弹性布局设计可能需要额外的样式表，并针对IE6做些特别的调整

哪一种布局更适合你？

选择何种布局应该由网站的性质决定。权衡上述利弊，根据你的网站需求找到合适的解决方案

以作品集网站为例，这种网站可能固定宽度布局最为适用。这样你就能做出更有设计感的东西。你不仅能更好地控制设计中的单个元素，作品的图像展示也变得更易处理。对很多设计师来说（包括那些非作品集站点的设计师），固定布局就是一个既容易相处，又能给人安全感的好朋友。

而那些要追求100%的兼容性的设计师最好就考虑一下花点时间在流动布局上。最大的挑战不在于宽屏上的可能出现的过多留白，而是那一小撮小屏幕上的显示效果。对于有大量用户的网站来说，百分比很小的用户群，绝对数目也相当可观。就算不考虑这点，大网站也应该有简洁干练的设计感，而这可以利用流动布局高效率地实现。

还是做不了决定？别担心，还有弹性或部分弹性的布局设计可供选择。如果运用得当，弹性布局能完全整合两大主要布局的优点。聪明的设计师懂得如何利用弹性设计的原则，在字体和容器大小上使用em单位，然后混合运用百分比和像素宽度来设定其他布局元素。

如果觉得《复习：前台页面设计——网页设计的布局 HTML常用的布局结构》对你有帮助，请点赞、收藏，并留下你的观点哦！