前往顾页

网页设想的布局理念概述

时候:2010-12-07 23:58来源:知行网www.zhixing123.cn 编辑:麦田守望者

网页可以说是网站构成的根基元素。当我们轻点鼠标,在网海中遨游,一副副出色的网页会闪现在我们眼前,那么,网页的出色与否的身分是甚么呢?色采的搭配、笔墨的转变、图片的措置等,这些当然是不成忽视的身分,除这些,另有一个非常首要的身分——网页的布局。下面,我们就有关网页布局议论一下。

  网页布局范例


  网页布局年夜致可分为“国”字型、拐角型、题目注释型、摆布框架型、上下框架型、综合框架型、封面型、Flash型、转变型,下面别离阐述。


  1、“国”字型:

  也能够称为“同”字型,是一些年夜型网站所喜欢的范例,即最下面是网站的题目和横幅告白条,接上去就是网站的首要内容,摆布摆列一些两小条内容,中间是首要部分,与摆布一路枚举到底,最下面是网站的一些根基信息、联系体例、版权声明等。这类布局是我们在网上见到的差不多最多的一种布局范例。


  2、拐角型:

  这类布局与上一种其实只是情势上的辨别,实际上是很附近的,下面是题目及告白横幅,接上去的左边是一窄列链接等,右列是很宽的注释,下面也是一些网站的帮助信息。在这类范例中,一种很常见的范例是最下面是题目及告白,左边是导航链接。


  3、题目注释型:

  这类范例即最下面是题目或近似的一些东西,下面是注释,比如一些文章页面或注册页面等就是这类类。


  4、摆布框架型:

  这是一种摆布为别离两页的框架布局,一般左面是导航链接,偶然最下面会有一个小的题目或斑斓,左面是注释。我们见到的年夜部分的年夜型论坛都是这类布局的,有一些企业网站也喜欢采取。这类范例布局非常清楚,了如指掌。


  5、上下框架型:

  与下面近似,辨别仅仅在因而一种上下分为两页的框架。


  6、综合框架型:

  上页两种布局的连络,相对复杂的一种框架布局,较为常见的是近似于“拐角型”布局的,只是采取了框架布局。


  7、封面型:

  这类范例根基上是呈现在一些网站的首页,年夜部分为一些精彩的平面设想连络一些小的动画,放上几个简朴的链接或仅是一个“进入”的链接乃至直接在首页的图片上做链接而没有任何提示。这类范例年夜部分呈现在企业网站和小我主页,如果说措置的好,会给人带来赏心悦目标感受。


  8、Flash型:

  其实这与封面型布局是近似的,只是这类范例采取了目前非常游戏行的Flash,与封面型不合的是,因为Flash强年夜的服从,页面所表达的信息更丰富,其视觉结果及听觉结果如果措置恰当,绝不差于传统的多媒体。


  9、转变型:

  即下面几种范例的连络与转变,比如本站在视觉上是很靠近拐角型的,但所实现的服从的本色是那种上、左、右布局的综合框架型。


  关于第一屏


  所谓第一屏,是指我们到达一个网站在不拖动动弹条时可以或许看到的部分。那么第一屏有多“年夜”呢?其实这是未知的。一般来讲,在800*600的屏幕显现形式(这也是最常常利用的)下,在IE装置后默许的状况(即东西栏地点栏等没有改变)下,IE窗口内能看到的部分为778px*435px,一般来讲,我们以这个年夜小为标准就好了,究竟成果,在无法适合所有人的环境下,我们只能为年夜多数考虑了。


  说了那么多,不过是一个标准的问题,其实接上去不消我说年夜家也能想到,第一屏当然要放最首要的内容,关头要晓得的是,我们要对第一屏能显现的面积要有个估计,而不要仅仅以本身的机器为准。其实网页制作的一个很费事的处所就是浏览者的机器是未知的。


  有关导航栏的地位


  导航栏能让我们在浏览时容易的到达不合的页面,是网页元素非常首要的部分,所以导航栏必然要清楚、夺目,一般来讲,导航栏要在“第一屏”能显现出来,但是偶然第一屏可能会小于下面所说的435px,积于这点考虑,那种横向安排的导航栏要优于纵向的导航栏考虑,启事很简朴:如果浏览者的第一屏很矮,横向的仍能全数看到,而纵向的就很难说了,因为窗口的宽度通常为不会受浏览器设置影响的,而纵向的则不肯定性要年夜的多。


  甚么样的布局是最好的


  这是初学者可能会问的问题。其实这要详细环境详细阐发的:比如如果内容非常多,就要考虑用“国字型”或拐角型;而如果内容不算太多而一些申明性的东西比较多,则可以考虑题目注释型;那几种框架布局的一个共同特性就是浏览便利,速率快,但布局转变不矫捷;而如果是一个企业网站想揭示一下企业形象或小我主页想揭示小我风度,封面性是首选;Flash型更矫捷一些,好的Flash年夜年夜丰富了网页,但是它不克不及表达过量的笔墨信息。还没有提到的就是转变型了,我只是想把这个留给读者了,因为,只需不竭的转变才会进步,才会不竭丰富我们的网页。

 

------分开线----------------------------
标签(Tag):网页设想
------分开线----------------------------
保举内容
猜你感兴趣