淘宝旺铺自定义区装修代码和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>
以上是我个人的一点小经验,拿来与和我一样的新手们分享,不足之和还请有经验的前辈们指教。愿我们能在淘宝一直往前走。