打印

[基本概念] 网页的布局设计

这个是即将出版的《Fireworks网页设效果图计》(暂定名)一书中的一小节,发上来让大家先睹为快,欢迎转载,请不要用在商业用途,转载请注明作者:froglt,网页顽主论坛,www.go2here.net,谢谢

---------------------------------------------



网页的布局设计,就是指网页中图像和文字之间的位置关系,简单来说也可以称之为网页排版。网页布局设计最重要的目的就是传达信息。一个并不能阅读的网页只能变成一个无用的链接。分割、组织和传达信息并且使网页易于阅读、界面具有亲和力和可用性是网页设计师应有的职责,只有这样,浏览者才有更好的机会找出吸引他的东西。

简单来说,可以把网页中的内容看成是一个一个的“矩形块”,把多个“矩形块”按照行和列的方式组织起来,就构成了一个网页。下面举例来进行说,如图1-11所示,为某俱乐部官方网页效果图。


图1-11 网页效果图

当把网页效果图中的各个内容区域看成为一个个的“矩形块”后,按照从上到下,从左到右的顺序对网页的布局结构进行分析,最终得到的效果如图1-12所示。


图1-12 网页的布局结构

从上图中可以看出,网页的整体布局结构划分为四行(从上到下),第一行来制作Logo,第二行制作导航,第三行制作内容,第四行制作版权信息。然后在第三行又拆分为两列(从左到右),分别在左右两列中制作不同的内容。

在这个基础上,可以对网页布局进行更细致的拆分,如果说前面的拆分是用来制作网页的大框架,那么接下来拆分的就是内容区域了,这里分析的方法和前面是完全一样的,拆分后的效果如图1-13所示,其中的文本表示在当前“矩形块”中放置的内容。


图1-13 进行更加细致的拆分

这样,一个网页的布局就初步形成了,至于把什么内容放置到什么位置,这个可以按照网页内容的重要程度,结合人的视觉流程来确定。因为中国人在阅读的时候总是按照从上到下,从左到右的顺序,所以对于网页而言最重要的位置应当是网页的左上角,这也就是为什么所有网页的左上角都是标志的原因。而最次要的位置应当的网页的右下角,所以在网页的最下方一般都是版权信息。把最重要的信息放置在网页左上的位置,而相对次要的信息则可以放置到网页右下的位置。

最后,所有的网页布局都可以在如图1-14所示的布局原型上变形而来,读者可以多找一些现成的网页效果图,按照这里所介绍的方法进行分析对照,从而掌握网页布局的方法。


1-14 网页布局的基础原型

网页布局设计在整个网页设计的流程中都会发挥其重要的作用,网页效果图设计、网页效果图切片、网页布局都会按照最先的布局设计来实现。相关的具体内容,将在后面的章节进行详细的介绍。

[ 本帖最后由 froglt 于 2008-1-5 02:53 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
(\/)︵ 
(·_ _ )~GO2HERE.NET/GO2HERE.NET.CN MORE THAN MEETS THE EYE ⺌囨囚囨図〆
起来上厕所没忍住逛了下经典,斑竹够敬业。收藏了慢慢体会!
值得学习。。。一门学问
生活是不公平的;要去适应它。
值得学习。。。一门学问

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
学习了~~~~~~
http://blog.visionunion.com/?57343

TOP

不错哦,楼主辛苦了

TOP

楼主辛苦了

TOP

不知道你这本书写好了没。出版了否?

TOP

谢谢楼主

TOP

老刘啊 书什么时候出版???

TOP

期待中,不知什么时候面世?

TOP

很好,我最不会布局了

TOP

书还得要大家等等了,主要是和原来的构思有很大不同,这本书主要想以Fireworks在网页效果图设计中的应用为主,有很多需要修改和仔细调整的地方,希望能够做一本“经典”图书,谢谢大家关注~!
(\/)︵ 
(·_ _ )~GO2HERE.NET/GO2HERE.NET.CN MORE THAN MEETS THE EYE ⺌囨囚囨図〆

TOP

感谢楼主 学习一下

TOP

期待~~~

TOP

期待~~~
webdesign

TOP

进来学习一下。
一支陈旧的老枪

TOP

楼主好厉害啊!我看了你的切片教程啊!正在看的过程中呢!

谢谢 了! 有机会也看看布局啊!

TOP

后面的怎么还没出来啊`。``

TOP

楼主出的吗?

TOP

漏看了这一贴```强烈支持先```
等待```争取看见CS3的教程```嘿嘿```

回复小强:小强有所不知```楼主已经出了N多本书了``` 加油啊```

[ 本帖最后由 17526918 于 2008-2-19 13:28 编辑 ]

TOP

不错  啊  楼主 你可以教我吗

[ 本帖最后由 shenying520 于 2008-2-19 13:38 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

楼主我为什么  做的这样啊

TOP

好期待这本书现在就可以出版,一定相当实用!      期待中·······

TOP

引用:
原帖由 shenying520 于 2008-2-19 13:38 发表
楼主我为什么  做的这样啊
我不太清楚你要问的是什么问题?你是说为什么你预览以后对不齐吗?
(\/)︵ 
(·_ _ )~GO2HERE.NET/GO2HERE.NET.CN MORE THAN MEETS THE EYE ⺌囨囚囨図〆

TOP

楼主要不在经典整个电子版下载,我们就不用去书店买了,哈哈
PS:2楼是个强人!

TOP

不错的布局,学习!

TOP

恩  讲得不错 学习中

TOP

froglt终于要出书了。强~

TOP

看看

怎么样 效果如何/ 怎么还要回复呀?

TOP