手把手教你用Dreamweaver制作淘宝店铺模板代码

制作软件：DREAMWEAVER（简称DW）PHOTOSHOP（简称PS）AdobeImageReady美图秀秀第一步：设计自己要的促销模板的图样没头脑的PS设计还不会使用，嘿嘿，所以用的是美图秀秀，可牛，光影魔手等图片处理软件来做的图样，嘿嘿大家不要拍我哦！！！建议大家可以找框框多点的相框哦，这样就可以多弄几个作品图及连接了哦！！！还有要注意的事，尽量选用横幅的框框哦，当然也可以根据宝贝的需要来定了！！！在这里为了教程快点完成，就做了个简单的哦！！！如下图：现在这个图片是JPG格式的哦！！！第二部：PS切片及转换图片格式接下来这部就是把用美图秀秀做好的JPG格式的图片用PHOTOSHOP软件进行切片及转换图片的格式哦打开刚用美图做好的图片，然后选择工具拦里的切片工具进行图片切割选中第一个框框后，大家可以发现，在夏普手机这个框框的时候，左上角有个编号3，而还没有切的粉饼盒的框框左上角也出现了一个编号，也就是说，其实这样一整张图都已经自动切片切好咯！！！如下图：然后将切片切好的图片转换为PSD格式的图片哦！！！一下操作：点击左上角的文件菜单—》保存为—》会跳出一个保存为的框框—》在格式的选项下拉选择PSD的文件格式——》确定至于想要保存在哪里就自己去选择了哦，嘿嘿！！！第三部：使用AdobeImageReady软件现在切片好的图片是PSD格式的，所以在DW软件里是无法识别的哦！！因此要借助IMAGEREADY软件来将PSD格式的图片转换为HTML的图片用软件打开PSD格式的图片后不用做任何的处理，直接转换成HTML格式的图片哦以下操作：点击左上角的文件菜单—》选择优化结果存储为—会跳出一个将优化结果存储为的框框—找到保存类型下拉选择HTML和HTML图像—》保存保存后，大家会发现在大家选择保存的文档里有个HTML的文件类型及一个images的文件夹哦，而这个文件夹里面的图片就是之前用美图秀秀所做的图片用PS切开后的每个图片哦，不可以删掉的哦一会可是有用的呢！！！在这里，我们要做一个准备工作，就是把IMAGES文件夹里面的每一个切开的图片都要上传到自己的网络图片空间去哦！！！！！！！没头脑所用的就是淘宝的图片空间了，上传好可不要关掉哦，图片连接还没有复制呢，嘿嘿第四步：DW制作代码用DW软件打开之前转换成HTML的图片，也就是第三步里一个蓝色e文件在打开图片当中，大家可以把鼠标光标放在作品图框框里点一下，可以发现这个作品图的框框是独立的哦！！！这个就是PS切片工具的功劳哦！！！然后大家在第一个夏普手机的框框里单击下后就可以看到图片下面的属性大框框哦！！！！！在属性框框里，大家在源文件这个框框里面的全部删掉，然后把网络空间的夏普手机图片连接粘贴进去然后在源文件框框下面可以看到一个链接框框，就是这个夏普手机作品图片上加上大家想链接的页面，在这里没头脑当然加上自己店铺里这个夏普手机的页面连接哦！！！以此类推，后面一个粉饼盒的属性和夏普手机一样改哦！！！改好后在左上角可以看到代码按键，点击代码后大家可以看到原来是图片界面变成了一堆看不懂的代码了，嘿嘿！！！！第五步：装修店铺打开淘宝店铺，进入装修模式，进入大家想要编辑的区域，在复制代码前应该都知道，首先要点击下编辑拦里的编辑HTML源代码这一按键哦！！！！然后粘贴在DW软件里面复制过来的代码后，在点击一下编辑HTML源代码按键然后保存查看我的店铺就可以看到大家自己做制作的简易促销模板了哦！！！！！！！！如下图：然后大家可以试试点击下自己的作品图片就可以进入你所连接的页面了哦！！！就这样，一个简单的促销模板完成了，嘿嘿！！！！更多教程请关注我哦呵呵旺旺：创e轩店铺地址