成都创新互联网站制作重庆分公司

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

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

成都创新互联主营南澳网站建设的网络公司,主营网站建设方案,成都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://cxhlcq.com/article/siscsd.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部