kuaiqie
/
help.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>勤道快切助手使用帮助 - 超好用的网页制作&amp;专题制作助手 - 必备前端工具 - 快切网页制作助手</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="renderer" content="webkit">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="快切,网页切图工具,快切助手,快切网,快速制作网页,网页专题制作,网页切图软件,快速切图软件,网页设计助手,快速网页制作工具,网页制作助手,网页快速制作,在线切片专题制作工具,网站专题制作"/>
<meta name="description" content="在线切图/网页制作工具，快速导出切片，html代码，css样式。响应式支持，一站打通电脑，平板，手机。"/>
<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 title="勤道快切助手" href="http://kuaiqie.qdsay.com"><img alt="勤道快切助手" 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" rel="nofollow">https://github.com/qdsay/kuaiqie.git</a></p>
    <p>Coding：<a href="https://coding.net/u/kuaiqie/p/kuaiqie/git" title="快切助手下载" target="_blank" rel="nofollow">https://git.coding.net/kuaiqie/kuaiqie.git</a></p>
    <p>OSChina：<a href="http://git.oschina.net/qdsay/kuaiqie" title="快切助手下载" target="_blank" rel="nofollow">https://git.oschina.net/qdsay/kuaiqie.git</a></p>
  </div>
  <div class="content">
    <h1>勤道专题制作助手</h1>
    <p>勤道专题制作助手是一个快速、简洁的在线自动切图工具，适用于快速导出页面整体框架和制作活动专题页面。</p>
    <p><embed src="http://player.youku.com/player.php/sid/XMTI4MjM4MTEyOA==/v.swf" allowFullScreen="true" quality="high" width="800" height="600" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed></p>
  </div>
  <div class="content">
    <h1>使用说明与效果预览</h1>
    <p>软媒魔方首页切图高清视频演示：<a href="http://pan.baidu.com/s/1jGvjzQe" title="网页制作视频教程" target="_blank" rel="nofollow">http://pan.baidu.com/s/1jGvjzQe</a> （0间距色差识别、自动切图）</p>
    <p>小米商城首页切图高清视频演示：<a href="http://pan.baidu.com/s/1dDCU9jF" title="网页制作视频教程" target="_blank" rel="nofollow">http://pan.baidu.com/s/1dDCU9jF</a> （间距识别、自动切图）</p>
    <p>图片大小不要超过10M，快切助手本身并没有这样的限制，但上传了一张15M的效果图后，我的浏览器悲剧了。</p>
    <p>以下是快切5分钟内制作的页面，并配有详细的使用说明，您可以看一下效果，并任选一个体验快切的功能。</p>
    <ul class="example">
      <li>
        <a href="view.php?exp=mofang" title="网页制作&&使用帮助" target="_blank"><img alt="软媒魔方首页制作" src="example/mofang.jpg">
        <span>软媒魔方首页</span></a>
      </li>
      <li>
        <a href="view.php?exp=mi" title="网页制作&&使用帮助" target="_blank"><img alt="小米商城布局制作" src="example/mi.jpg">
        <span>小米商城布局</span></a>
      </li>
      <li>
        <a href="view.php?exp=ctrip" title="网页制作&&使用帮助" target="_blank"><img alt="携程新年特惠活动页面制作" src="example/ctrip.jpg">
        <span>携程新年特惠</span></a>
      </li>
      <li>
        <a href="view.php?exp=jd" title="网页制作&&使用帮助" target="_blank"><img alt="京东白条活动页面制作" src="example/jd.jpg">
        <span>京东白条活动</span></a>
      </li>
      <li>
        <a href="view.php?exp=demohour" title="网页制作&&使用帮助" target="_blank"><img alt="点名时间首页制作" 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 alt="网页制作流程03" src="example/jd/help/03.png"></p>
    <p>二、模糊识别：根据选区之间的色差进行识别。</p>
    <p class="center"><img alt="网页制作流程04" 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>
    <p><a href="http://card.qdsay.com/assist/aliyun/" target="_blank" title="阿里云9折优惠码:8rcdkc" rel="nofollow">阿里云 <b>9</b> 折优惠码: 8rcdkc</a></p>
  </div>
  <div id="gooptimize" class="content">
    <h3>7. 图片批量优化</h3>
    <p>导出页面图片为PNG类型，建议使用下列工具批量优化，加快页面加载速度。</p>
    <p>Mac: ImageOptim.zip</p>
    <p>Windows: PNGmini 2.0.zip</p>
    <p>Windows: PNGmicroPortable.zip(免安装)</p>
    <p>网盘下载：<a href="http://pan.baidu.com/s/1dE0tblJ" title="图片批量压缩" target="_blank" rel="nofollow">http://pan.baidu.com/s/1dE0tblJ</a></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>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-33331163-2', 'auto');
  ga('send', 'pageview');

</script>
</body>
</html>