在本周的教学过程中，我询问了那些有网页制作基础的学生之前是如何布局网页的，得到的答案都是table表格来布局。深感现在互联网技术发展速度的日新月异，table表格布局近几年已渐渐成为过去式，于是我在这周中给学生们讲了近几年更加常用且好用的XHTML+CSS(DIV+CSS)布局方式，XHTML+CSS布局方式与table表格布局法相比，代码更加精简、访问速度更加快速、用户体验更加优秀，同时只需要修改一个CSS文件便可对整个网站的布局进行更新，下面就是我在教学过程中学生遇到的一些问题与解决方法。

1：对DIV设置水平居中的问题。

学生在使用table表格布局时偶尔也会使用<div>代码来修改内容样式，其中有一个设置水平居中的代码是<div id="center"></div>。他们编写css文件时会有惯性思维，使用#center{margin:center;}代码，但是无法做出预期效果，正确代码应是#center{ margin:auto; }。

2：用float属性的div布局问题。

有学生在确定布局后编写的DIV代码，其中floatA、floatB的属性已经设置为float:left;，他写的代码是：

<#divid="float_a"></#div>

<#divid="float_b"></#div>

<#divid="not_float_c"></#div> 在这里，他的not_float_c并不希望继续平移，而是希望往下排。

解决方案应该是在not_float_c的div属性中加上clear:both;属性即可。

相应的css为：

#not_float_c{clear:both;}

3：用float属性时margin属性加倍的问题。

XHTML+CSS模式和table表格布局相比缺点就是浏览器的兼容性不是很全面，例如在已经被淘汰的浏览器IE6中，设置为float的div在ie下设置的margin会加倍。

学生在调试不同浏览器的浏览效果时发现了这个问题，解决方法我在网上查了查是“在这个div里面加上display:inline;属性即可

例如：

<#divid="add_float"></#div>  相应的css为：

#add_float{  float:left;  margin:5px;/*IE下理解为10px*/  display:inline;/*IE下再理解为5px*/  }”

实际效果非常好。

4：关于高度的问题

有些同学按惯性思维一开始就要给div定义高度，其实这点在div布局中是不需要的，div布局的网页可以根据浏览器动态的伸缩，除非是已定的静态内容并且排版需要，不然不推荐定义高度。

今后的教学目标：

1.网站动态内容的搭建（数据库的链接等）

2.使用已学技术制作简单的B2B网站。

3.IIS的使用。