巧用CSS+ Div与CSS+Table 布局页面提高学生开发网站能力
来源:用户上传
作者: 王阳
摘要：本文探讨了《网页设计制作》这门课程教学中如何进行页面布局的相关内容，指出在教学中教师应该合理巧用CSS+ Div与CSS+Table 布局页面提高学生开发网站能力。
关键词：CSS+Table；CSS+Div；页面布局
一、CSS+Table方式布局页面
Table的排版方式最初是由一位负责给报纸排版的人使用的，他的“发明”对于互联网可以说是起到了极大的推动作用：让传统的网页实现了丰富多彩的色彩和布局结构。在互联网发展的初期使用较多的浏览器其实并非IE，而是美国的数家浏览器共存的局面，后来微软通过将IE与windows的捆绑才得到迅速的发展。直到最后又w3c组织对代码进行了规范之后Table也才得到了快速的发展,并用CSS样式对页面式进行修饰(CSS是英语Cascading Style Sheets的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言)。
二、CSS+Div 方式布局页面
CSS+Div是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（Ｔable）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS+Div的方式实现各种定位。
Div元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。Div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由Div标签的属性来控制，或者是通过使用样式表的格式化这个块来进行控制。那么 CSS+Div页面布局方式具有那些优势和存在什么问题呢。现将CSS+Div网页布局的优势和问题归纳如下：
（一）CSS+Div网页布局的优势。
（1）CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码（其真正意义在于，增加了有效关键词占网页总代码的比重），因此使用CSS+Div的web标准制作的网站具有搜索引擎友好的一定优势。
（2）CSS+Div网页布局的网页使得网站改版相对简单，很多问题只需要改变CSS而不需要改动程序，从而降低了网站改版的成本。
（二） CSS+Div方式网页布局存在的问题。
尽管CSS+Div方式网页布局具有一定的优势，不过现阶段CSS+Div网页布局存在的问题也比较明显，主要表现在：
（1）对于CSS的高度依赖使得网页设计变得比较复杂。相对于CSS+Table方式布局页面，CSS+Div方式布局页面尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出错，更不要说初学的学生了，这在一定程度上影响了一部分接受能力较差的学生的学习积极性。
（2）CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站的网页显示将变得惨不忍睹。
（3）CSS+Div方式布局的页面在显示时对浏览器兼容性要求较高。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+Div方式布局的页面在IE浏览器中正常显示的页面，到火狐浏览器（FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在 ）。CSS+Div方式布局的页面在显示时还有待于各个浏览器厂商的进一步支持。
（4）CSS+Div方式布局的页面对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+Div本身。CSS+Div方式布局的网页并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。
CSS+Div和CSS+Table这两者如何结合起来使用也没有固定的要求，而应根据个人掌握的知识和习惯灵活变化。但一个最基本的原则就是使用CSS+Div方式布局页面的定位、色块、图片等，使用CSS+Table或Ul和Li等这样的元素来显示页面中需要展示的数据。根据近几年在网络公司工作的我校北大青鸟班毕业生反馈回来的信息得知，CSS+Div和CSS+Table这两者巧妙结合起来进行页面布局方式，他们在实际工作中也经常使用，并大大提高了他们开发网站的能力。
（作者单位：东莞市纺织服装学校）
参考文献：
[1]阿博泰克北大青鸟信息技术有限公司.网站配色与布局[M].北京：科学技术文献出版社，2001．
[2]阿博泰克北大青鸟信息技术有限公司.使用
Dreamweaver制作网页[M].北京：科学技术文献出版社，2002．
[3]阿博泰克北大青鸟信息技术有限公司.制作企业网站[M].北京：科学技术文献出版社，2011．
责任编辑朱守锂
转载注明来源:https://www.xzbu.com/9/view-4000577.htm
