用Dreamweaver可以一次做好對應不同螢幕大小的CSS版面,其流暢格點版面設計,讓使用者可以針對不同螢幕尺寸做出對應的調整,讓這個網站內容在不同裝置瀏覽時,都有不錯的呈現效果。

在CS6中,Adobe對Dreamweaver與Flash所新增的功能,幾乎都是針對以跨平臺開發的特性。這兩套過去以個人電腦桌面為主的網站、動畫開發工具,現在也可以用來開發行動平臺的內容與程式。

Dreamweaver可以快速設計不同螢幕大小的網站
Dreamweaver在上個版本已加入jQuery Mobile的功能,以便製作手機版的網頁,而這次Dreamweaver的改版中,我們認為最吸引人的就是提供了流暢格點版面(Fluid Grid Layout)功能,對於支援各種不同螢幕大小裝置的網站專案,它可以協助你完成設計。

流暢格點版面的使用方式很容易
在Dreamweaver CS5.5版中,Adobe加強不同螢幕尺寸的預覽機制,開發人員用它同時看到3種不同網頁尺寸的畫面,現在CS6有了流暢格點版面,則利用CSS3的技術,讓你在設計同一個網頁時,Dreamweaver便能自動排出符合不同的螢幕尺寸的版面,使物件對齊位置時,也相對容易。

使用時,當我們在Dreamweaver上,將流暢格點版面Div標籤建立後,就會產生自動產生對應的CSS指令,我們可以在程式碼中看到@media的語法,並搭配<div>、<nav>等HTML標籤調整。接下來,你可以調整行動裝置、平板電腦、桌面畫面的CCS版面,使網頁或Web App在各螢幕尺寸都有理想的呈現,而不用花時間為不同的裝置設計專屬版本的網頁,相當實用。此外,新版的螢幕預覽也提供更多解析度選項,而多螢幕預覽面板也能方便地檢視HTML5內容。

直接開發手機App
透過Dreamweaver CS6內建的PhoneGap Build服務,可以開發iOS與Android等7個不同平臺的App,減少開發不同平臺的時間。

當我們準備將Web App發布到手機上做測試,或上傳到應用程式商店時,只要在Dreamweaver網站選單中開啟,PhoneGap Build服務面板(首次使用時先免費註冊登入),即可將製作的內容打包成不同系統平臺相容的應用程式。同時,PhoneGap Build還可以將手機版網頁,直接發布到登入帳號的雲端空間(build.phonegap.com/apps),方便下載測試。

使用CSS製作動態效果很方便
Dreamweaver在CS6增加了CSS轉變(CSS transition)功能,開發人員現在能使用CSS技術做出簡單的網頁動態效果。要實作也不難,我們要在Dreamweaver上開啟新增的「CSS轉變」視窗,選取要轉變的元素目標與開啟轉變的動作後,接著設定轉變屬性與速度,就可以將CSS屬性的變化,製作成動畫轉換效果,例如當滑鼠停留在元素上時,產生放大文字,圖像縮放、增加陰影等多種動態效果。

基於CSS轉變這功能而言,在速度控制上,Dreamweaver提供6種計時函式可選擇,讓開發人員控制轉變效果的速度,並能夠設定持續時間與延遲,讓效果更具變化。當然,你也可以在CSS樣式面板中,檢視轉變分類的屬性。

除了上述特色之外,Dreamweaver新版本也提供色表概念管理的jQuery Mobile Swatches,同時改善上傳FTP效能,並增加W3C線上驗證服務,以確保標準網頁設計的精確性。

Flash可將動畫轉成HTML5內容
在Flash方面,CS6版提供了將動畫結果轉換到HTML5內容的功能,相當吸引人。開發人員要使用這個功能之前,需先連至Adobe官網中,下載並安裝Flash Professional Toolkit for CreateJS,它是一個免費的擴充功能。

轉換後的HTML5程式碼,可複製於其他專案使用
實際操作時,我們只要製作一段動畫後,在「視窗」選單中的「其他面板」選項裡,開啟Toolkit for CreateJS面板後,點選後,發布即可立即以預設瀏覽器來預覽轉換效果。我們在檢視網頁原始碼時,也可以看到轉換成HTML5、Javascript的結果,只要將這些程式碼複製後,即可套用至相關網頁開發專案中。

但要注意的是,Flash並不是所有效果都能支援轉換。我們實際在製作補間動畫(Tweens)並發布時,在輸出面版中,軟體會提示:此功能並不支援形狀補間動畫(Shapes tweens)與補間動畫(Motion tweens),但傳統的補間動畫(Classic tweens)是可行的。此外,原廠也表示,有些ActionScript 3.0也可能因為不支援,而無法顯現。

可製作預先封裝的AIR應用程式
目前Flash的發布設定中,可支援AIR 3.2,並能適用於個人電腦和Android與iOS等行動平臺,如果要簡化應用程式測試工作,現在的Flash可以預先建立經過封裝的Adobe AIR應用程式。舉例來說,像是在發布設定中,選擇AIR 3.2 for Android,接著在部署分頁視窗中的AIR執行階段中,勾選「AIR執行階段嵌入應用程式」即可。

此外,在發布模式中,HTML包裝函式中的視窗模式多了「直接」選項,這個功能可讓發布內容使用Stage3D,加速圖形演算。

最後,透過Flash內建的行動裝置內容模擬器,便可以在模擬Android或iOS的環境中,測試以Adobe AIR建立的內容。


設定屬性,即可產生CSS動畫
在Dreamweaver的CSS轉變(CSS transition)功能中,使用者可以使用CSS做出簡單的網頁動畫效果,只要設定轉變屬性與計時函式,就可以產生動態的CSS效果。

將Flash動畫轉換成HTML5內容
在Flash的Toolkit for CreateJS面板上,點擊發布,即可將動畫轉換成HTML5內容,若轉換過程若遇到不支援的動作時會出現警告提示,像是不支援形狀補間動畫與補間動畫的轉換。

支援新版AIR,適用智慧型手機平臺
目前Flash的發布設定中,可支援AIR 3.2,並能適用於Desktop、Android與iOS,例如針對AIR 3.2 for Android,可以勾選「AIR執行階段嵌入應用程式」,即可預先建立封裝的Adobe AIR應用程式,簡化測試工作。

 

相關報導請參考「全面瞭解Adobe CS6」

熱門新聞

Advertisement