小编分享如何在宝贝详情页面添加宝贝关联营销图。

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

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

2

利用ps切图

做好了图后，我们就要对图片进行“切片”处理了，为方便切片我们可以在图层建立“参考线”，进行平均分割。

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

3

添加宝贝图片

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

在PS中继续打开要做关联的宝贝图片，然后用PS的移动工具（下图第一个图标）把宝贝图片移动到分割好的关联图图层上。如下图

4

调整图片大小

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

5

切片

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

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

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

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

保存图片

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

保存的时候还要注意两点：

（1）注意图片的格式：

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

（2）注意图片的品质：

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

上传淘宝图片空间

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

dreamweaver上场

打开dreamweaver（DW），新建一个“HTML”新项目。 然后打开刚刚保存在电脑的”宝贝关联营销图”html。然后我们就会看到如图。

用DW添加链接（一）

我们用鼠标点击一下图片，可以发现这些图片都是一块一块组合成的。（因为刚刚用ps对图片进行了切片）。

在图片下面那一栏“属性栏”，是我们给图片加上链接的重要栏目。图片上3中不同颜色矩形框起来的，是接下来我们需要用的的，其他没有框起来的，我们就不用去搭理它了。红色框的那一栏“源文件”这里是我们上传到图片空间中相应图片的地址。下面黄色框的那一栏“链接”栏中是宝贝所需要链接的地址。例如，我们要链接的地址是淘宝首页的话，就是“http://***.taobao.com。但因为我们现在做的是宝贝关联营销图，所以我们要链接的地址就是相应宝贝页面的地址。 为了让大家看的更加明白，我把6部分的图片都标注上了编号。其中02.03.04号图片是需要链接的宝贝图片。01.05.06号是不需要链接的部分。可能我这样说，大家还不是很明白如何关联营销，所以在这两部分，我分别拿出一张图片来给大家示范。

用DW添加链接（二）

（1）： 给01号图片添加链接。因为这部分是不需要链接的部分，所以我们只需要将红色框框里面显示的地址（图片在电脑里面的地址）改成此宝贝在淘宝图片空间的地址，就可以了。到图片空间，找到对应的图片，复制图片链接，获取图片地址，点击图片正下方的“链接”，就可以复制图片在淘宝空间的地址了

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

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

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

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

获取代码

6个部分都添加了链接之后，我们就要获取代码了。点击图片中红色框“拆分”拆分的意思，就是把图片和代码同时可以观看。然后大红色框中的就是我们所需要的代码，““全选”然后复制出来。