今年有機會參加了Adobe的CS6發表會, 有大家眾所矚目的新版PhotoShop, Illustrator, Flash, Dreamweaver…等, 小弟也相當期待這些對設計開發人員相當重要的工具, 隨著行動裝置的普及, 到底做了什麼樣的轉變, 今天分享一下讓小弟驚豔的Adobe Dreamweaver CS6.
資料與圖片來源: Adobe;
相信還滿多網頁開發人員都有使用Dreamweaver的經驗, 當然有些朋友比較厲害的是直接打開筆記本就可以敲html和CSS指令來做網頁, 不過Adobe Dreamweaver 就是提供了一套視覺化介面, 協助我們編輯網站內容或是整體架構, 發展至今, 甚至已經可以編寫行動應用程式了, 相信對美術設計人員是個非常好的消息, 很多程式的部份自己就可以來動手解決了.
小弟當天看了這三位大師的現場示範, 真的是學了很多的東西. 
這邊來開始介紹今天的主角 Dreamweaver.
現在大家除了自己的桌機外, 我們還會用筆電,平板, 手機…在各個不同的平台中, 解析度都不大一樣, 常常我們設計的網頁也會因為不同的解析度, 導致可能只適合在桌機筆電看, 但是在平板和手機上看就很醜, 該怎麼解決這個問題呢? 首先我們先看這個示範網站的設計吧!
講者將網頁瀏覽器(Chrome)縮放到不同的頁面寬度, 看會發生什麼事!
縮成平板瀏覽的尺寸.
甚至縮成手機瀏覽的尺寸, 整個設計都沒有跑掉, 更何況這還是個照片多的展示網站.
原因就在於其中使用了HTML5和CSS3, 可以根據螢幕大小來自動切換, Dreamweaver CS6在設計上支援了HTML5和CSS3的指令代碼, 並可以提供即時的預覽, 真的是相當的方便.
這個Fluid Grid Layout(流暢格點版面)可以協助我們完成for各種不同裝置螢幕大小的網站專案.
在建立新專案文件的時候, 就會跳出這個基本設定
看你要手持裝置用的
或是電腦螢幕用的
過去使用的Div Tag也可以有不一樣的作法了, 有新的Fluid Grid Layout Div Tag.
先建立一下這個特殊Div的ID吧!
這個DIV建立之後, 就會有自己對應的CSS指令自動產生(有夠方便的, 以前都弄得要死要活).
當然其中還有許多細節得輔助功能, 這裡就不多做介紹了.
這裡值得提的一點是對CSS3和HTML5的超強支援. 這裡示範如何將上方的導覽列變成半透明的.
只需要簡單的在那條DIV區塊, 的Background屬性設定修改顏色的設定.
顏色屬性的支援也愈來愈多了!! 而我們在這邊要用的是rgba()顏色屬性, 多一個a代表的就是Alpha透明度.
把最後面的透明度屬性改成0.5左右的Alpha, 就搞定囉!
現在看一下上方的導覽列, 是不是就這樣簡單的變透明了.(以前可能還要搞個.png檔才能順利實現)
像這種過去DIV沒辦法做的導圓角設計, 有了CSS3, 都能夠輕鬆完成.
只要做簡單的Corner數值設定就好了.
另外還有許多支援的jQuery的互動式UI設計.
可以讓原本普通的區塊和文字.
瞬間變成可以滑動的互動式介面, 大家有沒有聞到一點手機APP介面的味道啊?
上面講了這麼多功能, 無疑就是要為”怎麼用Dreamweaver做一個APP”這個議題來鋪路. 所以簡單的APP介面就可以這樣設計!! 接下來, 就是見證奇蹟的時刻!
這裡有個銷魂的PhoneGap Build Service選項.
PhoneGap Build Service主要目的就是針對Android和iOS等行動應用程式(小弟在現場還看到了黑莓, 微軟, symbian), 直接建立和封裝原生應用程式, 聽起來超屌的吧! 運用PhoneGap架構, 就能將我們做好的HTML直接轉換為行動裝置應用程式.
現場就直接給他輸出啦! 大家等著右下角的processing Bar搞定. 
完成了! 還直接跳出QRcode給你掃描, 實在是太方便了.
現場直接示範把剛剛那個做好的給他用打開來, 示範者透過Mac Reflection把自己的iPhone畫面投射到螢幕上給我們看.(圖示icon還沒來得及弄啦!)
還真的完成了! 超完整的啦!! (看那右下角的影子, 還以為是賈伯斯咧)
連Google Map等功能都可以順利載入使用
新一代的Dreamweaver還有很多奧妙的地方等著你去發掘啦! 除了小弟分享的CSS3/HTML5的支援, jQuery強化支援, PhoneGap功能, 解決各種裝置不同螢幕大小的流暢格點版面等, 其他像FTP效能提昇, W3C線上驗證, CMS整合支援…等, 因為使用者的習慣變了, 行動裝置的使用量提高, Adobe也同時完成了許多解決方案, 這全部都是這次升級的重大更新喔!
有興趣的朋友可以到Adobe官方網站(http://www.adobe.com/tw/products/dreamweaver.html)了解一下, 除了有很多示範影片之外, 還針對許多細節來介紹新一代Dreamweaver CS6在編輯網站和行動應用程式的各項功能, 甚至可以去下載試用版(http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=en_us)來玩看看.
以上分享給各位參考, 如果各位對內容滿意的話, 就到 KisPlay 3C俱樂部(https://www.facebook.com/LoveKisPlay) 按個讚給小弟一些鼓勵, 謝謝大家.
其他推薦文章
物價飛漲 買東西前用APP我比比!
