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

梅問題-《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
  Bootstrap是目前相當主流是RWD自適應套件之一,除了功能完善外,再來就是它的網格概念相當的簡易好懂,同時也相當容易客製化,這也是讓梅干愛不釋手的原因,同時也將Bootstrap導入每個專案中,但Bootstrap本身只是一套framework,所以並沒有設計工具,因此只能透過一般的文字編輯器,將所需要用的特效或版面,一一的key到原始碼中,而為了縮短製作時程,有上過梅干的Bootstrap的朋友都知道,梅干將這些Boostrap製作成短code,並快速的產生這些特效的原始碼,但那天梅干開啟許久沒用的Dreamweaver CC 2015後,突然無意發現,在建立新檔案的地方,怎多了一個Bootstrap的頁籤,便引起梅干的好奇,就研究了一下,沒想到大家的需求Dreamweaver終於聽見了,將Bootstrp變成圖形化介可,讓許多習慣DW的網設,也能輕易的使用,因此習慣用DW的朋友,不妨也一塊來看看,怎在DW CC 2015下使用Bootstrap來開發RWD的網頁吧!

Step1
在建立新檔案後,將頁籤切到Bootstrap,並將下方的勾點掉,不用載入預設的版型。
梅問題-《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step2
由於Dreamweaver會自動產生Bootstrap所會用到的元素,因此要先指定一個資料夾。
梅問題-《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step3
當建立完畢後,先進行儲存。
梅問題-《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step4
接著DW會把Bootstrap所會用到的檔案,複製到剛所指定的資料夾中。
梅問題-《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step5
接著切到原始碼模式,可看到這就是基本的Bootstrap的網頁結構,且DW完全沒有加料。
梅問題-《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step6
接著回到編輯模式,在插入面板中,將下拉選單更改為Bootstrap Compoments,這邊裡面都是Bootstrap所有元素。
梅問題-《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step7
就可透過拖拉的方式,建立Bootstrap的版型。
梅問題-《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step8
甚至也可直接嵌入廣告輪播。
梅問題-《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step9
完成後,切到Live來預覽一下,此次的Live功能更加方便了,上方還有尺寸表,可清楚知道目前所在的解析。
梅問題-《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step10
直接開啟瀏覽器預覽,一切都正常,因此當習慣DW的朋友,也趕快升到DW CC 2015後,就可用DW中使用Bootstrap,來製作RWD自適應的網頁啦!說真的還蠻方便的。
梅問題-《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具

相關文章

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

Adobe 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 佈景主題





回應本篇 »

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

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

共 1 梅留言

  • 第1梅
    Fay 說道:

    http://i.imgur.com/2BsqFEa.jpg?1

    請問一下 我插入bootstrape物件時都會一直跳出這個提醒 這樣是正常的嗎??@@

    回應:
    那是因為你的專案中沒有bootstrap的檔案,
    只要先儲存一次過後,就不會再出現了