网页布局
网页布局是指网页整体的布局,虽然网页的内容是很重要额,但是如果网页的布局很乱,用户看起来也会感觉很不舒服。当用户打开一个网页时,第一印象就是网页漂不漂亮,然后才会去看网页内容。
网页大小
设计网页的第一步,需要考虑的是网页的大小。网页过大,浏览器会出现滚动条,浏览不便。网页过小,显示内容过少,影响美观。1.影响网页大小的因素直接影响网页大小的因素是浏览器显示器的分辨率。常用的分辨率有800600和1024768两种。所谓800600的分辨率,也就是在显示器上,横向可以显示800个像素,纵向可以显示600个像素。而1024768的分辨率则代表横向可以显示1024个像素,纵向可以显示768个像素。
当浏览者使用浏览器打开一个网页的时候,除了显示网页内容之外,还会显示浏览器的框架,因此一个网页不能完全按照显示器的分辨率来设计。在浏览器窗口全屏显示的情况下,除去浏览器边框之外,在800600分辨率的显示器里,网页能显示的区域大约为780445像素;而在1024768分辨率的显示器里,网页能显示的区域大约为1004613像素。2.如何设计网页大小设计网页的时候,究竟要设计多大的尺寸呢?在几年前,笔者都是建议开发者以800600分辨率来设计网页大小。但这几年计算机硬件的更新换代十分迅速,几乎已经没有显示器不支持1024768的分辨率了,因此笔者建议在设计网页时可以以1024768分辨率为基础来设计。在该分辨率下,网页的宽度可以设计为1004像素,而网页的高度可以适量地增加,不必局限在613像素之内,但也不要太大,最好不要超过三屏,即不要超过1800像素,除非网页的内容十分吸引观众。3.其他设计网页大小的方法如果开发者比较精益求精的话,也可以设计多个网页,在浏览器打开网页时,先使用JavaScript等脚本语言判断用户的显示器分辨率的大小,在跳转到相应的网页上。例如将同一个网页按照不同的分辨率设计成两个不同的页面,一个是800.html,另一个是1024.html。当用户的显示器分辨率为800600时,显示800.html文件;当用户的显示器分辨率为1024*768时,显示1024.html文件。不过这么做的话,工作量可不小。其实还有其他办法让网页去适应用户的显示器分辨率,这大多需要结合脚本语言来实现。网页栏目划分
在确定网页大小之后,就可以开始设计网页的布局了。网页布局是设计在网页上放些什么内容,以及这些内容放在网页的什么位置。网页设计没有什么定论可言,只要设计得漂亮,想这么设计都行。一个良好的网页,尤其是网站的首页(即网站的第一个页面),都会包含以下几个区域。1.页面页头,也称为网页的页眉,主要作用的定义页面的标题。通过网页的标题,用户可以一目了然地知道该网页甚至是该网站的主题是什么。通常页头都会放置网站的logo(网站标志)、banner等图片或flash动画。2.bannerbanner是横幅广告的意思,在很多网站最上方都会放置一个banner。不过banner的位置可不一定在页头上,也有可能出现在网页的其他区域。banner也不一定放置的都是广告,也常放置一些对网站的标题或介绍。还有很多网站干脆就没有banner。3.导航区域不是每个网站都会有banner,但几乎所有的网站都会拥有导航区域。导航用于链接网站的各个栏目,通过导航区域也可以看出一个网站的定位是什么。导航区域通常是以导航条的形式出现的,导航条可以大致分为横向导航条、纵向导航条和菜单导航条三大类。其中:横向导航条将栏目横向平铺。纵向导航条将栏目纵向平铺。菜单导航条通常用于栏目比较多的情况下,尤其是栏目下又有子栏目的情况。
4.内容一个网站,按照链接的深度,可以分为多级:
一级页面通常是网站的首页,该页面里的内容比较多,如各栏目的介绍、最新动态、最新更新、重要资讯等。
二级页面通常是在首页里单击栏目链接之后的页面,在该页面里的内容是某一个栏目下的所有内容(往往只显示标题),例如单击新浪网首页的导航条中的"体育"栏目之后看到的就是二级页面,在该页面里看到的是所有与体育相关的新闻标题。
三级页面通常是在二级页面里单击标题后出现的页面,在该页面里的内容通常是一些具体内容,例如某个新闻的具体内容。
5.页脚页脚通常是在一个网页的最下方,往往放置公司信息或制作的信息、版权信息等。有时页面也会存放一些常用的网站导航信息。表格布局
在css出现之前,设计值都是使用表格来对网页进行布局的。在使用表格布局时,利用了表格的无边框和间距的特性(将表格的边款与单元格间距都设为零),然后再将网页元素按版面需要进行划分之后,插入到表格的各个单元格中,从而实现了网页排版的工作。css布局
使用表格布局,会大量地使用到表格的嵌套,并且会在表格里加入大量的如width、border、cellspacing等用于控制版面的属性,这些代码使得网页的源代码可读性大大降低。如果是想弄明白哪些表格是用来显示数据,哪些表格是用来控制版面的,还得下一番大功夫,维护起来也十分不方便。
如果使用CSS布局可以从根本上改变这种混乱的局面。在CSS中可以使用DIV与CSS的结合来控制版面,而表格仅仅用来显示数据。如此一来,版面控制与内容就可以完全分开,每一个DIV层都是一个栏目内容,这就由样式来控制了。
CSS布局技巧
使用CSS布局,虽然比使用表格布局要简介、 方便,但是DIV与表格还是有很大的区别,尤其是对于从表格布局转向CSS布局的开发者来说,CSS布局没有表格布局那么容易控制。使用表格布局,只要将表格划分好之后,就可以在单元格里填入内容;而使用CSS布局时,很多开发者会觉得DIV层不知道如何控制,总是无法将其摆放到想要的放置的位置上。
一栏布局
一栏布局,是一种最简单的布局方式。在这种布局方式中,将网页中所有内容都以一栏方式显示:
一栏布局中,宽度都是一样的,对于这种情况,只需要使用一个简单的DIV层就可以显实整体的网页布局,代码如下:
<div id="mydiv">
网页内容
</div>设置了DIV层之后,就可以为该层设置样式,例如层的大小、背景颜色、边款等,如以下代码:
#mydiv {width : 600px;height:300px;background-color:#AEAEAE;border-style:solid;border-width:1px;border-color:blue;}在一栏布局里,要考虑到有两方面:(1)宽度:宽度是指DIV层的宽度,要多大的宽度才能完全显示网页里所需要显示的内容。除此之外,还有前面所说过的分辨率的问题。通常,宽度可以设置成一个比较合适的值,如780个像素,这个宽度在分辨率为800*600和1024*768的显示器上都能完全显示。也可以将宽度设置为一个百分数,如"width:80%",这和宽度可以让DIV层的大小随着浏览器窗口大小的改变而改变,也能在不同分辨率的显示屏上显示所有网页内容。但这种方式也不是绝对完美的,当DIV 层的宽度改变时,有可能让原本不换行的文字产生换行而引起版面混乱。(2)水平对齐方式:当设置一个层时,默认该层是居左显示,如果浏览器窗口大于层的宽度时,在层的右侧就会显示一些空白,这种不对称的视觉效果并不是很好,通常都会让层居中显示,但是在CSS里只有设置对象的内容居中显示。
二栏布局
二栏布局是将网页分为左侧与右侧两列,这种布局方式也是网络上使用很多的布局方式。
二栏布局其实也很简单,首先是创建两个层,在设置两个层的宽度,然后在再设置两栏并列显示就可以了。多栏布局
多栏布局是将网页的内容分左、中、右三大部分,这也是网络中常用的一种布局方式。
通常三栏布局都是将左栏与右栏大小固定,而中间栏大小是可变的,可以随着浏览器大小改变而改变。对于这种情况的处理方式,与一栏布局和二栏布局有很大的不同。通常都是用width属性将左栏与右栏的宽度固定,并且这两栏都使用绝对定位方式固定到浏览器的左侧和右侧,而中间栏还是以静态层的形式出现,但要为中间栏指定边距距离。边距至少要大于左右栏的宽度。
