用CSS+DIV重构南阳农校网站

摘要：2011年5月，南阳农校新版网站的设计和建设正式开始。在这个项目中主要应用CSS+DIV的专业技术来进行重构，对CSS+DIV在网站制作中的作用及优势进行了详细说明。

关键词：CSS+DIV 重构网站 界面制作

今年我校参加申报示范性学校建设和教学质量评估两个项目，教育教学平台的建设被提上了日程，旧版网站的功能显得相对有些薄弱，因此从5月份开始，新版网站的开发和建设全面有序地展开了。在这个项目中，我参与了前台界面的制作，主要用到了CSS+DIV的专业技术，先来了解一下CSS+DIV。

1什么是CSS+DIV

CSS+DIV是网站标准（或称“WEB标准”）中常用术语之一，css+div 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS+DIV的方式实现各种定位。

CSS 是 Cascading Style Sheets 层叠样式表的缩写， 它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。纯 CSS 布局与结构式 XHTML 相结合能帮助设计师分离外观与结构，可以批量对页面进行修改，它能将文档结构和表现层分离开来，减轻工作量和服务器的负荷，增加站点的扩展能力和应用。使站点的访问及维护更加容易。

一个结构化的 HTML 页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用 blockquote 标签，只要使用 p 标签，并对 p 加一个 CSS 的 margin 规则就可以实现缩进目的。p 是结构化标签，margin 是表现属性，前者 属于 HTML，后者属于 CSS。（这就是结构与表现形式的相分离）

DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

简单地说，div 用于搭建网站结构（框架）、css 用于创建网站表现（样式/美化），实质即使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离，便于网站维护，简化html页面代码，可以获得一个较优秀的网站结构，便于日后维护、协同工作和搜索引擎。

2CSS+DIV的优势

CSS 布局与传统表格（table）布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的 GIF 图片来控制文布局版块的间距；而现在则采用层（div）来定位，通过层的 margin，padding，border 等属性来控制版块的间距。具体从以下四个方面来说明：

（1）表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。符合W3C标准，微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

（2）提高搜索引擎对网页的索引效率

用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。

（3）代码简洁，提高页面浏览速度

对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，代码更加简洁，前者一般只有后者的1/2大小。对于一个大型网站来说，可以节省大量带宽。并且支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

（4）易于维护和改版

样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。现在YAHOO，MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用CSS+DIV的框架模式，更加印证了CSS+DIV是大势所趋。

3用CSS+DIV重构南阳农校网站的过程

在这个项目的开发过程中，小组成员是这样分工的，我和樊靖主要负责界面的设计和前台界面的制作，常猛主要负责后台的开发，因此在设计图通过校领导的审核后即开始用CSS+DIV制作新版网站。

DIV 结构如下：

│body {} /*这是一个 HTML 元素*/

#Container {} /*页面层容器*/

├#Header {} /*页面头部*/

├#PageBody {} /*页面主体*/

│ ├#top {} /*主体上部*/

│ ├#Main {} /*主体中部*/

│ #bottom {} /*主体下部*/

#Footer {} /*页面底部*/

至此，页面布局与规划已经完成，接下来要做的就是开始书写 HTML 代码和 CSS。在这里详细的代码就省略不写了，简要来说制作过程可以归纳为如下步骤：

（1）确定布局，将层结构写出来

（2）定义 body 样式 先定义整个页面的 body 的样式

（3）填充框架内的内容

（4）定义主要的 div

（5）在不同的浏览器中测试并修改

4CSS布局法使用心得

在学习和制作的过程中对CSS+DIV的认识是从理论到实践再到理论，经过这个过程我总结了以下心得，希望对用到这种技术的朋友们有所帮助。

（1）使用 css 缩写

用缩写可以帮助减少你 CSS 文件的大小，更加容易阅读。

（2）明确定义单位，除非值为 0

忘记定义尺寸的单位是 常见的错误。在 HTML 中你可以只写 width="100"，但是在 CSS 中，你必须给一个准确的单位，比如：width：100px width：100em。只有两个例外情况可以不定义单位：行高和 0 值。除此以外，其他值都必须紧跟单位，不要在数值和单位之间加空格。

（3）区分大小写

当在 XHTML 中使用 CSS，CSS 里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。 class 和 id 的值在 HTML 和 XHTML 中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在 CSS 的定义和 XHTML 里的标签是一致的。

（4）取消 class 和 id 前的元素限定

当你写给一个元素定义 class 或者 id，你可以省略前面的元素限定，因为 ID 在一个页面里是唯一的，而 class 可以在页面中多次使用。限定某个元素无意义。

（5） 默认值

padding 的默认值为 0，background-color 的默认值是 transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的 margin 和 padding 值都为 0。

（6）不需要重复定义可继承的值

CSS 中子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。

（7）最近优先原则

如果对同一个元素的定义有多种，以最接近（最小一级）的定义为最优先。

5总结

从以上的说明中可以看出在网站制作中CSS+DIV的重要作用，因此在网站优化中，因为其好处多，使用该种结构的非常多，也希望这种技术能在以后的网站完善中发挥更大的作用。

参考文献：

[1] 前沿科技.精通.CSS+DIV网页样式与布局.人民邮电出版社，2007.56-78.

[2] 李超.CSS网站布局实录.科学出版社，2010.102-120.

[3] 温谦.CSS设计彻底研究.人民邮电出版社，2008.25-40.