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

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

首先把图片放到PS中，进行切片，切成两份，显性导航为单独一份，如图：

这里储存记住一定要存html+图像，如图：

使用DW打开复制切片.html文件，先放着

使用PS继续切割复杂切片_01.jpg文件

划好参考线后，使用切片工具，基于参考线的切片

然后换用切片选择工具，按住Shift键，同时选中左侧的两张图片，右击，组合切片，如图所示：

这样就会生成5张图片，切片只可以切矩形图片，这个需要注意。

同样保存html+图像文件，如图：

同样使用Dreamweaver打开复杂切片_0222.html 文件，把切开的图片全部上传到图片空间中，在DW中，设计模式下，选中每一个图片，然后替换他的链接，使用图片空间中的图片。

然后代码模式下，复制table表格，粘贴到第一个打开的html文件中第一张图片所在代码位置。

在在第一个html文件上，替换掉显性导航本地链接为图片空间上图片，划热点，然后复制…之间的内容到自定义内容区，完成操作。

以上内容有配套视频教材，可在US淘宝学院官网进行下载。

以上所使用涉及软件分别是：Adobe公司的Photoshop和Dreamweaver，US淘宝学院论坛有Adobe公司官方下载链接，请大家支持正版。

谢谢!

以上来源于teacher丁手打

本文链接：/thread-19-1-2.html

淘宝店铺装修系列教程【汇总】