淘宝旺铺自定义区装修代码和PS切片使用详解 新手使用
我也只是一个新手，小店装修了没花钱，自己简单弄了下，因为是现学现卖，装修的自己也不满意，而且速度很慢，不过了胜于无吗，先凑和着吧，慢慢慢学习改进吧。现在把我的一点小小经验给新手们分享下哈
PS设计部分就不说啦，肯定要先会PS啦。首先，用photoshop打开设计好的效果图（可以是保存的图片格式也可以是PS分层原图），先择工具箱中的“切片工具”
打开”视图“菜单，选择”对齐到-文档边界“，这样是为了确保切片大小和原文档大小一样，不损坏原图的效果，如下图
这样就可以使用切片工具从文档的左上角拉到右下角，先拉出一个框，然后点击右键选择”划分切片“，出现如下选项框
把图片切分成三个切片，因为我做的这张图三个人物基本是平均分布的，填好数值后确定就可以啦。所以可以这样操作，若是切片大小不一样，就要一个一个划分了，这时候最好是选
择”视图-对齐到-切片“，这样是为了切片与切片之间对齐，做出来的图传到网页上图片与图片之间不会有缝隙。划分好切片后使用工具箱中的“切片选择工具”选中需要编辑的切片点击右键，出现如下选项框：
打开你的淘宝店，在“出售中的宝贝”中到你所编辑的这款宝贝，点击”复制链接“，粘贴在如上图“URL(U)”选项框中，这样在网页上只要鼠标点击这个宝贝就会链接到些宝贝的详情页，这对应的是代码中“<a href="。在“ALT标记(A)”输入鼠标移动在此切片位置时显示的文字，也
可以不填，这里对应的是代码中”alt="。设置完毕就要把切处存储起来，点击”文件-存储为Web和设备所用格式“，在弹出的选项框中选择切片存储的格式等点击下面的”存储“，这样将生成一个”images"文件夹和一个“html"文件。images文件夹里存储的是划分好的切片，将其上传到淘宝图片空间，html文件里可以预览效果，用Dreamweaver打开可以看到生成的代码，其实我们可以不用Dreamweaver，在我们打开的“存储为Web和设备所用格式”选项框中点击左下角的“预览”，上面是预览的效果，再往下面便是我们需要的代码啦，我们把从<table 到 </table> 这部分复制粘贴到淘宝的自定义区，然后把我下面写的那段代码中的红字部分替换掉，这时我们只需要替换图片链接地址就可以啦，“目标宝贝链接地址”和“鼠标移动到图片上显示的文字”已经设置好了，图片尺寸已自动生成。代码详解部分就是下面的内容啦
以上是效果图，图上我放了三个宝贝，分别点击宝贝就会链接到相应的宝贝详情页。代码如下：
<table border="0" cellpadding="0" cellspacing="0" class="" height="图片总高度" width="图片总宽度">
<tbody>
<tr>
<td>
<a href="目标宝贝链接地址"><img alt="鼠标移动到图片上显示的文字" border="0" height="图片高度" src="图片链接地址" width="图片宽度" /></a></td>
<td>
<a href="目标宝贝链接地址"><img alt="鼠标移动到图片上显示的文字" border="0" height="图片高度" src="图片链接地址" width="图片宽度" /></a></td>
一份完整的网页代码和效果图<td>
<a href="目标宝贝链接地址"><img alt="鼠标移动到图片上显示的文字" border="0" height="图片高度" src="图片链接地址" width="图片宽度" /></a></td>
</tr>
</tbody>
</table>
注意：更改链接时不能更改或删除把代码里的符号，只替换文字部分即可。
我这个用的是表格形式的，<table></table> 是一个表格，中间放一个 <tr> </tr>就是一行，行里放一个<td></td> 就是这个行的一个单元格，上面举例就是一个表格里一行放了三个单元格，这样你就会感觉明朗了吧 。
如下面这种情况需要把一行的单元格合并：<td colspan="3">，我的图是一行三个单元格
上面“美丽春季外套”那张图的代码为
<tbody>
<tr>
<td> colspan="3">
<a href="目标宝贝链接地址"><img alt="鼠标移动到图片上显示的文字" border="0" height="图片高度" src="图片链接地址" width="图片宽度" /></a></td>
</tr>
</tbody>
以上是我个人的一点小经验，拿来与和我一样的新手们分享，不足之和还请有经验的前辈们指教。愿我们能在淘宝一直往前走。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。