淘寶旺鋪寶貝分類完美整體設(shè)計。不知道大家看到過沒有，有些漂亮的店鋪，首頁左側(cè)分類區(qū)是很完整的圖形哦，中間沒有任何分割空白。用管理后臺的填加分類然后換成圖片這種傳統(tǒng)方法是完全做不到的，那么他們是怎么做的呢？先看看我所說的效果：

怎么樣，很漂亮吧，你也想要嗎？聽俺慢慢道來~

首先寫下大體步驟，有設(shè)計經(jīng)驗的朋友一看過程就明白了，就無需看下面比較啰嗦的部分了，不是很了解的朋友就繼續(xù)看下面的步驟。

1.準(zhǔn)備工具Fireworks,Dreamweaver.

2.用FIREWORKS先做出圖片，切片，然后導(dǎo)出。

3.用Dreamweaver編輯代碼文件，為各分類圖片加對應(yīng)鏈接。

4.到旺鋪后臺左側(cè)添加自定義區(qū)，粘帖編輯好的代碼，保存。

5.刪除旺鋪分類模塊。

6.預(yù)覽-發(fā)布，大功告成！

下面就是詳細(xì)的步驟了，說的比較詳細(xì)，啰嗦，主要是給新人看的。

準(zhǔn)備工具我用的是Fireworks(以下簡稱FW),Dreamweaver(以下簡稱DW)。也可以用其他軟件代替，比如做圖用PS，編輯代碼用EditPlus之類的。

1.FW 做圖，切片導(dǎo)出。

首先打開FW，打開一幅自己想要做分類背景的圖片，建議圖案不要太復(fù)雜花哨(設(shè)計能力強(qiáng)的朋友可以新建空白文檔自己設(shè)計整體樣式)。截出自己想要做背景的部分，寬

度為200，高度隨意(根據(jù)自己分類多少自定)。【圖1】

【圖1】

2.在截出的部分上用文字工具打上自己的分類，上下排列整齊【圖2】。點(diǎn)擊切片工具，將每個分類分別切開【圖3】，最后導(dǎo)出【圖4】(導(dǎo)出后你到設(shè)定的文件夾里，會看到圖片被切成很多小圖片，還有個html的代碼文件【圖5】)。

【圖2】

【圖3】

【圖4】

【圖5】

3.把剛才導(dǎo)出的分類小圖片上傳到你的網(wǎng)絡(luò)相冊或者空間里面，一會要用。

4.打開剛才保存的目錄，用DW編輯剛才導(dǎo)出的html代碼文件.

5.【這步很重要】

點(diǎn)擊分類名稱的圖片，在源文件處填入對應(yīng)圖片的網(wǎng)址【圖7】，就是第三步你傳到相、冊后得到的圖片網(wǎng)址【圖6】，必須的哦，否則最后圖片不顯示。然后到你的店鋪得到對應(yīng)的分類地址(點(diǎn)擊分類名稱，然后復(fù)制瀏覽器地址欄里的地址)，在下面鏈接處黏貼網(wǎng)址【圖7】，依次為全部圖片添加上對應(yīng)的圖片地址以及分類鏈接。這步很關(guān)鍵，圖片必須對應(yīng)，分類網(wǎng)址也必須對應(yīng)，建議一個圖片接一個圖片的來。頂部以及底部有裝飾類的圖片的話，就只給換上圖片網(wǎng)址就行，無需加鏈接了。

【圖7】

【圖6】

6.復(fù)制(拷貝)代碼中<table 與</table>中間的代碼，這些是我們所需要的【圖8】。或者你可以在下面設(shè)計區(qū)移動鼠標(biāo)在圖片周圍，當(dāng)鼠標(biāo)變的時候，點(diǎn)擊一下，就選取了我們所需要的代碼，然后到上面代碼反選區(qū)右鍵，拷貝就行了。【圖10】

【圖8】

【圖10】

7.進(jìn)入旺鋪后臺，在左側(cè)添加自定義模塊【圖11】，到左側(cè)最下面找到新添加的模塊，點(diǎn)擊齒輪圖標(biāo)進(jìn)行編輯，切換到源碼模式，黏貼上一步中復(fù)制好的代碼【圖12】。取消源碼模式，你就會看到效果了，最后保存。

【圖11】

【圖12】

8.返回后臺首頁，剛才添加的模塊位于最下面，點(diǎn)擊模塊上的向上按鈕，將它提升到原有分類的上面。

9.在后臺管理首頁，點(diǎn)擊內(nèi)置原有分類模塊上的叉號，將此模塊刪除。不要害怕哦，刪除后只有在首頁不顯示，進(jìn)入分類，查看寶貝圖片頁面還是顯示內(nèi)置分類的。我們只是將首頁的內(nèi)置分類模塊刪除了，而且如果想要找回，重新添加模塊，添加：店鋪模塊，就回來啦。

10.預(yù)覽店鋪，你就看到效果了，怎么樣，很不錯吧？點(diǎn)擊各分類圖片，看看有沒有對應(yīng)錯誤的，一切正常的話，就可以發(fā)布您的店鋪了，這時所有人都可以看到您新做的寶貝分類樣式了！最后效果：

重點(diǎn)總結(jié)：

1.在制作圖片時，背景盡量不要太花哨，容易看不清分類的文字。頂部底部的圖片可以有不同的裝飾，但是中間分類圖片背景圖片最好是統(tǒng)一的，或者有幾個同樣背景的就行，便于以后添加新分類。如果是復(fù)雜一體的圖片，以后往中間插其他分類時，就會破壞整體圖片，不協(xié)調(diào)。

2.切片時避免每個圖片太大，影響店鋪打開速度，不要考驗買家的耐心哦~

3.DW 編輯代碼的步驟，一定要吧圖片對應(yīng)的地址，以及對應(yīng)的分類鏈接填寫正確，否則最后就容易出現(xiàn)圖片不顯示，重復(fù)，對應(yīng)分類混亂等錯誤。

4.最后制作完畢新分類模塊后，記得刪除原模塊，否則就重復(fù)。

5.注意，這樣制作完后，僅僅是更換了首頁的分類顯示方式，進(jìn)入分類，查看寶貝的頁面里，左側(cè)顯示的都還是系統(tǒng)內(nèi)置的，就是原來的分類樣式。

店鋪就是臉面，我們都需要以盡可能美麗的臉面來迎接每一位顧客，所以希望這篇帖子能給大家?guī)韼椭寄艽蛟斐鰝€性十足的分類，推動店鋪旺旺旺！

樂發(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ī)則

本文來源： 淘寶旺鋪寶貝分類完美整體設(shè)計