淘宝店铺装修自由添加图片链接(2)

淘宝店铺装修自由添加图片链第二部分：用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了，剩下的就是查看效果，修改效果了。点击保存

十七、发布产品去吧，看看你的劳动成果

图一

图二

终于成功了，去查看我的店铺去喽！

在装修店铺的时候，自定义模板的主要意义，就是实现店家自己的意愿，发挥你的想象力和创造力吧，能给你店铺带来更多的装修空间。