【行動網頁規劃】安裝Brackets

Hi! 各位朋友大家好,我是小蔡老師,自從RWD設計ㄧ出爐後現在百家爭鳴在編譯器上使其更方便做更複雜的設計,好家在其網頁程式設計概念變動性不大,只是語法上會更精簡更精闢,小蔡最近也常被幾位講座學生問到Dreamweaver是否同Flashㄧ樣漸漸的被淘汰掉,因應近年來小蔡都使用純編譯器來做教學,答案是肯定的因為近年來RWD的興起DREAMWEAVER雖然有不斷的更新軟體,但是它最大的特色在編譯模式下的預視效果已經不敷各瀏覽器直接可視化效果,已經又變回需直接透過瀏覽器測試才能顯示真正的網頁效果,所以大部分設計者寧可選擇比較簡易免付費的編譯器或便宜又能達到同等效果的編譯器如Sublime Text,與此同時Adobe其實一直沒有坐以待斃,同樣也推出Brackets來予之抗衡,其實Brackets從2013年便已經推出,其實小蔡也一直有在用,很單純的小蔡偏向SUblime Text原因在於擴充套件比較多,可以執行的內容也比較完整,但在2015年Brackets推出兩個重大的系統予以抗衡,有興趣的朋友歡迎安裝使用測試看看,哪套你比較喜歡


軟體名稱:brackets
系統支援:Win/Mac
軟體費用:免費
官方網站: 官方站點

1. 進入官網下載並安裝brackets

2. 安裝的跑條

3. 安裝完畢後開啟介面- 它會先送一個index.html頁面

4. 如果對介面語言有必須要中文的朋友,點選Switch languge

5. 選擇繁體中文

6. 介面就自動更改成中文介面

7. 如果要【開啟】舊有的網頁檔案只要點選這邊就能【開啟舊檔案】

8. 開啟後在左欄上方會顯示你所開啟的網頁,也是在這邊切換不同頁面資料

9. 如果是要【新增頁面或檔案或資料夾】則是點選左下方滑鼠右建便會跳出

10. 右手邊有三個選像分別是【開啟瀏覽器測試頁面】【安裝擴充資源】【PhotoSHop圖層快速切片】

11. 如果點選【安裝擴充資源】會跳出下面的視窗可以安裝其他擴充資源

12. 【PhotoSHop圖層快速切片】則是將PhotoShop切片未輸出PS頁面檔在這個地方直接連接Adobe雲端硬碟直接製作網頁語法與切片的工作直接測定圖片位置,這算是brackets 2015最具特色的功能,我們會在後面特別開一個單元教導各位朋友製作一遍

(BLOG 線上教學皆為雅朵美術工房所有&BLOG作品皆為設計者阿哲類所有 未經同意請勿盜連或者轉帖,違反者依法處理)

我想發問