• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > wordpress CMS主题模板制作教程(05):face主题切图(2)——如何保存为HTML代码

    wordpress CMS主题模板制作教程(05):face主题切图(2)——如何保存为HTML代码

    作者: 分类:wordpress CMS主题制作 点击: 2,001 次
    wordpress CMS主题:ssmay主题

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

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

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

      wordpress CMS主题模板制作教程(05):face主题切图(2)——如何保存为HTML代码

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

      wordpress CMS主题模板制作教程(05):face主题切图(2)——如何保存为HTML代码

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

      wordpress CMS主题模板制作教程(05):face主题切图(2)——如何保存为HTML代码

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

      wordpress CMS主题模板制作教程(05):face主题切图(2)——如何保存为HTML代码

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

      wordpress CMS主题模板制作教程(05):face主题切图(2)——如何保存为HTML代码

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

      wordpress CMS主题模板制作教程(05):face主题切图(2)——如何保存为HTML代码

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

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

      wordpress CMS主题模板制作教程(05):face主题切图(2)——如何保存为HTML代码

      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'(主体)... 好了,到这里,我们才算真正把效果图切图完整。



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201707155449.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    一条回应:“wordpress CMS主题模板制作教程(05):face主题切图(2)——如何保存为HTML代码”

    1. steam说道:

      很不错的主题哦,先收蒧一下。

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.