平面设计教程 广告设计欣赏包装设计欣赏标志设计欣赏VI设计欣赏室内设计效果图平面设计作品封面设计欣赏
设计作品

网页设计的布局|网站设计,平面设计

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

·平面设计作品 ·视觉设计欣赏
·平面设计教程 ·室内装潢设计图
·画册设计欣赏 ·广告设计欣赏
·包装设计欣赏 ·网页制作教程
·标志设计欣赏 ·VI设计欣赏
·封面设计欣赏

·SEGURA INC 广告设计
·unmundofeliz 招贴设计(十)
·unmundofeliz 招贴设计(十二)
·unmundofeliz 招贴设计(十三)
·unmundofeliz 招贴设计(十四)
·2006新年快乐招贴设计(三)
·2006新年快乐招贴设计(四)
·创新ZEN VISION M播放器招贴设计
·unmundofeliz 招贴设计(十一)
·motype 招贴设计欣赏
·国际广告创意欣赏(三)
·国际广告创意欣赏(四)
·Cory Podielski 招贴设计(一)
·Cory Podielski 招贴设计(二)
·Design Literate封面招贴设计(1)
·Design Literate封面招贴设计(2)
·Design Literate封面招贴设计(3)
·Kimberly Knight广告版式设计
·ron griffiths 包装及广告版式设
·2003全球人类抗击SARS招贴设计网
·Thomas Okeefe 标志设计
·Edik Boghosian 标志设计
·Bruce Macindoe 标志设计
·Power Graphixx 标志设计(一)
·logosharx 标志设计(二)
·Wendy Garfinkel-Gold 标志设计
·Matthew Steffanie 标志设计欣赏
·Power Graphixx 标志设计(二)
·logosharx 标志设计(三)
·Power Graphixx 标志设计(三)
·Jerry Skaggs 标志设计欣赏
·Matthew Sulcoski 标志设计欣赏
·motype 标志设计欣赏
·Jay Frizzell 标志设计欣赏
·Tony Godzik 标志设计欣赏
·Amy Haiar 标志设计欣赏
·Andy Frazier 标志设计欣赏
·Brian White 标志设计欣赏
·Brian Sooy 标志设计欣赏
·Monika Krzewska 标志设计
·Jim Polak 标志设计欣赏
·e-logodesign 标志设计欣赏(二)
·Mile 25 标志设计欣赏
·William Polk 标志设计欣赏
·George Byfield 标志设计欣赏