Kisplay／有了Adobe Dreamweaver CS6 我也会写APP!

图、文／ Kisplay

▲图／Adobe今年有机会参加了Adobe的CS6发表会, 有大家众所瞩目的新版PhotoShop, Illustrator, Flash, Dreamweaver...等, 小弟也相当期待这些对设计开发人员相当重要的工具, 随着行动装置的普及, 到底做了什么样的转变, 今天分享一下让小弟惊艳的Adobe Dreamweaver CS6.相信还满多网页开发人员都有使用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我比比!　Roger 老师也应该来妆一下的 APP　怎么样的 APP 闹钟才能叫的醒你呢?

►►►更多好看内容都在《ETtoday新闻云》首页