当前位置:文档之家› 淘宝基础版全屏教程

淘宝基础版全屏教程

淘宝基础版全屏教程
1、首先需要准备的:dreamweaver软件,photoshop软件,1920*150(160)的店招,1920*X
(任意高度的主页海报)
2、在dreamweaver中新建html,在html的body之间粘贴淘宝图片空间的图片源代码(是
源代码,不是图片的链接,源代码在图片空间的链接旁边)
如图:
3、在dreamweaver的设计栏中看是否显示图片(此图片是店招图片,尺寸750*150);
如果不显示,就把之前粘贴的源代码中https://的S去掉,变成http://,这样看看设计里面能否正常显示图片。

4、能显示,然后在设计栏,对图片添加热点,热点的作用是加链接,点击链接能够跳转,
在添加热点的时候注意的地方:热点的属性中地图栏填写ID001,是个名字啊;属性中的链接填写要跳转的地方,比如收藏的热点,链接就复制店铺的收藏链接;属性的目标填写:-blank;
如图:
5、将代码中BODY之间的代码复制粘贴到导航栏的源代码处
如图:
6、这个时候在导航栏就能显示图片,而且图片上的收藏,或者商品都能点击跳转了,但是
图片不是全屏,接下来复制全屏代码
此处的图片是店招背景图片,尺寸是1920*150;
此处的代码放在分类里面,就是导航栏里面
如图:
然后发布预览,就实现了店招全屏了。

上面说的店招图片(前面的那个,做了热点的,尺寸750的,后面背景的1920的,都是带导航类目,就是分类)
7、接下来做海报部分,就是产品展示部分
和上面的一样,现在dreamweaver里面加需要在主页展示的产品图,
然后在淘宝装修页面加自定义模块,在自定义模块粘贴代码
这个时候粘贴过来的产品海报图不是全屏的,加入全屏代码
把上面的代码复制粘贴在dreamweaver刚刚编辑的里面
这个时候就实现了主页海报产品的全屏。

7、在最海报的时候注意事项:淘宝全屏海报的所有图片高加起来等于海报全屏代码中的数
值,否则会出现最下面六空白或者无法显示。

所有问题全部讲解完了。

相关主题