09
2015
03

如何使用全屏代码生成器制作多屏固定背景效果

教程所使用的软件:天猫美工王v1.0或者淘宝美工助理v1.5.
本教程以天猫美工王为例。


 


教程使用的工具:
 



示范店铺:
http://ca***sely.tmall.com

模块效果:固定背景+上层内容滚动,可制作整个页面多个固定背景!

 

—————————————————————————————————————————————————————

首先在360极速浏览器中,打开首页,这是一个天猫店铺。
将页面拉到底部查看,我们发现该店铺购买了JS模板。
购买了模板的店铺,页尾部分会标注有模板开发商的名称。

 




接下来,我们找到需要提取代码的模块,点击右键,选择审查元素

 





根据分析,这个模块的class属性不完整。我们只提取出其中的table部分即可。
右键单击teble开始的地方,在右键菜单中选择copy as html,不懂是什么意思,请找百度翻译一下。

 






然后打开天猫美工王的编辑器:

 





右键粘贴我们刚才复制的代码,点击预览

 





最大化窗口,或者拖动下面的滚动条,即可查看代码的预览效果。
预览完成后,我们关闭编辑器。

 




下面是我们提取到的代码:

  1. <font size="3"><font size="3"><table width="1920" height="549" border="0" cellpadding="0" cellspacing="0">

  2.         <tbody><tr>

  3.                 <td>

  4.                   <img src="http://img02.taobaocdn.com/imgextra/i2/1070931774/T2IADRXuJXXXXXXXXX-1070931774.png" width="465" height="549" alt=""></td>

  5.                 <td>

  6.             <img src="http://img03.taobaocdn.com/imgextra/i3/1070931774/T2es2RXy8XXXXXXXXX-1070931774.png" width="495" height="549" alt=""></td>

  7.                 <td>

  8.                   <img src="http://img02.taobaocdn.com/imgextra/i2/1070931774/T2SATRXutXXXXXXXXX-1070931774.png" width="495" height="549" alt=""></td>

  9.                 <td>

  10.                 <img src="http://img02.taobaocdn.com/imgextra/i2/1070931774/T2FDYRXspXXXXXXXXX-1070931774.png" width="465" height="549" alt=""></td>

  11.         </tr>

  12. </tbody></table></font></font>

复制代码



从代码中,我们可以看到,这个table模块的宽度是1920,高度是549,单位是px
接下来,我们打开全屏代码生成器精简版!
我们看到软件里面已经有一些代码。
点击“清空全部”按钮
 





将刚才得到的模块尺寸填写在全屏代码生成器的输入框里:

 



将我们刚才提取的代码,粘贴到自定义代码输入框里。
勾选固定背景选择框,如箭头所示:
 


————————————————————————————————————————————————


接下来,我们学习如何取任意店铺的图片!




首先,我们在店铺的图片上,右键审查元素。


 





接下来,我们就看到了这张图的图片地址了。
如果看不到,请换一张图片再试!
多试几次,必定能找出来。
 



点击图片地址,就能看到这张图片的缩略图。
左侧红框处,就是这个页面所有的图片资源了。
我们一张张的点击浏览,或者使用键盘上的方向键 ↑ 或者↓,快速浏览!
 





很快,你就会找到你想要的背景图了!
右键复制图片地址。
 





将地址粘贴到全屏代码生成器的 固定背景输入框里。
 




点击“生成并复制”,就可以立即预览效果啦! 




——————————————————————————————————————————

由于淘宝图片空间采用了防盗链技术,上述方法获取的代码,由于图片是存在别人图片空间的,并不能直接发布在我们自己的淘宝店铺。

必须先将图片保存到电脑上,再上传到自己的图片空间。

接着逐一替换图片地址,对代码进行适当的修改和加工,

再用淘宝美工助理 或者天猫美工王的全屏代码生成器,生成突破950或者990的全屏代码,

将代码发布到店铺中即可。


补充说明:旺铺专业版使用全屏海报生成器,或者全屏代码生成器,同样可以制作帖子上的多层固定背景效果。


京东店铺装修,也可参考此教程制作多屏固定背景效果。


——————————————————————————————————————————

本教程涉及到的知识面比较广,有的新手可能看不懂。如果有不明白的地方,建议学习下面的视频教程。

链接: http://pan.baidu.com/s/1qWqOWCs 

密码: 791u

« 上一篇 下一篇 »