Question

如何在宝贝详情页面添加宝贝关联营销图？

Answer 1

利用ps做图\x0d\x0a打开PS，建立新图层，名称的话，大家就取个自己容易记得的吧。参数如下图：\x0d\x0a因为宝贝关联营销图是放在宝贝详情页面的，所以宽度设置为“750”，高度的话，大家可以根据自己所做宝贝关联图片自定义。\x0d\x0a\x0d\x0a2\x0d\x0a利用ps切图\x0d\x0a做好了图后，我们就要对图片进行“切片”处理了，为方便切片我们可以在图层建立“参考线”，进行平均分割。\x0d\x0a为了能在之后作图过程中更加方便，所以我调出了“参考标尺”（快捷键为Ctrl+R“）。然后就在新建图层中打上你需要的文字，利用“参考标尺”对图层进行平均分割。\x0d\x0a\x0d\x0a3\x0d\x0a添加宝贝图片\x0d\x0a宝贝图片放进图层，制图。\x0d\x0a在PS中继续打开要做关联的宝贝图片，然后用PS的移动工具（下图第一个图标）把宝贝图片移动到分割好的关联图图层上。如下图\x0d\x0a\x0d\x0a4\x0d\x0a调整图片大小\x0d\x0a这时候图片的大小，不会刚好就在分割好的空白区域内，这时候我们可以将鼠标放在需要调整大小的图片上，按“快捷键Ctrl+T”（编辑-自由变换）对图片进行大小调整。接下来图片大小的调整也是通过这个方式。把需要的图片放进去之后的效果图：\x0d\x0a\x0d\x0a5\x0d\x0a切片\x0d\x0a做好了图片之后，要对图片进行切片。切片工具在ps中起着非常强大的作用，切片工具的运用并不困难。\x0d\x0a1.点击菜单栏中的切片工具图标（像钢笔头一样的形状），然后将鼠标放在需要切片图片的起始端，点击鼠标左键不放，直到图片的终端，放开鼠标左键。这样就可以在图片中切出想要链接的部分\x0d\x0a在你切下了图片之后，会显示蓝色图标跟灰色图标，蓝色图标部分代表你自己切下来的部分，灰色图标代表剩下部分。这个我们不用去理会他，不影响我们后面给宝贝加入链接。\x0d\x0a2.一张图片中，如果你想要两个地方链接，那就切两次。三个地方需要链接，就切三次，以此类推。因为我现在做的宝贝关联营销图是需要四个地方链接的，所以我切了四次。效果图如下：\x0d\x0a\x0d\x0a保存图片\x0d\x0a切片工作完成之后，我们要进行对图片的保存。点击ps工作界面最左上端的“文件”，这时候我们可以看到有“存储为Web和设备所用格式”，点击它。然后会弹出一个窗口。\x0d\x0a保存的时候还要注意两点：\x0d\x0a（1）注意图片的格式：\x0d\x0a图片格式要选择“JPEG”模式。\x0d\x0a\x0d\x0a（2）注意图片的品质：\x0d\x0a之前用PS辛辛苦苦做的图，保存下来却变得模模糊糊，百度一下，才知道问题的所在，所以“品质”能决定图片的清晰度，品质越高，图片越清晰，但是数值越高，图片占用空间越大，所以我一般选择在“80-100”之间。\x0d\x0a\x0d\x0a上传淘宝图片空间\x0d\x0a把刚刚用photoshop切下来的图片上传到图片空间，因为淘宝只认证淘宝空间的图片，其他地方的图片可能会显示不出来，把图片上传到淘宝图片空间中，也是为了获取图片的有效链接。\x0d\x0adreamweaver上场\x0d\x0a打开dreamweaver（DW），新建一个“HTML"新项目。然后打开刚刚保存在电脑的”宝贝关联营销图"html。然后我们就会看到如图。\x0d\x0a\x0d\x0a用DW添加链接（一）\x0d\x0a我们用鼠标点击一下图片，可以发现这些图片都是一块一块组合成的。（因为刚刚用ps对图片进行了切片）。\x0d\x0a在图片下面那一栏“属性栏”，是我们给图片加上链接的重要栏目。图片上3中不同颜色矩形框起来的，是接下来我们需要用的的，其他没有框起来的，我们就不用去搭理它了。红色框的那一栏“源文件”这里是我们上传到图片空间中相应图片的地址。下面黄色框的那一栏“链接”栏中是宝贝所需要链接的地址。例如，我们要链接的地址是淘宝首页的话，就是“http://***.taobao.com。但因为我们现在做的是宝贝关联营销图，所以我们要链接的地址就是相应宝贝页面的地址。为了让大家看的更加明白，我把6部分的图片都标注上了编号。其中02.03.04号图片是需要链接的宝贝图片。01.05.06号是不需要链接的部分。可能我这样说，大家还不是很明白，所以在这两部分，我分别拿出一张图片来给大家示范。\x0d\x0a\x0d\x0a用DW添加链接（二）\x0d\x0a（1）：给01号图片添加链接。因为这部分是不需要链接的部分，所以我们只需要将红色框框里面显示的地址（图片在电脑里面的地址）改成此宝贝在淘宝图片空间的地址，就可以了。到图片空间，找到对应的图片，复制图片链接，获取图片地址，点击图片正下方的“链接”，就可以复制图片在淘宝空间的地址了\x0d\x0a\x0d\x0a更改图片地址，添加超链接\x0d\x0a回到Deramweaver页面，将刚刚复制的图片地址粘贴在红色框“源文件”里面，黄色框“链接”跟宝蓝色款“目标”不用填写任何东西。05，06号空白区域跟01号同理。\x0d\x0a\x0d\x0a给02号添加链接，因为这个区域是需要链接的部分，所以我们除了要把红色框“源文件”里面的图片地址改成该宝贝对应图片空间的地址以外。我们还需要将黄色框“链接”的空白框中加入此宝贝对应在店铺中的宝贝详情页面地址。宝蓝色“目标”框中，我们需要选择“blank”（blank意思是当你点击这个图片图片获得链接地址的时候，是在新的网页打开你的宝贝）\x0d\x0a\x0d\x0a根据以上步骤，用同样的方法获得02的图片地址，点击中红色框“源文件”进行修改，然后到自己的淘宝店铺，找到相应的宝贝，点击进去，复制该宝贝地址，返回到Deramweaver页面，粘贴到黄色框“链接”空白框中。再在宝蓝色“目标”框里选择“blank”就可以了。03，04号图片同理\x0d\x0a\x0d\x0a获取代码\x0d\x0a6个部分都添加了链接之后，我们就要获取代码了。点击图片中红色框“拆分”拆分的意思，就是把图片和代码同时可以观看。然后大红色框中的就是我们所需要的代码，““全选”然后复制出来。\x0d\x0a\x0d\x0a进入宝贝编辑页面，放入复制的代码\x0d\x0a我们所做的“宝贝关联营销图”是放在宝贝详情页面的，进入到“卖家中心”找到“出售中的宝贝”对宝贝进行“编辑”。打开的宝贝编辑页是以图片的形式展示的，但我们现在需要将代码粘贴进去，所以我们要点击切换到代码模式，这时候才是以代码形式在宝贝编辑框中出现。将刚刚复制的代码，粘贴进去。然后再点击切换模式，就会再以图片的形式出现，只有以图片的形式展现，我们才能保存下来。（因为宝贝编辑框中是有字数限制的，而代码一般都很长，如果不再按，图片无法保存）弄完之后，别忘了按确定哦。\x0d\x0a\x0d\x0a16\x0d\x0a步骤有点多，也是为了文图并茂，让大家看得更清楚，好跟着上面的一路能顺利的操作下来。做淘宝要的是能静心坐下来的态度，有这样的心态，我想这篇经验也不在话下了，学习过后，别忘了点一下赞，让后面更多的人都能看到学习！最后祝各位店家朋友生意兴隆！！！