Web前端開發(fā)神器(ALLOYDESIGNER)

ALLOYDESIGNER是一款免費(fèi)的web前端開發(fā)工具，它可以直接嵌入你的Web頁(yè)面中運(yùn)行，幫助你精準(zhǔn)、高效的構(gòu)建Web頁(yè)面的UI！使用AlloyDesigner后，你可以把設(shè)計(jì)稿拖進(jìn)你的Web頁(yè)面鋪在頁(yè)面的最底層，然后就可以對(duì)著設(shè)計(jì)稿來構(gòu)建DOM元素和CSS樣式啦，通過AlloyDesigner直觀地調(diào)整頁(yè)面，迅速達(dá)到與視覺稿一致的目的。

功能特色：

強(qiáng)大記憶恢復(fù)功能

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

便利的快捷鍵操作

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

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

固定視覺稿，調(diào)節(jié)透明度，測(cè)試開發(fā)等基礎(chǔ)功能強(qiáng)健

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

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

安裝方法：

1.在Chrome Web Store上安裝AlloyDesigner擴(kuò)展插件

2.點(diǎn)擊免費(fèi)，然后添加，就會(huì)添加到Chrome的地址欄的右邊

3.打開需要開發(fā)或者測(cè)試的頁(yè)面，然后點(diǎn)擊AlloyDesigner的圖標(biāo)，會(huì)在頁(yè)面下出現(xiàn)AlloyDesigner的工具條，然后打開右邊的加載視覺稿按鈕，選擇要加載的視覺稿

至此視覺稿就被加載進(jìn)來了，重新刷新頁(yè)面也不會(huì)丟失視覺稿

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

1.在官網(wǎng)上下載最新的AlloyDesigner代碼版alloydesigner.js 
2.在要測(cè)試或者開發(fā)項(xiàng)目的頁(yè)面中底部把AlloyDesigner引進(jìn)來

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

3.將視覺文件保存成home.jpg或者h(yuǎn)ome.png，放在與頁(yè)面所在同目錄下

或者視覺稿為其它文件，手動(dòng)設(shè)置視覺文件路徑

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

4.刷新頁(yè)面，即可以看到視覺文件被引入進(jìn)來了

使用方法：

用于調(diào)整頁(yè)面與測(cè)試

1.使用鼠標(biāo)移動(dòng)視覺稿，使視覺稿和頁(yè)面近似重合

2.使用方向鍵微調(diào)視覺稿，使視覺稿和頁(yè)面的參考點(diǎn)完全重合，沒有重影
3.這時(shí)候頁(yè)面不規(guī)范的部分就會(huì)有重影。

4.點(diǎn)擊固定按鍵或按Alt+F鍵，固定視覺稿

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

6.對(duì)樣式進(jìn)行調(diào)整，直到重合

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

或

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

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

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

測(cè)試工具的使用

測(cè)試工具可以測(cè)量每個(gè)div的像素寬高、距離等
使用快捷鍵Alt + D進(jìn)行測(cè)量模式

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

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

取色工具

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

CSS助手

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