淘宝店铺模板制作——傻瓜式热点模版.doc

如何制作淘宝模板?体现个性的时代，如何才能把模板加入自己的元素后运用到自己的店铺呢?自己动手丰衣足食。自制模版不求人，和淘宝学堂一起学习如何结合PS和DW制作自己喜爱的模板啦。
在开展如何制作淘宝模板工作之前,要准备好两个软件：Photoshop和Dreamweaver。这里先发个样本上来大家看下哈。

这个可以放到店铺首页的哦,跟我们平时从装修市场购买到的模板是一样的原理。工作分两步完成：
第一步：用Photoshop打造出整个图片。我用的是Photoshop CS3，其他版本的也差不多。
首先,打开软件,新建空白文件，拓展版为950像素宽度，标准版为750像素宽度，具体高度根据自己的要求确定。

然后，在菜单视图那里周出参考线。这个是为了制作出来的宝贝图片的整齐性而做的。

接着,就是为空白文件添加图片了，我这里制作的是8张图的模板,以这个为例。打开将要合成的8张图片。由于制作过程的重复性我就只以一张图片作示范哦.

最后,把图拉过去模板中，用自由变形工具合理缩放，大小合适就可以了，有多余的就删除。看下图，第一个图完成了哦。

其他的逐张拉过去，缩放到需要的大小就OK了哦,不要忘记写上你宝贝的名称和价格。最终效果如下：

是不是很美观呢 ，淘宝模板图的制作过种大概就这样,如果您觉得还不够好看,也可以自由发挥哦，例如在宝贝旁边加个“新品”“包邮”之类的词也可以的。到这里第一步工作算是完成了，当然最后不要忘记保存制作好的图片，保存为JPG格式的就可以了。

第二步：超简单！只在把图片上传到淘宝空间就可以了。如图：

第三步：用Dreamweaver 2004 制作代码。实现点击图转跳到宝贝详情页面的功能。下面我们一起来学习，不难的。
（1）让我们打开Dreamweaver 2004（软件版本自定）软件,界面如下:

（2）就在菜单栏的“插入”中插入第一步中制作好的图片。看图示：

看到了吗?这就是第一步中制作好的淘宝模板图片，插入到Dreamweaver软件界面的图，到了这里，是不是觉得不难呢，其实真的不难，下面到了最为重点的步骤了，就是为图片添加超链接。

不用想了,直接点击矩热点工具，然后就对图片选择热点位置，看我的操作哦:选择了矩形热点工具后就在图片的相应位置画出正确的位置.下图:

（3）：为选择好的区域添加超链接,这个链接，就是您相应宝贝的链接呢,比如我这里宝贝:

再把复制到的链接粘贴就可以了,另外“链接”选项下面的“目标”要选择“blank”，这个可以帮助你在新的窗口打开超链接.下面看图：

好了,其他的图添加超链接方法重复上面的方法就是了，不明白可以问我，本人的旺旺全天服务。我这里是8张图片,依次把8张图片的超链接添加后就完成这一步了.下面就是获取代码：

这时您就可看到一连串的烦人的东西了,跟着我去做,不会错的哦：

不过不用急,我教您，傻瓜式的照做就可以了。不过这里的话,要回到第二步,从淘宝空间里面获取刚才上传JPG图片的代码：

复制好空间图片代码后就让我们再次回到Dreamweaver软件代码界面吧。把从图片空间获取的代码粘贴到代码窗口的底部空白处(为了方便得到图片的代码），然后复制双引号里面的代码，注意看下面图示的红色文字哦:

这一步很重要，无法用文字说明,只能在截图上说明，注意看啦:

最后一步：复制图示下面位置的代码，用于添加到自定义内容区的代码

看到这里工作差不多了，成功是留给有耐心的人的 :
我们现在可以回到店铺装修的页面了，看图：

保存，并发布装修内容就可以了，自己去首页试点击下,看能不能转跳，这个样的制作方法屡试不爽呢.如何制作淘宝模板?自己动手，想怎么设计就怎么设计，也不用花钱去买模板了.