‌网站的版面布局

版面布局也称力布局设计，是指网站设计者对所有要体现的内容进行有机地整合和分布，达到某种视觉效果。做好网站的版面设计要重视所做的每一步并把它尽量做到最好。

(1)版面布局的原理

版面指的娃浏览器看到的一个完整的页面(包含框架和层)。网页的整体宽度可分为3种设置形式：百分比、像素和像素+百分比。通常在H站建设中以像素形式最为常用，行业网站也不例外。在设计网页时会考虑到分辨率的问题。现在通常用的分辨率是1024X768和800X600，网络上很多都用到778个像素的宽度。在800的分辨率下整个网页很压抑，有种不透气的感觉。其实这个宽度是指在800X600的分辨率上网页的最宽宽度，不代表最佳视觉，不妨试试760〜770的像素。不管在1024还是800的分辨率下都可以达到较佳的视觉效果。

(2)常用的版面布局形式

1)“T”形结构布局。它是指页面顶部为横条网站标志+广告条，下方左面为主菜单,右面显示内容的布局。因为菜单条背景较深，整体效果类似英文字母“T”，所以称为“T”形布局。这是网页设计中使用最广泛的一种布局方式。优点是页面结构清晰，主次分明，容易掌握。缺点是规矩呆板，如果细节色彩上不注意，容易显得乏味。

2)“口”形布局。这是一个形象的说法，就是页面上下各有一个广告条，左面是主菜单，左面是友情链接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大；缺点是页面拥挤，不够灵活。

3)“三”形布局。这种布局多用于国外站点，国内用得不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。

4)对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色,一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机结合比较困难。

5)POP布局。POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。优点是显而易见的，漂亮吸引人。缺点就是速度慢。

(3)版面布局的步骤

版面布局也是一个创意的问题，但要比站点整体的创意容易、有规律。下面介绍版面布局的步骤。

1)结构的搭建。新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，可以尽可能地发挥想象力，将想到的“景象”画上去(建议用一张白纸和一支铅笔，当然用作图软件Photoshop等也可以)。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽可能多画几张，最后选定一张满意的作为继续创作的脚本。

2)粗略布局。在草案的基础上，将确定需要放置的功能模块安排到页面上(主要包括网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、计数器、版权信息等)。注意，这里必须遵循突出重点、平衡协调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后考虑次要模块的排放。

3)定案。当己经有一个很好的框架时，需要根据客户的要求将其所需的内容有条理地融入整个的框架中，这就进入了网页布局的阶段。

4)深入优化。这个阶段主要是针对一些细节的更改和优化，如颜色饱和度、字体、间距的调整。最后根据客户的反馈对现有的界面进行适当调整，直到客户满意为止。