初探使用CSS+DIV布局网页.doc

初探使用CSS+DIV布局网页摘要：网页布局对于网页的设计制作是非常重要的，而选用好的方法来布局则成为必可少的一步。传统的表格设计使得网站制作的修改、维护和更新更为复杂，基于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布局可以