AlloyDesigner:http://alloyteam.github.io/AlloyDesigner/

介绍:AlloyDesigner是腾讯开发的一款工具,其在页面构建过程中,直接嵌入开发的Web页面中运行,帮助我们精准、高效的构建Web页面的UI,配合浏览器的一系列配置,将Developer Tools所修改代码自动保存入开发环境中,极大的提高工作效率。
安装方式参考官网,推荐使用内嵌收藏栏的方式使用。
环境要求:

  • Chrome V31+(正式版)

  • 本地服务器开发

本次教程的环境:

  • Chrome  55.0.2845.0 canary (64-bit)

  • 本地服务器APACHE

使用教程:
1.安装:拖拽至收藏栏。
2.打开开发好的页面。
3.点击第一步拖拽托到收藏栏的链接,底部出现AlloyDesigner的工具栏。
工具栏说明:
 4.使用打开视觉稿功能,选择设计人员提供的视觉设计图,加载后如下图:
视觉图和开发的页面已融合进一个页面,鼠标左键拖拽或按方向键调整视觉稿位置,基本重合后,固定设计稿(工具栏按钮/ALT+F)。
固定后依旧可以通过ctrl+方向键控制效果图。
可以观察二者区别,针对修改要修改的区域利用Developer Tools对开发的网页进行调整。
可对浏览器进行一系列配置,Developer Tools所修改代码会自动保存入开发环境源码中。如下步骤5-7。
5.配置Workspace。依次Developer Tools → Settings → Workspace→Add folder,选择开发环境目录。然后给予Developer Tools访问文件的权限。
6.选择即将要修改的文件,右键选择“Map to file system resource...”(下图一),出现列表点击文件(下图二),映射到开发环境的文件里。
7.根据对比情况在Developer Tools 修改具体代码。
修改后,所修改代码已自动保存入开发环境中。
如果正在使用编辑器,会收到提示:
同时观察SVN,也可以看到文件已被自动修改。
按照这种方法,我们可以不断通过Developer Tools 修改代码,直到和视觉稿完全一致。
8.其他功能,如取色、测距、查看不透明度,可查看官网教程:http://alloyteam.github.io/AlloyDesigner/worddoc.html#h_3823

如何精准高效的实现视觉稿?------前端开发辅助工具AlloyDesigner使用介绍的更多相关文章

  1. Web前端开发必备工具推荐

    http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...

  2. Brackets前端开发IDE工具

    Brackets是一个开源的前端开发IDE工具,网页设计师和前端开发人员必备的前端开发IDE工具. 它能够使你在开发WEB网站实时预览你的网页,目前版本只适用于Chrome浏览器可以实时预览效果 支持 ...

  3. 前端开发构建工具gulp的安装使用

    曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...

  4. 关于WEB前端开发的工具

    俗话说:"工谷善其事,先必利其器."一个用得顺手的工具,确实能为我们的开发带来方 便,更重要的是会让我们更加享受工具开发过程中所带来的乐趣. 1.编码工具: 记事本之类的编辑器都可 ...

  5. 前端开发Grunt工具的安装使用

    随着前端开发效果越来越丰富,前端的结构也越来越复杂,这个时候就需要一个工具来进行管理,可以帮你做语法校验,文件拼接,代码压缩,文件清理等等琐事,Grunt就是这么一个不错的工具. 安装并不复杂,只要先 ...

  6. Dawn 阿里开源前端开发构建工具

    Dawn 取「黎明.破晓」之意,原为「阿里云·业务运营团队」内部的前端构建和工程化工具,现已完全开源.它通过pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操作,简化 ...

  7. web前端开发常用工具

    http://www.gbin1.com/technology/javautilities/20120806-resource-for-front-end-developer/ 冒泡样式 http:/ ...

  8. 前端接口自动化测试工具-DOClever使用介绍(转载)

    DOClever 不仅集成了文档编写,团队协作,接口运行,mock 数据等功能,还有两个功能是让我们团队大大的提高工作效率的.一个是接口的自动化生成,可以根据接口数据自动生成文档信息,还有一个便是本文 ...

  9. 前端开发实用工具-Bower的使用。

    参看博客:[https://segmentfault.com/a/1190000002971135]

随机推荐

  1. 使用wsimport生成不带JAXBElement对象的代理

    如果想使用wsimport生成不带JAXBElement对象的代理,则可以使用jaxws/jaxb绑定文件,如文件命名为binding.txt,内容如 <jaxb:bindings versio ...

  2. spring exception

    Spring MVC异常处理SimpleMappingExceptionResolver[转] (2012-12-07 13:45:33) 转载▼ 标签: 杂谈 分类: 技术分享 Spring3.0中 ...

  3. ajax 实现加载页面、删除、查看详细信息,以及bootstrap网页的美化

      由于有些的程序员可能不是很会Photoshop,所以为了美化页面,我们可以借助工具bootstrap,实现起来相对就要比之前做的美观一些, 今天我用bootstrap把之前做的显示表格进行了一下美 ...

  4. cocos2dx 魔塔项目总结(一)

    <魔塔天城>发布已经有半年的时间了,一直想找时间来总结一下这个项目,但总是一拖再拖.如果再这么拖下去,就永远都不会有时间来写这个总结了,时间总是挤出来的. 魔塔天城使用的cocos2dx ...

  5. JavaScript前端最全API集锦

    一.节点1.1 节点属性Node.nodeName   //返回节点名称,只读Node.nodeType   //返回节点类型的常数值,只读Node.nodeValue  //返回Text或Comme ...

  6. 关于使用lazytag的线段树两种查询方式的比较研究

    说到线段树,想来大家并不陌生——最基本的思路就是将其规划成块,然后只要每次修改时维护一下即可. 但是尤其是涉及到区间修改时,lazytag的使用往往能够对于程序的质量起到决定性作用(Ex:一般JSOI ...

  7. Dell M102ZD-128 —— 拿XP拯救你

    查过新浪博客上的记录: http://blog.sina.com.cn/s/articlelist_1259160330_7_1.html 2011年6月买了这台 Dell Inspiron M102 ...

  8. C#与Java区别(一)

    最近学了点java,总结了一些和c#的语法区别,欢迎大家指点和补充,如下: 1.java支持跨平台,当然.net core现在也支持. 2.java中用package,c#中用namespace定义空 ...

  9. 10分钟精通SharePoint - SharePoint升级

    类型: b2b(安装更新)和v2v(跨版本升级) 内容:二进制文件和数据库 过程:   升级前检查 - 检查场内数据,配置和自定义等等 升级准备和计划 - 根据需要和升级检查制定相应计划和准备工作   ...

  10. mui学习链接

    http://dev.dcloud.net.cn/mui/snippet/ http://www.bcty365.com/content-146-2453-1.html hbuilder转rem值: ...