淘宝旺铺宝贝分类完美整体设计

时间:2011-07-26 12:13 来源:未知 作者:地瓜 浏览: 4178

淘宝旺铺宝贝分类完美整体设计。不知道大家看到过没有,有些漂亮的店铺,首页左侧分类区是很完整的图形哦,中间没有任何分割空白。用管理后台的填加分类然后换成图片这种传统方法是完全做不到的,那么他们是怎么做的呢?先看看我所说的效果:

怎么样,很漂亮吧,你也想要吗?听俺慢慢道来~

首先写下大体步骤,有设计经验的朋友一看过程就明白了,就无需看下面比较啰嗦的部分了,不是很了解的朋友就继续看下面的步骤。

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.注意,这样制作完后,仅仅是更换了首页的分类显示方式,进入分类,查看宝贝的页面里,左侧显示的都还是系统内置的,就是原来的分类样式。

店铺就是脸面,我们都需要以尽可能美丽的脸面来迎接每一位顾客,所以希望这篇帖子能给大家带来帮助,都能打造出个性十足的分类,推动店铺旺旺旺!

觉得本文有用?

精彩评论

推荐阅读

  • 淘宝店铺装修在线制作

    很多新手朋友对ps并不是很懂,或者说一窍不通,那么想制作一些自己的店招,分类,店标等等怎么办呢?淘宝学堂装修...

  • 如何让店铺视觉直接提升销售额

    最近碰到很多的卖家都在纠结自己的店铺视觉,总感觉自己的店铺风格不是自己需要的,我发现很多店主还是在凭自己的...