做淘寶的都知道，當看到很多很漂亮的詳情頁時，想要擁有，卻又不想花錢時，這篇文章或許對你有幫助。下面就給大家介紹一下怎麼把看中圖片形式的詳情面變自己自己的淘寶詳情頁！
工具/原料
Dreamweaver網頁編輯器
PS切圖
方法/步驟
第一步，我們要做的是確認這個模板我們要分隔成幾行，從上面的效果圖可以看出，我們需要分隔成5行下面我們先用PS把圖片切割下來
第二步，切割第二行
第三行，由於是空白，又要隨意變換高度，所以我們需要把以下部分切割成3部分
第一部分：頭部
第二部分：中間
第三部分：底部
代碼如下：
第四行，在這一行裡面又有4個小格子，並且是在一排
|
||||||||||
|
|
||||||||||
|
||||||||||
|
通過以上代碼就做成了開頭的效果圖，而且不需要你每次都用PS去修改模板，你只需要用Dreamweaver 來填充你要修改的內容即可，可以大大的提高工作效率，減少重複的工作。
下面來總結一下我們所用的的HTML代碼:
第一條：
以上一條是畫一個寬765像素，高405像素的一個居中的表 ，記住每個表都由
第二條：
以上是是以上的表格中畫出一個單元格，寬是757像素，高264像素，並且居中。記住每個單元格都由來結尾。如果連續的表示在同一步，不同列，例如：
如果想要換行可以使用換行標緻 此標籤可以使用 作結尾，也可以不寫結尾在上面的代碼中可以看到第三條：無續列表
- 1
- 2
- 3
- 4
此代碼主要是列表功能，一個字體顏色為白色的4條列表第四條：我們在第三行可以看到以下一條與其它代碼不一樣的部分 多了一條cellspacing="0"
這一代碼是去除表格中兩行間的間隔，使表格看起來更融合。看了這些，你是否已經明白了怎麼操作呢？
注意事項
如果想要做好更好的詳情頁模板，建議多學習一下HTML標記，還有CSS
這裡講的只是一個方法，具體的還是需要多練，多學。然後融會貫通。