论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Fireworks教程
Tag:切片,gif,动画,文字,图标,照片,网页,效果图,表情,按钮,工作,8.0,cs,视频教程

有关网页的布局设计的讲解

文章类别:Fireworks | 发表日期:2009-8-15 9:23:46

有关网页的布局设计的讲解

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

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


图1-11 网页效果图

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


图1-12 网页的布局结构

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

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


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

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

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


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

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

视频教程列表
文章教程搜索
 
Fireworks推荐教程
Fireworks热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058