返回列表

作者:巨人电商

手把手教你自己制作出漂亮的促销模板

POST TIME:2020-10-24

很多的卖家在逛淘宝店时会发现很多的店铺装修很美观,如打折模块和团购模块,自己想去问店主怎么制作,但是有几个淘宝卖家会告诉你呢,不过不要着急,下面让为你详解一番吧。今天我们讲的是如何用DREAMWEAVER做促销表格。     准备工作:DW CS5版本、PS CS5版本(DW全称Dreamweaver,PS全称Photo Shop,CS5为软件的版本,不同的版本所拥有的的功能也不同,建议学习本帖的同学还是下载相同版本的软件,如果您遇到问题,我才能很好的帮您解决)、纸笔等。     第一步:前期筹划:在制作表格促销模块时,我们得先考虑好表格的大小,以用来链接大小合适的图片,所以此时【纸笔】必不可少。首先,通栏的尺寸为950,所以表格的宽度定为950,具体的高度还是按照您自己要设置的大小来确定。我选择的表格大小是950*580,具体表格分布为5行7列。先弄出一个大概图给大家看看:          图中的白色部位占据一行或一列,彩色模块为图像占位符,用来链接图片的。     第二步:打开DW设计软件:新建一个HTML页面,快捷键为Ctrl+N,如图     布局选择【无】,点击右下角的【创建】,这样一个html页面就新建成功了。     因为是刚建好,没有添加任何的内容,所以此时的操作界面是白色的,如上图。     接着,我们点击【插入】菜单,这是可以看到【表格】项目,点击,在表格中输入【5行,7列,表格宽度950,边框粗细0,单元格边框、间距0,标题选择“无”】,如下图      这样,一个5行7列的表格就只做而成了,大家先看看效果图

    自动生成的表格是不居中的,所以选择右下角的【对齐:居中对齐】,这样表格就会呈现在页面的中央。大家这时是不是还觉得表格这么小,怎样将图片插入进去啊?呵呵,酸儒先傻笑一下……这样当然不能直接插图啊,首先要确定好各个单元格的大小,然后再将相应的图片插入,大家注意力集中啦,往下看:     在前面的大概图中,我已经标出了相应单元格大小了,左边的小方块为240*260的像素大小,右边的长方形为390*540的像素大小,其余白色部分的宽度或高度都是20px,这个只是教程中的大小,具体数据大小各位卖家可以自己设置的。切勿照葫芦画瓢,更多的还是需要自己多揣摩!     又有人会问,单元格的大小设置到底该怎么设置呢?各位亲,请别急,酸儒我先去喝口水!     首先,将鼠标定位在一个单元格中,此时在下面的【属性】栏中,会出现相应的属性,我先示范左边方格大小的设置,其他的设置雷同。     在下面的【属性】栏中输入【宽:240】、【高:260】,呈现出的效果如上图红色部分(红色是因为我在【背景颜色】中选择了颜色,方便大家查看区别,并无实际用处)。     按照,我的方法,将所有的表格大小确定好后,接着要做的工作就是将相应的促销图片放入表格中。这时先不着急插入图片,而是先插入一个【图像占位符】,主要是为了大家以后可以再次利用这个模块。     大家,还是先看到左上角的菜单栏【插入】,点击,选择【图像对象】→【图像占位符】,点击鼠标,出现如图对话框     在【宽度】、【高度】中输入相应的尺寸大小,接着在【颜色】项目中添加上颜色,这个步骤的主要作用是为了区分各个单元格的图像占位符,如此一个图像占位符就做成了。     接下来,将各个需要插入图像的单元格插入相应大小的图像占位符,写入您的促销广告,一个表格的促销模块就做好了。     有时候,你要制作的表格模块,边框是没有颜色的,选择的底色又是白色,没法区分开背景,此时你只需在【页面属性】中选择【背景颜色】,此时制作出来的表格就很刺眼了,看出了整体的布局。什么??不信??那你还是试试吧……     在刚做好的表格中,点击任意一个【图像占位符】,下面的【属性】栏中会出现相应的属性,在【源文件】一项中填入促销宝贝的图片,【链接】出填上相应的宝贝详情地址,【目标】处选择“_blank”,这个选项的作用是使被链接的宝贝能在新的窗口打开。     最后,插入事先做好的图片,最终的效果就出来了!