DIV+CSS网页设计

摘 要：该文分析了传统网页布局的局限性,介绍了Web标准中典型的应用模式“DIV+CSS”布局方式.通过对DIV和CSS技术的研究,分析了DIV+CSS布局的原理、介绍了DIV+CSS布局方法并揭示了该布局方式的优点,从而提出了网页设计课程的教改思想.

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

中图分类号：TP3文献标识码：A文章编号：1009-3044（2013）03-0607-05

早期的互联网上的网站由于缺乏对页面进行排版布局的手段,页面比较简陋,网页上只能使用最基本的一些HTML标签来表现内容.1997年,DidSiegel出版了“CreateKillerWebSites”一书,讲述了使用表格来进行网页布局的思路和方法,从而使得网站页面的布局得到极大改善.

利用表格可以将网页中的内容合理地放置在相应的区域,每个区域之间互不干扰.其最大的优点是简单直观,因此一段时间内表格布局曾经成为最流行的页面布局方法.直到现在还有很多网站采用表格对页面进行布局[1].传统表格布局方式只是利用了HTML的table元素所具有的零边框特性,即不显示边框.将网页中的各个元素按照版式划分后,分别放入表格的各个单元格中.随着网站信息量的增大,如果将整个网页的元素都包含在表格内,则浏览器会将整个表格全部下载完毕后才显示表格中的内容,因此网页的显示速度比较慢.此外,在HTML中嵌入如width等于“960"border等于“0”这样的样式代码,使得样式和真正的内容混合在一起,可读性大大降低,维护起来成本也较高.

用DIV+CSS布局方式可以有效解决表格布局的不足,符合W3C的Web标准.

1DIV+CSS布局的原理

Web标准推荐网页主要由三部分组成：结构、表现和行为.“结构”决定了网页“是什么”,“表现”决定了网页看起来是“什么样子”,而“行为”决定了网页“做什么”.“结构”、“表现”和“行为”分别对应于3种常用的技术,即（X）HTML、CSS和JaScript.也就是说,（X）HTML用来决定网页的结构和内容,CSS用来设定网页的表现形式,JaScript用来控制网页的行为.[1]

DIV+CSS布局网页符合Web标准的思想.用DIV来创建网页架构,用CSS来实现表现,实现了结构与表现形式的分离.有效地解决了表格布局的不足.

DIV+CSS布局方法中,DIV像表格的单元格一样作为容器,存放网页内容.CSS可以用来定位DIV及定义其展现形式.如表1.

我们以手机为例来说明DIV与CSS的关系,DIV就像手机的组成部分,（天线、按键、话筒等）,CSS就像手机的面板.我们可以为同一个手机变换不同的面板,同理对于相同内容的网页也可以有不同的表现形式.CSS就用来定义网页的表现形式[2].例如由加拿大设计师DESHEA提出的CSSZenGarden（http：//.csszengarden.）.如表2所示,网页内容相同,但表现形式不同.

2布局方法

DIV是一个容器,存放网页中内容.CSS用来设定DIV的表现形式,如位置、浮动、对齐属性等[3].

2.1CSS盒子模型

在CSS中,一个独立的盒子模型由内容（content）、填充（padding）、边框（border）和外边距（margin）4个部分组成,如图1所示.

一个盒子实际所占用的宽度（或高度）是由“内容+填充+边框+外边距”组成的.在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小,并且对于任何一个盒子,都可以分别设定4条边各自的border、padding和margin.图1中的箭头表示设置这些属性时,是按照如图所示的顺时针方向确定对应关系的.利用好这些属性就能够实现各种各样的排版效果.如表3：

2.2盒子的浮动与定位

对于一个网页中的任意元素,根据它的前后顺序,组成了一个个顺序结构,形成文档流的概念.浏览器根据这些元素的顺序去显示它们在网页之中的位置.文档流是浏览器的默认显示规则.

浮动定位的目的,是为了打破默认的按照文档流的显示规则,按照布局要求进行显示.可以用CSS中的float属性实现浮动,如将float属性设置为“left”或“right”,这样元素就会向其父元素的左侧或右侧靠紧.如表4.

2.3DIV+CSS布局

用DIV+CSS进行网页设计时,主要完成两项工作：使用div将内容标记出来以及为内容编写相对应的CSS样式.

1）定义网页结构

采用DIV+CSS布局之前,首先要分析网页由哪些内容块组成,以及每个内容块的含义,这就是所谓的网页结构.通常情况下页面结构包含以下几块：[4]

标题区（header）,用来显示网站的标记和网站名称等.

导航区（nigation）,用来表示网页的结构关系,如站点,通常放置的主菜单.

主功能区（content）,用来显示网站的主题内容,如商品展示、公司介绍.

页脚（footer）,用来显示网站的版权和有关法律声明等.

采用DIV元素来将这些结构定义出来,如下：