自己动手不求人装修好你的网店旺铺。

         加入旺铺，也有半年了。呵呵，可是我的促销区可换了五六个。每次一换，朋友们到我店里看见后就是你的店店好漂亮哟，能不能教一教我怎么做啊。老实话，一个一个去教大家怎么做，真的好累；不过累还是不怕，怕的是我每天要上班，另外还有打理小店，一天很少会有空闲的时间。早就想写一个关于装修的帖了，但是我自知文笔不好，怕写了后大家看了也没帮助。并且现在淘宝大学里也有好多类似的帖，淘宝里高手如云，偶还真有点不敢现丑啊。但不写我平时又没有时间教大家如何去做，所以最后我还是鼓着勇气写下了第一篇装修帖，希望能对大家有所帮助。好了，先不罗嗦了。下面就教一教大家怎么样三招搞定一个漂亮的促销区吧。

         大家都知道要做一个促销区的模板，首先就是要设计一个模板图。当然，我们这里就不讲如何用PS设计模板图了。因为淘宝大学里关于PS的教程和平面图设计的帖子真是太多太多了，大家花点时间多看几个帖，应该就可以搞定了。一般，促销区模板宽740PX，高不限（建议560-740PX左右，不要太高）。在这里我就先介绍一下，做一个促销区模板所需要用两个软件，即：Photoshop（简称：PS）、Dreamweaver8.0(简称W)；如果你想把模板做动画的，则还需要用Fireworks8.0。好，现在我们就开始讲如何做了。

第一招：图片切割，保存Web所用格式

        大家先用PS设计好一张模板图以后，下一步就是切割了。所以在切割之前大家先思考一下，这张图如何切割、分几个区去切割才使切出来的图片最少；想好后再用参考线分好。大家请看图：

（请看例图：分成5行大区，大区中又包含了各个小图。提示：在PS中，切割工具的快捷键是按K，切割选择工具的快捷键是Shift+K）

大家把图切割好以后，再把图保存为WEB所用格式。其操作：点PS左上方“文件”，打开菜单后单击“另存为Web所用格式”。如图:

点击“另存为WEB所用格式”以后，将会进入以下界面：

这里大家要注意的是：仔细检查一下各个切图之间是否有缝隙，如果有、则用切割选取工具调整。检查好以后，就要设置好右边的数据。如下：

（一般我们设置都是选JPEG HIGH  品质为60）

设置好以后，点击“确定”。

选择保存路径，写好文件名，点“保存”，将出现以下对提示：

点“确定”。做到这里，第一步我们算是完成了，PS先不要关，接下来我们就是在DW里设计了。大家一定要记清楚刚才我们保存好了的那个文件的路径，最后我们还要把那些图片传到网上去。

第二步：设置图片

 首先，我们先打开DW后，背后建一个HTML基本文件；然后点击“设计”，回到图片设计工作区。

接下来，我们是插入表格，然后把刚才我们所保存好的每一张小图都插入到每一个表格中。（千万注意：如果将要插入的图片是背景图的话，那就一定先套一个与图一样大小的表格，因为背景图片将不会自动调整大小）（解释：背景图是指将要在这个图上面写文字或是插入图片的图）

前面我们讲过在PS中切割图片时，要分析好把图片切成几个大区。之所以要把图片分成几个大区切割小图片，是因为好在这里设计表格插入各张图片。这样的话，我们就好编辑每一个小地方。就以本例来讲，我是把图片分成了5行，所以在DW在插入表格则是5行1列。

点击菜单栏中的“插入”，选择“插入表格”单击进去，将弹出以下对话框：

（宽度是设置你模板图的总宽度，这里是740像素，边框、边距都设为0）

设置好后，点确定。插入表格后，我们再到设计工作区的底下属性栏那里设置表格的高度。如图：

（提示：表格属性里可以修改各个参数。如宽、高、行、列数等等）

设置好以后，首先我们将可以直接插入图片的表格里插入图片（也就是说不需要再套表格，或是不要在该图上填写文字或插入图片的图片）。如例中的第1、30、38这个张图是可以直接插入的。方法如下：

点击插入图像。

在这里找到我们开始保存图片的文件夹，与PS中切割图的编号对应找到相应的图；点确定后，将出现以下这样的提示：

这里可以忽略，选择否。

这里大家也可以先点击“取消”，这样，第一张图就成功的插入完成了。用同样的方法，把各张可以直接插入的图片放进去，这里我就不再一一讲解了。

当大家插入表格时不知道将要放入的图片的宽、高是多少时，则可以回到PS软件中查看该切割的图片的大小。方法如下：

先用切割选取工具选择你想要知道的宽高的图片，然后右键单击鼠标，点击“编辑切片选择”。从下图中，可以看到W：5     H：196    这两个值就是这张图片的宽与高度。

需要注意的是：在PS中切割图片时，将会有很多小图，而且在设计时将会有很多地方需要在图片上写宝贝的名称、或是促销活及价格等文字。因此，像这种小图将可以将几张种图组成一个区，先插入一个几行几列的表格，然后再将各张小图套入各个表格中去。前面解释过了背景图，在这里我再重复一下，如果是不要在该图片上写文字或是插入宝贝图的，则可以直接插入图片（如上图方法一样）；如果是要在该图片上写文字或是插入宝贝图的话，则应该把该图插入为背景图。

方法：点击上图中背景框右侧的那个“文件夹”图标，然后选择相应的图片，方法同上。举一反三，用相同的方法，将各张零碎的小图用表格套成一个整体；每一张图都相当于一个机械上的一个零件。

把图用表格套整好后，我们则可以在你想要写文字的地方填上文字，想放入宝贝图片的地方插入图片。如果你是想让宝贝图是动画的，你则可以先做好动画，然后再插入。方法和上面是相同的，但有一个条件就是你要写文字或插图下面的图片必须是插入成背景图，否则将不行。

当你在公告栏中写后文字后，如果你想让文字上下滚动，其实也很简单，请看下图：

你只要在文字

的前面加上      文字后的

后面加上；文字就可以滚动了。

direction是滚动方向的意思  UP是向上   Lift向左；scrollamount是速度 一般设为3   width是宽 height是高。如果想让图片滚动，方法也类似。

在促销模板上加上旺旺的图标，方法是先把旺旺的链接复制好后，选着你要放上旺旺图标的表格，然后再回到代码的设计区，在该图的链接后面粘帖就行啊。如下图：

好了，做到这里，我们算是完成了一半，最后也是关键的一步了。我们刚才做出来的图都只是在本地电脑上的，放在店里是不会显示的。所以我们先要将这些图片上传到一个网站空间里去，（推荐给大家一个很好的图片空间：www.51.com，51空间虽然放不了大图，但是小图还是能放好多的，并且还是免费的）。上传完之后，我们就把DW表格中每一张图片的链接换成网上的链接。方法是：

上图是直接在表格中插入图片的，大家先相对应地把网上的图片的链接复制好，然后再把它粘贴在源文件右侧这个框里（记得先把这个框里的文件全去掉哦）。源文件下面的这个链接指的是外链接，意思就是如果当别人点一下这个图就可以直接到你填在这里的链接的网站上去。替换，就是当别人的鼠标在这张图上里出现的文字。

下图是背景图的,方法同上。

全部的图片链接换完后，保存。按F12查看效果。在这里基本上算是已经完成了。

最后一步，也就是点代码，到代码工作区里全选复制代码，拷贝到店店里保存。

怎么样，容易吧。你也快去试试，也许第一次不会成功，但多试2次就一定会成功的。文笔不太好，也许写了这么多大家都还没看明白，不过不要紧，不什么不明白的地方，可以随时旺我哦！我一定会尽力帮助大家的。

aa33.com

推荐阅读：

淘宝网上购物如何货到付款？

店铺子账号身份认证公告，不认证将冻

淘宝神笔是什么?入口在哪?收费吗?

淘宝宝贝主图视频如何添加

红色简洁版淘宝宝贝描述模板