设计网站的第一步是了解网站地图，设计师根据网站的版面划分来编排不同版面的空间大小和位置关系。网站的布局实际上就是把文本、图片、多媒体等在页面里面进行合理的组织排列。由此，网页设计也衍生出许多种类的布局样式。

网站设计配图 (7)

Banner式布局

顾名思义，Banner式布局就是指页面最上方是导航条，顶部是一个Banner，下方是其他内容。这种布局方法的优点是页面的结构十分清晰，主次分明。无论屏幕的尺寸是什么，网页的内容都会清晰地呈现出来。

网站设计配图 (2)

Banner式布局是网页设计中最基本也是最普遍的一种设计手法，比如说站酷、好奇心日报等。虽然有的设计师会将Banner设计成固定宽或者横跨整个页面的大小，但总体的布局样式都是差不多的。

上下型布局

上下型布局指的是网页的上下都有一个广告条，左右两侧是超链接，中间放置主要内容，最下面是网站的基本信息、联系方式、版权声明等。

网站设计配图 (6)

很显然，这种布局方法的优点是可以充分利用版面，尽可能多地传达信息量。同时，设计师需要注意板块的内容和面积大小，不能让页面过分臃肿。

左右型布局

左右型布局是将网页分为左右两页的框架结构，左面是导航链接，顶端是小标题，右面是主要内容。

网站设计配图 (1)

目前大部分的导航网站、论坛都采取了这种结构，非常清晰，一目了然。比如说科技网站36氪，左面是咨询分类，中间是新闻和文章。

POP式布局

POP是广告中的术语，意思是售点广告。在网页设计中，POP式布局是指页面的布局设计像一张宣传海报，精致又吸睛。

通常情况下，时尚购物类网站会采取POP式布局，用一张精美的图片作为页面中心，在顶端或者下方放置导航条。POP式布局的缺点是由于图片过大，渲染速度较慢。

网站设计配图 (3)

有时，POP式布局还加上小动画，或者直接在图片上放上对应的链接。这种设计一般会出现在企业介绍的首页或者个人网页，给人一种简洁、优雅的视觉享受。