SEARCH
新闻资讯

网站知识库

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

2020/5/2 14:05:24

随着计算机网络的发展,网络在人们生活中发挥的作用越来越大。网页作为网络的重要依托,已深入到人们生活的各个方面,各种各样的网页赓续撞击着人们的眼球。那么,吸引用户停顿在某个页面上欣赏,除了引人入胜的内容、心旷神怡的图片和和谐的色彩搭配以外,还有一个特别很是紧张的因素就是合理的版面布局设计。

版面布局设计的作用

版面就是在欣赏器上表现的一个完备的页面,它是网站设计的紧张内容。网站是诸多网页的荟萃,每个页面通常都包含了笔墨、表格、图像、动画、链接等要素。版面布局设计是网页设计的第一步,是一个网页成败与否的基础所在。版面布局设计的重要义务是将页面合理分割成用于安排笔墨、图像等各种屏幕元素的区间。通过版面布局设计,探求最佳的欣赏方法,将这些要素有机地整合和分布在页面上,给用户最佳的视觉结果。

网页版面布局步骤

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://www.weseo.cn/News/knowledge_675_12077.html

Contact

ADD:成都市青羊区光华东三路西环广场6楼

TEL:028-64232097

Wechat

微信二维码