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

如何制作淘宝模板？体现个性的时代，如何才能把模板加入自己的元素后运用到自己的店铺呢？自己动手丰衣足食。

自制模版不求人，和淘宝学堂一起学习如何结合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软件代码界面吧。

把从图片空间获取的代码粘贴到代码窗口的底部空白处（为了方便得到图片的代码），然后复制双引号里面的代码，注意看下面图示的红色文字哦：
这一步很重要，无法用文字说明，只能在截图上说明，注意看啦：
最后一步：复制图示下面位置的代码，用于添加到自定义内容区的代码
看到这里工作差不多了，成功是留给有耐心的人的：我们现在可以回到店铺装修的页面了，看图：
保存，并发布装修内容就可以了，自己去首页试点击下，看能不能转跳，这个样的制作方法屡试不爽呢。

如何制作淘宝模板？自己动手，想怎么设计就怎么设计，也不用花钱去买模板了。