QQ在线咨询在线咨询帮做网络积累了丰富的项目经验,聚集了一批资深专业人才,售后服务一流,内业好评不断,是一家专业的网站建设服务商。微信:专业的网站建设服务商。微信:网站建设地图 | 城市分站

如何做好网站建设中网页排版布局

时间:2019-01-07 12:47:34作者:网站建设工程师来源:帮做网络浏览量:0

导  读:网页制作时关于网页版面布局,设计页面指的是用户在浏览器中看到的一个完整页面(可包...
 网页制作时关于网页版面布局,设计页面指的是用户在浏览器中看到的一个完整页面(可包含框架和层)。因为每个用户使用的电脑显示器分辨率不同,所以同一个页面的大小可能出现640px×480px、800px×600px、1024px×768pxpx等不同尺寸。深圳帮做网络工作室认为布局就是指以最适合用户浏览的方式将图片和文字展放在页面的不同位置。
  
(1)网页版面布局的基本步骤。
★拟一份初始方案。新建的页面就像一张白纸,没有任何表格、框架和约定俗成的东西,网页设计人员可以尽可能地发挥其想象力,将可能想到的“景象”画上去(可以用一张白纸和一支铅笔,也可以用绘图软件Photoshop等)。这属于创造阶段,不必讲究细腻、工整,不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可。尽可能地多画几张,最后选定一个满意的作为继续创作的脚本。
★初步设计网页的布局。在初始方案的基础上,将前面已确定的需要放置的功能模块安排到页面上,注意必须遵循突出重点、平衡谐调的原则,将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置,然后考虑次要模块的排放。
★定案。将初步布局精细化、具体化。
(2)常见的版面布局形式。
制作网页常用的版式有单页和分栏(分帧或多框架)两种,在制作网页时要根据网页内容选择版式。但因为浏览器的宽幅有限,一般不宜设计成3栏以上的布局。
★“T”结构布局。所谓“T”结构,就是指网页上边和左边相结合,页面顶部为横条网站标志和广告条,下方左边为主菜单,右边显示内容的布局,这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”布局的形式,如左右两栏式布局,一半是正文,另一半是形象的图片、导航;正文不等两栏式布置,通过背景色区分,分别放置图片和文字等,如图3-3所示。
 
图3-3 “T”结构布局这样的布局有其固有的优点,因为人的注意力主要在右下角,所以企业想要发布给用户的信息都能被用户以最大可能性获取,而且很方便;另外,页面结构清晰,主次分明、易于使用。缺点是规矩、呆板,如果细节色彩上不注意,很容易让人“看之无味”。
★“口”型布局。这是一个形象的说法,指页面上下各有一个广告条,左边是主菜单,右边是友情链接等,中间是主要内容,如图3-4所示。

图3-4 “口”型布局这种布局是综合性网站常用的版式,特别之处是顶部中央的一排小图标起到了活跃气氛的作用。其优点是页面充实、内容丰富、信息量大;缺点是页面拥挤、不够灵活。
★“三”型布局。这种布局多用于国外网站,国内用得不多。特点是页面上横向两条色块,将页面整体分割成4部分,色块中大多放广告条。
★对称对比布局。顾名思义,即采取左右或者上下对称的布局,一半深色,另一半浅色,一般用于设计型网站。其优点是视觉冲击力强;缺点是将两部分有机地结合比较困难。
★POP布局。如图3-5所示:
 

POP引自广告术语,就是指页面布局像一张宣传海报,以一张精美图片作为页面的设计中心。该布局常用于时尚类网站,优点显而易见:漂亮且吸引人;缺点就是速度慢。以上总结了目前网络上常见的几种布局,其实在实际应用中基本上都是可以变通的,所以网站页面呈现出丰富多彩、别具一格的布局形式。网页设计人员在了解这些布局的一些基本优劣之后,适当地利用其优点,结合一些富有形式美感的因素进行设计,就能设计出非常漂亮的网页。
(3)页面版面布局原则与技巧。版式设计通过文字图像的空间组合,表达出和谐与美。只有当内容和形式,即具体网页的排版布局达到一种协调的状态才算是真正成功的网页设计。所以,不能单独考虑网页内容的排版,以为只要能够把具体内容清晰、流畅地放到网站上就行了,这样会严重影响用户的心情。同样,假如不顾网页的内容,只顾页面的形式,即使页面再漂亮,用户也不会欢迎,因为用户上网的目的就是获取信息,不只是欣赏,他们从这样的页面中获得的信息很少,没有达到其目的。经过对许多成功网站的分析发现:除了页面上面的标题部分和下面的结尾部分,网页中间的主题部分一般采用1:2、2:1或1:2:1的结构,这是最常见、最流行的网页结构方式,因为网页设计人员可以方便而有条理地组织网页的信息。当然,这并不意味着每个网站的设计都一定要用这种结构方式,只要能够合理地组织信息,便于交流,采用其他更为灵活多变的结构方式也可以。下面列举了在进行网页版面布局设计时要遵循的一些原则,供读者参考。
★正常平衡。正常平衡亦称“匀称”,多指左右、上下对照形式,主要强调秩序,能达到安定、诚实、信赖的效果。
★异常平衡。异常平衡即非对照形式,但也要注意平衡和韵律,当然都是不均衡的,此种布局能达到强调性、不安性、高注目性的效果。
★对比。对比不仅可利用色彩、色调等技巧来进行表现,在内容上也可涉及古与今、新与旧、贫与富等。
★凝视。凝视是指利用页面中人物的视线,使浏览者仿照跟随的心理,以达到注视页面的效果,一般多用明星凝视状。
★空白。空白有两种作用:一方面突出卓越的感觉;另一方面也显示网页的品位。这种表现方法对体现网页的格调十分有效。
★尽量用图片解说。对不能用语言说明或用语言无法表达的情感,应尽量用图片解说。用图片解说的内容可以传达给浏览者更多的感性认识。

以上的设计原则虽然有些枯燥,但是如果网页设计人员能领会并活用到页面布局里,效果就大不一样了。例如,网页的白色背景太虚,则可以加些色块;版面零散,则可以用线条和符号串来分隔;左边文字过多,则可以在右边插入一张图片保持平衡;表格太规矩,则可以改用倒角试试。好了,帮做网络工作室本文关于“
怎样做好网站建设网页版面布局的方法”经验就分享到这里,希望本站网站建设知识栏目的相关文章能给您的工作有所帮助,谢谢关注。

转载请注明出处:网站首页> 新闻动态 > 网站建设知识 > 如何做好网站建设中网页排版布局


继续阅读相关文章