Dreamweaver, 手機網頁, 網頁設計

Dreamweaver CS6「流變格線版面」隨著電腦、平板、手機自動切換網頁版型

梅干2012/09/19
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
  現在作網頁不但麻煩,也愈來愈複雜,當好不容易把電腦作完後,還得依照手機重新量身打造,比較講究一點公司,連平板也不放過,所以現在單一個網頁,就要設計三種不同的版型,真是一件苦差事,但現在有了Dreamweaver CS6,新增了一個「流變格線版面」的功能,讓你只要作一個頁面,就可同時在電腦、平板、手機等裝置顯示,且還會依照不同的裝置,自動的切換版型,讓版面適合各裝置的瀏覽,無需寫任何的程式碼,因此只要設計人員,就可自行完成,現在就一塊來看看吧!要如何使用這個新功能「流變格線版面」。

開發工具:
軟體:Dreamweaver CS6
功能:流變格線版面
實用性:★★★★
難易度:★★★

Step1
開啟Dreamweaver CS6,選擇新增檔案,將左邊切換到「流變格線版面」頁籤,接著將文件類型選擇「Html5」,再按「建立」
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step2
設定CSS檔案名稱,再按「存檔」
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step3
建立好後,再按全部儲存,設定網頁名稱,再按「存檔」
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step4
「複製」,這時DW CS6會把這二個檔案,複製到專案中。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step5
完成後,在專案的檔案中,就會看到右下的檔案。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step6
基本上只需修改html、css檔,在css檔中可看到會有三個一模一樣的樣式名稱,分別則用來設定手機、平板、電腦的版型與樣式。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step7
點上方的工具列,版面 / 插入流變格線版面
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step8
設定 插入流變格線版面 的ID名稱,其實它就是一般的DIV的標籤而已。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step9
依序的就可建立幾個流變區塊(div區塊),同時在下方會看到,目前的版面狀態是在手機模式下,若希望手機是要用這樣條列式呈現,這樣就已完成一個版型了。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step10
接著切到平板模式,這時就可直接修改Div的區塊大小。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step11
當把二個都變小時,若要把下方的Div向右排時,只要點一下Div右邊的箭頭,這時區塊就會自動向上靠齊。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step12
這樣就完成平板版型的樣式啦!
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step13
接著再切到電腦圖示,調整電腦版型所要呈現的樣式。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step14
當版型都調整好後,可透過CSS樣式面板,來設定各Div的CSS樣式,這邊梅干建議直接開啟CSS檔修改,會比較方便些。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step14
當一切都調整好後,馬上來測試看看。
#電腦版
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
#平版
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
#手機版
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
  是不是超方便的呀!當網頁在不同裝置時,就會自動切換適合的版型,完全不用寫任何的程式碼,由於目前Dreamweaver CS6的「流變格線版面」不支援巢狀式的Div,而這可透過原始碼的方式直接作修改,因此若習慣直接從原始碼進行編輯的朋友們,會覺得更加的得心應手,比用拖拉的方式,和內建的CSS設定面板來的好控制許多,因此若你也是網頁設計從業人員,不坊也抽空試試看吧!
[範例預覽] [範例下載]
UAG軍規iPhone防摔殼