手把手教你在宝贝详情页面添加“宝贝关联营销图”

    本帖只要是将用PS和DW做宝贝关联营销图。总体分为三个部分，首先，利用ps做图，然后利用ps切图，最后用DW给图片加上链接。

    一：作图

   双击，建立新图层，名称的话，大家就取个自己容易记得的吧。参数如下

           因为宝贝关联营销图是放在宝贝详情页面的，所以宽度设置为“750”，高度的话，大家可以根据自己所做宝贝关联图片自定义。

 

 

二：图层建立“参考线”，进行平均分割

        为了能在之后作图过程中更加方便，所以我调出了“参考标尺”（快捷键为Ctrl+R“）。然后就在新建图层中打上你需要的文字，利用“参考标尺”对图层进行平均分割。

（因为只是给大家做个示范，分割的不是很平均，大家自己作图的时候注意点就可以了。

 

三：宝贝图片放进图层，制图。

打开需要作图的图片，然后点击中的工具，把所需要的图片拖进分割好的“宝贝关联营销”图层中去。

 

 

四：调整图片大小

       这时候图片的大小，不会刚好就在分割好的空白区域内，这时候我们可以将鼠标放在需要调整大小的图片上，按“快捷键Ctrl+T    ”对图片进行大小调整。  接下来图片大小的调整也是通过这个方式。把需要的图片放进去之后的效果图：

 

 

  五：切片

       做好了图片之后，要对图片进行切片。切片工具在ps中起着非常强大的作用，切片工具的运用并不困难。

       1.点击菜单栏中的切片工具图标（像钢笔头一样的形状） ，然后将鼠标放在需要切片图片的起始端，点击鼠标左键不放，直到图片的终端，放开鼠标左键。这样就可以在图片中切出想要链接的部分了。   

在你切下了图片之后，会显示蓝色图标跟灰色图标，蓝色图标部分代表你自己切下来的部分，灰色图标代表剩下部分。这个我们不用去理会他，不影响我们后面给宝贝加入链接。

        2.一张图片中，如果你想要两个地方链接，那就切两次。三个地方需要链接，就切三次，以此类推。因为我现在做的宝贝关联营销图是需要四个地方链接的，所以我切了四次。效果图如下：     

 

 三：保存图片

           切片工作完成之后，我们要进行对图片的保存。点击ps工作界面最左上端的“文件”，这时候我们可以看到有“存储为Web和设备所用格式”，点击它。然后会弹出一个窗口，在窗口的右边 ，

 （1）注意图片的格式：

       图片格式要选择“JPEG”模式。

 （2）注意图片的品质：

      之前用PS辛辛苦苦做的图，保存下来却变得模模糊糊，百度一下，才知道问题的所在，所以“品质”能决定图片的清晰度，品质越高，图片越清晰，但是数值越高，图片占用空间越大，所以我一般选择在“80-100”之间。 

 

  三：上传图片空间

        把刚刚用photoshop切下来的图片上传到图片空间，因为淘宝只认证淘宝空间的图片，其他地方的图片可能会显示不出来，把图片上传到淘宝图片空间中，也是为了获取图片的有效链接。

           接下来就是DW大展拳脚的时候了，也是最最最重要的时刻！

因为稍微有一个步骤少了，图片就不能在淘宝店铺中显示不出来了。电脑里面没有DW的盆友们，还不赶快去下载一个？帖主愚笨，不知道去哪里下载一个免费版本的，所以就下载了个“31天试用版”的。

   鼠标双击，出现这样一个画面

这时候点击，新建一个“HTML"新项目。   然后打开刚刚保存在电脑的”宝贝关联营销图"html. 这时候，我们就会在DW下面那块页面看到最开始我们用ps做的图片。  我们用鼠标点击一下图片，可以发现这些图片都是一块一块组合成的。（因为刚刚用ps对图片进行了切片）。

在图片下面那一栏“属性栏”，是我们给图片加上链接的重要栏目。

图片上3中不同颜色矩形框起来的，是接下来我们需要用的的，其他没有框起来的，我们就不用去搭理它了。

        红色框的那一栏“源文件”这里是我们上传到图片空间中相应图片的地址。下面黄色框的那一栏“链接”栏中是宝贝所需要链接的地址。例如，我们要链接的地址是淘宝首页的话，就是“http://***.taobao.com。但因为我们现在做的是宝贝关联营销图，所以我们要链接的地址就是相应宝贝页面的地址。 

        为了让大家看的更加明白，我把6部分的图片都标注上了编号。其中02.03.04号图片是需要链接的宝贝图片。01.05.06号是不需要链接的部分。可能我这样说，大家还不是很明白，所以在这两部分，我分别拿出一张图片来给大家示范。

 

 

四：给图片加入链接

 

         （1）：  给01号图片添加链接。因为这部分是不需要链接的部分，所以我们只需要将红色框框里面显示的地址（图片在电脑里面的地址）改成此宝贝在淘宝图片空间的地址，就可以了。

  五：到图片空间，找到对应的图片，复制图片链接，获取图片地址

  点击图片正下方的“链接”，就可以复制图片在淘宝空间的地址了

六：更改图片地址，添加超链接。

回到Deramweaver页面，将刚刚复制的图片地址粘贴在红色框“源文件”里面，黄色框“链接”跟宝蓝色款“目标”不用填写任何东西。05，06号空白区域跟01号同理。

 

       （2）给02号添加链接，因为这个区域是需要链接的部分，所以我们除了要把红色框“源文件”里面的图片地址改成该宝贝对应图片空间的地址以外。我们还需要将黄色框“链接”的空白框中加入此宝贝对应在店铺中的宝贝详情页面地址。宝蓝色“目标”框中，我们需要选择“blank”（blank意思是当你点击这个图片图片获得链接地址的时候，是在新的网页打开你的宝贝）

     根据以上步骤，用同样的方法获得02的图片地址，点击中红色框“源文件”进行修改，然后到自己的淘宝店铺，找到相应的宝贝，点击进去，复制该宝贝地址，返回到Deramweaver页面，粘贴到黄色框“链接”空白框中。

    再在宝蓝色“目标”框里选择“biank”就可以了 03，04号图片同理。

 

七：6个部分都添加了链接之后，我们就要获取代码了。

       点击图片中红色框“拆分”拆分的意思，就是把图片和代码同时可以观看。然后大红色框中的就是我们所需要的代码，“全选”然后复制出来。

八：进入宝贝编辑页面，放入复制的代码

        我们所做的“宝贝关联营销图”是放在宝贝详情页面的，进入到“卖家中心”找到“出售中的宝贝”对宝贝进行“编辑”。

        打开的宝贝编辑页是以图片的形式展示的，但我们现在需要将代码粘贴进去，所以我们要点击一下代码 ，这时候才是以代码形式在宝贝编辑框中出现。

    将刚刚复制的代码，粘贴进去。然后再点击，就会再以图片的形式出现， 只有以图片的形式展现，我们才能保存下来。（因为宝贝编辑框中是有字数限制的，而代码一般都很长，如果不再按，图片无法保存）弄完之后，别忘了按哦。   

九：  发布产品去了，赶快去看看自己的劳动成果吧 。