困擾

設計師給出靜態的高保真圖片， 需要前端工程師按照高保真圖，進行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文件夾。設置方法見： https://c7sky.com/chrome-devtools-workspace.html

3、 將 alloydesigner.js文件嵌入到 待調試的html網頁中。

---- 然后就可以嘗鮮了。

?

alloyteam確實好樣的， 為web前端開發人員造福啊！http://alloyteam.github.io/

總結

以上是生活随笔為你收集整理的分享：一款前端布局工具（alloydesigner）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。