网页布局

如何布局网页,网页可以说是网站构成的基本元素。当你轻点鼠标。一副副精彩的网页会呈现在面前,那么,网页的精彩与否的因素是什么呢?色彩的搭配、文字的 变化、图片的处置等,这些当然是不可忽略的因素,除了这些,还有一个非常重要的因素—网页的布局。下面让就有关网页布局谈论一下。
  网页布局类型
  网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。一些大型网站所喜欢的类 型,1国”字型:也可以称为“同”字型。即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要局部,与左 右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是网上见到差不多最多的一种结构类型。其实是很相近的上面是标题及广告横 幅,2拐角型:这种结构与上一种其实只是形式上的区别。接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。这种类型中,一种很 常见的类型是最上面是标题及广告,左侧是导航链接 下面是正文,3标题正文型:这种类型即最上面是标题或类似的比如一些文章页面或注册页面等就是这种类。一般左面是导航链接,4左右框架型:这是一种左右为 分别两页的框架结构。有时最上面会有一个小的标题或标致,右面是正文。见到大部分的大型论坛都是这种结构的有一些企业网站也喜欢采用。这种类型结构非常清 晰,一目了然。区别仅仅在于是一种上下分为两页的框架。5上下框架型:与上面类似。相对复杂的一种框架结构,6综合框架型:上页两种结构的结合。较为罕见 的类似于“拐角型”结构的只是采用了框架结构。
  大部分为一些精美的平面设计结合一些小的动画,7封面型:这种类型基本上是呈现在一些网站的首页。放上几个简单的链接或者仅是一个“进入”链接甚至直 接在首页的图片上做链接而没有任何提示。这种类型大部分呈现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。页面所表达的信息更丰 富,8Flash型:其实这与封面型结构是类似的只是这种类型采用了目前非常游戏行的Flash与封面型不同的由于Flash强大的功能。其视觉效果及听 觉效果如果处置得当,绝不差于传统的多媒体。比如本站在视觉上是很接近拐角型的但所实现的功能的实质是那种上、左、右结构的综合框架型。9变化型:即上面 几种类型的结合与变化。
  关于第一屏
  那么第一屏有多“大”呢?其实这是未知的一般来讲,所谓第一屏即800*600屏幕显示模式(这也是最常用的下,IE装置后默认的状态(即工具栏地址 栏等没有改变)下,IE窗口内能看到局部为778px*435px一般来讲,以这个大小为标准就行了终究,无法适合所有人的情况下,只能为大多数考虑了
  无非是一个标准的问题,说了那么多。其实接下来不用我说大家也能想到第一屏当然要放最主要的内容,关键要知道的要对第一屏能显示的面积要有个估计,而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的
  有关导航栏的位置
  导航栏能让浏览时容易的达不同的页面,网页元素非常重要的局部,所以导航栏一定要清晰、醒目,一般来讲,导航栏要在第一屏”能显示出来,但是有时第一 屏可能会小于上面所说的435px积于这点考虑,那种横向放置的导航栏要优于纵向的导航栏考虑,原因很简单:如果浏览者的第一屏很矮,横向的仍能全部看到 而纵向的就很难说了因为窗口的宽度一般是不会受浏览器设置影响的而纵向的则不确定性要大的多。
  什么样的布局是最好的?这是初学者可能会问的问题。这要具体情况具体分析的,比如如果内容非常多就要考虑用“国字型”或拐角型;而如果内容不算太多而 一些说明性的东西比较多,则可以考虑标题正文型;那几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活;而如果是一个企业网站想展示一下 企业形象或个人主页想展示个人风采,封面性是首选;Flash型更灵活一些,好的Flash大大丰富了网页,但是不能表达过多的文字信息。还没有提到就是 变化型了只是想把这个留给读者了因为,只有不时的变化才会提高,才会不断丰富我网页!

转载于:https://my.oschina.net/u/1865741/blog/322678

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值