瀏覽器, 網頁設計, 網頁資源, 電腦不求人

Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具

梅干 2016/05/17
梅問題-Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具
  先前曾分享過Pinegrow Web Designer這套網頁開發工具,不但全視覺化操控,同時可開發Bootstrap、Foundation、AngularJS...外,甚至還可開發WordPress的佈景主題,這對於設計人員來說,是件相當方便的事情,無需看著冷冰冰的原始碼,腦海裡自己勾勒出整個網頁的架構藍圖,甚至Pinegrow Web Designer這套所產生出的Bootstrap的網頁框架,右手邊還會呈現出網站的樹狀結構外,同時還可以隨時修改已建立的結構。
  而這麼好用的工具,並非免費且隨著所需的功能不同,費用也不同,但若只需使用到Bootstrap的朋友,有福啦!Pinegrow Web Designer有推出免費版,且直接掛載在Chrome瀏覽器中,直接開啟瀏覽器立即就可使用,因此有在使用Bootstrap的朋友,也趕快來安裝一下囉!
Pinegrow Web Designer:
外掛名稱:Pinegrow Web Designer
支援平台:Google Chrome
下載網址:https://chrome.google.com/

Step1
進到外掛網頁後,點一下加到CHROME鈕,就可完成安裝。
梅問題-Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step2
這隻外掛安裝完後,會放在應用程式中,接著點一下Pinegrow Web Designer的圖示。
梅問題-Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step3
開啟Pinegrow Web Designer應用程式後,點右下的OK鈕.
梅問題-Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step4
操作界面就與之前的電腦版一模一樣,畫面也是一分為三,中間可以建立新專案,或是開啟舊檔襄進行編輯。
梅問題-Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step5
建立好後,左邊欄就是所有可用的元件,點一下或拖拉到中間的工作視窗即可。
梅問題-Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step6
甚至也可編輯元件的原始碼,功能一點也沒少。
梅問題-Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step7
當編輯完畢後,點上方的File / Downlaod project Zip,就可把剛所製作的專案給下載回來。
梅問題-Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step8
接著再點對話框上方的連結,就可將專案給下載回來。
梅問題-Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step9
下載完畢,解壓縮後,就會看到所有的檔案,接著再點new.html檔。
梅問題-Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step10
立馬可用瀏覽器來檢查一下,基本上在Pinegrow Web Designer看到的畫面,幾乎與結果畫面是一致的,因此有這工具後,讓在製作RWD網頁更加的簡易。
梅問題-Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具