教程所使用的软件:天猫美工王v1.0或者淘宝美工助理v1.5.
本教程以天猫美工王为例。
教程使用的工具:
示范店铺:
http://ca***sely.tmall.com
模块效果:固定背景+上层内容滚动,可制作整个页面多个固定背景!
—————————————————————————————————————————————————————
首先在360极速浏览器中,打开首页,这是一个天猫店铺。
将页面拉到底部查看,我们发现该店铺购买了JS模板。
购买了模板的店铺,页尾部分会标注有模板开发商的名称。
接下来,我们找到需要提取代码的模块,点击右键,选择审查元素
根据分析,这个模块的class属性不完整。我们只提取出其中的table部分即可。
右键单击teble开始的地方,在右键菜单中选择copy as html,不懂是什么意思,请找百度翻译一下。
然后打开天猫美工王的编辑器:
右键粘贴我们刚才复制的代码,点击预览
最大化窗口,或者拖动下面的滚动条,即可查看代码的预览效果。
预览完成后,我们关闭编辑器。
下面是我们提取到的代码:
从代码中,我们可以看到,这个table模块的宽度是1920,高度是549,单位是px
接下来,我们打开全屏代码生成器精简版!
我们看到软件里面已经有一些代码。
点击“清空全部”按钮
将刚才得到的模块尺寸填写在全屏代码生成器的输入框里:
将我们刚才提取的代码,粘贴到自定义代码输入框里。
勾选固定背景选择框,如箭头所示:
————————————————————————————————————————————————
接下来,我们学习如何取任意店铺的图片!
首先,我们在店铺的图片上,右键审查元素。
接下来,我们就看到了这张图的图片地址了。
如果看不到,请换一张图片再试!
多试几次,必定能找出来。
点击图片地址,就能看到这张图片的缩略图。
左侧红框处,就是这个页面所有的图片资源了。
我们一张张的点击浏览,或者使用键盘上的方向键 ↑ 或者↓,快速浏览!
很快,你就会找到你想要的背景图了!
右键复制图片地址。
将地址粘贴到全屏代码生成器的 固定背景输入框里。
点击“生成并复制”,就可以立即预览效果啦!
——————————————————————————————————————————
由于淘宝图片空间采用了防盗链技术,上述方法获取的代码,由于图片是存在别人图片空间的,并不能直接发布在我们自己的淘宝店铺。
必须先将图片保存到电脑上,再上传到自己的图片空间。
接着逐一替换图片地址,对代码进行适当的修改和加工,
再用淘宝美工助理 或者天猫美工王的全屏代码生成器,生成突破950或者990的全屏代码,
将代码发布到店铺中即可。
补充说明:旺铺专业版使用全屏海报生成器,或者全屏代码生成器,同样可以制作帖子上的多层固定背景效果。
京东店铺装修,也可参考此教程制作多屏固定背景效果。
——————————————————————————————————————————
本教程涉及到的知识面比较广,有的新手可能看不懂。如果有不明白的地方,建议学习下面的视频教程。
链接: http://pan.baidu.com/s/1qWqOWCs
密码: 791u