掌柜必学：DW制作促销图片链接

时间:2013-01-25 10:16

来源:未知

作者:小编

今天想跟大家讲讲怎么用DW软件做图片上的链接，而且今天想跟大家说一个困扰了我一个星期的一个难题，我想也有许多亲会碰到这种问题吧，在这里献丑啦。大家看过许多店铺的广告图吧，是不是很好看，这个不用花钱啦，我们小卖家也一样能做出来哦! 为存在广告嫌疑，有关店内的一切都把它描红了哦。

在做链接之前我们先要做一张漂亮的图片，可以自己做也可以偷偷懒去阿里巴巴模版市场下载图片。下面的图片是装修模版里的图哦，不是小店的图片哦，不存在广告哦

这个怎么制作怎么修改我就不多说啦，跟着提示把你想要修改的地方编辑一下

温馨提示：记得要先登录哦，如果不登录的话在编辑过程中再登录的话要重新制作的哦。

修改完成提交后把JPG的图片下载下来，然后用photoshop再次修改，现在我用我店里的一张图来给大家展示一下怎么在图片上加上链接

首先看一下PS的工作界面，打开photoshop

打开图片，写上店内的活动，因为这张图我没在模版市场里修改，所以只能在PS里写点店内的有关活动，虽然不是很漂亮，但是今天主要是讲怎么添加链接

接下来要保存啦，点击存储为web和设备所用格式(一定要这样保存哦)跳出来下图的样子，选择JPEG，再点击确认哦

保存为HTML格式，点击确认

保存后得到下图两个文件哦

然后把另一个文件里的JPG图片上传到淘宝空间里，必须要上传到空间哦，否则会显示不正常的哦

photoshop工作结束啦，现在DW闪亮登场啦

现在我们来认识一下DW，代码区、设计区、属性区，没接触过的人可能会不明白，但是了解了学会了其实很简单的啦

正式开始啦

打开刚刚保存的HTML格式的图片

源文件是填图片地址的地方，一定要改成刚刚上传到淘宝空间的链接地址，现在上面显示的是本地地址，如果不改的话到时候做的很辛苦结果还是无法正常显示图片的哦

这个是已经改成链接地址的喽

现在我们要用矩形框框出需要链接的地方，你想哪个地方有链接就杠出哪个地方好了，非常的简单

看下图，我想链接到新品上架，直接框出新品上架四个字，跳出来的框点确认

下面要填被链接的地址啦，去你的店铺点出新品上架的页面，地址栏复制地址，粘贴到下图上的链接部位，注意把“#”要去掉的哦

看到下面还有个目标的字样，选第一个blank就好，意思是新窗口打开

做到这里基本上都制作完成了，接下来点击保存，保险一点我们还要预览一下效果，点击下图上的小地球，预览，下拉菜单中按照你的情况选择浏览器进行预览

预览也完成了，现在代码出场啦，点击下图中的代码，选择复制

准备完毕，现在我们要开始装修啦，点击装修此页面

点击添加模块

点击添加自定义内容

进行编辑

刚刚复制的代码还记得吗?代码马上出场喽! 点击下图中的源码

粘贴，代码就正式出场啦。

亲以为到这步就正式OK啦?如果你的店铺中DW代码只用一次的话点击确认就可以了，但是如果你的店铺中需要多次用DW制作的话就没这么简单喽

曾经也困惑了一个星期，为什么店招用DW制作运用到店铺后显示完全正常，而接下来用DW制作促销图预览时完全正常，运用到店铺就不正常了?左思右想，整整一个星期吃不好睡不好，肯定是哪里出问题了，步骤完全一样，那么问题肯定出在代码上了，对代码不是很懂，可能是碰巧吧，问题竟然被找到了，DW制作的代码只有在店铺中运用一次，如果你想要多次使用的话，必须要修改代码，其实很简单，要从第一张开始修改的哦，找到代码里MAP的英文字母，在后面添加1、2、3、4.。。。。第一张就用1、第二张就用2等等依次类推下去，这样亲做的DW代码在店铺里就运作正常喽

再次点击源码，图片就显示啦，最后别忘记发布哦，大功告成啦