偶然看到一個淘寶商城的寶貝分類做的很漂亮~而且是放在店鋪中間的自定義位置~背景是很漂亮圖片~分類一目了然，而且圖片背景和店鋪的整體裝修風(fēng)格融為一體,特別漂亮~所以就自己動手做了個寶貝分類的圖片！

在這里和大家一起分享下整個的制作過程~

這個教程一共要用到兩個編輯軟件：Photoshop cs2 9.0和Dreamweaver 8 編寫的整個制作過程，相信沒有用過這兩個軟件的朋友也會很容易學(xué)會的~希望的這次付出可以幫到更多的朋友~另外的領(lǐng)一篇帖子“新手必看-如何制作漂亮的店鋪和詳情頁左側(cè)欄推廣寶貝”確實幫到了一些朋友~這些朋友的鼓勵也是寫這篇帖子的動力~再次感謝他們！

好了下面開始我們的制作之旅吧~

一：首先打開我們的Photoshop,新建一個圖像 尺寸為：900xp 278xp（的這個分類是放在通欄自定義頁的，如果大家想放在店鋪首頁的話，尺寸要做成寬度：750的） 分辨率為72 顏色模式RGB 8位 背景內(nèi)容 白色 如下圖：

二：背景圖片的制作：首先在百度圖片里面找一張你想做分類背景的圖片，然后下載保存，這里已經(jīng)準(zhǔn)備好了一張，然后就直接把這張圖片放到photoshop里面編輯了~

1：在photoshop里打開我們準(zhǔn)備好的圖片~

這是準(zhǔn)備的圖片：我們把這張圖片拖到我們新建那個對象中~方法是鼠標(biāo)左鍵點住直接拖到新建的背景中就可以了~然后把圖像調(diào)整成合適的大小就可以了~調(diào)整方法：ctrl+t 然后自己拖拉就可以了~

這是PHOTOSHOP里打開的狀態(tài)

2：下面我們要做的就是在這張圖片上把我們的寶貝分類文字打上去：

點擊工具欄長條上面的一個“T”工具，然后在圖片上要添加文字的地方點擊一下，然后鍵盤輸入文字就可以了~

展示下我做的

3：文字打好之后~我們把編輯好的圖片合并圖層，方法是在photoshop的頂部工具欄里有個圖層，

合并好圖層，下面我們要做的就是保存圖片，儲存為JPG圖像，記住你儲存的位置哦~

三：背景圖片上傳的圖片空間：打開你的淘寶圖片空間，把做好的圖片上傳到你的圖片空間~

上傳后是這個樣子的：

圖片上傳好了之后，我們要把這個圖片的鏈接復(fù)制下來，點擊圖片的鏈接就復(fù)制好了~

四：我們打開：Dreamweaver 8 新建一個HTML

然后我們先在建好的HTML里布局個表格~點擊上面的布局，然后點布局表格~記住表格的尺寸就是你準(zhǔn)備好的圖片的尺寸900 278 的

在布局好的表格里面，我們來布置個單元格 尺寸也是900 278的

五：在布局好的 單元格里插入圖像~這個圖像就是我們做好的圖片

點擊上面的“插入”“圖像”然后就出現(xiàn)了上面的那張圖~在這里我們剛才復(fù)制的圖片空間的圖片地址就要用到了~

在我用紅框框起來的地方粘帖你復(fù)制的圖片地址，然后一直確定就OK了~

五：給圖片添加熱區(qū)，熱區(qū)的意思就是這個地方可以插入鏈接，你一點這個地方就會打開你添加鏈接的地址~

添加熱區(qū)的方法是：點擊上圖中地圖下面的長方形，然后在你的分類文字上點住左鍵拉一下就會出現(xiàn)如上圖的連衣裙上得框子，然后在下面鏈接的地方：填上你的寶貝分類中連衣裙的網(wǎng)絡(luò)地址就OK了~

下面我們依次按照上面的方法把其他的熱區(qū)都做好~鏈接都添加好~

這樣我們的自定義分類就做好了~

六：安裝代碼：

1：在Dreamweaver 8中把你做好的HTML 代碼復(fù)制下來

2：打開我們的淘寶店鋪：點擊店鋪裝修 然后在做下面 添加自定義模板

3：編輯自定義模板，把我們復(fù)制的代碼粘帖到里面，保存就可以了~

4：發(fā)布我們的裝修就OK了~

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則

本文來源： 教你如何做淘寶裝修自定義的寶貝分類