很多卖家在装修自家店铺的时候，不能随意的在喜欢的图片指定部位加上链接。如果你们想把自家的店铺装修出独特的风味，链接想放哪儿就放哪儿，那么今天这个淘宝店铺装修自由添加图片链接，和你不得不说的故事！
淘宝店铺装修自由添加图片链接第一部分用Photoshop切片成图。
一、选图
选择好你要装修店铺所使用的图，为了直接有效果，我使用的是我们亲自设计的装修图片。由于我用的是店铺直接装修用的图，放在尾页部分的，所以尺寸为950长度。亲们要事先选好图片，做好哦。为了你的店铺更美，图片设计很重要哦。
二、打开Photoshop界面，把图片放进去。
三、选择切片工具，如下图
切片工具在ps中具有非常强大的功能，甚至可以通过ps的切片工具来精确的做出网站，需要深入学习的可以了解下。这些之需要了解如何切片就行。
四、开始切片（分两步说明）
1、选中切片工具后，会出现一把像钢笔一样的小刀形状的图标，用鼠标按住，在图片上画出你想要链接的部位。（简单说明：运用方法和矩形选框工具一样，选择你想要的部分即可）
选中了后，右上角会出现数字，有01、02. 看下图。蓝色的小框你的01，是你选中的图片的编号，剩下的02，是你切除选中的部分剩余图片的编码，这个是自动生成的，不用管。
2、一张图，如果你需要有一个地方需要链接，就切一次，需要两个地方链接，就要切两次。例子中的图，第一张的四月新，是需要链接的，所以切出了01编号的图；“自由渡购物手册”是我需要链接的第二个地方，所以再次选中后面一张图，切下来。
看见最后一个红圆圈了吗，是和前面01一样的蓝色图标，编号：03。意思就是这张图被切下来了，编号是03.为什么会有两个蓝色，一个灰色的编号呢?
解释说明：蓝色图标中的编号，代表的是你手工切下来的图，灰色02图标，就是两张图的中间圆圈部分，是你切除了整张图后自动生成的编号，是剩余的图片。
这样整张图就切割成了3张图，其中有两张是你想要链接的地方。 大家明白了吗
五、保存格式（很重要）
点击ps文件，选择“存储为Web所用格式”，一定要用这个保存，后面才会用的上，亲们一定记得哦！
六，存储。
（一）注意事项：一是存储的格式，在红色方框的JPEG地方，根据你要的图片格式来选择，一般是用JPEG格式的图。 二是品质问题，从0——100，任意选择。品质越高，图片越清晰，一般80到100即可，当然数值越高图片占用空间越大。
（二）存储格式
存储的时候，保存在你想要保存的地方。我这里保存的地址是我设定的第一个话题文件夹里。文件名和保存类型自动生成，不用修改。 即使你不懂HTML，也没有关系的。照样点击就像。
（三）意外提醒：如果出现下面这个对话框，没有关系，照样点击确认即可。不要担心任何问题哦！继续前进！
七、保存建立文件夹
图片的切片部分就保存好，保存出来的格式，就是我们平时看见的网页格式HTML，另外还有一个专门储存我切下来三张图片的文件夹，名称叫“images”，就是图片的意思。这个也是自动生成的。不用怪异。
这个就是自动生成的“images”里的图片，是和我上面在ps里切片的图一样的吧，而且会自动产生图片名称，按住顺序来的。
在下图这个地方大家就可以很清晰的看见我在上图所切片的位置，0003_01 就是第一张四月新要链接的图，蓝色编码为01；0003_02是ps自动为剩下的图编码，灰色02；0003_03是第三张“自由渡手册”想链接的地方，所以切的是第三张图。
八、上传空间
把这三张图上传到淘宝图片空间里，目的是获取图片的有效链接，这样才能在制作完成后在淘宝店铺中显示。这个大家都熟悉的了，不多说了。
淘宝店铺装修自由添加图片链第二部分：用Dearmweaver制作超链接，形成代码!
九、打开Dreamweaver，创建新项目.点击创建新项目下面的红色框内HTML标记，这样就新建了一个对话框。
十、打开网页，点击文件下的“打开”菜单，找到上面你保存的html格式的文件，直接打开就行。
十一、熟悉界面，找到源文件。最开始我在ps里切的三张图，就到DW里面来了，而且尺寸和高度都是一样的。 同时各位亲们要注意我画了三个红色框，分别代表01图、02图和03图。可以点击试试看哦。在这张图的下面，有一个红框，大家注意了呢。 文字是"源文件",里面就是这个图片在你的电脑里的地址。为了图片在店铺里显示出图片，我们的地址需要更换成空间里你上传的图片。
十二、返回到你的图片空间里，复制图片链接，获取图片地址
就像这样的复制就行，装修过店铺的人都知道的，不清楚的看图说话哦
十三、更改图片地址，添加超链接
（一）、复制好图片链接地址后，返回到Deramweaver页面，找到源文件下面的链接的地方，选中空白框，直接复制进行即可。（图一）
（二）当你把图片地址换好了后，再次获得你想链接的地址，比如你的店铺首页“http://******.taobao.com/”，复制这个地址，到源文件下面的链接的空白框里，这样你的图片和你的首页关系就建立了。 我需要的是四月新品的总链接地址，所以找的是个人所需要的。（图二）
图一
复制进去了后，下面有一个目标空白框，选择“blank”，意思就是当你点击这个图片获得链接地址的时候，是在新的网页打开你的首页。
图二
十四、第二个链接添加
根据以上步骤，再用同样的方法获得02和03的图片地址，分别点击选中DW中的源文件地址，修改过来。在这个步骤需要说明的是：02是空白的剩余图，是我不需要点击链接的地方。所以只是更换了空间地址，而不需要有图片链接地址。由于最开始的时候图片地址是本地电脑的地址，为了在店铺中显示，依然要在图片空间中获得0003_02图片的地址，更换源文件。 这一点大家明白了吧。
我想要03图片可以点击链接到我的自由渡手册的页面，所以在更换了03图片空间的地址以外，也要获得自由渡手册的店铺页面地址，放到源文件下面的 “链接”空白框里。 链接成功！以下示例根据图片的顺序来进行讲解说明。
图一：获取03图片的链接地址
图二，找到源代码
图三：根据图一获得的图片地址，更换图二中红色框“源代码”地址，就完成了图三（即本图）中的链接地址更换
图四：把你想要链接处的链接地址复制后粘贴在“链接”后面的框内，即红色框内，图片点击链接成功
图五：选择链接下面的 目标为blank，即在新窗口打开网页
十五、获取代码，复制。点击图片中的小红色框“拆分”，拆分的意思，就是把图片和代码同时可以观看。大红色框的，就是图片和链接形成的代码。我们可以写不出来，只要会用就行了。我现在也是只能用，不会写。靠写代码来生成程序，太复杂了。 然后全选上面代码层里所有的代码，复制出来。
十六、进入店铺后台，复制源代码。进入你的店铺装修后台，新建一个模板，点击源代码的地方，把刚刚复制的代码都放进去
再点击源代码的标签，你做的图片和链接，就到店铺的后台去了。到了这一步，你的店铺装修也就完成了2/3了，剩下的就是查看效果，修改效果了。点击保存
十七、发布产品去吧，看看你的劳动成果
图一
图二
终于成功了，去查看我的店铺去喽！
在装修店铺的时候，自定义模板的主要意义，就是实现店家自己的意愿，发挥你的想象力和创造力吧，能给你店铺带来更多的装修空间。
本文整理于互联网，如有侵权，请联系email：kf@53shop.com 进行删除处理。
