首页 > 家居生活 > 电子商务 >

淘宝店铺装修系列课程之热点的使用

来源:互联网 版权归原作者所有,如有侵权,请联系我们

我们经常会看到一些淘宝店铺的商品摆放非常个性,远远不是淘宝店铺装修里的宝贝推荐模块可以实现的,这样在一张图上,分布不均匀的的图片,如何实现针对单独产品的链接?本文讲述使用热点方法达成所要效果,另请参考《淘宝店铺装修系列课程之切片使用》也能达成同样效果整体过程分为3步:1.上传图片,获得图片的网络地址2.Dreamweaver中插入网络图片,划热点3.把Dreamweaver中获得的代码,插入到自定义内容区的源码下。下面就每一步进行详解和注意事项AB9办公区 - 实用经验教程分享!

AB9办公区 - 实用经验教程分享!

淘宝店铺装修系列课程之热点的使用AB9办公区 - 实用经验教程分享!

淘宝店铺装修系列课程之热点的使用AB9办公区 - 实用经验教程分享!

工具/原料

  • Adobe Photoshop CS6/
  • Adobe Dreamweaver CS6/

方法/步骤

  • 1

    1.首先是需要在PS中制作好这样一个照片,根据照片所要放在位置,设计好图片尺寸,淘宝首页950,天猫首页990,单位都是像素,图片制作请参考《US淘宝学院PS美工系列课程》。2.把制作好图片上传到图片空间,复制该链接到剪切板AB9办公区 - 实用经验教程分享!

  • 2

    1.打开Dreamweaver,新建HTML2.切换模式到设计模式下,如图:AB9办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程之热点的使用AB9办公区 - 实用经验教程分享!

  • 3

    点击上图菜单栏插入,选择第二项,图像,如图:AB9办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程之热点的使用AB9办公区 - 实用经验教程分享!

  • 4

    出现插入图像的面板,注:为避免麻烦,一定要插入网络上的图片地址,如图:AB9办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程之热点的使用AB9办公区 - 实用经验教程分享!

  • 4
  • 5

    点击确定,然后再点击确定,图片已经插入到DW里AB9办公区 - 实用经验教程分享!

  • 6

    单击图片,发现左下角图片有所变化,如图:AB9办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程之热点的使用AB9办公区 - 实用经验教程分享!

  • 7

    选择矩形热点工具,在图片中框选想要点击后可以产生链接的区域(注:框选错了可以用选择工具选中后delete删除)框选好一个后,需要赋予这个区域一个链接AB9办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程之热点的使用AB9办公区 - 实用经验教程分享!

  • 8

    以上链接热点全部画好之后,切换到代码模式下:AB9办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程之热点的使用AB9办公区 - 实用经验教程分享!

  • 9

    复制两个body>… /body>之间的代码,如图:AB9办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程之热点的使用AB9办公区 - 实用经验教程分享!

  • 10

    把获得的代码,插入到自定义内容区里,可以是店招,自定义店招,也可以是页面的自定义内容区。如图片:AB9办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程之热点的使用AB9办公区 - 实用经验教程分享!

  • 注意事项

    • 插入图片的时候,一定要插入图片空间中图片,而非本地图片AB9办公区 - 实用经验教程分享!

    • 文字教程配有相关视频教程,看不懂文字版的,可以结合视频进行学习AB9办公区 - 实用经验教程分享!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!AB9办公区 - 实用经验教程分享!


    标签: 淘宝装修店铺系列课程

    办公区 Copyright © 2016-2024 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号