手把手教你制作淘宝详情页的方法
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
<td background="3.jpg" height="26
<tr>
<td background="4.jpg
<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
<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" align="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
这一代码是去除表格中两行间的间隔，使表格看起来更融合。看了这些，你是否已经明白了怎么操作呢？