店铺装修如何将代码转成图片

5．5．1　教学目标

终极目标：了解店铺装修中各模块的编辑要求及方法。

促成目标：

（1）了解店铺装修的方法。

（2）了解各模块中对上传图片的要求。

5．5．2工作任务

总体任务：掌握店铺装修的方法。

具体任务：

（1）学会店铺装修的操作方法。

（2）掌握使用Photoshop工具制作店铺招牌的方法。

（3）了解店铺招牌在店铺中的作用。

5．5．3　能力训练

活动分工：学生3～4人一组。

活动器材：计算机，互联网，商品拍摄实训室。

活动内容：学生了解店铺招牌的尺寸，运用Photoshop工具制作完成店铺招牌，并上传到店铺中。

活动程序：

第一步：登录进入淘宝网，进入卖家中心，在左侧的菜单中选择“店铺装修”，进入到装修页面，单击“模块”按钮，如图5－30所示。

图5－30　店铺装修页面

第二步：鼠标移动到所需更改的模块，便会出现相关选项，选择“编辑”按钮进入店铺招牌的编辑模块，如图5－31所示。

图5－31　店招编辑模块

第三步：打开“店铺招牌”对话框，可以看到店铺招牌的尺寸（高度不超过120px），选择准备好的banner图片，单击“保存”按钮，如图5－32所示。

图5－32　修改店铺招牌

第四步：最后，回到店铺装修页面，在右上角有“预览”和“发布”按钮，先预览，如果觉得很满意，再单击“发布”按钮，如图5－33所示。

图5－33　发布效果

5．5．4　相关知识

开网店跟开实体店一样，装修是一个重要的步骤，只有吸引人眼球的装修才不至于淹没在多如牛毛的淘宝店铺中。

新手店铺信誉为零，或者信誉值很低，凭什么让买家相信你呢？如果把网店装修得很专业，会大大提升买家对页面的浏览量。

1）给客户一个好的第一印象

如果客户进入你的店铺，第一感觉是单调、乱糟糟、不专业那么肯定会影响他的购买欲望。相反，如果给他的第一印象是漂亮、美观、雅致、专业，会提高客户对你的信任，哪怕暂时不需要买什么东西，只是觉得这个店铺装修得漂亮，给人眼前一亮的感觉，就会先收藏起来。这样不是多了一个潜在客户了吗？

2）装修网店要注意整体搭配

很多新手到处找免费的东西，七拼八凑把网店装修起来了，还很得意，其实整个店花花绿绿的，给人的感觉就是不专业，客户看得眼睛眩晕，早就逃之夭夭了，哪还有心思继续逛下去？

装修完了，并不是万事大吉了，接下来要好好宣传。不宣传，再漂亮的装修，再好的商品，也不会有人知道，酒香也怕巷子深！网上几百万家店，如何能脱颖而出？这就需要网店与众不同。尤其要认识到商品图片的重要性，“同一件商品，因为拍摄的差异，会造成销售效果大相径庭”。在淘宝上，好图胜千言。大家可在家设置一个简单的摄影棚，光源用几百瓦的节能灯，即可拍出满意照片。具体方法在项目6介绍。

淘宝网店铺在装修之前要对普通店铺和旺铺做对比分析，了解旺铺的功能：①普通店铺只有首页，进入每一个分类都要从左边的分类栏进入。而旺铺除首页外，还可以增加6个页面。②普通店铺的首页显示80px＊80px的店标和一个公告栏，而旺铺的首页可以显示950px＊120px的店招，公告的大小和位置可以自由设定，而且旺铺除了首页外，还有6个页面，这6个页面的店招和公告都可以自行设计和制定。③普通店铺的店长推荐只有在首页上显示的6个商品，而旺铺的店长推荐是可以自由设置的，可以在多个页面中设置不同的推荐，不但有普通店铺的店长推荐功能，还可以按类目推荐或是按关键字推荐。

对于一些店铺的装修，可以用以下代码：

①插入公告挂饰：〈img src＝“图片地址”style＝“left：20px．position：relative．top：0px”／〉。

②公告里插入图片：〈img border＝“0”src＝“图片地址”／〉。

③插入公告图片：〈img src＝“公告图片地址”／〉。

④店铺分类代码：〈img src＝“图片地址”／〉。

⑤背景音乐代码：〈bgsound loop＝“－1”src＝“音乐地址”〉〈／bgsound〉。

⑥在图片里附加音乐的办法：〈img border＝“0”src＝“图片地址”dynsrc＝“音乐地址”／〉。

⑦浮动的图片的代码：〈／td〉〈／tr〉〈／table〉。〈img alt＝“1”height＝“150”src＝“图片地址”／〉。

⑧换行代码：需要在想换行的位置输入〈br〉，如果输入一个〈br〉，那就是另起一行；如果连续输入两个，即〈br〉〈br〉，那就会空一行。

⑨自定义颜色

代码：〈font color＝blue〉一元拍〈／font〉。

注解：〈font color＝blue〉〈／font〉是一对控制文字颜色的代码，等于号（＝）后是颜色值。可以更换为其他颜色，如red（红）、blue（蓝）、green（绿），也可用＃000000～＃ffffff的形式（不过注意代码的总长度不要超过40bit）。代码中间的字可以换成自己想要的字。

⑩定义粗体

代码：〈b〉重要提示〈／b〉。

注解：〈b〉〈／b〉是一对让中间字粗体显示的代码。代码中间的字可以换成自己想要的字。

定义斜体

代码：〈i〉重要提示〈／i〉。

注解：〈i〉〈／i〉是一对让中间文字斜体显示的代码。代码中间的字可以换成自己想要的字。

字体大小

代码：〈font size＝“2”〉。

这里放要处理的文字，可用2、3、4等设置大小〈／font〉。

5．5．5　思考与练习

（1）给自己的淘宝店铺制作一个banner，并试着装修，发布看看效果。

（2）淘宝平台除了PC端店铺外，还有手机淘宝店铺，请登录卖家中心，装修无线店铺。