中华网通行证
用户名 密码

网站构成的基本元素—网页布局
中华网科技 http://tech.china.com 2005-07-01 10:18:50
进入BBS】【进入聊天室】【 推荐给朋友 】【浏览字号: 】【关闭窗口

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

 

50款最具性价比数码相机/MP3推荐!
作者:中国电脑教育报 来源: 

发表言论:
笔  名:
查看评论
﹣相关报道
网页设计配色精彩十例(4) (2005-07-01 09:56:06)
网页制作中META标签的作用 (2005-06-30 10:05:35)
网页设计配色精彩十例(3) (2005-06-30 09:44:16)
网页设计配色精彩十例(2) (2005-06-29 10:31:32)
网页设计配色精彩十例(1) (2005-06-28 11:37:14)
Dreamweaver制作网页幻灯片效果 (2005-06-24 11:46:02)
网页建设之色彩应用全攻略 (2005-06-01 11:56:55)
网页设计应防止的10个错误 (2005-05-27 11:39:15)

﹣精彩回顾
·揭秘越南姑娘的“性契约”(组图)
·中国研制成功银河麒麟操作系统
·近处偷拍野狮性爱 野草丛中见柔情(图)
·难得一见“水下分娩”全程跟拍(组图)
·古代性器具及性惩罚工具(组图)
·揭密中外历史上乱伦的名人们(组图)
·探秘世界各地诡异的干尸新娘(组图)
·隋唐两个王朝的九大著名"绿帽子"(组图)
·另类的惨烈:螳螂血战壁虎谁更凶猛(图)
·一分钟平静死去 注射死刑全过程(图)

进入BBS】【进入聊天室】【 推荐给朋友 】【浏览字号: 】【关闭窗口


潮流·时尚
·市场上的天价手机全搜罗
·一周降幅最大手机导购
·FM调频收音功能手机选购
·索尼爱立信三新机曝光
·诺基亚N73音乐版精品赏
·热门便携笔记本搜索导购
·近期最新上市机型大盘点
·矩阵Matrix鼠标垫细评测
·19寸20寸22寸液晶该买谁
·近期几款热卖MP3大推荐
·四大即将退市经典MP3选购
·06年最火七大DC缺点曝光
·六百万像素超值机型推荐
·诺基亚推出随身小音箱
·LG直板巧克力KG99评测
·MOTO新机即将国内上市
·超低价蓝牙手机导购
·130万像素一样拍出好照片
·诺基亚两款蓝牙耳机新品
·索爱纯美折叠机Z558评测

软件下载
·豪杰大眼睛 V2.5
·Foxmail V6.5
·天网防火墙Athena
·极品五笔 V6.8
·PPS网络电视
·超级兔子魔法设置
中华网搜索
站内搜索
全网搜索




热门搜索
耳机 印刷 手机 拖鞋
减速机 钟表 成人用品
减肥 枸杞 T恤 升降机
心理 健康 彩票 招聘
礼品 旅游 猎头 培训

产品服务
·机会!机会不容错过
·中华商机,搜索创新
·准确快捷,搜你所搜
·¥来¥往,尽在中华邮
·中华搜索,贴心搜索




科技频道主编信箱