大莹电商城商友圈

  1. 4265 成员
  2. 2.8万 人气

参与评论

    不会切片,不懂代码,小白也可轻松做关联营销?

    最后编辑时间:  2014年07月01日 12:32 评论:17 浏览: 13145 投稿

    大家好,我是来自网商橙长营第四期的学员--广东东莞市小童军服饰的小超害羞。今天发这个帖子的原因是看了关于关联营销的课程,而有感而发思考,课程中老师说的方法都很实用,对于一些资深的美工可能就不需要看,毕竟都是些基础的东西比较适合初入门的网商朋友安慰,不过里面涉及到很多代码和切片的内容,刚接触的朋友可能不太好掌握,所以今天我也就分享一份非常简单的方法,露齿笑去做关联营销板块。

     

    再次声明,小超分享的是初级内容,基础中的基础,所以如果阁下是高手的话,可以绕道,或者我有什么说错了,请你给予指正,谢谢恭喜发财!!

    ------------------------------------------------------分割线------------------------------------------------------------

    咱们开始了,首先要准备好必要的工具软件:undefined这哥俩握手被称为”网页设计三剑客“可想可知使用它们的范围有多广(悲泣Firework今天没上镜)

     

    先看一下,我最近弄的一个类似关联营销的板块

    8

    像这样子一个关联营销,一般的办法是:

    1、首先得用ps,把整个图片做好保存。

    2、开始用ps进行切边,根据产品图片,还有对应内容边框来切。

    3、顺利切好片,确定没有空隙没切,图片、代码分别导出,上传好图片空间,代码导入Dreamweaver

    4、在Dreamweaver根据图片中的代码,每条替换成图片空间上面的连接,然后保存好代码。

    5、把代码复制好,粘贴到产品详情页中,然后添加对应的产品链接,最后发布。

     

    以上是我一般的制作方法,如果不算把图片做好的话,应该要1-2个小时左右不会吧,才能完成(前提是你很熟练了)

    这个时候,会有网商朋友会想,你不是已经掌握更简单的方法了,为什么还用这种耗时长,低效率的方法呢?疑惑

     

    小超跟大家解释说,虽然这种方法是耗时长,但是这种切边的办法好处是后期维护方便,适合于长期使用,更换个别的产品图片时,不需要整个关联营销模板更换,缺点是开发投入时间多一点,还有需要掌握一定的代码知识。皱眉

     

    -----------------------------------------------------回归主题---------------------------------------------------

    今天小超教大家的方式,优点是1、不需要切片,2、不需要修改代码,3、大大节省时间,4、对于网页载入速度更快;

    同样,也有它的缺点:1、后期维护不便,2、不能单独修改个别产品图片;

    这里有些聪明的朋友应该就想到了,我要分享的就是Dreamweaver中的”热点工具胜利undefined

     

    如果同样一个关联销售板块用热点工具来做的话,我们可以把上述”一般切片方法“的2-3步都可以省略掉(而这几步也是最耗时间的),大概就10-15分钟便可完成。

     

    那什么是热点工具呢疑问?我个人的理解是,在图片或者网页上,设置一特定的区域(热点区域)并附有自定义页面的链接,只要网页用户浏览该图片或网页时,点击该区域内任何一个地方便可跳转到设定的自定义页面的工具。

     

    第一步玫瑰

    当然,需要准备好要做关联销售的图片,制作过程就忽略了,上传到图片空间,并获得对应的图片链接

    undefined

    第二步玫瑰

    打开Dreamweaver——》新建页面(把里面那些不相关的代码删除掉)——》把上一步复制的HTML代码,粘贴到代码区域,如下图

    undefined

    这里把代码粘贴进入后,图片就会显示出来了,然后我们需要点击一下图片,下面这个热点工具才会出现的。加油

     

    第三步玫瑰

    我们根据对应的图片来,设定热点区域,热点工具目前有三个形状”矩形、圆形、多变型“已经能满足我们的日常使用了,设置出来是这样子的

    undefined

    露齿笑怎么设置,就根据你们的图片来设置,而我这个就是该设置成这样子,下图

    undefined

    热点区域切多切少没关系,只要不影响到用户点击就好了,另外那些色块是不会显示出来的,所以不用担心,影响美观。胜利

     

    每一个热点区域,代表一个链接,所以必须在链接这里添加上对应产品链接。

    (下面那个”目标“里面的几个选项表示的是,你这个链接是在当前页面打开,还是新打开一个页面,跟我选这个就好了,_blank是新开打一个页面)安慰

     

    第四步玫瑰

    把代码粘贴到要用的地方,就可以了。

    做好后,代码是这个样子的,非常的精简。

    undefined

    然复制到详细页面的代码区域就可以用了傻笑

    undefined

    最后的成品,跟一般的网页链接没有两样,各位可以到小超的店铺首页看看成品飞吻

     

    https://k13cap.1688.com/

     

    好了,教程就到这里,有疑问的话,可以跟帖提问,小超有时间的话,一定会给大家回复的,感谢你耐心的看完。握手玫瑰

    东莞市小童军服饰有限公司
    1. 商家友圈官方圈
      人数:8.1万
    2. 2A以上商家圈
      人数:8.2万