宝贝描述模板代码

第1页共1页

淘宝天猫等电商宝贝描述模板制作教程

现在好多新手都自己去下载宝贝描述的模板，但是又发现没有自己想要的，没有符合自

己小店的，那下面我就教大家怎么做，宝贝描述的模板，其实道理是很简单的，做模板，最

后只要得到代码就行了！现在就开始吧！

工具：ps、dreamweaver

第一部分，用photoshop制作出模版JPGE图片。

这个我就不多说了这个我也教不了大家这个都要靠平时的积累和自己的美术功底不过，

宝贝模板的主要模块总结就是以下就是几块：A商品的大图B.商品的描述C.买家事宜

D.配送方法E.店铺分类F.店铺连接

我给大家看看我做的吧。

第2页共2页

放心吧，这个确实是我自己做的，不是去下载的，我只是下载了一个素材，然后自己做的，

素材就一张图片

这个我就不说怎么做了，大家自己摸索吧，今天的主题是，如果做模板，就是讲述做模板的

过程

第二部切片（核心）

为了打开网页时加快模版显示出来的速度，我们需要把模版切成一片片，分别上传到相册上，

这样打开网页，每个模版切片同时显示，大大减少了页面打开的时间，买家也不会等到不耐

烦了，下面是把模版切片操作：

第一，虽然photoshop也有切片工具，但往往要切割得很准确图片才不裂开，如使用

ImageReady来切片就不会有这

样的困扰了。在模版图片打开的状态下，切换ImageReady进行切片处理；

第3页共3页

第二，切片是有讲究的，凡是需要放入图片文字的地方都必须单独切为一片，这里我选择水

平划分为10片；

第4页共4页

第5页共5页

第6页共6页

第三，点击切片工具，移动到图中黄色小点上鼠标会变为箭头状，拉动切割线调整到适当的

位置

第7页共7页

第四划分好后返回photoshop，选中左边工具栏的切片工具就能看到分区，下来就是将切

片存储；

第8页共8页

第9页共9页

第五，如图中操作然后存储；要选择JPG格式的这个要注意了

第10页共10页

第六，如图，然后保存，即可生成一个存放切片的文件夹和一个模版html网页。

第11页共11页

下面images就是切片，要把这个传到我们的图片空间里面。这个很重

要，以后要用到。

第12页共12页

第三部分，用dreamweaver把模版转换为代码（关键）

第一，打开Dreamweaver，打开模版

第13页共13页

第二，进入设计操作页面

第14页共14页

第三，下面为逛逛小店和信用评价做链接

第15页共15页

选择热点选择你要做链接的部分！

第四，点击宝贝展示下的切片图，因为这里要插宝贝细节图，我们需要把它转换成表格形式，

这样不管插入的图片多大，表格都会像一张画布一样撑开。如图操作：

第16页共16页

第五，输入表格宽度，注意：请忽略下图中“选择菜单栏...”的说明，因

为在上图已经操作有插入表格了

第17页共17页

第六，输入高度，填充表格背景

第18页共18页

完成后效果如下图，同样按照以上第四到第六的步骤将需要修改的切片进行表格转换

第19页共19页

按照这个步骤把其他的你要加图片或者文字的地方都都把切片转换成表格

第七，切入代码页面，复制代码到淘宝描述的代码编辑器中

第20页共20页

把所有的代码都复制下来如果复制到宝贝描述里面然后再把里面本地的链接地址换

成我们刚才把切片上传的图片空间里面的地址这个很重要如果不换的话是不会成功的

是没效果的

输入所有的有效链接地址，就可以在刚才我们换成表格的地方插入图片和文字了，点击预览

就能看到一个精美的宝贝描述模版了，赶快动手试一试吧！

在这里我的效果就不给大家看了啊给大家留一个悬念！！现在大家自己动手试试吧！！