基于XHTML+CSS布局网页技术的探讨
2014-04-29郑林宗张慧
郑林宗 张慧
【摘要】本文首先介绍了XHTML设计标准与HTML、XML语言之间的关系，分析了CSS技术和DIV技术的特点，将传统的HTML标准下的TABLE布局的特点与CSS+DIV布局方式进行了对比，通过一个互动社区网页讲解使用CSS+DIV布局网页的方法。
【关键词】XHTML;DIV;CSS;布局
一、HTML与XHTML的区别
HTML是一种用来制作超文本文档的标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种纯文本语言，HTML代码在运行时不用事先编译为二进制代码，而是直接通过网页浏览器逐行解释执行。
XHTML是The Extensible HyperText Markup Language（可扩展超文本标记语言）的缩写。HTML是一种基本的Web网页设计语言，XHTML是一个基于XML的置标语言，XHTML是一个扮演着类似HTML角色的XML，从本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
二、CSS的介绍
CSS是用来进行网页样式设计的标识语言，与HTML一样属于解释性语言。通过设计样式表，可以统一控制HTML中各个标签的显示属性。CSS样式表可以使用户更有效地控制网页外观，精确指定网页元素位置，创建以及观察特殊效果。
使用CSS，可以将网页结构和内容与表现形式分离开来，网页结构和内容被存放在HTML文档中，而用于定义表现形式的CSS规则则被存放在另一个CSS样式表文件中。
三、Table和CSS+DIV布局页面的优缺点
使用表格进行页面布局会带来很多问题：
（1）把格式数据混入你的内容中。这使得文件的大小无谓地变大，而用户访问每个页面时都必须下载一次这样的格式信息，带宽并非免费;
（2）这使得重新设计现有的站点和内容极为消耗劳力;
（3）这还使保持整个站点的视觉的一致性极难，花费也极高;
（4）基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。
而使用CSS+DIV进行网页布局，它会：
（1）使你的页面载入得更快;
（2）降低你的流量费用;
（3）让你在修改设计时更有效率而代价更低;
（4）帮助你的整个站点保持视觉的一致性;
（5）让你的站点可以更好地被搜索引擎找到;
（6）使你的站点对浏览者和浏览器更具亲和力;
其优点如下：
（1）内容和形式分离
网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。
（2）改版网站更简单容易了
不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。
（3）搜索引擎更友好，确实能够对SEO起到一定的帮助。
通过DIV+CSS对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎蜘蛛爬取。这对于SEO也有帮助。
四、通过实例讲解TABLE+DIV+CSS布局页面的使用
（1）整体布局与公共CSS定义
通过分析页面布局可得页面主要分5大块，顶部Logo、导航条Nav、Banner、Content、Footer，如图1所示。
图1 网页结构
这样HTML就很容易写出来了
这5块的宽度都是900像素，并且都是水平居中的，其相应CSS代码如下：
body，div，a，img，p，form，h1，h2
