运用DIV+CSS技术对网页进行布局

雷烨

摘要：在做网站之前，首要任务就是对网站中的页面进行布局，一个合理的布局是做好一个优秀网站的前提，可见网页布局对于设计制作网页是非常重要的，常用的网页布局技术有表格、层、框架和DIV+CSS，每一种技术都有它各自的优缺点，而DIV+CSS技术作为一种新的网页设计技术，它的功能更强，灵活性也更高，便于后期维护和二次开发。该文以乌兰察布职业学院商务信息技术系精品课程网页设计为例，提出了基于DIV+CSS的网页布局具体步骤，并列举了相应的实例和相关的注意事项。

关键词：CSS；DIV；网页布局

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）07-0212-02

1 传统布局的特点

1.1 框架布局

框架布局支持滚动条，方便导航，节省页面下载时间等，但是兼容性不好，保存时不方便，应用范围有限等，它适合于小型商业网站、论坛、后台管理、学习教程等。

1.2 层布局

使用层进行布局，这种布局方法虽然简单，但在网页布局中却不常用，至于原因，就是难以实现页面内容的精确定位。

1.3 表格布局

表格是网页设计制作中的一个重要的网页元素，用来对网页进行排版，使页面的信息布局合理、简洁。但是表格排版也存在以下的问题：

1）表格布局的页面难于在此基础上进行二次开发。当页面制作完成后，如果要将其中的某些位置对调，那么表格排版的工作量相当于重新制作一个页面。

2）用表格排版的页面在下载时必须等整个表格的内容都下载完毕后才会一次性显示出来，降低了页面的下载速度。

3）复杂的表格设计，修改更为复杂，最后生成的网页代码除了表格本身的代码，还有许多没有任何意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢，网站的维护和更新困难。

2 DIV+CSS技术布局网页

Div+CSS是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。以下就以乌兰察布职业学院商务信息技术系精品课程网页设计为例，说明使用Div+CSS技术布局的过程及相关的注意事项。

1）绘制布局页面的线框图

线框图是从基本的布局开始；良好的布局是顺畅视觉流程的开始，同时也奠定了最终访问效果的基调；布局是一个画地为牢的过程，什么东西放在哪里一旦基本确定，界面就大体确定了；画线框图是为了达到页面之间的协调和整个网站的统一。如图1所示。

2）主要内容区域包围在DIV中并分配ID

Div（division）即片段，并无实际的意义，只是一个定位标记，是块元素的一种。块元素一般是其他元素的容器元素，它可以容纳内联元素和其他块元素。默认情况下，块元素总是从新行开始；高度，行高以及顶和底边距都可控制。Div就是一种块元素，在网页中，将Div当做容器，用来装载网页中大块内容，并定位在网页的某部分。利用Div与CSS进行布局，就是指将主要内容区域包围在DIV中并分配ID， 然后利用CSS样式编辑DIV。

本案例中，将网页结构分为四部分，分别是顶部信息（header）、导航（left）、主要内容（main）、页脚信息（footer），之后创建一个Div元素container，以便放置网页的所有内容，这样做是为了便于对网页所有的内容进行定位。由于left和main部分是横向排列，这里需要再创建一个Div元素pagebody包含中间部分left和main。如图2所示。

3）用CSS编辑每个DIV的属性并对其进行定位

要利用Div+CSS进行网页布局，就必须了解盒模型，盒模型是CSS的基石之一，在HTML元素中，Div就像个容器一样放置在网页上，可将它看做是一个装了东西的盒子，这个盒子由内容、填充（padding）、边框（border）和边界（margin）组成，依据盒模型，利用CSS来设置每个Div的属性。让页面内容居中显示的话需要设置div元素container居中对齐，也就是将container左、右边界值为“auto”，这样浏览器就会自动分配Div元素的左右边界，将之设为相同，呈现为居中状态。

针对本案例两列布局，需要对left元素和main元素进行左右浮动设置，但前提条件是两个元素的宽度加起来不能超过包含他们的pagebody元素，否则浮动元素之一就会退到下面去。为了防止这样的情况，可以不设置main的宽度，使之自动分配。因为浮动的元素left和main不占据空间，在这里还需对footer进行清除操作，否则它就会在页面中移动到left和main上方去，详细代码如图3所示。

3 结束语

使用Div+CSS布局，主要是将页面的内容划分成一个个区域，装载到每一个Div中，然后利用CSS对Div元素进行编辑并对其进行定位，达到页面布局的效果，真正实现了结构、表现和行为的分离。提高了网页开发的效率和页面下载的速度，提高了网站维护和修改的效率；要想将Div+CSS技术运用的更好，更是离不开长时间的学习和丰富的设计经验的积累，只有这样，才能很好的掌握这门技术。