ArtVisualizer Press Media | Archie Visual Design & Art Review

The key catch phrase in the newest version of Adobe Dreamweaver CS4, is “Time Saver.” And this is what the majority of the new (and enhanced) functions are based upon, saving you, the designer, time!

Although Adobe Dreamweaver CS4 is packed with many innovative helpful tools, the following were my favorite new features:

• New “User Interface” allows for easy navigating between work environments
• Preview and test web content in “Live View” instead of outside browser
• Quickly access code and CSS styles using “Related Files” bar or “Code Navigator”
• Employ “CSS Best Practices” without writing code
• Insert Photoshop images as “Smart Objects” to automatically web-optimized images

New User Interface

When first opening Dreamweaver CS4, the differences between the previous CS3 version and CS4 will not be immediately identifiable. However, upon closer exploration of the new and improved User Interface, there is a noticeable clean, uncluttered, simple to navigate layout; making it even easier to get from one work space to the next.

Also, the new Welcome Screen features a quick reference function of listings and links to “Top Features” (help) videos; providing a convenient way to access the Dreamweaver CS4 instructional data base.

Adobe Dreamweaver CS3 and Dreamweaver CS4

Adobe has named their new look, OWL (OS Widget Library). Within the new User Interface, the title bar has been replaced with the application tool bar.

One especially nice element of the new User Interface is the easy access preset workspace icon with a dropdown window. Where you can select a large variety of workspaces, as well as create and save your own custom workspace.

Adobe Dreamweaver CS4 Workspace Menu

Two additional revisited features that I felt were helpful: the Insert Toolbar is now located on the side panel; and the Split Screen now comes in both horizontal and vertical.

Live View

One of most welcomed changes in Dreamweaver CS4 is the time-saving ability to preview and test web content in record speed, with the new “Live View” function. This feature allows the web designer to validate and preview code; and make changes in Dreamweaver…instead of viewing each page and updating within a separate browser. To non web designers, this may seem like a minor upgrade, but to those who design web sites on a regular basis, it is a major advancement. Any function that saves time is worth praising.

I especially liked this new feature, as I create sites working in a split screen (that way I can manipulate code, and still get a “visual” of the site design). As all designers know, what you see on the designing screen is not necessarily what appears on the final “Online” design.

Adobe Dreamweaver CS4, new “Live View” and “Live Code” feature

As well as Live View, there is also the Live Code function. While I loved the Live View feature, I was disappointed that not even minor modifications could be made to the code within Live Code. Any changes to code had to be made within Dreamweaver’s Source Code (although Code Navigator does function in Live View).

Adobe Dreamweaver CS4, “Split Screen” feature

In previous versions of Dreamweaver, it was annoying to create a roll-over button and not be able to view the action within the design space. In Dreamweaver CS3, you had to stop designing, save your work…then, open your page to preview within a browser. Then close the preview and go back to designing in Dreamweaver.

The new “Live View” feature of previewing action-elements within Dreamweaver is a huge improvement, and of course, as Adobe promised, it is also a huge time-saver. As a side note: although “Live View” allows for viewing actions within Dreamweaver, it is not a replacement for reviewing your final project in “Preview in Browser.” However, the fact that “Live View” allows viewing of non-static design options is a welcomed and long awaited function.

Related Files and Code Navigator

With Dreamweaver CS4, designing a website can easily be accomplished by a weekend-novice or a hardcore-coder. Of course, as with most everything “computer related” even the most simple of tasks have many underlying layers of complexity.

For example, a website’s code is divided into related elements of hierarchy: Source code (main HTML)…First Level Child Documents (Main.css, TabbedPanels.js, Server-side includes, Spry Datasets)…and then the Deeper Level Child Documents. As a rule of thumb, lower-level child documents (unless they are within CSS) are not displayed within Dreamweaver.

However, Dreamweaver CS4, has developed workflow improvements in the “Related Files” options; allowing designers to view the code and make tweaks within external lower-level files while the main file is open.

In the same vein, the new “Code Navigator” gives instant access to related code when selecting specific elements on a page. To open the Code Navigator, simply place your cursor over the specified spot within your design, hold down the Alt key and left-click the mouse (which in turn will open the Code Navigator popup box).

The Code Navigator box displays all the “rules” that pertain to a specific item. Within the box, you can then click on each rule and display its contents. Double clicking on a code line will take you directly into the code pertaining to the Source Code view.

CSS and Property Inspector

Within the Property Inspector are now two new buttons: HTML and CSS, allowing designers to work with styles within the Property Inspector.

An important note: when working in CSS within the Property Inspector, be very cognizant of what you are doing; as a seemingly quick small change to a specific item on a page, can result in a global design change. So, be sure to work within the pull down menus, especially in the Targeted Rule section of the Property Inspector. Preplanning your CSS steps, instead of just clicking buttons (which I am known to do), is always a wiser move.

Within the Property Inspector CSS box, there is the New CSS Rule dialog box, allowing for easy access to a bevy of style changes. New in Dreamweaver CS4 is the ability to easily make less specific, or more specific, changes by using the Less Specific or More Specific buttons. From within the New Rule dialog box, you can then access the familiar CSS Rule Definition dialog box, and fine-tune your CSS rules to your site design’s specifications.

Photoshop Smart Objects

My all-time favorite new Dreamweaver CS4 feature is the ease of converting Adobe Photoshop images into Smart Objects; to use within a web base design. I use Photoshop on a daily basis. Thus, every image that I create is originally saved in a PSD format. Smart Objects saves me a ton of time. It also eliminates frustration when designing on the fly. Admit it, we have all done this: in the middle of a design project…finding the perfect image…and then realizing it has to be reformatted from a PSD file.

With Dreamweaver CS3 began the first-stage development of integrating Photoshop PSD images directly into Dreamweaver; with the introduction of copying PSD files and pasting them directly into a Dreamweaver document (to be resized and reformatted within Dreamweaver). However, manipulation of the reformatted image was not available in Dreamweaver CS3 (as a side note: Dreamweaver CS4 still has the copy/paste function for a quick “down and dirty” insertion of PSD images).

The new and improved version of Dreamweaver CS4 utilizes Smart Objects to facilitate the reformatting, editing, and resizing of PSD images, while “keeping” an avenue open to the original Photoshop PSD file format for future reuse and manipulation.

Next to working with code, image insertion and manipulation is a major part of web design. Being able to pull any image format from your files is a huge time-saver. Dreamweaver CS4 has made this possible with three easy steps all done without leaving Dreamweaver.

First, click “insert image” from the Dreamweaver toolbar. Then locate the PSD image you wish to insert into your web design. Once the image is selected from your files…the magic begins in Dreamweaver’s Image Preview window. Within the File selection, you can reduce the resolution and resize the pixels of the original PSD image.

The Options selection allows you to select (and preview) samples of different image settings. Within each setting are additional tools to optimize and manipulate the final image to perfection.

Dreamweaver then saves the new file as a Smart Object, allowing you to resize and optimize the file further from the Property Inspector. The most amazing thing…the new changes to the image, are made from the original Photoshop PSD image file. This in turn means that each time a change is made to the image inside of Dreamweaver CS4, you are working from the clear, non-distorted original image file.

New and Enhanced

As mentioned at the beginning of this review, I have just touched on a few of the outstanding new and enhanced features that make Adobe Dreamweaver CS4 a must have.

Adobe Dreamweaver CS4 – New and Enhanced Features

Adobe Dreamweaver CS4 is a must have upgrade for long time Dreamweaver users, as well as an invaluable new application for anyone just beginning to design web sites.

Dreamweaver CS4 has the perfect time-saving options, and ease of use (for both the pro and novice designer), making it the best time to Go Adobe!