淘宝自定义区装修代码与PS切片链接详解.docVIP

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