HTML之网页布局与设计技巧

网页布局

网页布局是指网页整体的布局,虽然网页的内容是很重要额,但是如果网页的布局很乱,用户看起来也会感觉很不舒服。当用户打开一个网页时,第一印象就是网页漂不漂亮,然后才会去看网页内容。

网页大小

设计网页的第一步,需要考虑的是网页的大小。网页过大,浏览器会出现滚动条,浏览不便。网页过小,显示内容过少,影响美观。

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.banner

banner是横幅广告的意思,在很多网站最上方都会放置一个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属性将左栏与右栏的宽度固定,并且这两栏都使用绝对定位方式固定到浏览器的左侧和右侧,而中间栏还是以静态层的形式出现,但要为中间栏指定边距距离。边距至少要大于左右栏的宽度。

如果觉得《HTML之网页布局与设计技巧》对你有帮助，请点赞、收藏，并留下你的观点哦！