网页布局

页面布局

整体造型

页头

文字

页脚

图片

多媒体

二.网页布局的方法

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

　　1.纸上布局法

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

  　　准备一若干张白纸和一只铅笔，你要设计一个时尚站点。

　　*尺寸选择：

  　　目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。

　　*造型的选择：

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

　　图1图2


　　考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形(也可以是一条线段)。(图3)

　　图3

　　*增加页头：

  　　图3.jpg是我们从图1.jpg和2.jpg得到的布局造型，那么我们该增加页头了。一般页头都是位于页面顶部，所以我们为图3.jpg增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线。(图4)

　　图4

　　*增加文本：

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

　　图5

　　*增加图片：

  　　图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。(图6)

　　图6

　　经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。

　　2.软件布局法

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

　　三.网页布局的技术

　　1.层叠样式表的应用

  　　在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。

　　如果你想进一步了解层叠样式表的内容，请访问：

　　http://member.netease.com/~tiantao/css1.htm


　　2.表格布局

  　　表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，你会看到这个页面是如何利用表格的。

　　如果你想进一步了解表格布局的内容，请访问：

　　http://member.netease.com/~tiantao/ccw419.htm

　　3.框架布局

  　　不知道什么原故，框架结构的页面开始被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。