困扰

设计师给出静态的高保真图片, 需要前端工程师按照高保真图,进行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. 为什么我们要使用min-height和max-height样式属性?

      Css min-height应用地方解释我们有时设置一个对象盒子时候避免对象没有内容时候不能撑开,但内容多少不能确定所以又不能固定高度,这个时候我们就会需要css来设置min-height最小高度撑高 ...

    2. MongoDB 用户配置

      ====[安装]====DOS下切换到文件所在盘符 例如 D:\MongoDB\bin设置数据库保存位置 mongod.exe --dbpath D:\MongoDB\Data [--auth]//用 ...

    3. VS2010与水晶报表V13的打包集成小结

      感谢孟子E章提供的技术咨询. 系统配置: Windows 7 + VS2010 , WinForm + DotNet4 + 水晶报表 这里说的打包集成,指的用VS2010的制作的安装包,在安装的时候可 ...

    4. java解析xml文档(dom)

      DOM解析XML文档 读取本地的xml文件,通过DOM进行解析,DOM解析的特点就是把整个xml文件装载入内存中,形成一颗DOM树形结构,树结构是方便遍历和和操纵. DOM解析的特性就是读取xml文件 ...

    5. filter的详细配置

      我们已经了解了filter的基本用法,还有一些细节配置在特殊情况下起作用. 在servlet-2.3中,Filter会过滤一切请求,包括服务器内部使用forward转发请求和<%@ includ ...

    6. FIO 测试磁盘iops 以及读写

      最近在做mariadb的性能,感觉io 有瓶颈,就使用fio 来测试一下磁盘.下文为转载文章(温馨提示:此命令很伤硬盘,测试前请备份数据,- -我就写坏了一个.) FIO 是测试IOPS的非常好的工具 ...

    7. php连接多数据库

      <?php $conn1=mysql_connect('localhost','root','','new_link '); $conn2=mysql_connect('localhost',' ...

    8. BizTalk开发系列(三十)单向端口实现请求-响应

      BizTalk本质上是异步的消息处理引擎.BizTalk的请求与响应模式是基于异步之上的同步消息交换.消息引擎通过消息的扩展架构链接许 多异步消息,消息的相关集关联请求与响应消息.例如,客户端发送一个 ...

    9. 增强for循环

      import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.Li ...

    10. JavaDate类

      在JDK1.0中,Date类是唯一的一个代表时间的类,但是由于Date类不便于实现国际化,所以从JDK1.1版本开始,推荐使用Calendar类进行时间和日期处理.这里简单介绍一下Date类的使用. ...