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!

Editor's note: A must to check out is Adobe TV, where you can
find an abundance of tutorials and tips to make your work easier in
Dreamweaver, as well as other Creative Suite applications.
Especially note the new "Everyday Timesavers" videos that provide
much helpful information in short video clips that will serve well
to help get any job done. Renderosity members: If you have video
tutorials of your own to share with the community, please consider
posting to the Renderosity Video Center.

Supporting images are copyright and cannot be
copied, printed, or reproduced in any manner without written
permission from Renderosity