手把手教你制作精美的淘宝网店宝贝促销区
宝贝促销区是旺铺非常重要的特色之一,促销区搞得好,很能吸引买家朋友的眼光,买家能一目了然地知道您的店铺在搞什么活动,有哪些特别推荐的宝贝~ 下面,让我们一起来学习如何设计一个宝贝促销区吧。
先看一下最终效果图吧,这是我昨天晚上为自己的小店赶制出来的,呵呵。想详细了解的朋友可以去我小店的首页看一下,欢迎提建议啊~ 图片尺寸比较大,如果被压缩了的话请点开看哈~
制作的过程如下:
第一步: 首先,确定了宝贝促销区的大小,最高是500像素,宽度的话,我定的是728,讨个吉利,呵呵。定了大小,就要设计一下版面啦,建议大家用纸笔画一下,把布局都详细地列出来,每个图片的大小也都计算好,做到心中有数、有的放矢。 草图:
第二步: 确定了每张图片的大小,就可以去把自己的宝贝图片处理成相应尺寸啦,然后再配上文字。处理图片及加文字的教程这里已经有很多了,我就不再赘述了。有一些小的经验,以后我会再发上来与各位分享。
第三步: 在photoshop中建一张728×500大小的图,然后把我们在第二步中处理好的图片都贴进去,位置都排整齐了。然后点菜单图层/合并可见图层,我们要把图“大卸八块”啦,这样可以方便地放到网页的表格里去。用photoshop的切片工具,把图像切成11块,呵呵。然后用菜单文件/存储为Web所用格式,存到您建好的文件夹里,您会发现变成11个图了。剩下的工作,就是把这些图填到网页里去。
第四步: 把处理好的这11个图传到网上去,网上存图片的空间很多,也有很多淘友介绍,我就不多说了,传上去之后把图片的网址都记下来,一会儿要填到我们的网页里去的哦。
第五步: 接下来我们要做网页啦,做网页当然是用大名鼎鼎的Dreamweaver。打开Dreamweaver之后,新建一个页面,然后我们先回过去看一下photoshop上的设计图。从图上我们可以确定,要建一个6行×4列的表格,宽度设为728,正好可以和photoshop上的排版一致,记得“边框”、“边距”和“间距”都要填“0”哦,不然很难看的。然后就可以把图片一张一张地插到表格里啦(点菜单插入/图像),当然,有的时候要合并单元格的哦。
插入图片后可能会将表格撑大,用鼠标拖动单元格的边缘可以调整单元格的大小。每个单元格也可以通过下方的表格属性栏来直接设置宽度和高度,调成和要插入的图片一样大小就可以啦。插入图片后单击图片,在下面图片属性栏里找到“链接”一栏,填入要链接到的宝贝页面的地址,这样别人一点这个图片就可以看到相应的宝贝啦。具体操作见图示~ 新建的表格:
合并单元格:
插入图片(注意是网上相册里图片的地址,不是本机硬盘里的哦):
表格属性:
将图片全部插入后的表格:
设置图片的链接:
第六步: 好了,从Dreamweaver里面看我们的工作已经差不多完成啦,下面点一下“代码”,切换到代码模式,依次按Ctrl-A、Ctrl-C把HTML源代码复制下来。然后到店铺管理里面,找到推广区,切换到源代码编辑模式,将复制的源代码粘贴进去就大功告成了~确定之前别忘了先预览一下有没有问题哦。 复制代码:
登录淘宝,进入“管理我的店铺”,找到促销区,填入然后提交就OK了: