下载首页 | 资讯中心 | 下载分类 | 最近更新 | 排 行 榜 | 国产软件 | 国外软件 | 汉化补丁 |
文章搜索: 分类 关键字 收藏本站设为首页
您的位置:首页网页设计网页特效 → 网页设计技巧系列之三 再谈布局
网页设计技巧系列之三 再谈布局
日期:2007-5-20 3:33:27 人气:43     [ ]
上一页 [1] 下一页

  上次在“浅谈布局”中只是大概的说了一下布局的相关知识,在本文中就从实际的应用角度来说说布局。“浅谈布局”中就有提到网页的布局有一个基本型(上下、上中下、左右、左中右),通过基本型可以扩展出更多的布局形式。下图就是布局四种基本型与十二种简单混合布局。

  通过上面的十六个布局我们可以扩展出更多的布局形式。通过增加区块、通过不同的区块比例关系,来产生不同的布局应用。而布局绝对影响网站的整体效果,而最重要的因素就在于布局这些区块的比例上。我在上次的“浅谈布局”谈到“黄金分割比”、“九宫格”通常黄金分割计算起来比较麻烦,我个人是比较喜欢用九宫格,因为只要基本符合九宫的四个核心点就可以了,不必要深究。所以我们看,上图的左右布局如果是平分的话很显然就不明重心,而我们通常的做法是一边大一边小,而这个大小的比例一般是不超过1:3的,一般是在1:1.5以上与1:3之间。在内容页的布局中比例一般都比较大,为的就是让内容阅读更容易,但是内容的宽度也应该有一个度,不能很宽,一般在25~30个汉字或是40~45个字母为比较合适。过宽或是过过窄都会让阅读者产生视觉疲劳。(关于文本排版的细节可以参见:“浅谈文本排版”)如果是左中右的结构那么这个比例关系就更为有意思,在大布局中一般不会采用三等份的布局,而在于小布局中会常常使用,用等宽来表示内容是同级的或是相似的。那么在大布局中,随着1024分辨率的普及,左中右结构也可以扩展成为四栏甚至是五栏。在多栏的布局中,可以使用一个大栏二到三个同宽小栏的布局方式,这里的同宽小栏的总宽要可以比大栏的宽度大一点或是小一点,或是等宽。当然也会有一些其它的布局比例,大家可以在具体的形式可以在实践中自行的调整看一下感觉。

  而上下或是上中下的比例就比较特别,与左右或是左中右的有很大的不同。上下的比例需要考虑到第一屏的显示效果问题,现在1024分辨率的普及使得网站的高度显示被拉长。原来800下的显示高度大约在450PX左右,而现在已经可以达到620PX左右。所以我们需要在第一屏显示什么样的内容?一般最重要,最想要浏览者注意的当然要在第一屏显示出来。而一般来讲上中下的比例就是在这么长的屏中的比例。在大布局中的下面基本上是版权信息之类的,而上面主要是标志与导航或是BANNER所以上下的所占的比重不应很大,而重点是在页面的中间。

  布局并不单是在图纸上画上几条线分出几个区这么简单,需要充分考虑每个区的内容形式,比如上面所提到的文本的宽度是否适合阅读等问题就会直接影响到布局的形式。而在首页的布局上,也会有很多不同的内容来影响布局。比如图片的分布是否过于集中,或是过于松散。还有就是上面所提到的通过等比的方式来表示内容是同级或是相似。

出处:本站原创 作者:佚名
 阅读排行
01.精美qq空间横幅代码
02.最酷qq个性女生网名
03.最新又有免费QQ秀啦《..
04.巧用透明FlaSh扮靓你的..
05.花之神匠代码(最新代码..
06.最新QQ空间免费导航
07.最新免费个人形象设置..
08.最新qq空间flash代码m..
09.CSS技术结合图像实现动..
10.Photoshop光影魔术师:..
11.QQ音速种子狂刷
12.最新QQ空间透明代码
13.PS实例教程:教你制作结..
14.Photoshop光影魔术师:..
15.制作背景图__教程
16.用Photoshop制作漂亮的..
17.如何获得QQ音速种子
18.≤QQ空间代码≥在日志..
19.网页浮动广告的制作代..
20.用Photoshop制作大红灯..
21.常用CSS
22.Photoshop给靓丽美女打..
 推荐文章
·Photoshop 表现技法之..
·快速将你的相片矢量化..
·PHOTOSHOP制作炽热的太..
·用Photoshop制作美丽的..
·流行杀手的娃娃工厂__..
·打造8号台球__教程
·PHOTOSHOP制作待机MM图..
·用Photoshop帮MM做纹身..
·PHOTOSHOP美眉着色绝招..
·PHOTOSHOP花露的制作_..
·PHOTOSHOP渐变工具的巧..
·PHOTOSHOP手绘奥兰多-..
·高难度抠图两种方法__..
·Photoshop高尔夫球的制..
·Photoshop打造精美玉佩..
Eqxia_COM下载站 版权所有 Copyright© 2001-2005 Www.eqxia.COM, All Rights Reserved.