MacDirectory Magazine

Adobe Creative Suite

MacDirectory magazine is the premiere creative lifestyle magazine for Apple enthusiasts featuring interviews, in-depth tech reviews, Apple news, insights, latest Apple patents, apps, market analysis, entertainment and more.

Issue link:

Contents of this Issue


Page 100 of 115

FEATURE REVIEW DREAMWEAVER CS6 > EXTENDING YOUR REACH WORDS BY RIC GETTER converting conventional web pages to smaller devices, Dreamweaver helps you build pages for a variety of devices almost simultaneously. Now, when you create a new document, you have the option to start with a Fluid Grid Layout. This calls up a dialog box that lets you set up some visual rules for phones, tablets and desktops. The idea is that you define a number of virtual columns for each device and Dreamweaver will build style sheets that let your page design slip into to those regions when they're displayed on the various devices or when a window is resized. Though it was only a half-point upgrade, Dreamweaver CS5.5 was something of a showstopper. It nudged web designers into the realm of multi-platform development, offered snapshots of HTML created by dynamic data and live views of in-progress pages with a built-in WebKit browser. In short, it was a hard act to follow. Now, Dreamweaver CS6 has taken the stage and we get to see how it looks compared with what was one of the more dramatic updates in the program's long history. The latest version will get Mac users' attention as soon as it launches. This release has been optimized for Cocoa and the difference in responsiveness is immediately noticeable. On virtually all fronts it varies from snappy to awesome. The other big change on the Mac is that Dreamweaver has (finally) adopted the oft envied "application frame" of the Windows version. Rather than being a collection of windows, palettes and panels, the entire application can be tucked into a single window that can either fill the screen or resize while maintaining reasonable proportions among the various panes. This isn't quite a full-screen view on the Lion sense, but has a number of benefits if you're using a single-screen desktop or laptop, and would be especially useful if you are using a new Retina MacBook (and have real lygood eyesight). Fluid Layout One of the most highly touted features in CS6 is fluid grid design. CS5.5 introduced several new tools that let you create versions of a page suitable for tablets and phones. This was obviously in an effort to provide more flexibility and convenience than Devi ce Central, a member of the Suite that was becoming increasingly hard to manage in a prodigiously proliferating market of smart devices. In CS6, Device Central quietly left the scene letting Dreamweaver take a completely new approach with a feature Adobe calls "fluid grid design." The intent is this: rather than Building a page with fluid grid layout, you actually start by adding your content to the minimum-width, phone-size version and then work your way up to shuffling things around for the desktop version. Thanks to the live, multi-screen preview, you get to see how all the formats respond to your layout in real time. Fluid grid layout is not yet sophisticated enough to make up for a lack of knowledge of CSS3 and HTML5. You'll still need to follow along carefully in the code panel if you want to prevent things from getting badly tangled. However, it does supplant the work of creating complex media queries and lets you do a lot more of your layout while dragging things around in the design window. The motivation needed to master multi- platform design may come from Dreamweaver's enhanced integration with PhoneGap's online Build service. PhoneGap takes your phone-friendly site and, using the latest compilers, build it into packaged apps for a variety of devices. (To do this for iOS, you'll need the security certificate that comes only with an Apple Developer membership.) One very cool feature we found with PhoneGap is that it creates a QR code on its site that can download the app directly to your device. jQuery Mobile has been a boon to multi- platform developers. Dreamweaver CS6 incorporates the library and makes it available as a collection of themes you can apply to an entire page or an individual element. Open a jQuery Mobile starter page and Dreamweaver will download and attach the necessary jQuery libraries. You're now able to insert jQuery 99 MacDirectory

Articles in this issue

Archives of this issue

view archives of MacDirectory Magazine - Adobe Creative Suite