您所在的位置:味学网学习教育开网店网店装修教你设计制作精美个性化的淘宝旺铺促销区

教你设计制作精美个性化的淘宝旺铺促销区

日期:10-27| 味学网| http://www.weixiu6.com |网店装修 |人气:486

教你设计制作精美个性化的淘宝旺铺促销区由http://www.weixiu6.com整理发布,类别:网店装修, 本站还有更多关于淘宝网店装修教程,免费网店装修,网店装修教程方面的资料。

  宝贝促销区是淘宝旺铺非常重要的特色之一,促销区设计得好,很能吸引买家朋友的眼光,买家能一目了然地知道您的店铺在搞什么活动,有哪些特别推荐的宝贝~

  下面,让我们一起来学习如何设计一个旺铺促销区吧。

  先看一下最终效果图吧,这是我昨天晚上为自己的小店赶制出来的,呵呵。

  想详细了解的朋友可以去我小店的首页看一下,欢迎提建议啊~

  图片尺寸比较大,如果被压缩了的话请点开看哈~

  

  制作的过程如下:

  第一步:

  首先,确定了宝贝促销区的大小,最高是500像素,宽度的话,我定的是728,讨个吉利,呵呵。

  定了大小,就要设计一下版面啦,建议大家用纸笔画一下,把布局都详细地列出来,每个图片的大小也都计算好,做到心中有数、有的放矢。

  草图:

  

第二步:

  确定了每张图片的大小,就可以去把自己的宝贝图片处理成相应尺寸啦,然后再配上文字。处理图片及加文字的教程这里已经有很多了,我就不再赘述了。有一些小的经验,以后我会再发上来与各位分享。

  第三步:

  在photoshop中建一张728×500大小的图,然后把我们在第二步中处理好的图片都贴进去,位置都排整齐了。然后点菜单图层/合并可见图层,我们要把图“大卸八块”啦,这样可以方便地放到网页的表格里去。用photoshop的切片工具,把图像切成11块,呵呵。然后用菜单文件/存储为Web所用格式,存到您建好的文件夹里,您会发现变成11个图了。剩下的工作,就是把这些图填到网页里去。

  

  第四步:

  把处理好的这11个图传到网上去,网上存图片的空间很多,也有很多淘友介绍,我就不多说了,传上去之后把图片的网址都记下来,一会儿要填到我们的网页里去的哦。

  第五步:

  接下来我们要做网页啦,做网页当然是用大名鼎鼎的Dreamweaver。

  打开Dreamweaver之后,新建一个页面,然后我们先回过去看一下photoshop上的设计图。从图上我们可以确定,要建一个6行×4列的表格,宽度设为728,正好可以和photoshop上的排版一致,记得“边框”、“边距”和“间距”都要填“0”哦,不然很难看的。然后就可以把图片一张一张地插到表格里啦(点菜单插入/图像),当然,有的时候要合并单元格的哦。插入图片后可能会将表格撑大,用鼠标拖动单元格的边缘可以调整单元格的大小。每个单元格也可以通过下方的表格属性栏来直接设置宽度和高度,调成和要插入的图片一样大小就可以啦。插入图片后单击图片,在下面图片属性栏里找到“链接”一栏,填入要链接到的宝贝页面的地址,这样别人一点这个图片就可以看到相应的宝贝啦。具体操作见图示~

  新建的表格:

  

  合并单元格:

  

  插入图片:

  

  表格属性:

  

  将图片全部插入后的表格:

  

  设置图片的链接:

  

  第六步:

  好了,从Dreamweaver里面看我们的工作已经差不多完成啦,下面点一下“代码”,切换到代码模式,依次按Ctrl-A、Ctrl-C把HTML源代码复制下来。然后到店铺管理里面,找到推广区,切换到源代码编辑模式,将复制的源代码粘贴进去就大功告成了~确定之前别忘了先预览一下有没有问题哦。

  复制代码:

  

 登录淘宝,进入“管理我的店铺”,找到促销区,填入:

  

  至此淘宝旺铺促销区就完成啦!!


如果觉得教你设计制作精美个性化的淘宝旺铺促销区不错,可以推荐给好友哦。
本文Tags:淘宝网店装修教程,免费网店装修,网店装修教程,淘宝网店装修教程,免费网店装修,网店装修教程,开网店,