在WordPress CMS主题模板制作教程(04)：face主题效果图切图(1)这一章，我们介绍了如何给效果图切图，只是把图片切出来。但是，我们切图的目的是为了在网页上代码布局，所以，我们要在PS切图的同时，把代码布局也保存下来。本章，就是着重介绍如何通过PS把效果图切图时保存为HTML代码。

因为我们做网站时，现在都是用DIV+CSS来布局，而不是用table表格来做，所以，我们用PS保存代码时，就要选择DIV，这个设置在下面的步骤中会有介绍。

用DIV+CSS布局，都会采用嵌套布局——即大DIV里面会嵌套多个DIV层。而整个网页大的布局中，一般分类“顶部、头部、中间主体、底部”这几个部分。而这几个部分里面又会由不同的DIV层所布局。所以，我们切图时，先把整体布局中的大层切好，然后再切大层中的小层。（唉，要是PS能够自动嵌套切图就好了）。再看一下face主题首页的效果图：

可以看出总体大布局分3部分：头部、主体、底部，所以，我们先按上图红框所示切图这3个部分。如何切图，在上一章有详细介绍，这里不多说了，我们用切图工具切好后，我们就来保存切图。重点来了，点击“文件”=>“存储为Web和设备所用格式” =>点击存储按钮=>弹出如下窗口：

如上图，“格式”选择“HTML 和图像”，“设置”选择“其它...”，这时会弹出DIV设置项，如下图：

如上图，选择“切片”，这时，窗口会有变化，显示切片输出的设置项，如下图：

如上图，勾选“生成CSS”，在“参考”外选择“根据类”（即class），然后点击“确定”，这样，DIV设置好了。然后，点击“保存”，切图及HTML文件就保存好了。保存的位置默认是保存在“我的文档->images”目录里，如下图：

图片保存在上图的images目录里，同时保存了一个html文件——face.html，这个文件的代码如下：

可以看到，body里布局了3个DIV：face-o1、face-02、face-03，它们分别代表的是头部、主体、底部。

这样，我们第一层大布局就做好了。我们可以看一下images目录里面的图片：

face_01.gif：头部的图片；facs_03.gif：主体；face_05.jpg：底部。

大布局我们做好了，我们接下来，就是要把这3个图片再次切图，切好图后，把生成的HTML文件中的DIV代码及CSS代码拷贝到大布局HTML文件face.html中对应的位置，如：face_01.gif切图的代码放到 class='face-o1'（头部）; face_03.gif切图的代码放到 class='face-02'(主体）... 好了，到这里，我们才算真正把效果图切图完整。