今天想跟大家讲讲怎么用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代码在店铺里就运作正常喽
再次点击源码,图片就显示啦,最后别忘记发布哦,大功告成啦
DW软件就是这样的简单,更加复杂一点的促销图也是一样的制作过程,只是过程稍微多一点而已,大家只要知道怎么做了不管有多复杂的图都能很快完成作品啦。
教程到这里就全部讲完啦,讲的并不是很好,语言也不漂亮,但是我们把知道的东西全都奉献给大家。我们要利用网络的一切资源加上自己的努力,我们小卖家也一定能成功的!