淘宝店铺装修系列课程之简单切片使用
  0 条讨论   发布日期: 2月 10, 2014   文章位于: SEO工具  
  

之前我们学习了如何使用热点的形式达成图片的个性化排列,参考文章《淘宝店铺装修系列课程之热点的使用》,本文讲述另一种形式,即切片。US淘宝培训中心
  在淘宝店铺装修里,这两个知识都是最为基础的内容,请大家熟练掌握,店铺装修切片课程我会以三个例子讲述并分别作为讲解,本文讲解最为简单的规则宝贝排列切片方法。
  首选我们要知道切片所适用范围,图片规格大小,以及为什么要优先选择切片。切片可以用在首页,宝贝详情页的关联,切片有利于网页的加载速度,更多图片规格及适用范围,参考《淘宝网店图片规格概览》
  下面开始操作步骤,我们以首页的宝贝陈列为例,把如下做好图片放到淘宝首页中(图片制作参考US淘宝美工课程):
  

  大家看到这幅图,现在最先想到的一定是用《淘宝店铺装修系列课程之热点的使用》也可以实现该图片的上传,但是,本例使用PS切片,完成这个操作。
  本例大纲如下:
  1.使用PS软件完成图片的切图,生成图片和html
  2.上传图片到图片空间
  3.复制html中table表格到自定义内容区
  4.替换图片的本地连接和赋予图片链向地址。
  注:本例配有视频教程,可在US淘宝学院官方论坛找到
  第一步:
  打开PS软件,把图片拖入PS中
  菜单栏–视图标尺,快捷键Ctrl+R
  把鼠标放到标尺上,按住鼠标左键拖拽,生成参考线,使用参考线把图片分开,如图:
  

  划好参考线线后
  工具切换到切片工具,如图:
  

  然后查看工具对应的属性栏,点击上面的基于参考线的切片,如图:
  

  点击基于参考线的切片之后,会发现图片被切割成了八张图片,如图所示:
  

  这里讲的是基于参考线生成切片,也可以手工切图,需要注意不要切出不起眼的小条出来,不然会麻烦一些了。
  文件储存为web所用格式jpeg文件,如图:
  

  注意要保存html和图片,切片选择所有切片,点击保存,PS阶段完毕。
  第二步:
  PS完成切片后,保存桌面会自动生成一个image文件夹,该文件夹盛放的就是分隔开的图片,及时上传到图片空间里。
  第三步:
  PS完成切片后,查看桌面会保存一个html文件,右击,使用Dreamweaver或者记事本打开。如图
  

  打开后,复制里面body之间的内容,如图框选区域:
  

  后台首页新建一个自定义内容区,选择标题不显示,源码模式,插入该段代码。
  第四步:
  插入完代码就完事儿了吗?还没有,会发现根本没有图片,图片全部是裂开状态,原因是因为该段代码所引用的是本地图片地址的链接。
  回到可视化编辑窗口,双击裂开的图片,如图:
  

  这里面有三点需要注意:图片链接复制图片空间中的链接、链向地址复制该宝贝详情页链接、在新窗口打开一定要勾选挨个替换这八张图片,完成操作后预览效果。
  使用切片的好处:广州SEO的优化打开速度、便于替换单一宝贝。
  以上内容有配套视频教材,可在US淘宝学院官网进行下载。
  以上所使用涉及软件分别是:Adobe公司的Photoshop和Dreamweaver,US淘宝学院论坛有Adobe公司官方下载链接,请大家支持正版。谢谢!
  以上来源于teacher丁手打

Comments are closed.

网站已运行: 11年4月6日15时11分23秒