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

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

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

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

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

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

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

5.刪除旺鋪分類模塊。

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

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

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

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

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

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

【圖1】

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

【圖2】

【圖3】

【圖4】

【圖5】

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

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

5.【這步很重要】

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

【圖7】

【圖6】

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

【圖8】

【圖10】

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

【圖11】

【圖12】

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

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

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

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

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

2.切片時(shí)避免每個(gè)圖片太大，影響店鋪打開速度，不要考驗(yàn)買家的耐心哦~

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

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

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

店鋪就是臉面，我們都需要以盡可能美麗的臉面來(lái)迎接每一位顧客，所以希望這篇帖子能給大家?guī)?lái)幫助，都能打造出個(gè)性十足的分類，推動(dòng)店鋪旺旺旺！

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

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

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