网页布局的基本类型

　网页布局的基本类型

　　网页的布局不可能像平面设计那么简单，除了上文提到过的可操作性外，技术问题也是制约网页布局的一个重要因素。虽然网页制作已经摆脱了HTML时代，但是还没有完全做到挥洒自如，这就决定了网页的布局是有一定规则的，这种规则使得网页布局只能在左右对称结构布局、“同”字型结构布局、“回”字型结构布局、“匡”字型结构布局、“厂”字型布局、自由式结构布局、“另类”结构布局等几种布局的基本结构中选择。

1　左右对称结构布局

     左右对称结构是网页布局中最为简单的一种。“左右对称”所指的只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部用作主体内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适，如图1所示

图1 左右对称结构布局的网站

2　“同”字型结构布局

　　“同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，一些如广告条、友情链接、搜索引擎、注册按钮、登陆面板、栏目条等内容置于页面两侧，中间为主体内容，这种结构比左右对称结构要复杂一点，不但有条理，而且直观，有视觉上的平衡感，但是这种结构也比较僵化。在使用这种结构时，高超的用色技巧会规避“同”字结构的缺陷，如图2所示

图2 “同”字型结构布局的网站

3　“回”字型结构布局

　　“回”字型结构实际上是对“同”字型结构的一种变形，即在“同”字型结构的下面增加了一个横向通栏，这种变形将“同”字型结构不是很重视的页脚利用起来，这样增大了主体内容，合理地使用了页面有限的面积，但是这样往往使页面充斥着各种内容，拥挤不堪，如图3所示

图3 “回”字型结构布局的网站

4　“匡”字型结构布局

　　和“回”字型结构一样，“匡”字型结构其实也是“同”字型结构的一种变形，也可以认为是将“回”字型结构的右侧栏目条去掉得出的新结构，这种结构是“同”字型结构和“回”字型结构的一种折中，这种结构承载的信息量与“同”字型相同，而且改善了“回”字型的封闭型结构，如图4所示

图4“匡”字型结构布局的网站

5. “厂”字型布局
“厂”字型结构布局，就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示正文信息，整体效果类似“厂”字，所以称之为“厂”字型布局。这是网页设计中用的最广泛的一种布局方式，一般应用于企业网站中的二级页面。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。

6　自由式结构布局

　　以上4种结构是传统意义上的结构布局。自由式结构布局相对而言就没有那么“安分守己”了，这种结构的随意性特别大，颠覆了从前以图文为主的表现形式，将图像、Flash动画或者视频作为主体内容，其他的文字说明及栏目条均被分布到不显眼的位子，起装饰作用，这种结构在时尚类网站中使用的非常多，尤其是在时装、化妆用品的网站中。这种结构富于美感，可以吸引大量的浏览者欣赏，但是却因为文字过少，而难以让浏览者长时间驻足，另外起指引作用的导航条不明显，而不便于操作，如图5所示

图6 自由式结构布局的网站

7　“另类”结构布局

　　如果说自由式结构是现代主义的结构布局，那么“另类”结构布局就可以被称为后现代的代表了。在“另类”结构布局中，传统意义上的所有网页元素全部被颠覆，被打散后融入到一个模拟的场景中。在这个场景中，网页元素化身为某一种实物，采用这种结构布局的网站多用于设计类网站，以显示站长的前卫的设计理念，这种结构要求设计者要有非常丰富的想象力和非常强的图像处理技巧，因为这种结构稍有不慎就会因为页面内容太多而拖慢速度，如图6所示

图7“另类”结构布局的网站

此文章摘自 《精通Web标准建站:标记语言、网站分析、设计理念、SEO与BI(附光盘) 》

转载于:https://my.oschina.net/u/1162572/blog/156249