淘宝旺铺宝贝分类完美整体设计。不知道大家看到过没有，有些漂亮的店铺，首页左侧分类区是很完整的图形哦，中间没有任何分割空白。用管理后台的填加分类然后换成图片这种传统方法是完全做不到的，那么他们是怎么做的呢？先看看我所说的效果：
怎么样，很漂亮吧，你也想要吗？听俺慢慢道来~
首先写下大体步骤，有设计经验的朋友一看过程就明白了，就无需看下面比较啰嗦的部分了，不是很了解的朋友就继续看下面的步骤。
1.准备工具Fireworks,Dreamweaver.
2.用FIREWORKS先做出图片，切片，然后导出。
3.用Dreamweaver编辑代码文件，为各分类图片加对应链接。
4.到旺铺后台左侧添加自定义区，粘帖编辑好的代码，保存。
5.删除旺铺分类模块。
6.预览-发布，大功告成！
下面就是详细的步骤了，说的比较详细，啰嗦，主要是给新人看的。
准备工具我用的是Fireworks(以下简称FW),Dreamweaver(以下简称DW)。也可以用其他软件代替，比如做图用PS，编辑代码用EditPlus之类的。
1.FW 做图，切片导出。
首先打开FW，打开一幅自己想要做分类背景的图片，建议图案不要太复杂花哨(设计能力强的朋友可以新建空白文档自己设计整体样式)。截出自己想要做背景的部分，宽
度为200，高度随意(根据自己分类多少自定)。【图1】
【图1】
2.在截出的部分上用文字工具打上自己的分类，上下排列整齐【图2】。点击切片工具，将每个分类分别切开【图3】，最后导出【图4】(导出后你到设定的文件夹里，会看到图片被切成很多小图片，还有个html的代码文件【图5】)。
【图2】
【图3】
【图4】
【图5】
3.把刚才导出的分类小图片上传到你的网络相册或者空间里面，一会要用。
4.打开刚才保存的目录，用DW编辑刚才导出的html代码文件.
5.【这步很重要】
点击分类名称的图片，在源文件处填入对应图片的网址【图7】，就是第三步你传到相、册后得到的图片网址【图6】，必须的哦，否则最后图片不显示。然后到你的店铺得到对应的分类地址(点击分类名称，然后复制浏览器地址栏里的地址)，在下面链接处黏贴网址【图7】，依次为全部图片添加上对应的图片地址以及分类链接。这步很关键，图片必须对应，分类网址也必须对应，建议一个图片接一个图片的来。顶部以及底部有装饰类的图片的话，就只给换上图片网址就行，无需加链接了。
【图7】
【图6】
6.复制(拷贝)代码中<table 与</table>中间的代码，这些是我们所需要的【图8】。或者你可以在下面设计区移动鼠标在图片周围，当鼠标变
的时候，点击一下，就选取了我们所需要的代码，然后到上面代码反选区右键，拷贝就行了。【图10】
【图8】
【图10】
7.进入旺铺后台，在左侧添加自定义模块【图11】，到左侧最下面找到新添加的模块，点击齿轮图标进行编辑，切换到源码模式，黏贴上一步中复制好的代码【图12】。取消源码模式，你就会看到效果了，最后保存。
【图11】
【图12】
8.返回后台首页，刚才添加的模块位于最下面，点击模块上的向上按钮，将它提升到原有分类的上面。
9.在后台管理首页，点击内置原有分类模块上的叉号，将此模块删除。不要害怕哦，删除后只有在首页不显示，进入分类，查看宝贝图片页面还是显示内置分类的。我们只是将首页的内置分类模块删除了，而且如果想要找回，重新添加模块，添加：店铺模块，就回来啦。
10.预览店铺，你就看到效果了，怎么样，很不错吧？点击各分类图片，看看有没有对应错误的，一切正常的话，就可以发布您的店铺了，这时所有人都可以看到您新做的宝贝分类样式了！最后效果：
重点总结：
1.在制作图片时，背景尽量不要太花哨，容易看不清分类的文字。顶部底部的图片可以有不同的装饰，但是中间分类图片背景图片最好是统一的，或者有几个同样背景的就行，便于以后添加新分类。如果是复杂一体的图片，以后往中间插其他分类时，就会破坏整体图片，不协调。
2.切片时避免每个图片太大，影响店铺打开速度，不要考验买家的耐心哦~
3.DW 编辑代码的步骤，一定要吧图片对应的地址，以及对应的分类链接填写正确，否则最后就容易出现图片不显示，重复，对应分类混乱等错误。
4.最后制作完毕新分类模块后，记得删除原模块，否则就重复。
5.注意，这样制作完后，仅仅是更换了首页的分类显示方式，进入分类，查看宝贝的页面里，左侧显示的都还是系统内置的，就是原来的分类样式。
店铺就是脸面，我们都需要以尽可能美丽的脸面来迎接每一位顾客，所以希望这篇帖子能给大家带来帮助，都能打造出个性十足的分类，推动店铺旺旺旺！
乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。
本文来源： 淘宝旺铺宝贝分类完美整体设计
