网页布局的方法有两种,第一种为纸上布局,第二种为软件布局。下面分别加以介绍。

1)纸上布局法

许多网页制作者不喜欢先画出页面布局的草图,而是直接在网页设计器里边设计网页布局边加内容。这种不打草稿的方法是设计不出优秀的网页来的。所以在开始制作网页时,要先在纸上画出页面的布局草图来。

准备若干张白纸和一支铅笔,这里假设你要设计一个时尚站点。

(1) 尺寸选择。目前一般以800×600的分辨率为约定俗成的浏览模式,所以为了照顾大多数访问者,页面的尺寸以800×600的分辨率为准。

(2) 造型的选择。先在白纸上画出象征浏览器窗口的矩形,这个矩形就是你网页布局的范围了。选择一个形状作为整个页面的主题造型,如选择圆形,因为它代表着柔和,和时尚流行比较相称,然后在矩形框架里随意画出来,还可以试着再增加一些圆形或者其他形状。这样画下来发现很乱,其实,如果一开始就想设计出一个完美的网页布局来是比较困难的,而你要在这看似很乱的图形中找出隐藏在其中的特别造型。还要注意一点,不要担心你网页设计的布局是否能够实现。事实上,只要能想到的网页布局都能靠现今的HTML技术实现。考虑到左边向左凹的弧线,为了取得平衡,在页面右边增加了一个矩形(也可以是一条线段)。

(3) 增加文本。在页面的空白部分加入文本和图形,因为在页面右边有矩形作为陪衬,所以文本放置在空白部分不会因为左边的弧线而显得不协调。

(4) 增加图片。图片是美化页面和说明内容必需的媒体,在这里要把图片加入到适当的地方。经过以上的几个步骤,一个时尚页面的大概布局就出来了。当然,它不是最后的结果,而是以后制作时的重要参考依据。实际的具体可以参考下面的网站：http://www.zhiyuanit.com.cn/

2)软件布局法

如果你不喜欢用纸来画网页布局意图,还可以利用软件来完成这些工作。这个软件就是Photoshop, Photoshop所具有的对图像编辑的功能用到设计网页布局上更是得心应手。不像用纸来设计布局,利用 Photoshop可以方便地使用颜色、图形,并且可以利用层的功能设计出用纸张无法实现的布局意念。