1.3.3 页面的版式与布局分析
当资料收集、整理完成后，就可以开始进行具体的网页设计工作了。在进行网页设计时，首先要做的就是设计网页的版式与布局。现在网页的布局设计变得越来越重要，虽然内容很重要，但只有当网页布局和网页内容成功结合时，这种网页才会受人欢迎。缺任何一面都有可能无法留住“挑剔”的访问者。关于网页的版式与布局，主要有以下几个方面的内容。
网页布局的基本概念
网页布局的基本概念主要体现在以下几个方面。
（1）页面尺寸。由于页面尺寸和显示器大小及分辨率有关系，所以设计网页的尺寸要紧跟时下流行的分辨率尺寸。
（2）整体造型。造型就是创造出来的物体形象，这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的结合应该是层叠有序的。虽然显示器和浏览器都是矩形，但对于页面的造型，可以充分运用自然界中的其他形状，以及它们的组合，如矩形、圆形、三角形、菱形等。
对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式、规则，很多ICP和政府网页都是以矩形为整体造型；圆形代表着柔和、团结、温暖、安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量、权威、牢固、侵略等，许多大型的商业站点为显示它的权威性，常以三角形为页面整体造型；菱形代表着平衡、协调、公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状代表着不同意义，但目前的网页制作大多数是结合多个图形加以设计，其中某种图形的构图比例可能占得多一些。
（3）页头。页头又可称为页眉，页眉的作用是定义页面的主题，比如一个站点的名字大多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名称的图片和公司标志。
（4）文本。文本在页面中多数以行或者段落出现，它们的摆放位置决定着整个页面布局的可视性。在过去，因为页面制作技术的局限，文本放置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照制作者的要求放置到页面的任何位置。
（5）页脚。页脚和页头相呼应，页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。可以看到，许多制作信息都是放置在页脚的。
（6）图片。图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置是整个页面布局的关键，而制作者的布局思维也将体现在这里。
（7）多媒体。除了文本和图片，还有声音、动画、视频等其他媒体。虽然它们不是经常被利用到，但随着动态网页的兴起，它们在网页布局上的作用也将变得更重要。
网页布局的方法
网页布局的方法有两种，第一种为纸上布局，第二种为软件布局。下面将分别对这两种布局方式进行介绍。
纸上布局法。许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计软件中边设计布局，边添加内容。这种不打草稿的方法很难设计出优秀的网页来，所以在开始制作网页时，要先在纸上画出页面的布局草图，如图1-7所示。
图1-7 纸上布局
软件布局法。如果制作者不喜欢用纸来画出布局图，还可以利用软件来完成这些工作。可以使用Photoshop所具有的对图像的编辑功能，来设计网页布局。利用Photoshop可以方便地使用颜色、图形，并且可以利用层的功能设计出用纸张无法实现的布局概念，如图1-8所示。
图1-8 软件布局
网页布局技术
网页布局的技术目前主要有两种：
（1）表格布局技术。表格布局方式在过去非常普遍，几乎每个网站都是采用表格布局，表格布局就是将各种需要布局的文本、图片素材放到无边框的表格中，使用表格来确定它们的具体位置。这种布局的优势在于可以对不同对象加以处理，而不用担心不同对象之间的影响。当然其缺点也是非常明显的，使用了大量嵌套网格的网页，会大大降低网页的下载速度，并且网站的安全性也受到了一定的影响。
（2）CSS（层叠样式表）技术。这种布局方式常被人称为DIV+CSS布局技术，国际网络标准组织W3C已经正式将DIV+CSS作为网页制作的标准方式。这种布局方式可以完全精确地定位文本和图片。这种布局技术具有如下优点：DIV+CSS布局由于将数据和格式分开，使网页文件的数据量大大缩减，提高页面载入速度，修改网页时，更有效率而且代价更低，而且大大保证了整个网站样式的一致性，使网站更容易被搜索引擎搜索到。
CSS对于初学者来说，显得有点复杂，但它的确是一个好的布局方法，目前在许多站点上，层叠样式表的运用都是一个站点是否优秀的体现。