master

分支 (1)

管理

管理

master

kuaiqie
/
help.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>快切助手 - 超好用的网页制作&amp;专题制作助手 - 2015前端必备工具 - 勤道快切助手</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<meta name="apple-itunes-app" content="app-id=821470312">
<meta name="renderer" content="webkit">
<meta name="format-detection" content="telephone=no">
<meta name="searchtitle" content="快切助手,切图助手,自动切图,切片工具,自动切片工具,网页制作,网页制作助手,专题制作,专题制作助手,勤道快切助手">
<meta name="author" content="勤道,http://kuaiqie.qdsay.com,http://www.qdsay.com">
<meta name="copyright" content="本页版权归勤道QDsay团队协作所有.All Rights Reserved">
<meta name="title" content="快切助手,切图助手,自动切图,切片工具,自动切片工具,网页制作,网页制作助手,专题制作,专题制作助手,勤道快切助手">
<meta name="description" content="史上最好用的在线切图工具,自动切图并快速导出html，css样式和切片，支持响应式布局，一站打通电脑，平板，手机。"/>
<meta name="keywords" content="快切助手,切图助手,自动切图,切片工具,自动切片工具,网页制作,网页制作助手,专题制作,专题制作助手,勤道快切助手"/>
<link rel="shortcut icon" href="resources/images/favicon.ico"/>
<link rel="dns-prefetch" href="www.qdsay.com" />
<link rel="dns-prefetch" href="hm.baidu.com">
<link rel="stylesheet" href="resources/css/main.css"/>
<link rel="stylesheet" href="resources/css/site.css"/>
<link rel="stylesheet" href="resources/css/help.css"/>
</head>
<body>
<header>
<div id="headbar">
  <div id="logo">
    <a href="http://kuaiqie.qdsay.com"><img alt="kuaiqie.qdsay.com" src="resources/images/logo.png"></a>
  </div>
  <ul id="navbar">
    <li><a id="setup" class="doing" title="设置&amp;自动化切图" href="#">设置</a></li>
    <li><a id="append" class="doing" title="追加" href="#">追加</a></li>
    <li><a id="clear" class="doing" title="清除" href="#">清除</a></li>
    <li><a id="code" class="doing" title="查看代码" href="#">代码</a></li>
    <li><a id="export" class="doing" title="导出页面到本地" href="#">导出</a></li>
    <li><a id="ruler" class="doing" title="显示标尺" href="#">标尺</a></li>
    <li><a id="favorite" class="doing" title="加入收藏夹" href="javascript:void(0);">收藏</a>
    <div class="toolbar">
      <p>&nbsp;请您使用【菜单栏】或【Ctrl + D】收藏本站。</p>
      <em class="takeIt"></em>
    </div>
    </li>
    <li><a id="share" class="doing" title="分享到朋友圈" href="javascript:void(0);">分享</a>
    <div class="toolbar">
      <h5>分享到朋友圈：</h5>
      <div id="sharelist" class="bdsharebuttonbox"><a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a><a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a><a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a><a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a><a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq"></a><a title="分享到腾讯朋友" href="#" class="bds_tqf" data-cmd="tqf"></a><a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a><a title="分享到开心网" href="#" class="bds_kaixin001" data-cmd="kaixin001"></a><a title="分享到豆瓣网" href="#" class="bds_douban" data-cmd="douban"></a><a title="分享到Facebook" href="#" class="bds_fbook" data-cmd="fbook"></a><a title="分享到Twitter" href="#" class="bds_twi" data-cmd="twi"></a><a title="分享到linkedin" href="#" class="bds_linkedin" data-cmd="linkedin"></a><a title="分享到百度云收藏" href="#" class="bds_bdysc" data-cmd="bdysc"></a><a title="分享到百度贴吧" href="#" class="bds_tieba" data-cmd="tieba"></a><a title="分享到百度个人中心" href="#" class="bds_ibaidu" data-cmd="ibaidu"></a><a title="分享到百度空间" href="#" class="bds_hi" data-cmd="hi"></a><a title="分享到网易微博" href="#" class="bds_t163" data-cmd="t163"></a><a title="分享到点点网" href="#" class="bds_diandian" data-cmd="diandian"></a><a title="分享到手机快传" href="#" class="bds_share189" data-cmd="share189"></a><a title="分享到飞信" href="#" class="bds_fx" data-cmd="fx"></a><a title="分享到有道云笔记" href="#" class="bds_youdao" data-cmd="youdao"></a><a title="分享到麦库记事" href="#" class="bds_sdo" data-cmd="sdo"></a><a title="分享到轻笔记" href="#" class="bds_qingbiji" data-cmd="qingbiji"></a><a title="分享到人民微博" href="#" class="bds_people" data-cmd="people"></a><a title="分享到新华微博" href="#" class="bds_xinhua" data-cmd="xinhua"></a><a title="分享到搜狐随身看" href="#" class="bds_kanshou" data-cmd="kanshou"></a><a title="分享到我的搜狐" href="#" class="bds_isohu" data-cmd="isohu"></a><a title="分享到复制网址" href="#" class="bds_copy" data-cmd="copy"></a></div>
      <em class="takeIt"></em>
    </div>
    </li>
    <li><a id="back" class="doing" title="返回" href="http://kuaiqie.qdsay.com/">返回</a></li>
  </ul>
  <label id="desc">页面框架&amp;专题制作工具</label>
</div>
</header>
<div id="main">
  <div class="content">
    <h1>关于勤道</h1>
    <p>创意来自我们对未知领域的不断探索，唯有勤奋才是通向成功的唯一捷径。</p>
    <p>GitHub：<a href="https://github.com/qdsay/kuaiqie" title="快切助手" target="_blank">https://github.com/qdsay/kuaiqie</a></p>
  </div>
  <div class="content">
    <h1>勤道专题制作助手</h1>
    <p>勤道专题制作助手是一个快速、简洁的在线自动切图工具，适用于快速导出页面整体框架和制作活动专题页面。</p>
  </div>
  <div class="content">
    <h1>使用说明与效果预览</h1>
    <p>图片大小不要超过10M，快切助手本身并没有这样的限制，但上传了一张15M的效果图后，我的浏览器悲剧了。</p>
    <p>以下是快切5分钟内制作的页面，并配有详细的使用说明，您可以看一下效果，并任选一个体验快切的功能。</p>
    <ul class="example">
      <li>
        <a href="view.php?exp=mi" title="小米商城" target="_blank"><img src="example/mi.jpg">
        <span>小米商城布局</span></a>
      </li>
      <li>
        <a href="view.php?exp=ctrip" title="携程新年特惠" target="_blank"><img src="example/ctrip.jpg">
        <span>携程新年特惠</span></a>
      </li>
      <li>
        <a href="view.php?exp=jd" title="京东白条" target="_blank"><img src="example/jd.jpg">
        <span>京东白条活动</span></a>
      </li>
      <li>
        <a href="view.php?exp=demohour" title="点名时间" target="_blank"><img src="example/demohour.jpg">
        <span>点名时间首页</span></a>
      </li>
    </ul>
  </div>
  <div class="content">
    <h1>名词解释</h1>
    <h3>1. 导入图片</h3>
    <p>专题制作助手需要您的浏览器支持HTML5, 请在Firefox、Chrome、Opera等浏览器下使用。</p>
    <p>首先，您应该调整页面主体在效果图的中央位置，然后导入或拖拽图片到面板中。</p>
  </div>
  <div id="gosetup" class="content">
    <h3>2. 设置&自动化切图</h3>
    <p>使用自动切图功能需要设置页面的主体宽度，选区间距，与页面背景颜色，系统自动完成图像分析并创建页面布局。</p>
    <p>自动切图功能能够自动创建选区，这里需要注意，并不是所有页面都可以使用自动切图。因为图像识别是基于图像特征的识别，所以在使用自动切图功能时，需要满足两个限定条件：</p>
    <p>一、精确识别：根据页宽和背景色进行识别，各选区需要有一致的背景色和间距，请设置“间距”，和“背景”。</p>
    <p class="center"><img src="example/jd/help/03.png"></p>
    <p>二、模糊识别：根据选区之间的色差进行识别。</p>
    <p class="center"><img src="example/jd/help/04.png"></p>
    <p>因为要区分渐变色和杂色，所以模糊识别会有一定误差，勤道团队还在不断优化图形识别算法。</p>
    <p>自上线以来，用户量增长迅速，用户量日渐庞大，节约您每一秒钟都将是勤道团队的毕生的奋斗目标。</p>
    <p>您还可以指定页面依赖的组件，导出后的页面将自动引入组件包到您的项目文件中。</p>
    <p>同时，您还可以加入统计、IM、分享等代码到页面。</p>
  </div>
  <div id="goappend" class="content">
    <h3>3. 追加</h3>
    <p>对于没有间距的网页，系统暂不支持自动切图功能，你可以使用追加功能创建快布局，并拖拽调整选区的高度到合适的尺寸，手动完成对页面的切分。</p>
  </div>
  <div id="goclear" class="content">
    <h3>4. 清除</h3>
    <p>此功能将清除操作面板中的所有选区，仅保留初始导入的图片。</p>
  </div>
  <div id="gocode" class="content">
    <h3>5. 查看生成代码</h3>
    <p>查看成成的页面HTML与CSS代码。</p>
  </div>
  <div id="goexport" class="content">
    <h3>6. 导出页面到本地</h3>
    <p>设置页面标题、关键词与描述，这将有助于搜索引擎对页面的抓取。</p>
    <p>我们同时还可以指定一个文件名，页面将导出一个以此作为文件名的zip压缩包。</p>
    <p>建议使用firefox浏览器，我们可以指定压缩包导出的位置。</p>
  </div>
  <div id="goruler" class="content">
    <h3>7. 显示标尺</h3>
    <p>打开一个仿Photoshop的标尺，辅助我们查看页面的尺寸。</p>
  </div>
  <div id="gowidgets" class="content">
    <h1>小工具</h1>
    <p>小工具用于调整或设置选区。</p>
    <h3>1. 通栏</h3>
    <p>展开选区，用于截取整个图像宽度，并自动设置截取图像为选区的背景图。</p>
  </div>
  <div class="content">
    <h3>2. 背景</h3>
    <p>设置选区背景颜色。</p>
  </div>
  <div class="content">
    <h3>4. 拆分</h3>
    <p>将选区拆分为两个，注意，第一个将忽略选区间距，这不是一个Bug，此功能用于将一个大图拆分为多个小图。</p>
  </div>
  <div class="content">
    <h3>5. 合并</h3>
    <p>将两个选区合并为一个。</p>
  </div>
  <div class="content">
    <h3>6. 分栏</h3>
    <p>将一个选区分成多个栏目。</p>
  </div>
  <div class="content">
    <h3>7. 链接</h3>
    <p>我们可以为所截取的图像添加一个链接。</p>
  </div>
  <div class="content">
    <h3>8. 忽略</h3>
    <p>忽略此图像，仅导出页面结构。</p>
  </div>
  <div id="gowidgets" class="content">
    <h1>勤道开发团队</h1>
    <p>勤道是一个热爱开源，以产品、技术为驱动的团队，旨在为企业提供最适合的软件。</p>
    <p>我们的团队拥有丰富的供应链管理、客户运营、社会化营销和互联网商业服务经验，致力于为企业提供高质量， 高效用的软件。</p>
    <p>加入QQ群：<a class="qd-add-qun" href="http://shang.qq.com/wpa/qunwpa?idkey=783bb9691476c2b74ea34d105bca0944eddeeaf7b4934b804dfd2e5f2ec78166" target="_blank">40348818</a></p>
    <p>微信关注：<iframe allowtransparency="" border="0" frameborder="0" height="22" marginheight="0" marginwidth="0" scrolling="no" src="http://widget.weibo.com/relationship/followbutton.php?btn=red&style=1&uid=2024352975&width=67&height=24&language=zh_cn" style="width: 64px; height: 22px;" width="200"></iframe></p>
    <h3>ICP备</h3>
    <p>京ICP备14047108号-1</p>
  </div>
  <div class="content">
    <h1>友情链接</h1>
    <p><a href="http://www.niudana.com/" target="_blank"><img width="200px" height="60px" src="http://www.niudana.com/images/logo.png" title="牛大拿最贴心的设计导航"></a></p>
  </div>
</div>
<script type="text/javascript" src="resources/js/jquery.min.js"></script>
<script>
$().ready(function() {
    $(".doing").click(function(){
        if ($(this).attr("id") == 'favorite') {
            setNavStatus($(this).parent());
        } else if ($(this).attr("id") == 'share') {
            setNavStatus($(this).parent());
        } else {
            var top = $("#go"+$(this).attr("id")).offset().top - 45;
            $("html,body").animate({
                scrollTop: top
            }, 1000);
        }

    });
    $(".takeIt").click(function() {
        if ($(this).parents("li").hasClass("on")) {
            $(this).parents("li").removeClass("on");
        }
    });
});
function setNavStatus($obj) {
    if ($obj.hasClass("on")) {
        $obj.removeClass("on");
    } else {
        $obj.siblings().removeClass("on");
        $obj.addClass("on");
    }
}
//分享
window.onload=function(){
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"image":{"viewList":["qzone","tsina","tqq","weixin","sqq","tqf","renren","kaixin001","douban","fbook","twi","linkedin","bdysc","tieba","ibaidu","hi","t163","diandian","share189","fx","youdao","sdo","qingbiji","people","xinhua","kanshou","isohu","copy"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","weixin","sqq","tqf","renren","kaixin001","douban","fbook","twi","linkedin","bdysc","tieba","ibaidu","hi","t163","diandian","share189","fx","youdao","sdo","qingbiji","people","xinhua","kanshou","isohu","copy"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
}
//统计
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?78ca100d64bdbafed0bd93cbe4702ab4";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>