随着计算机网络的发展，网络在人们生活中发挥的作用越来越大。网页作为网络的主要依托，已深入到人们生活的各个方面，各种各样的网页不断撞击着人们的眼球。那么，吸引用户停留在某个页面上浏览，除了引人入胜的内容、赏心悦目的图片和协调的色彩搭配以外，还有一个非常重要的因素就是合理的版面布局设计。

成都创新互联主营南澳网站建设的网络公司,主营网站建设方案,成都app软件开发公司,南澳h5小程序开发搭建,南澳网站营销推广欢迎南澳等地区企业咨询

版面布局设计的作用

版面就是在浏览器上显示的一个完整的页面，它是网站设计的重要内容。网站是诸多网页的集合，每个页面通常都包含了文字、表格、图像、动画、链接等要素。版面布局设计是网页设计的第一步，是一个网页成败与否的基础所在。版面布局设计的主要任务是将页面合理分割成用于安排文字、图像等各种屏幕元素的区间。通过版面布局设计，寻找最佳的浏览方式，将这些要素有机地整合和分布在页面上，给用户最佳的视觉效果。

网页版面布局步骤

1.构思方案

根据网站的策划方案，在真正了解客户需求、网站定位、受众群等多方面因素之后，开始构思草案。在纸上绘制布局草图，将需要放置的功能模块安排到页面上。要遵循突出重点、平衡谐调的原则，网站标志、主菜单等重要模块放在最显眼、最突出的位置，再考虑次要模块的摆放。经过与客户多次沟通，反复调整修改，确定版面布局方案。

2.电脑表现

为了使版面布局更加形象和直观，设计者可以利用Photoshop软件设计版面布局效果图，实现纸张无法实现的布局意念，便于与客户沟通交流，方便修改布局方案。

网页版面布局类型

一般在网页设计中，版面布局是有规律可循的。网页版面布局的类型有很多，常见的有“T”字型布局、“口”字型布局、“三”字型布局、对称对比型布局、POP海报型布局等。任何一种布局类型都有自己的优缺点，设计者要根据网站的风格、类型和内容选择适合的布局类型，当然也可以对这些布局类型进行适当的变形。

网页版面布局技术

在设计网页时，常用页面布局的技术主要有两种：table布局和DIV+CSS布局。

1.table布局

table布局是过去流行的网页布局技术，能够轻松地将整个页面划分成需要的各个块，如若某个块中的内容需要再划分，可以通过嵌套表格来实现。整体思路明了，易于操作，简单易学，建站速度快。现在仍有一些网络公司制作的网站还在使用table布局。但是用表格设计的代码相对复杂，维护和升级困难。如果需要更改版面布局，相当于重新设计网页。而且，当页面嵌套层次较多时，会降低浏览速度。

2.DIV+CSS布局

DIV+CSS布局是基于Web标准的现在比较流行的网页布局技术，实现了内容和表现的分离，代码精简，浏览速度提高；使用CSS样式统一控制网页显示效果，页面布局灵活，易于维护和改版；将大部分的HTML代码和内容样式写入CSS文件，使网页正文部分结构清晰，便于搜索引擎采集收录。

由于采用DIV+CSS布局网页，编码的工作量很大，尤其在解决浏览器的兼容问题时，则需要付出更多的精力，这对于网页设计初学者而言有一定的难度。因此在制作网页时，不能肓目跟风，要根据实际情况采用合理的技术。

网页版面布局技巧

1.确定网页设计尺寸

由于页面尺寸和显示器大小及分辨率有关系。在浏览器窗口中完整的显示网页内容而不出现滚动条时，要注意显示器窗口包括：网页内容显示区、网页的标题栏；浏览器程序的工具栏、地址栏、状态栏、水平和垂直滚动条；任务栏。因此满框显示网页，在800*600分辩率下，网页设计尺寸为778*434px；在1024*768分辩率下，其尺寸为1002*620px。当网页内容较多时，可以跨屏显示，页面长度原则上不超过3屏，宽度不超过1屏。

2.巧用黄金分割比

黄金分割比是一个应用广范的数学常数，大约为1.618。在网页设计中巧用黄金分割比，可以使设计更加和谐。如果在页面局设计时，正在为如何设置栏宽、元素尺寸而绞尽脑汁，不妨体验一下黄金分割比的妙处。以一个简单的两栏式页面布局为例，左边显示导航，右边显示主要内容。假设页面宽度为经典宽度960px，利用黄金分割比计算，右边的栏宽为960/1.618=593px，左边的栏宽为960-593=367px。

应用黄金分割比布局页面，需要设计者有一定的计算能力，但在实际应用中，为了节省时间，可以简化黄金分割比的应用，采用62%和38%比例，如两栏结构，两栏宽度分别为62%和38%。而对于三栏式布局的页面，也可以先按比例分成两栏，然后再将那份大的再按比例划分。

3.适当处理留白

版面设计中的留白是指版面中没有图形或文字的部分，很多新手在设计网页时总想着把整个页面撑满。其实，网页就像一个房间，如果里面挤满了人，就觉得呼吸困难，所以，要给页面留有“呼吸”的空间。适当的留白可以架构页面的平衡，巧妙地留有想空间，给观者一种美的享受。

文章标题：网页版面布局设计的作用、步骤及技巧
当前链接：http://azwzsj.com/article/siscsd.html