分享：一款前端布局工具（alloydesigner）

困扰

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

前端工程师， 通常工做方法为： 打开图片，一边看下图片， 一边编写相应的html代码。

这样有两个问题：

一、 前端工程师比较累， 不停切换 图片和 编辑器， 操做频繁。手累！

二、 编写出来的html页面，不必定跟设计师的图片彻底吻合。

 

alloydesigner工具介绍

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

• AlloyDesigner介绍

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

  AlloyDesigner预计节省您40%的UI开发时间，天天多40%的时间一块儿喝杯咖啡如何？

 

好处：

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

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

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

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

 

alloydesigner工具安装

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

 

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

二、 chrome 设置workspace的位置为 XAMP的 htcdoc文件夹。设置方法见： https://c7sky.com/chrome-devtools-workspace.html

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

---- 而后就能够尝鲜了。

 

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