Adobe Dreamweaver CS6 in Review

Related: Adobe, CS6, DreamWeaver

When first opening Adobe Dreamweaver CS6, don't let the familiar User Interface (UI) fool you into thinking that there are only moderate changes in this new version. Unlike other programs in the CS6 Master Collection Suite, the changes in the Dreamweaver CS6 UI are minor, yet the new features within Dreamweaver CS6 are significant. If you are thinking of upgrading your current version of Dreamweaver, this is the one that will fill all your web designing needs.

User Interface

The first notable change to the UI's document pane is the streamlining of the Document Toolbar. The Multiscreen Dropdown Menu button has been replaced by a compact Multiscreen Icon. The new Document Toolbar not only provides a sleeker appearance to the UI, but more importantly, it's a practical improvement. The combining of the different functions, and especially the removal of the Browser Navigation bar from the "optional toolbars dropdown" menu, allows space for the Document Toolbar and the Style Rendering Toolbar to reside side-by-side. For those designers that like to simultaneously utilize all the toolbars, this seemingly small change provides additional workspace in the Document Window.

Another change to the Document Toolbar: the new Live [live view preview] button is located next to the Code/Split/Design buttons, and is now the single gateway to: Live Code, Live View, and Inspect.

New links have been added to the Application Bar. Under Sites, the Manage Sites dialog box (Sites/Manage Sites) has a new, sleeker look. Although many of the functions remain the same, this version makes it easier to initially setup a new site. Within the main setup menu are two Business Catalyst (Adobe's web hosting program) buttons. The new Business Catalyst Site button enables you to create a temporary site within Business Catalyst; and the Import Business Catalyst button lets you import Business Catalyst sites to work on within Dreamweaver.

Another new link under Sites, on the Application Bar, is a gateway to Adobe's PhoneGap Build Service (which replaces the Dreamweaver CS5 Mobile Applications link). For those who have a PhoneGap Build Adobe account, this is a quick and easy way to connect and upload your Dreamweaver files. Also, new to the Application Bar, under File, is a link to create web pages using the new Fluid Grid Layouts. 

Three new icons have also been added to the Status Bar, which help you easily design for three different standard screen sizes for mobile phones, tablets and computers.

New CSS Features

Dreamweaver's new CSS Transitions Panel (located under Windows) allows website designers to use CSS Transitions to achieve effects that were once only accomplished in Flash or JavaScript. CSS Transitions are easy to use effects that allow designers to add visual flair to a website, by letting elements smoothly morph from one style to another. Currently, a popular use of CSS Transitions by web designers is to animate (enlarge or rotate) images in a photo gallery.

Another new CSS feature is the ability to apply Multiple CSS Classes to a single element. Dreamweaver CS6 makes it possible to add Multiple Classes directly into your document. It also gives you multiple ways to utilize the same feature from within the property inspector: directly from either the CSS or HTML panels.

Image Optimization

Dreamweaver CS6 has redesigned its Image Optimizer. As with the previous version, if you import an image file that is not web compliant (for example an image that was only saved in a Photoshop PSD format), you can still drag and drop the image into your web page and Dreamweaver will convert the file so it can be viewed on the Internet.


Scaled-down Image Optimization: converting a PSD image format into a JPEG image format

In Dreamweaver CS6 a scaled-down version of the Image Optimization box pops up. You can still optimize your original image, but the optimizing controls are limited. This redesigned Image Optimization panel allows users to optimize on the fly. The quality-slider also provides a preview of how the image will appear when uploaded to your server, along with the new file size.

There are some downsides to this feature. If, for example, you use the same optimized image on different pages within the same site, changes that you make to the image on one page will affect the images on all the pages. This can be even minor changes, like resizing. The easy workaround is to open the image in Photoshop, make the changes, and reload it to your site under a new file name.

Fluid Grid Layouts

Each month a new assortment of mobile devices flood the marketplace; accompanied by advertizing, urging customers to embrace the new, improved and redesigned [smartphone, tablet, laptop]. The consumers' overwhelming need to "keep current" with the innovative is a web designer's dread. As always, Adobe remains the leading futurist in regards to turning a quandary into an advantage. This is most apparent with the addition of Fluid Grid Layouts to Dreamweaver CS6.

If you are teetering on the edge of upgrading to Dreamweaver CS6, the introduction of Fluid Grid Layouts is the "must have" new feature that will erase all doubts. Fluid Grid Layouts is ground-breaking technology. In the past, to accommodate the numerous size differences of devices that we view websites on (to view the site as designed), separate pages needed to be created from scratch. With Fluid Grid Layouts, one design is designed with options to easily expand or contract certain page elements, depending on the device it is viewed on [desktop/laptop, smartphone, tablet].

Like the name implies, the new Fluid Grid Layouts [File/New Fluid Grid Layouts] feature's magic is in its grid design fluidity. This new feature gives designers the option to create "grid-based layouts," that automatically adapt to screen size changes of up to three different devices by choosing: the number of columns for each device; the gutter percentage (space between columns), the percentage of the targeted width's viewing area for each device.


Same design viewed in a full screen and on a smartphone

Moving the grid lines on the left adjusts the margin within the Div, and moving the grid line on the right adjusts the width of the grid. You can also align the Div with the grid. Until you get used to their functionality, it's easy to confuse what each line adjusts. As with all things Adobe, the more you use a function or feature, it quickly becomes second nature.

Lastly, when first saving your new Fluid Grid Layouts page, notice that it adds a CSS (Boilerplate) file and JavaScript (respond.min) file. For the Fluid Grid Layouts feature to work, it is imperative to keep both of the newly created (CSS and JavaScript) files in the same folder as your recently created Fluid Grid Layouts HTML file. 

Web Fonts Manager

Designers from the print industry are always looking for new ways to bring their creative font innovations to their web pages. Yet, web coders know that there are limited numbers of fonts that are truly web-safe, and can be viewed across the majority of platforms and browsers.

An often overlooked new feature in Dreamweaver CS6 is Web Fonts Manager, which turns fonts that have formally been a web coder's nightmare into a web designer's sweet dreams. With the introduction of the Web Fonts Manager to Dreamweaver CS6, Adobe has taken the stress out of managing non-web-compliant fonts.

Adobe offers four different available font format [TTF, EOT, WOFF, and SVG] uploading slots. Yet, keeping with the Dreamweaver CS6 theme of streamlining, you conveniently only need to upload one font format from your font files, and the Web Fonts Manager automatically uploads the other available formats.

As a web designer and a web coder, while reviewing Dreamweaver CS6, I found the Web Fonts Manager new feature intriguing. My extended review of the new Dreamweaver CS6 Web Fonts is available here.

FTP Improvements

Once your site is designed and ready to be presented to the world, you'll appreciate the enhanced performance of the FTP Client. Located within the Files Panel, the FTP upload and download speeds are greatly improved over past versions. Although speed may be the first improvement that you notice, there are other new features of the FTP Client that you'll also appreciate. The new multi-channel support allows users to send and receive multiple files at the same time. Also available are FTP Tool Tips that show the percentage of completion for uploads and downloads.

Another new FTP feature in Dreamweaver CS6 is the FTP last-time-used memory … this feature can be a timesaver, especially if you only work with one site and only upload to one server. However, if you have multiple sites, located on multiple remote servers … forgetting to check the FTP upload location could result in disastrous results (especially when it comes to updating an index page).

To solve this potential obstacle, Adobe has added a Synchronizing Button that allows you to know ahead of time which server your files will be uploaded to (for example, if you are uploading your files to a test server or to your actual remote server).

To Buy or Not to Buy

In our uncertain economy it's no longer practical for the average consumer to purchase each new release of their favorite software programs. However, if you design websites for a living, Dreamweaver CS6, especially with its new multimedia features, is a must-have upgrade. Adobe has not only added new practical features, but also streamlined the familiar ones, making them even easier to use.

To help with your acquisition decision, Adobe is now offering Dreamweaver CS6 at several formats and  price-points: yearly or month-to-month subscription memberships; conventional boxed (or downloadable) full versions; upgraded version; the teacher/student version. Dreamweaver CS6 is also available within specific CS6 suites.

If you opt for the subscription version, be aware that Adobe provides an array of subscription options to purchase Dreamweaver CS6. You can purchase Dreamweaver CS6 as an individual subscription (yearly or month-to-month subscriptions available). Dreamweaver CS6 is also one of the numerous programs included in the Adobe Creative Cloud Master Collection (also available on a yearly, or month-to-month subscriptions basis).

For those who have always wanted to give Dreamweaver a try, there is also the thirty-days-free trial version. The different price points and formats reminded me of the infamous Bubba talking shrimp scene from the Forest Gump movie. However, with the multitude of optimal purchasing plans, Adobe has made Dreamweaver CS6 affordable, and within every web designer's budget.


Get to know industry leaders and professionals
as they sit down and talk candidly with
Contributing Columnist, Dee-Marie,
Author of "Sons of Avalon: Merlin's Prophecy"

Visit Dee-Marie on Twitter: Dee_Marie_SOA



October 1, 2012

Please note: If you find the color of the text hard to read, please click on "Printer-friendly" and black text will appear on a white background.

Create your masterpieces with products from the Renderosity MarketPlace

PLYMOUTH BELVEDERE CONVERTIBLE 1958

Steam One-Man Band

Surreal Zelene

FR Everday Faces II

Revamped Storybrook
Check out What's on Sale and see the Hot New Products for more items!

Powered by Bondware
Newspaper Software | Email Marketing Tools | E-Commerce Marketplace