快消品货源批发市场
快消品货源分销平台
 
 
当前位置: 货源批发网 » 网商学院 » 网店装修 » 淘宝店铺装修 » 如何设置店铺首页促销闪动大图--动画图片多链接

如何设置店铺首页促销闪动大图--动画图片多链接

放大字体  缩小字体 发布日期:2024-02-25 21:58:30  来源:电商联盟  作者:乐发网  浏览次数:26

大家好 ,最近苦恼于自己的店铺太过于单调了,总是有种让人很沉闷的感觉 ,导致好东西好也卖不动啊,杯具啊 。所以经过我苦苦的学习和向高人请教终于有所收获 ,一头兴奋的把自己的店铺弄飞起来啦 !!当然,好东西要和大家分享啦 ,所以经过半天的草稿终于可以发表啦(PS:在这半天中收到来自旺旺的五花八门的广告,有经典的,搞笑的,各式各样都有,这网道现在真是像电视一样,在广告中插入节目啦,本来还在琢磨这店铺广告词怎么用呢,现在好了!不学自成了,以下省略99字。。。。。。)

好了,关于广告这东西如果各位看官有兴趣的我们在私底下再相互交流 ,进入正题吧,今天主要和大家讲的是如何让我们的店铺主页有漂亮的图片 ,让图片动起来,还可以在同一张图片设置多个链接,就像淘宝旺铺广告说的那样,随心所欲 ,想怎么玩就怎么玩 !

以前我都是叫淘宝上找人家帮设计模板,既花钱,又达不到自己想要的那个效果,总之就是说不清楚了,所以学好这本领,以后对于店铺装修我们也算是随心所欲啦!!

开始吧,在这过程中我们要准备两款软件,一个是美图秀秀,专门做图修图的好工具,还有一个是Adobe Dreamweaver CS4 制作网页的强大软件,这个主要是用来做代码的。大家不用担心 ,我准备了大量的图片说明,保证大家能看得懂 ,属于傻瓜教程,看图学习的。

还要注意一点,以下都是先文字说明,然后才图片指导在下面,大家可以配合图片就能通熟易懂!

开始: 打开美图秀秀软件,点击右上排的新建,

弹出新建图片的尺寸,设置好尺寸宽为800 高度600,背景颜色选择透明,然后点应用。

接下来显示刚才设置好的背景图,鼠标点击上面拼图,弹出让我们选择样式,点击第3个模板拼图(模板拼图里面有很多软件自带做好的模板,很漂亮,多种选择,非常适合新手)

找到右边的在线素材下面有很多模板可供我们使用,有几页,大家可以找一下自己喜欢的模板。看好后点击一下即可以进入模板编辑模式。

下面我们找一个简单一点的模板来举例:选定模板后来到编辑模式,默认边框颜色是白色,大家可以在左下方找到边框颜色选自己喜欢的颜色,现在我们选黑色做为边框颜色。

接下来开始插入图片了,找到我们想宣传的宝贝图片(选图片要以清晰漂亮的图片为主,最好是让人看了马上有购买欲望的 ,还要和小分块的尺寸差不多的这样有利于调整,图片可以事先用PS或者其他图片工具调好) 把鼠标放在小块上,双击就会弹出让你插入图片的窗口,找到要插入的图片,点打开,这时候显示图片插入板块的效果,在左上角的场景调整可以调整图片的大小和所使用的范围,把图片稍微调整到最佳效果就行了,如果感觉效果不好可以按刚才的步骤重新选择插入另一张图片。

这个板块完成后接下来到下一板块,还是按以上的方法依次把所有的板块都放上图片调整到最佳效果。

然后再调整一下尺寸,点右上角的尺寸选项,弹出一个尺寸修改窗口,我们在宽度里面改成950(950是整体页面的宽度,这样效果更饱满),单位确认为像素就可以了,其他的是自动改的,之后点应用,图片全部组合起来成整体的大图片。

在这里大家如果熟悉美图秀秀这款软件的使用,可以到上面的各项选项栏进行一些更深入的美容美化,这里我就不多说了,直奔主题吧,让图片动起来!!! 点击上方的饰品选项,然后再点左边下拉下来的淘宝专用选项(这款软件特有的淘宝专用,不知道是淘宝网开发的,还是合作,总之我们知道淘宝真是很好很强大!!),

进入淘宝专用以后我们把视线转移到右边,看到很多平常我们在淘宝上见到的一些图标字眼等等,有几百个供我们选择,安静的,会跳动的,会变大变小的都有,很强大吧,不用再为花样的LOGO和标题头痛了吧。看好我们想用的,鼠标点击一下就自动插入到图片中了,随之也弹出对这个插件的小编辑栏,可以调节透明度和旋转角度(这两项一般不用调)还有素材大小(这个是需要调整的,调到合适的大小看起来整体效果会更好),把鼠标放在素材上会显示四方的蓝色边框围着,这个也可以调查大小,不过主要是用来移动素材,把素材移到想放的位置即可,如果插入后感觉这个素材不合适,可以点一下素材编辑栏的删除本素材就可以了。在这边放多少个素材都可以的,按以上的步骤即可,但也不要贪心放得满屏花花乱乱的喔,这样是就显示不出重点所在了而且还会增加图片的大小,很多相册规定图片大小要在1M以内才能上传的。

在这里要说明一点,当大家在这里放闪动的素材进入图片的时候是它是显示不动的喔,因为这个是JPG图片,不过不用担心等下保存的时候我们改一下格式就会动了,现在在图片右上角点预览可以看到动的效果,预览后直接点x关闭,不要点保存以免出乱。

好了,现在我们插入这些有活力的素材后是不是感觉好多了, 但是好象还差点东西啊,是什么呢?当然是文字了,宣传没有文字不实际啊。这时候我们点击上面的饰品旁边的文字选项,这里有很多文字的样式,都是简单易学的。首先我们进点击左边的输入静态文字选项,点击之后立马弹出一个文字编辑框,让我们输入要插入的文字还有字体选项和网络流行的特殊字体很漂亮的,还有文字颜色的修改、文字大小、透明度、旋转度等。点击更多里面还有字体的样式、排列、阴影及搭边,这些都是通俗易懂的,根据自己的需要调节一下就好了,多调几次就熟悉了,如果不需要则点击编辑框的删除本文字即可,根据需要可以无处次的插入文字,和刚才我们说的插入素材是一样的。下面我们来插入一些会动的文字,视线转移到左边的下拉菜单选择动画闪字,进入该项后我们看到右边有很多样式的动闪的文字,根据自己的需要来选取样式吧,点击看好的样式后自动会弹出和刚才静态文字的编辑框,调整大小和颜色后就放好地方就可以了,也是可以放无限个的,但是还要说一次,不能贪心放太多,增加图片的大小!!

好了,经过这几步的学习相信大家应该对如何用美图秀秀做动态图片有所了解了,更深的了解和漂亮的图片主要还是还靠自己多学习和练习了。现在我们基本把一大张会动的图片做好了,来到最后一步,也就是最关键的一步,决定图片会不会动的,那就是保存了。我们来点击右上排的保存选项,弹出一个保存的窗口,很多人习惯的保存成JPG格式了,所以图片就不会动了,这里我们选择第二个选项[保存为动画图片]然后选择要保存的地方和图片名字就可以了。

当当当,这就是做好的会动会闪的图片啦

第一部大功告成了,大家可以幻想一下这样的效果放在店铺的感觉啦 ,费话少说马上进入第二部吧,我们准备一个强大的网页制作软件Adobe Dreamweaver CS4,这个软件在网上有很多地方有下载,软件有300多M下载可能要一个小时左右,做模板都需要准备的,也有破解版,100多M的,功能都一样,如果破到软件的问题可以旺旺M我,这个软件对新手来说比较复杂点,大家要用心学习啦 。下面我们开始吧,打开Adobe Dreamweaver CS4软件,点击新建下面的HTML选项,

之后将会进入一个代码繁多的面前,不要紧张,图文并茂,一学就会。把鼠标点在1区大的空白处,然后移动鼠标到上方的插入选项,点击插入,选项下拉第二个选项图像,

这时候弹出一个让我们选择要插入图像的窗口,找到我们之前做好的那张动态图片后点击确定,后会马上弹出一个窗口,少管闲事不用理它 ,直接点确定按钮,

后面又弹出另一个窗口!!!怎么回事,难道中病毒啦 ,不是啦!这个我们也不用管它,直接点确定,

当当当,我们的图片出现在空白处了,但是也还是不动的,这个我们先不管了,被点住穴了,呵呵,等下解开了自然能动。这时我们把鼠标移到右上边的常用菜单下的图像下拉的绘制矩形热点,因为我们的图片是四方的,所以选这个,如果需要做圆形的就点绘制椭圆热点,如果是不规则的就点绘制多边型热点。

之后我们回到图片上,在一个小板块边角处点一下鼠标左键,按住左键不要松开慢慢的拉开把整个小板块的图片拉满为止,简单的说就像QQ截图一样了。拉完后松开,这时候弹出一个窗口,不用理它直接点确定按钮,这时候我们发现在我们选中的区域被蒙上了,鼠标双击下面链接里的#字,把它删掉,

然后到我们的淘宝店铺里找到图片的宝贝相应的链接,复制该链接粘贴到这个链接框内,这样当我们鼠标点击该区域的时候就会进入到这个宝贝连接内啦。

下面我们按刚刚的方法依次把剩下的板块都做好相应的链接就可以啦了。做好之后把它的保存在起来,点击左上角的文件下拉到另存为,弹出窗口直接点保存按钮就行了。然后按F12预览一下,把各各板块点击一下看能不能转到连接,如果都转到连接证明我们成功了,如果有误的话从头再来看哪个环节出错啦。

预览没什么问题后接下来我们进入比较复杂而且关键的一步了 那就是代码了,点一下左下角的<body>处,点了之后图片上面的代码会被选中,把鼠标移到选中的区域点右键下拉菜单点拷贝选项复制该代码。

然后把代码粘贴到一个记事本上保存着。

接下来我们把刚才用美图秀秀做好的图片上传到图片空间,最好是用淘宝送的图片空间,稳定方便.上传图片以后,在图片空间复制图片的链接地址把它粘贴在刚才的代码记事本里面更换一下地址,

详细看以下图片说明,然后点保存,整个代码就做好啦!

接下来开始去装修我们的店铺了,进入我的淘宝再进入我的店铺首页,然后点击右上边角的装修此页面。

之后找好我们要在这个模板放在店铺的页头还是页中页尾,定好之后点击在此处添加新模块,

然后选择添加自定义区内容,这个模块是随便自己设计的,空间非常大,也正是我们这期要讲的,其他的暂时先不介绍,免得大家混乱 。

添加之后页面会出现一个自定义区内容的装修模板,我们点击编辑进入,一片空白,就是要这个效果,大家有过自行装修店铺的都应该来过这个页面。这时候我们鼠标移动到右边上角的最后一个图标,就是编辑HTML源码,点击一下该按钮,

然后复制刚才我们保存的记事本里面的编码,为了避免错漏,打开记事本后在编辑菜单中点击全选后再复制,

把它粘贴在自定义区内容的空白处,然后再点击一下右上角刚才点的那个图标,这时候刚才做好的图片显示在这里了,没错还是动的 ,活力闪硕 ,和大店铺一样啦 ,不再那么静悄悄啦 !!!点击一下保存就大功告成了,

最后别忘了点发步喔,不然又得重新来过啦,嘿嘿

发布,大功告成啦!!!!!!!!!!!!!!!!!!!

【在这里要强调一下如果你的店铺做多个模板一定要记得给代码改名字!如果不改名字的话那店铺里只认一个模板代码,相当于你用几个代码,但是连接都是一样的,会造成连接不对板,我之前碰到过这种情况,研究了半天才知道问题所在,如果碰到这种情况在这里看不懂的可以在线M我.改名字方法是,打开刚才保存好的记事本找到usemap="#Map" 和name="Map" 这两个里面,Map就是代码默认的名字,可以随变改成别的但第一个值必须相同,举个例子,如果你已经有个代码是usemap="#Map" 和name="Map",那你再做另一个模板时要改成usemap="#M1p" 和name="M1p" 改好之后记得保存记事本就行了】

乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。

本文内容整合网站:百度百科知乎淘宝平台规则

本文来源: 如何设置店铺首页促销闪动大图--动画图片多链接

分享与收藏:  网商学院搜索  告诉好友  关闭窗口  打印本文 本文关键字:
 
更多..资源下载
淘宝店铺装修图文
淘宝店铺装修如何实现全屏轮播 淘宝店铺,天猫店铺背景固定的方法。
淘宝装修子账号设置流程
淘宝店铺装修网商学院推荐
淘宝店铺装修点击排行
 
手机版 手机扫描访问