根据画面上整体内容的位置决定的布局

在设计网页时,我们常常要考虑画面上将会看到的模样。如果根据整体内容在画面上的排列位置对网页进行划分的话,虽然可以划分出很多种情况,但是最常使用就是画面左侧排列、水平中央排列、水平-垂直排列、使用整个话面这种。总设计网页布局时,比什么都重要的就是首先要把画面上的排列顺序想好。使用画面左侧排列类型的情况下,一般把网站的标志放置在显眼的左侧上端,使用画面对平中央排列类型的情况下,就像daum或yahoo一样放置在中央的上端部分,适用画面水平中央 。这就是说随着画面上网页排列方法或布局的特性的不同,位置的重要程度也有所不同,所以应该先想好画面上的排列后再决定详细的布局。在设计网页布局时,在某种程度上应该根据网站的目的二考虑一下网站普遍性的问题。因为一般的用户都回依据自己的经历而选择使用某个网站。但是,如果您想让您的网站给人留下与众不同的感觉或创造出新的、另类的设计的话,您也没有不要一直考虑普遍性。重要的是网站的布局应该让用户感觉已好看又方便。

内容排列在画面左侧的页面布局:布局的基本框架800*600的分辨率。网页的布局一般横向都设计得比800像素要小一些,因为纵向有滚动条出现,所以对纵向的长度没有什么特别的要求。如果没有什么特别的目得的话,一般来说,在网页中产生横向的滚动条会给用户带来很多不便。另外,如果横向设置成800,内容可能看不全,所以考虑到浏览器的边缘或滚动条、右侧的留白等,通常情况下都把横向设为580~780像素。要是横向是1024的话,设置成800的,http://www.nbinc.net .

内容排列在画面水平中央位置的页面布局:如果以画面的中央为中心排列的话,就能制作出具有均衡感的网站。四周一般的处理方法就是留空白或利用图片或色彩作为背景来填补。800*600的设置成580~780纵向398之内,1024*768横向580~780纵向450~566不出乡滚动条。http://www.thebanmappingproject.com

内容排列在画面水平-垂直中央位置的页面布局:一般把横向和纵向都制成100%的布局框架。在整个布局框中,单元排列属性设置成水平-垂直中央排列(td align="center" valign="middle")之后,在整个单元中再次插入表格的方法是比较常用的。除了这种方法,虽然还有利用layer和javascript的方法,但是大部分是使用上面所说的方法。800*600的情况下横下设为783以内,纵向398内最大限度不出现滚动。一般情况下,横向600~760,纵向250~390。特别是如果您想把很小的空间最有效来的或用起来的话,适用flash animation是很好的方法,现在在固定的画面上用户用one stop的方式利用空间的方法也很多见。http://www.visualmerchandisingasia.com

使用整个画面的页面布局:在某些网站的横向和纵向也使用不是固定像素值而是相对的百分比的布局面或布局框等设置方式,从而使网站内容的大小根据分辨率的变化而变化。在这种情况下,我们就可以不考虑分辨率而更有效的利用空间了,但如果分辨率变化的话,布局的样式或插入图片的清晰度等也会发生变化。

最近使用矢量方式地图片或flash animation就可以解决这种问题。但是,在一般的网站里使用全画面的话,在1024*768以上的分辨率下浏览,横向就会变得太长,从而给网页信息的浏览者带来不便;另外,留白也很少,这样看起来就会觉得很局促、憋闷,所以除了一些特别的情况下,利用相对值的方法来使用全面对布局就很少使用了。可是,如果在页面里要承载的内容和信息量很大或使用flash animation的情况下,使用可以随着分辨率的变化而调整相对大小的布局的情况是很多的。特别是近来flash受到了越来越多的关注,那些使用全面随意布局的设计也越来越多了。首先多观察各种各样的网页布局法方式,自己也多动脑精想一想,有空就把自己有关布局的想法勾画出来的话,用不了多久,一个既美观又实用的网页布局就会被设计出来了。 http://www.secondstory.com

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值