1、第一步，我们要做的是确认这个模板我们要分隔成几行，从上面的效果图可以看出，我们需要分隔成5行下面我们先用PS把图片切割下来<table width="790px"稆糨孝汶; border="0"> <tr> <td background="1.jpg" height="468px"> <table width="765px" height="405px" align="center"> <tr> <td width="757px" height="264px" align="center">) </td><tr> <td width="757px" height="133px" align="center"> <table width="720px" height="127" align="center"> <tr> <td width="720px" height="110px"><ul style="color:#FFF"><li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul></td> </table> </td> </table> </td>
2、第二步，切割第二行<tr> <td background="2.jpg" height="260px"> <table width="776px" height="260px"> <td width="39px"></td><td width="725px"></td> </table> </td> </tr>
3、第三行，由于是空白，又要随意变换高度，所以我们需要把以下部分切割成3部分第一部分：头部第二部分：中间第三部分：底部代码如下：<tr><td> <table align="center" width="100%" cellspacing="0" style=" color:#032b7f; font-size:18px;"> <td background="3.jpg" height="26" width="100%"> </td> <tr><td background="4.jpg" width="100%" height="500px"> <table width="776px" height="500px"><td width="39px"></td> <td width="725px"></td> </table> </td> <tr><td width="100%" height="41px" background="5.jpg"> </table></td> </tr>
4、第四行，在这一行里面又有4个小格子，并且是在一排<tr> <td height="200px"> <table background="6.jpg" width="790px" height="200px"> <td> <table width="790px" height="171px"> <td width="42px" height="165px"> </td> <td width="160px" height="165px"> </td> <td width="14px" height="165px"> </td> <td width="161px" height="165px"> </td> <td width="13px" height="165px"> </td> <td width="162px" height="165px"> </td> <td width="14px" height="165px"> </td> <td width="162px" height="165px"> </td> <td width="22px" height="165px"> </td> </table> </td> </table> </td> </tr></table>
5、通过以上代码就做成了开头的效果图，而且不需要你每次都用PS去修改模板，你只需要用Dreamweaver 来填充你要修改的内容即可，可以大大的提高工作效率，减少重复的工作。
6、下面来总结一下我们所用的的HTML代码:第一条：<table width="765px" height="405px" align="center">以上一条是画一个宽765像素，高405像素的一个居中的表 ，记住每个表都由</table>来结尾。
7、第二条：<td width="757px" height="264px" alig荏鱿胫协n="center">以上是是以上的表格中画出一个单元格，宽是757像素，高264像素，并且居中。记住每个单元格都由</td>来结尾。如果连续的表示在同一步，不同列，例如：<table width="790px" height="171px"><td width="42px" height="165px"> </td><td width="160px" height="165px"> </td><td width="14px" height="165px"> </td><td width="161px" height="165px"> </td><td width="13px" height="165px"> </td><td width="162px" height="165px"> </td><td width="14px" height="165px"> </td><td width="162px" height="165px"> </td><td width="22px" height="165px"> </td></table>
8、如果想要换行可以使用换行标致 <tr>此标签可以使用</tr> 作结尾，也可以不写结尾在上面的代码中可以看到第三条：无续列表<ul style="color:#FFF"> <li>1</li> <li>2</li> <li>3</li><li>4</li> </ul>
9、此代码主要是列表功能，一个字体颜色为白色的4条列表第四条：我们在第三行可以看到以下一条与其它代码不一样的部分 多了一条cellspacing="0"<table align="center" width="100%" cellspacing="0" style=" color:#032b7f; font-size:18px;">这一代码是去除表格中两行间的间隔，使表格看起来更融合。看了这些，你是否已经明白了怎么操作呢？
