1.4 网页创建基本流程

学习时间：25分钟

网页的布局设计变得越来越重要，访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功结合时，才能更受人喜欢。

1.4.1 网页布局的基本概念

最开始，网页呈现在你面前时，就好像一张白纸，任你随意挥洒设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。

页面尺寸：页面尺寸与显示器大小及分辨率有关系，网页的局限性就在于我们无法突破显示器的范围，而且因为浏览器也将占去不少空间，所以留下的页面范围变得越来越小。一般分辨率在800像素×600像素的情况下，页面的显示尺寸为780像素×428像素；分辨率在640像素×480像素的情况下，页面的显示尺寸为620像素×311像素；分辨率在1024像素×768像素的情况下，页面的显示尺寸为1007像素×600像素。从以上数据可以看出，分辨率越高页面尺寸越大。

· 浏览器的工具栏也受页面尺寸的。目前浏览器的工具栏都可以取消或者增加，当显示全部工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。

· 在网页设计过程中，向下拖动页面是唯一给网页增加更多内容（尺寸）的方法。除非能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过3屏。如果需要在同一页面显示超过3屏的内容，那么最好能在上面做上页面内部链接，以方便访问者浏览。

整体造型：造型就是创造出来的物体形象，这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的结合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，可以充分运用自然界中的其他形状及它们的组合，如矩形、圆形、三角形、菱形等。不同的形状所代表的意义是不同的。矩形代表正式、规则，如很多ICP和政府网页都是以矩形为整体造型；圆形带表柔和、团结、温暖、安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表力量、权威、牢固、侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表平衡、协调、公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是结合多个图形加以设计，其中某种图形的构图比例可能占得多一些。

页头：页头又称页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将涉及下面的更多设计和整个页面的协调性。页头常放置站点名称的图片和公司标志，以及旗帜广告。

文本：文本在页面中都以行或者块（段落）出现，它们的摆放位置决定着整个页面布局的可视性。过去因为页面制作技术的局限性，文本放置的位置灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方，许多制作信息都是放置在页脚的。

图片：图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置是整个页面布局的关键，布局思维也将体现在这里。

多媒体：除了文本和图片，还有声音、动画、视频等其他媒体。虽然它们不是经常用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。

1.4.2 网页布局的方法

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

1.纸上布局

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

尺寸选择：目前800像素×600像素的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，页面的尺寸以800像素×600像素的分辨率为准。

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

增加页头：一般页头都是位于页面顶部，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线。

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

增加图片：图片是美化页面和说明内容必需的媒体。经过以上几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是以后制作时的重要参考依据。

2.软件布局

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

1.4.3 网页布局的技术

网页布局的技术主要包括如下3种。

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

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

框架布局：从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。这里讲的布局指南并不是全部的网页布局技术，从某种意义上来说，笔者想引导大家在制作网页时，怎样把图片和文本放置得恰到好处，以及如何拥有一个跳越的设计思维。