打造超级新颖详细旺铺促销栏教程

为例：taobill的店铺以经营迪士尼、hello kitty周边产品为主，（没有做广告哦，只是为了解说方便，店小二别来抓偶哦）所以尽量设计的活泼欢快的风格，，
为了与淘宝提供的颜色选择相统一，所以只能在上面这几种里面选择颜色的定位了。

红色代表热情、活泼、热闹、温暖、幸福、吉祥
橙色代表光明、华丽、兴奋、甜蜜、快乐
黄色代表明朗、愉快、高贵、希望
绿色代表新鲜、平静、和平、柔和、安逸、青春
蓝色代表深远、永恒、沉静、理智、诚实、寒冷
紫色代表优雅、高贵、魅力、自傲
白色代表纯洁、纯真、朴素、神圣、明快
灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞
黑色代表崇高、坚实、严肃、刚健、粗莽

这个是色谱表

本店就选择了橙色作为主色调，黄绿色为附色起着搭配衬托的作用；充分体现活泼、兴奋、青春、快乐的风格。
这张是偶设计的平面图（因为淘宝有版面尺寸限制的，尽量控制在735*500像素范围之内）



对于新手来说可能有点难度，不知所措；但只要我们找好素材还是可以应付，可以把找好的图片拼凑在一起，不就是具有创新意义的“鸡尾酒“了吗？

2.下一步教大家怎么把这张图分割成小块好排版成网页。

1）用photoshop打开图片，选择视图—标尺，拉出参考线，把图片划分成各个小块的区域。





这是标尺线划分出来的等会就沿着标尺线分割。分割的越小块，网页下载速度越快，2、8区域之所以要这么大块是因为这里要加滚动的内容。

2）用切割工具正式切割。选择切片工具刀



用切割刀沿着标尺线切割，如图



存储为Web格式


，
这是存储后的小图：



好了，photoshop部分就此结束，下面Dreamweaver上场；在用dreamweaver前先把图片上传到相册空间里头并把图片网址记住。

3.把图片排版转化成Html格式的网页。

1）打开软件后，选择文件——创建——基本页——Html,点击创建就可以建一个新文档；我们现在就用表格排版是最直接方便的。
因为淘宝有版面尺寸限制的，尽量控制在735*500像素范围之内。

2）插入——表格




表格属性为宽753，高不限，列数为3列，行数1行；（以偶的图为例设置，淘友们具体要按照自己的情况来设置）。继续往下插入表格，这里插入了4大表格（行数1行，列数分别为3、4、2、3），因为我的图片切割成4大行。


3）插入小图片。按照整张平面图的顺序来分别往表格里插入小块图片

修改第二列的宽和高，设置成将要插入的图片一致的尺寸；

这是做滚动文字公告的版块，滚动文字怎么做稍候在下面再作详细讲解。

注意：凡是要往表格里头输入内容的都要把图片设为背景的方式加入图片，下面图片左右滚动也是这种方法。下面继续往表格里插入图片，依照上面的方法继续插入，就不再一一讲解了。


3）下面介绍如何制作滚动公告。

在空白处插入如下代码：
<MARQUEE scrollAmount=1 scrollDelay=50 direction=up width=350 height=130 >
<br />
适逢本店于<span style="color: #9900FF">2008年3月5日正式营业，开展开业大酬宾活动：联系方式：手机：1581977811456  QQ:380027325</span>
</MARQUEE>

红色的<MARQUEE scrollAmount=1 scrollDelay=50 direction=up width=350 height=130 ></MARQUEE> 是令文字滚动的代码，中间紫的是要滚动的文字。

scrollAmount  表示循环的次数
scrollDelay   表示滚动的速度

direction 表示滚动的方向（up=向上、down=向下）
把direction=up换为behavior=alternate就变成左右滚动了
Width 表示滚动的宽度
Height 表示滚动的高度

3.用Dreamweaver给图片排版基本就完成了，现在把Dreamweaver里的代码复制到淘宝管理店铺的促销栏就可以了。
1）

2）回到淘宝旺铺促销栏编辑页面。

回到可视编辑界面

这时我们可以再次编辑文字的颜色、大小等等。