Adobe Dreamweaver CS6以上版本全面支援Bootstrap

梅問題-Dreamweaver CS6以上版本全面支援Bootstrap
  許多網頁設計師最習慣還是使用Dreamweaver,雖然目前Dreamweaver CC 2017 beta版,終於有了大幅度的改版,讓Dreamweaver在開發網頁變得更方便,同時也對Bootstrap支援度更加完整,但對於許多網頁設計朋友,還是使用CS6早期的版本,因此最近梅干也在想,怎麼讓以前的Dreamweaver版本也能使用Bootstrap來設計RWD自適應網頁。
  所以就研究了一下Dreamweaver的程式片段,而這功能在Dreamwaver CS版就一直存在這, 其它最大的功用就是可以把一些常用的碼,作成快速鍵的方式來產生,作用就與Sumbline Text中Emmet自訂碼是相當同的,而梅干就把Dreamweaver CC 2017版中的Bootstrap程式片段移植出來,經梅干實測後,可順利在任何Dreamweaver的版本中產生Bootstrap中的碼,並麻煩好友男丁與鄧教授的相助下,製作了自動安裝版,因此習慣使用Dreamweaver的朋友們,一塊來看看怎麼讓舊版的Dreamweaver也支援Bootstrap。
Dreamweaver Bootstrap擴充:
適用版本:Dreamweaver CS3+(建議CS6以上)
擴充下載:http://dl.minwt.com/qSriymz

Dreamweaver Bootstrap擴充安裝:
#MAC
解縮後,雙響MAC/Setup,接著就會自動安裝完成。
手動安裝:將Bootstrap_Snippets複製到/Applications/Dreamwaver版本/configuration/目錄下。
梅問題-Dreamweaver CS6以上版本全面支援Bootstrap
#Win
解縮後,雙響Win/Setup.cmd,接著就會自動安裝完成
手動安裝:將Bootstrap_Snippets複製到C:\Program Files\Adobe\Dreamwaver版本\configuration\目錄下。
梅問題-Dreamweaver CS6以上版本全面支援Bootstrap
Dreamweaver Bootstrap使用:
Step1
首先,到Bootstrap官網,將Bootstrap下載回來,或將剛解壓中的bootstrap-3.3.6-dist目錄中的檔案複製到專案中。
梅問題-Dreamweaver CS6以上版本全面支援Bootstrap
Step2
接著開啟Dreamweaver,建立新檔案,並開啟程式片段。
梅問題-Dreamweaver CS6以上版本全面支援Bootstrap
Step3
將原來的html碼刪除,將程式片段中的bootstrap_tpl拖拉到原始碼中。
梅問題-Dreamweaver CS6以上版本全面支援Bootstrap
Step4
這樣就會建立好bootstrap的網頁架構,接著就可從程式片段中,加入所有Bootstrap的元素。
梅問題-Dreamweaver CS6以上版本全面支援Bootstrap
Step5
當使用Dreamweaver CS6的版本,在切到設計與即時模式時,可立即看到預覽的結果。
梅問題-Dreamweaver CS6以上版本全面支援Bootstrap
Step6
就連Boostrap中的網格系統也能正常顯示。
梅問題-Dreamweaver CS6以上版本全面支援Bootstrap
Step7
甚至還可切換顯示的尺寸。
梅問題-Dreamweaver CS6以上版本全面支援Bootstrap
Step8
雖然Dreamweaver CS3可使用,但在預覽模式時,就無法正常的顯示,需透過瀏覽器才能預覽最終結果,因此有了這Bootstrap的程式片段後,就可在Dreamweaver內使用Bootstrap啦!
梅問題-Dreamweaver CS6以上版本全面支援Bootstrap

相關文章

Adobe Dreamweaver CC 2017-beta測試版搶先用

Adobe Dreamweaver CC 2017-beta測試版搶先用

Dreamweaver CC2015限定-與PSD檔更緊密結合,網頁切版排版更快速

Dreamweaver CC2015限定-與PSD檔更緊密結合,網頁切版排版更快速

Dreamweaver CC安裝Emmet套件,實現在Dreamweaver下也可使用Emmet

Dreamweaver CC安裝Emmet套件,實現在Dreamweaver下也可使用Emmet

Dreamweaver 視覺化的編輯與設計 WordPress 佈景主題

Dreamweaver 視覺化的編輯與設計 WordPress 佈景主題

《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具

《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    阿瑪 說道:

    你好~目前檔案似乎無法下載了?

    回應:
    您好~檔案可正常下載喔!

近期講座

近期講座

更多講座