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

之前,我们已经学习过了简单规则图片的切图方法以及热点的使用,没有看过的同学请参考《淘宝店铺装修系列课程之简单切片使用》、《淘宝店铺装修系列课程之热点的使用》。有基础,或已经掌握以上内容的同学往下看,本例安装图片如图所示:

  本例演示使用切片和热点的叠加使用。遇到这样的图片,首选我们可以想到的是,直接使用热点工具,同样可以达成想要效果,但是,为了网页的加载速度,为了以后便于修改某个单独图片,我们在上边使用切片,下边的显性导航使用热点。
  首先把图片放到PS中,进行切片,切成两份,显性导航为单独一份,如图:

  这里储存记住一定要存html+图像,如图:

  使用DW打开复制切片.html文件,先放着,使用PS继续切割复杂切片_01.jpg文件,划好参考线后,使用切片工具,基于参考线的切片,然后换用切片选择工具,按住Shift键,同时选中左侧的两张图片,右击,组合切片,如图所示:

  这样就会生成5张图片,切片只可以切矩形图片,这个需要注意。同样保存html+图像文件,如图:
  

  同样使用Dreamweaver打开复杂切片_0222.html 文件,把切开的图片全部上传到图片空间中,在DW中,设计模式下,选中每一个图片,然后替换他的链接,使用图片空间中的图片。
  然后代码模式下,复制table表格,粘贴到第一个打开的html文件中第一张图片所在代码位置。在在第一个html文件上,替换掉显性导航本地链接为图片空间上图片,划热点,然后复制…之间的内容到自定义内容区,完成操作。
  以上内容有配套视频教材,可在学院官网进行下载。以上来源于teacher丁手打本文来自.ustaobao/html/dest/272.html US淘宝学院,转载请注明出处。

Comments are closed.

欢迎订阅本站

网站已运行: 11年2月28日13时30分2秒