-
Notifications
You must be signed in to change notification settings - Fork 23
/
help.html
executable file
·241 lines (238 loc) · 16 KB
/
help.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>勤道快切助手使用帮助 - 超好用的网页制作&专题制作助手 - 必备前端工具 - 快切网页制作助手</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="设置&自动化切图" 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> 请您使用【菜单栏】或【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">页面框架&专题制作工具</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>