ALLOYDESIGNER是一款免費的web前端開發(fā)工具，它可以直接嵌入你的Web頁面中運行，幫助你精準、高效的構建Web頁面的UI！使用AlloyDesigner后，你可以把設計稿拖進你的Web頁面鋪在頁面的最底層，然后就可以對著設計稿來構建DOM元素和CSS樣式啦，通過AlloyDesigner直觀地調整頁面，迅速達到與視覺稿一致的目的。相似軟件版本說明軟件地址edgecam2012 官方版查看計蒜客少兒編程1.0.3 官方版查看Coding Galaxy1.4.6 最新版查看DebugTrack2.4.530.1830 官方版查看Regester2.0.1 官方版查看

功能特色：

強大記憶恢復功能

刷新后恢復上次狀態(tài)，無需重新調整視覺稿位置

便利的快捷鍵操作

使用易記的快捷鍵操作，進一步提高開發(fā)效率

穩(wěn)固的基礎功能

固定視覺稿，調節(jié)透明度，測試開發(fā)等基礎功能強健

豐富的開發(fā)輔助工具

包含測距工具、CSS助手與取色器等快捷工具

安裝方法：

1.在Chrome Web Store上安裝AlloyDesigner擴展插件

2.點擊免費，然后添加，就會添加到Chrome的地址欄的右邊

3.打開需要開發(fā)或者測試的頁面，然后點擊AlloyDesigner的圖標，會在頁面下出現AlloyDesigner的工具條，然后打開右邊的加載視覺稿按鈕，選擇要加載的視覺稿

至此視覺稿就被加載進來了，重新刷新頁面也不會丟失視覺稿

手動嵌入代碼的方式使用AlloyDesigner(IE7 +)

1.在官網上下載最新的AlloyDesigner代碼版alloydesigner.js 2.在要測試或者開發(fā)項目的頁面中底部把AlloyDesigner引進來

<scripttype="text/javascript"src="alloydesigner.js"></script>

3.將視覺文件保存成home.jpg或者home.png，放在與頁面所在同目錄下

或者視覺稿為其它文件，手動設置視覺文件路徑

<scripttype="text/javascript"> $AD.set("design/design.jpg"); </script>

4.刷新頁面，即可以看到視覺文件被引入進來了

使用方法：

用于調整頁面與測試

1.使用鼠標移動視覺稿，使視覺稿和頁面近似重合

2.使用方向鍵微調視覺稿，使視覺稿和頁面的參考點完全重合，沒有重影 3.這時候頁面不規(guī)范的部分就會有重影。

4.點擊固定按鍵或按Alt+F鍵，固定視覺稿

固定后仍然可以使用Ctrl + 方向鍵微調視覺視覺稿的位置 5.在需要調整的地方，點擊右鍵審查元素，審查元素

6.對樣式進行調整，直到重合

7.記錄樣式修改。將修改的樣式手動寫在文件中，或者使用Chrome的Workspace功能自動更改。(查看怎么配置Workspace)

或

直接用于開發(fā)頁面(For Chrome)

AlloyDesigner可以直接用于開發(fā)頁面，這種開發(fā)更加便捷與直接，較傳統(tǒng)的開發(fā)模式，真正具有即見即所得的能力。 此時Chrome F12工具充當編輯器，AlloyDesigner提供制作藍本與其他輔助工具支持。

1.配置Workspace功能，自動保存F12中的修改。這樣，瀏覽器就充當了部分編輯器的功能 2.加載視覺稿，將視覺稿固定在頁面最上面合適的位置 3.點擊固定按鍵固定（Alt + F)，視覺稿做為頁面的背景，然后可以適當調整透明度（使用Alt + 上/下鍵） 4.使用測試工具對頁面進行測繪，然后將樣式通過F12寫入文件中去 5.使用取色工具，取視覺稿顏色 6.完成開發(fā)

測試工具的使用

測試工具可以測量每個div的像素寬高、距離等 使用快捷鍵Alt + D進行測量模式

不透明度調節(jié)工具的使用

不透明度調節(jié)主要調節(jié)視覺稿與body的不透明度，達到一個合適的不透明度，更易于開發(fā) 在視覺稿固定前，視覺圖片處于body之上，這時調節(jié)的是視覺圖片的不透明度，固定之后，文檔處于視覺圖片之上，這時調節(jié)的是body的不透明度。

取色工具

取色工具用于取視覺圖片上的顏色 點擊取色工具(Alt + X)按鈕進入取色模式, 在視覺稿要取色的位置上點擊進行取色，然后在右下角面板中的顏色值復制即可

CSS助手

css助手用于快速查看應用于元素上的樣式 點擊css助手按鈕(Alt + C)進入CSS助手模式，鼠標在元素上停留即可看到應用于元素上的樣式規(guī)則