初探使用CSS+DIV布局网页|不是网页布局通常使用的方法
时间：2020-03-11 07:31:55 来源：雅意学习网 本文已影响 人 
摘要：网页布局对于网页的设计制作是非常重要的，而选用好的方法来布局则成为必可少的一步。传统的表格设计使得网站制作的修改、维护和更新更为复杂，基于WEB标准的网站设计的核心在于使用WEB系列标准中的各项技术来达到表现与内容的分离，即网站的结构、表现和行为三者的分离。只有真正实现了结构分离的网页设计，才是真正意义上的符合WEB标准的网页设计。
关键词：表格；CSS；DIV；网页布局；Web标准
中图分类号：TP393.092 文献标识码：A 文章编号：1007-9599 (2011) 23-0000-02
Uses CSS+DIV to Layout Homepage
Liu Xiaochun
(Shanxi Youth Vocational College,Taiyuan 030001,China)
Abstract:The homepage layout regarding the homepage design manufacture is very important,but selects the good method to come the layout to become must be possible few one step.The traditional form design causes the website manufacture the revision,the maintenance and the renewal is more complex,lies in based on the WEB standard"s website design"s core uses in the WEB series standard each technology to achieve the performance and the content separation,namely website structure,performance and behavior three separations.Only then has realized the structure separation homepage design truly,is in the true sense conforms to the WEB standard homepage design.
Keywords:Form;CSS;DIV;Homepage layout;WEB standard
一、传统的表格布局
在网页的设计制作中，表格是一个重要的网页元素，主要用来在页面上布局数据和图像，使页面的信息布局合理、简洁。但是，在网页设计制作中，表格还有一个重要作用，就是对网页进行排版。通过表格，可以实现很多用一般手段很难实现的排版效果，达到对页面排版布局的完全控制。
回顾一下使用传统的表格布局的方法。实际上，在十多年前，互联网刚刚开始普及的时候，网页内容非常简单，形式也非常单调。1997年，美国设计师David Siegel出版了一本里程碑式的网页制作指导书《Creating Killer Web Sites》（创建杀手级网站），标明使用Gif透明间隔图像和表格可以创建出“魔鬼般迷人”的网站。
此后，使用表格布局几乎成为每一个设计师必须掌握的技术，而且macromedia公司推出的fireworks和adobe公司的photoshop等软件都提供了非常方便的自动生成表格布局的HTML代码的功能，使得这种方法更加普及。
传统表格布局方式实际上是利用表格元素具有无边框的特性。由于表格元素中可以显示表格的边框为0，即不显示边框，因此可以在网页中的各个元素按版式划分放入表格的各个单元格中，从而实现复杂的排版组合。
但是表格排版也存在各式各样的问题：（1）利用表格排版的页面很难再修改或升级。当页面制作完成后，如果希望将其中的某些位置对调，那么表格排版的工作量相当于重新制作一个页面。而CSS排版利用float和position属性可以很轻松地移动和重新定位各个块，实现让用户动态选择界面的功能。（2）利用表格排版的页面在下载时必须等整个表格的内容都下载完毕后才会一次性显示出来，而利用DIV+CSS排版的页面在下载时就科学得多，各个子块可以分别下载显示，从而提高了页面的下载速度，搜索引擎的排名也会因此而提高。（3）复杂的表格设计使得设计极为不易，修改更为复杂，最后生成的网页代码除了表格本身的代码，还有许多没有任何意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢，网站的维护和更新困难。
二、CSS+DIV布局
使用CSS布局可以从根本上解决表格布局带来的问题。CSS是Cascading Style Sheets的缩写，即层叠样式表，使网页设计者有效地定制、改善网页的显示效果，使网站变得更加简单。最重要的是它与另外一元素DIV（division）标记的结合，完美地实现了网页的内容与结构的分离，简化了HTML语言，并且减轻了HTML语言对表现形式的责任同时使网页开发者的分工更为明确，从而大大减少了创建和维护网站的时间。
DIV是一个区块容器标签，可以理解为层或者是块。DIV是一种比表格简单的元素，它的功能仅仅是将一段信息标记出来用于后期样式的定义。通过使用DIV，可以将网页中的各个元素划分到各个DIV中，成为网页中的结构主体，而样式表现由CSS来完成。
DIV在使用时不再需要像表格一样通过单元格来组织版式，而是通过CSS强大的样式定义功能可以比表格更简单更自由地来控制页面版式和样式。
三、CSS网页布局分类
CSS网页布局从宽度是否变化来划分，分为两大类，即固定宽度布局和变宽度布局。
（一）固定宽度布局
1.单列固定宽度。单列布局是所有布局的基础，也是最简单的布局形式，即一种固定宽度的布局样式。DIV在默认状态下，宽度将占据整行的空间，因此当设置了宽度属性后，DIV宽度将变为设置的宽度。
2.单列固定宽度且居中。页面整体居中是网页设计中常见的形式，在传统表格布局中，我们可以使用表格的 align属性来实现。DIV本身也支持该属性，但在CSS布局中为了实现表格与内容分离，因此在设置居中属性时，通过margin属性来控制对象的上下左右四个方向的外边距。Margin属性中可以直接使用数据，也支持“auto”，即自动判断边距。如果将左右边距设置为auto，浏览器就会将DIV左右边距设置为相同，从而实现居中效果。
3.两列固定宽度。我们知道DIV用于对某一个区域的标识，两列的布局需要采用两个DIV。而在web标准中DIV块是竖直方向排列的，所以要实现两列固定宽度的布局需要新的属性如float或position。flaot属性用来控制对象浮动布局方式，position为绝对定位。绝对定位有局限性，所以重点介绍一下浮动定位。
Float是CSS布局非常强大的布局功能。也是理解CSS布局的关键问题所在。在CSS中，包括DIV在内的任何元素都可以以浮动的方式进行显示。同时浮动也是一种非常先进的布局方式，它能够改变页面中对象的前后流动顺序，这样可以使内容的排版变得简单而且具有良好的伸缩性。
Float属性有三个值，none表示对象不浮动。使用left时，表示右侧对象将流到当前对象左侧。使用right时，表示左侧对象将移动到当前对象的右侧。
要实现两列的布局的话，定义左栏和右栏中的float属性都为“left”。这样右栏的内容将流入到左栏的右边，并根据左栏的宽度，自动流入并贴至左栏，而贴近的程度则由左栏的右边距和右栏的左边距来控制，不需要一栏对象本身的宽度值。
浮动式布局使得页面的大部分内容都可以由浏览器来自动调试之间的关系，使我们能够专注于样式设计而非其相互之间的浮动关系，我们只需要简单地设置浮动方向便可以完成对象的布局分布。
4.三列固定宽度布局。三列固定宽度布局方法及原理同两列固定宽度的布局，所以不再赘述。此外还有更为复杂的固定宽度的布局，只要掌握了两列布局的思想不难做出。
（二）变宽度布局
变宽度布局要比固定宽度布局复杂一些，根本原因在于，宽度不确定，导致很多参数无法确定，但使用一些技巧是可以完成的。
1.一列宽度自适应布局。自适应布局是网页设计中常见的布局形式。自适应的布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上DIV在默认状态下展示整行的空间，便是宽度100%的自适应布局的表现形式。一列自适应布局只需要将宽度由固定值改为百分比的形式即可完成。CSS的大部分数值作为参数的样式属性都提供百分比值。Width（宽度）属性也不例外。如将宽度设置为80%，则DIV的宽度就变为浏览器宽度的80%，当浏览器窗口的大小调整时，其宽度还将维持在浏览器当前宽度比例的80%。
2.两列变宽度布局。两列变宽网页布局包括两列定比例变宽布局和单列变宽布局两种。这两种布局的实现可以通过“绝对定位法”（absolute）和“浮动法”（float）来实现，而这两种方法即是采用CSS+DIV中的技术来实现的。
3.三列宽度适应布局。三列宽度布局有三列定比例布局、单侧列宽度固定的变宽布局和中间列宽度固定的变宽布局三种。也是通过“绝对定位法”（absolute）和“浮动法”（float）来实现。原理同两列边框布局。下面简要说明：如果要求左栏和右栏固定宽度，中间栏需要在左栏和右栏中间，并根据左右栏的宽度自动调整间距。需要实现这样的布局，就需要使用position属性来定位。将左栏的position设置为absolute，并将top和left设置为0px。将右栏的position设置为absolute，并将top和right设置为0px。将中间栏设置margin属性中left和right设置为固定像素值（该参数根据左右栏的宽度设置，只要略大于左右栏宽度即可），用于实现两边自适应宽度。这样就实现了左右栏固定宽度、中间栏根据左右栏的宽度自动调整间距的布局。
四、结束语
使用CSS+DIV布局，真正实现了结构、表现和行为的分离。提高了网页开发的效率和页面下载的速度，提高了网站维护和修改的效率。
对于CSS布局的网页还应该努力实现如下要求：（1）宽度适应多列布局，并且保证页头和页脚部分能够正确显示；（2）在HTML中，各列以任意顺序排列，最终效果都正确显示；（3）可以指定列宽度固定，其余列宽度自适应；（4）HTML和CSS都可以通过Web标准的验证；（5）良好的浏览器兼容。
参考文献：
[1]�谦.CSS设计彻底研究[M].北京:人民邮电出版社,2010,7
[2]王海涛.CSS权威教程(第3版)[M].北京:清华大学出版社,2008,9
[3]王俭敏等.CSS+DIV网页样式与布局案例指导[M].北京:电子工业出版社,2009,4
[4]谢君英.CSS与Dreamweaver CS3完美网页设计[M].北京:人民邮电出版社,2009,1
[5]骆驼论文网.www.省略
[作者简介]刘效春（1969-），女，山西太谷人，山西青年职业学院计算机系讲师，研究方向为计算机多媒体技术方向。
推荐访问:初探 布局 网页 初探使用CSS+DIV布局网页 divcss网页布局
