论网页布局技术

摘 要：一个访问量高的网页才算是成功的网页，当然高访问量是多种因素综合的结果，可能是内容精彩实用，色彩吸引眼球等等，但承载这些元素的最关键的一步是网页布局。一个实用人性化的布局能引领访问者在心情愉悦下很轻松的找到自己所要的东西。

关键词：网页 布局 表格 层 框架 模板和库 访问

网站是多个相关网页的集合。英文名称：website，精确定义为：Internet上一块固定的面向全世界消息的地方，由域名（也就是网站地址）和网站空间构成，通常包括主页和其他具有超链接文件的页面。所以做好网页是关键。做好网页的关键是合理的布局。

下面分别论述网页布局方法的优缺点及其实用之处，以便大家清楚后适时选用相应技术制作出精美的网页。

一、用表格布局网页

表格布局是通过加入大量的表格来进行定位的，有些人甚至在大表格中嵌套多重的小表格。这实质上也是加大浏览器的负担，使页面呈现时间大大加长。因此，在使用表格时，应尽量把表格打散，并要尽可能地避免表格的层层相套，表格布局也会影响网页的加载速度。

优点：在于可以将页面划分为若干个部分，然后分别放置不同的信息对象加以处理，又不用担心不同信息对象之间的互相影响。使用表格布局的页面在不同平台、不同分辨率的浏览器中都能保持其原有的布局，具有较好的兼容性，便于规划，易于接受，对设计人员的专业技术要求不高，操作简单、直观。

缺点：表格布局灵活性不大，你只能遵循、、的格式；不适合过于复杂的网页；垃圾代码会很多．一些修饰的样式及布局的代码混合一起，降低代码的可读性。首先。应尽量避免使用结构复杂的表格，因为这可能会使浏览器多次刷新表格；其次，浏览器在解释页面元素时是以表格为单位逐一显示，尽量把内容分别放置在多个非嵌套的表格中，因为浏览器只有在整个表格的内容全部读入以后才输出显示．读入完毕之前将一直显示空白：最后，表格嵌套不要超过三层，否则会使浏览器花大量的时间，处理表格的结构。目前Internet上很多的网页还是用表格来制作的。

二、用表格的布局模式布局网页

有时使用表格进行布局不太方便，因为最初表格并不是用于布局设计，而是用于显示数据。为了简化使用表格进行页面布局的过程，Dreamweaver提供了表格的布局模式。

优点：在布局模式下，表格和单元格分开创建，可以自由轻松地移动、改变其大小和形状。使用布局模式是设计页面布局最简单的方法，它使网页设计者能够把更多的精力放在网页的设计创意中。

缺点：利用布局模式生成的表格比较复杂，不适合大型网站使用，一般只应用于中小型网站。

三、用框架布局网页

框架即．．．标签，它可以把屏幕分割开来的“区域” ，如果网页要布局成框架集中所提供的样式，可以使用框架来实现。框架中还有一个标记比较常用，但它只适用于IE，它的作用是在一个网页中间插入一个框窗以显示另一个文件。

框架是在同一浏览器页面中显示多个相互隔离的HTML页面的结构，它是一种全新的组织网页的方法。使用框架集时既可以使用Dreamweaver提供的框架集，也可以自己创建所需要的页面结构。网页设计时，往往我们希望自己的网页中的一部分内容保持不动(例如导航部分)，而其他部分内容发生变化。这时，我们只要改变链接的“目标”属性．将目标更改为主视图框架的名称即可。

优点：框架网页本身不包含可见内容，它只是一个容器，用于指定在框架中显示的其它网页及显示方式；访问者不需要为每个页面重新加载与导航相关的图形；每个框架都有自己独立的滚动条，方便访问者独立浏览这些框架。

缺点：缺省时，框架是有边框的，占用屏幕上可用作别的目的的一些空间；难以实现不同的框架中各元素的精确对齐；主流的搜索引擎下不会收录框架的页面；网点速度相对较慢等。

注：虽然框架也是排版工具，但是它与表格和DIV在用途上却有着本质区别。表格和DIV均是以插入的对象为单位，而框架则不同，它是以插入的网页为单位，它提供了一种较为固定的网页结构。

四、用DIV+CSS布局网页

DIV是指HTML标记中的标记“”，中文可以理解为层的概念。简单来说D1V元素是用来为HTML文档内大块的内容提供布局结构和背景。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

CSS是一种样式表的技术，人称层叠样式表。W3C组织给出的说明是：CSS是一种简单的对于WEB文档增加样式（例如：字体、颜色、间隔等）的机制。在网页设计时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。采用了CSS技术设计的网页，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者多个不同网页的相同部分的外观和格式。

二者结合，DIV承载的是内容，负责确定网页内容在网页上的现实位置；而CSS承载的是样式，负责网页内容以什么样式显示出来。DIV+CSS可以实现更家灵活的网页内容的显示控制。

优点：1、表现形式和内容的分离，网站改版相对简单；2、采用DIV+CSS技术的网页，能够更好地被搜索引擎收录，与搜索引擎的关系更加友好；3、相比单纯地用HTML来设计网页，CSS能够简化代码，使浏览网页的速度提升，节省大量的带宽；4、更易于后期的维护和管理；5、绘制简单，直观，元素会跟随AP Div层移动；6、保持视觉一致性。

缺点：1、DIV+CSS技术并不简单；2、采用DIV+CSS技术不要盲目的追求代码节省；3、DIV+CSS技术并没有完全兼容所有浏览器；4、DIV+CSS对搜索引擎优化与否，取决于网页设计的专业水平。

五、利用模板和库制作网页

在进行大量页面的制作时，很多页面会用到相同的布局、图片和文字等元素。为了避免重复劳动，可以使用Dreamweaver 提供的模板与库功能，将具有相同版面结构的页面制作成模板，将相同的页面元素制作成库项目，并存储在库文件中以便随时调用。

模板优点：使用模板有助于设计出风格一致的网页。通过模板创建和更新网页，可以大大提高工作效率，简化网站的维护工作。基于模板创建网页，一次可以更新多个页面。从模板创建的文档与该模板保持关联状态，修改模板可以立即更新基于模板的所有网页文挡中的设计。

库优点：库是一种特殊资源文件的集合，库中的资源称为库项目，库项目可以是图像、表格、声音、Flash文件等。用户可以用该方法制作网站中各个网页的相同内容，或者用来处理那些虽然只在很少的网页上出现，但更新比较频繁的部分。

注：模板针对的是页面布局，体现了页面整体的一致性，其文件保存在Templates文件夹中。而库项目更多的则是针对小元件的标准化使用，其文件保存在Library文件夹中。

参考文献：

[1] 蔡海洋．《Dreamweaver网页制作》．长沙：国防科技大学出版社，2009．

[2] 前沿科技，曾顺《精通CSS＋DIV网页样式与布局》［M］．北京：人民邮电出版社2007.7