用DW制作隔行换色的背景效果--table篇

    设计页面时，设计师经常会把一些文字列表式的资讯内容做成隔行换色的显示效果，丰富了页面表现力，如图1-1中的例子。
其实这个效果非常容易制作，现在就给大家讲解一下表格布局法中隔行换色的详细制作方法。

准备工作：

    一、在Dreamweaver中新建一个网页，设置背景色为#CCCCCC，文字大小为12像素，然后保存。这些应该不用我再教一遍了，还不会的话请翻看前面的文章《如何用dreamweaver新建一个网页》。

    二、在页面中插入一个七行一列的表格，设置表格宽度为200像素，每个单元格的高度为20像素，在每行填些内容。完成后如图1-2。表格的制作方法详见《如何用Dreamweaver在页面中插入表格》。

开始设置背景：
    我们看到例图中表格的二四六行是淡蓝色背景，一三五七行是白色。

    针对这样的表格，设置隔行变换背景的方法主要有两种，第一种是逐一设置每个单元格的背景颜色，也就是设置二四六行的背景为相同的蓝色，它的值为#b4e2fd，将一三五七的背景颜色设置为#FFFFFF，不过这种方法只适用于行数较少的表格。

    第二种就是定义两个不同背景颜色的class，一个为蓝色背景命名为bluebg，一个为白色背景命名为whitebg，让二四六行的单元格等于bluebg，一三五七行等于whitebg，这种方法不论表格有多少行用起来都非常方便，并且很容易修改，这就是CSS的优点。

    原理说完了，我们现在分别将一下两种方法的具体制作方法。

    第一种方法，单行设置背景。

    1.按住Ctrl键，然后用鼠标左键连续点击第二行、第四行和第六行，将三行全部选中，如图1-3。

    2.然后在下面的属性面板中的背景颜色框中填入颜色值#b4e2fd，如图1-4。

    3.按住Ctrl键，选中一三五七行，将背景颜色设置为#FFFFFF。

    OK，一个简单的隔行换色的表格制作完毕。但若要在页面中许多表格都使用此效果，这种方法就极为不方便了，所以要向大家推荐第二种方法。