码迷,mamicode.com
首页 > 其他好文 > 详细

分享:一款前端布局工具(alloydesigner)

时间:2016-04-30 23:40:49      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:

困扰

设计师给出静态的高保真图片, 需要前端工程师按照高保真图,进行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)

    标签:

    原文地址:http://www.cnblogs.com/lightsong/p/5449582.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!