网页版面布局设计的作用、步骤及技巧

《网页版面布局设计的作用、步骤及技巧》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、网页版面布局设计的作用、步骤及技巧　　引言　　随着计算机X络的发展，X络在人们生活中发挥的作用越来越大。X页作为X络的主要依托，已深入到人们生活的各个方面，各种各样的X页不断撞击着人们的眼球。那么，吸引用户停留在某个页面上浏览，除了引人入胜的内容、赏心悦目的图片和协调的色彩搭配以外，还有一个非常重要的因素就是合理的版面布局设计。　　版面布局设计的作用　　版面就是在浏览器上显示的一个完整的页面，它是X站设计的重要内容。X站是诸多X页的集合，每个页面通常都包含了文字、表格、图像、动画、链接等要素。版面布局设计是X

2、页设计的第一步，是一个X页成败与否的基础所在。版面布局设计的主要任务是将页面合理分割成用于安排文字、图像等各种屏幕元素的区间。通过版面布局设计，寻找最佳的浏览方式，将这些要素有机地整合和分布在页面上，给用户最佳的视觉效果。　　X页版面布局步骤　　1.构思方案　　根据X站的策划方案，在真正了解客户需求、X站定位、受众群等多方面因素之后，开始构思草案。在纸上绘制布局草图，将需要放置的功能模块安排到页面上。要遵循突出重点、平衡谐调的原则，X站标志、主菜单等重要模块放在最显眼、最突出的位置，再考虑次要模块的摆放。经过

3、与客户多次沟通，反复调整修改，确定版面布局方案。　　2.电脑表现　　为了使版面布局更加形象和直观，设计者可以利用Photoshop软件设计版面布局效果图，实现纸张无法实现的布局意念，便于与客户沟通交流，方便修改布局方案。　　X页版面布局类型　　一般在X页设计中，版面布局是有规律可循的。X页版面布局的类型有很多，常见的有T字型布局、口字型布局、三字型布局、对称对比型布局、POP海报型布局等。任何一种布局类型都有自己的优缺点，设计者要根据X站的风格、类型和内容选择适合的布局类型，当然也可以对这些布局类型进行适当的

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

5、V+CSS布局　　DIV+CSS布局是基于Web标准的现在比较流行的X页布局技术，实现了内容和表现的分离，代码精简，浏览速度提高；使用CSS样式统一控制X页显示效果，页面布局灵活，易于维护和改版；将大部分的代码和内容样式写入CSS文件，使X页正文部分结构清晰，便于搜索引擎采集收录。　　由于采用DIV+CSS布局X页，编码的工作量很大，尤其在解决浏览器的兼容问题时，则需要付出更多的精力，这对于X页设计初学者而言有一定的难度。因此在制作X页时，不能肓目跟风，要根据实际情况采用合理的技术。　　X页版面布局技巧　　1

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

7、。在X页设计中巧用黄金分割比，可以使设计更加和谐。如果在页面局设计时，正在为如何设置栏宽、元素尺寸而绞尽脑汁，不妨体验一下黄金分割比的妙处。以一个简单的两栏式页面布局为例，左边显示导航，右边显示主要内容。假设页面宽度为经典宽度960px，利用黄金分割比计算，右边的栏宽为960/1.618=593px，左边的栏宽为960-593=367px。　　应用黄金分割比布局页面，需要设计者有一定的计算能力，但在实际应用中，为了节省时间，可以简化黄金分割比的应用，采用62%和38%比例，如两栏结构，两栏宽度分别为62%和3

8、8%。而对于三栏式布局的页面，也可以先按比例分成两栏，然后再将那份大的再按比例划分。　　3.适当处理留白　　版面设计中的留白是指版面中没有图形或文字的部分，很多新手在设计X页时总想着把整个页面撑满。其实，X页就像一个房间，如果里面挤满了人，就觉得呼吸困难，所以，要给页面留有呼吸的空间。适当的留白可以架构页面的平衡，巧妙地留有想空间，给观者一种美的享受。　　结束语　　页面布局正如摆兵阵，阵法千变万化，