引言
随着计算机网络的发展,网络在人们生活中发挥的作用越来越大。网页作为网络的主要依托,已深入到人们生活的各个方面,各种各样的网页不断撞击着人们的眼球。那么,吸引用户停留在某个页面上浏览,除了引人入胜的内容、赏心悦目的图片和协调的色彩搭配以外,还有一个非常重要的因素就是合理的版面布局设计。
版面布局设计的作用
版面就是在浏览器上显示的一个完整的页面,它是网站设计的重要内容。网站是诸多网页的集合,每个页面通常都包含了文字、表格、图像、动画、链接等要素。版面布局设计是网页设计的第一步,是一个网页成败与否的基础所在。版面布局设计的主要任务是将页面合理分割成用于安排文字、图像等各种屏幕元素的区间。通过版面布局设计,寻找最佳的浏览方式,将这些要素有机地整合和分布在页面上,给用户最佳的视觉效果。
网页版面布局步骤
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.适当处理留白
版面设计中的留白是指版面中没有图形或文字的部分,很多新手在设计网页时总想着把整个页面撑满。其实,网页就像一个房间,如果里面挤满了人,就觉得呼吸困难,所以,要给页面留有“呼吸”的空间。适当的留白可以架构页面的平衡,巧妙地留有想空间,给观者一种美的享受。
结束语
页面布局正如摆兵阵,阵法千变万化,网页布局也是五花八门。作为设计者,要根据用户的需求合理地设计版面布局结构,才能让设计的网站在浩如烟海的网络世界中脱颖而出,吸引浏览者的目光,实现建站的目的。
网页设计在视觉传达设计中表现形式可谓是多种多样,它不仅涵盖了平面设计的传统优缺点,还具备了在融媒体时代的便捷性和个性化,是一个相对综合要求较高的设计。...
从面前中国的教育变革,以及全球范围内的教育方式变迁情形来看,未来的教育结构中远程教育所占有的比例势必会越来越重。在远程教育的模式中,网页课堂教育视频的质量关系着学生的课堂学习质量。网页中的模拟教师动态性表达效果,以及其声音、动作之间的同步...
远看色,近看花,七分颜色三分花。色彩为网页提供了最有效的表述语言,同时也是最重要的表现方式,色彩是网页之魂。20世纪90年代,互联网兴起,网页设计随之发展起来。早期网络的带宽很有限,因而网页上多为对纯文本的编辑,图片很少,彩图更少。在色彩搭配...
一、前言目前我们处于一个互联网极度盛行的时代,而网站则被各大公司视为争夺利益高地的第一战场,网页设计的重视程度被前所未有的抬高并作为自我展示平台的核心。在网站页面设计这一方面,优秀的设计师可以充分利用用户的使用习惯来为自己的企业形象增光添...
1骆驼服饰旗舰店总体说明1.1骆驼服饰旗舰店网页设计的总体规划网页设计是通过很多的设计领域启迪、顺应时代要求而产生的一门新的艺术设计类型,它既有与传统的设计艺术相同的美学规律,又有其自己的特色,具有相同的智慧和激情的表达方式,它是需要用头...
摘要现今社会,Internet网已将全球联通,信息的共享和交流已经成为人类的共同需求,网络作为高科技与信息交互式媒介的产物,成为人类生活中不可或缺的重要连接纽带。信息的传播和获取已是国家、企业甚至个人发展充实的必要手段。统计显示,人们通过Intern...
1.引言目前家家户户都被互联网连在一起,不仅仅是公司,有很多个人都简历了自己的网站。各有各的用途,公司用于展示自己的产品,个人用于交流,展现自我等。但是大家都没有考虑过这样一个问题,我们现在使用的这个网页,它的结构是什么,怎么才能最大的优化...
结论多数人在确定某个网站的设计是好还是坏的时候,有两种标准。从严格的可用性角度来说,这种判断集中于功能性,信息呈现的有效性及效率。还有一种是纯美学的角度,这是关于设计的美学价值和视觉吸引力的。有些人沉迷于美学和图像中,而忘记了用户,而...
第1章引言1.1选题的背景在互联网充斥着人们生活方方面面的今天,伴随着良莠不齐的网站的暴增,浏览网页成了人们获取外界信息的主要方式。各大网站为了吸引大量用户访问,增加人气,从而带来可观的流量和收益,也是卯足了劲,纷纷标新立异,展现给用户...
互联网已然成为人们生活中重要的部分。网页作为互联网的信息传播的主要媒介, 其所含内容、网页布局和风格具有影响着人们的视觉感受和审美品位的作用。...