admin管理员组

文章数量:1537063

2024年5月20日发(作者：)

用Dreamweaver制作淘宝店铺模板代码

1. 第一步：设计自己要的促销模板的图样

我PS学的不好，嘿嘿，所以用的是美图秀秀，可牛，光影魔手等图片处理软件来做的图样，

嘿嘿

建议大家可以找框框多点的相框哦，这样就可以多弄几个作品图及连接了哦！！！

还有要注意的事，尽量选用*的框框哦，当然也可以根据宝贝的需要来定了！！！

在这里为了教程快点完成，就做了个简单的哦！！！如下图：

现在这个图片是JPG格式的哦！！！

2. 第二步：PS切片及转换图片格式

接下来这部就是把用美图秀秀做好的JPG格式的图片用PHOTOSHOP软件进行切片及转换

图片的格式哦

打开刚用美图做好的图片，然后选择工具拦里的切片工具进行图片切割

选中第一个框框后，大家可以发现，在夏普手机这个框框的时候，左上角有个编号3，而还

没有切的粉饼盒的

框框左上角也出现了一个编号，也就是说，其实这样一整张图都已经自动切片切好咯！！！

如下图：

然后将切片切好的图片转换为PSD格式的图片哦！！！

一下操作：点击左上角的 文件 菜单—》保存为—》会跳出一个 保存为 的框框—》在格式

的选项下拉 选择

PSD 的文件格式——》 确定 至于想要保存在哪里就自己去选择了哦，嘿嘿！！！

3. 第三步：使用Adobe ImageReady软件

现在切片好的图片是PSD格式的，所以在DW软件里是无法识别的哦！！

因此要借助IMAGEREADY软件来将PSD格式的图片转换为HTML的图片

用软件打开PSD格式的图片后不用做任何的处理，直接转换成HTML格式的图片哦

以下操作：点击左上角的 文件 菜单—》选择 优化结果存储为 —>会跳出一个 将优化结

果存储为 的

框框—> 找到保存类型 下拉选择 HTML和HTML图像 —》 保存

保存后，大家会发现在大家选择保存的文档里有个HTML的文件类型及一个images的文件

夹哦，

而这个文件夹里面的图片就是之前用美图秀秀所做的图片用PS切开后的每个图片哦，不可

以删掉的哦一会可是有用的呢！！！

在这里，我们要做一个准备工作，就是把IMAGES文件夹里面的每一个切开的图片都要上

传到自己的网络图片空间去哦！！！！！！！我所用的就是淘宝的图片空间了，上传好可

不要关掉哦，图片连接还没有复制呢，嘿嘿

4. 第四步：DW制作代码

用DW软件打开之前转换成HTML的图片，也就是第三步里一个蓝色 e 文件

在打开图片当中，大家可以把鼠标光标放在作品图框框里点一下，可以发现这个作品图的

框框是独立的哦！！！

这个就是PS切片工具的功劳哦！！！

然后大家在第一个夏普手机的框框里单击下后就可以看到图片下面的属性大框框哦！！！！！

在属性框框里，大家在 源文件 这个框框里面的全部删掉，然后把网络空间的夏普手机图

片连接粘贴进去

然后在源文件框框下面可以看到一个 链接 框框，就是这个夏普手机作品图片上加上大家

想链接的页面，在这里

我当然加上自己店铺里这个夏普手机的页面连接哦！！！

以此类推，后面一个粉饼盒的属性和夏普手机一样改哦！！！

改好后在左上角可以看到 代码 按键，点击代码后大家可以看到原来是图片界面变成了一

堆看不懂的代码

了，嘿嘿！！！！

5. 第五步：装修店铺

打开淘宝店铺，进入装修模式，进入大家想要编辑的区域，在复制代码前应该都知道，首

先要点击下

编辑拦里的 <> 编辑HTML源代码这一按键哦！！！！

然后粘贴在DW软件里面复制过来的代码后，在点击一下 <> 编辑HTML源代码按键然后

保存查看 我的店铺

就可以看到大家自己做制作的简易促销模板了哦！！！！！！！！

如下图：

然后大家可以试试点击下自己的作品图片就可以进入你所连接的页面了哦！！！

就这样，一个简单的促销模板完成了，嘿嘿！！！！

本文标签： 图片大家框框代码软件

版权声明：本文标题：用Dreamweaver制作淘宝店铺模板代码 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1716144543a488440.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。