Review of Adobe Dreamweaver CS4

If you want to compare some of the features of Dreamweaver CS4 with Dreamweaver CS3, click on review.

First, let's talk about the updated interface. It is much more similar to the other Adobe Creative Suite 4 products. There are now undockable and moveable panels which are wonderful, especially if you are using two monitors. Also, the choices of workspace configurations are plentiful and you can create your own. The tabbed feature which Adobe has added to other programs has been a part of Dreamweaver in previous versions. When I work on a review and use my second monitor for other materials, all I do is click on Classic for my choice of workspace, and all the panels are contained on one monitor. When I want to expand my panels to a second monitor, I have configured my own personal workspace. The ability to work on a second monitor is really helpful. Often I keep all my basic panels (configuration - CLASSIC) on my one monitor and the Code Inspector on the other. That way I can work in Design mode and check code using the Inspector.

I suggest that you look at the Preferences Edit>Preferences closely and early on in your exploration of Dreamweaver CS4. They have been enhanced and new ones have been added. It makes working very individualistic and customizable.

Live View has been added to the interface. It is different than using the File>Preview in Browser command. It freezes the Design Image, but you can still edit in the Code mode. Below is a direct quote from the New Features Information found by clicking that tab on the Welcome Screen.

"An additional advantage of Live view is the ability to freeze JavaScript. For example, you can switch to Live view and hover over Spry-based table rows that change color as the result of user interaction. When you freeze JavaScript, Live view freezes the page in its current state. You can then edit your CSS or JavaScript and refresh the page to see the changes take effect. Freezing JavaScript in Live view is useful if you want to see and change properties for the different states of pop-up menus or other interactive elements that you can’t see in traditional Design view."

Dreamweaver CS4 has added a number of changes. I will describe them in this review. When I started to write my various reviews of the programs of the Adobe CS4 Master Collection, I proceeded as always, which is to write them directly in Dreamweaver. I did get a shock in this new version when some of the controls did not work as before or they had radically changed. These were the ones that I dealt with initially when I started to write and explore using Dreamweaver CS4.

When I first started using Dreamweaver CS4, I felt that a lot of the changes complicated my workflow. However, as I used it, I found that the Preferences, working in CSS STYLES, Code Navigator, and the Code Inspector solved most of the issues. These are wonderful tools, but like everything else, you have to learn how to use them. Let me state my perspective and workflow. I am not working with many websites where I have to make global changes. So my opinion might be very specific to how I work. I have always loved Dreamweaver (used it since version 4) and found it very easy to use. I usually work in the Design mode, but still insert HTML or CSS code where necessary. My articles for the last few years starting in Dreamweaver CS3 are designed around the Adobe One Column Liquid Center template. In CS3, I could make changes very easily as to where my cursor would appear on the page by clicking on the align icons. Since I usually use left align for text and center align for images, this workflow was very easy to accomplish using the icons.

However, in Dreamweaver CS4 in the CSS mode, the icons for align as well as bold, italics, and color create global changes which is normal. To create individual changes, you have to write rules.

Coming directly from Dreamweaver CS3 it is confusing and the steps are more time consuming even though they reflect CSS more correctly. These changes are called the "Best CSS Practices" new feature. More in depth documentation would help alleviate this transition. Also, what might be helpful is templates that contain more CSS code or that link to external style sheets (CSS) so that people could dissect them. There is a learning curve to this new Properties Panel and you do need to understand how to write code better than you did in Dreamweaver CS3. You can still create a website using HTML by using the format menu. However, the more fluent you get in understanding CSS, the more powerful is Dreamweaver CS4 and the more you will appreciate the ease they have created for coding.

When I first opened Dreamweaver CS4, the icon of the pencil led me to Nero Photosnap Viewer Essentials which is an internal editing program and offers a lot of choices and sub-menus for those who do not have an other image editing program or want to do it on-the-fly.

You can always switch editing programs. Go to Preferences>File Types/Editors and make Photoshop primary for all the file types you want. The pencil will be replaced by the Photoshop Icon.

A new addition is Smart Objects. For those working with Smart Objects in Photoshop, this is a useful addition. Also, if you want to change the Smart Object, you can change it in Photoshop, and once back into Dreamweaver, just right click and click on Update From Original.

There are many ways to find code and information. One is the new Related Files and Code Navigator which can be found on the Related Files bar just under the document tab. You can click on one of the names and it will open the document in Split Code Mode.

You can, also, alt-click to find out information about the page.

InContext Editing is an Adobe Service which allows clients to modify web pages. The two examples show how I set up the date on my index page so it could be updated by someone else.

Code hinting for Ajax and JavaScript frameworks has been added. First let's look at a page with a Spry menu. Notice the top button in the screen capture.

Next, let's look at how I activated another new feature, the Code Navigator, by right clicking.

These tools work with all types of code, just alt click. Different Views will bring up different menus.

Spry capabilities have been added to Dreamweaver CS4. Below are the Spry choices.

Some of the other new or enhanced additions to Dreamweaver CS4 are listed below.

The following features have been deprecated for Dreamweaver CS4:

System requirements

Windows

  • 1GHz or faster processor
  • Microsoft® Windows® XP with Service Pack 2 (Service Pack 3 recommended) or Windows Vista® Home Premium, Business, Ultimate, or Enterprise with Service Pack 1 (certified for 32-bit Windows XP and Windows Vista)
  • 512MB of RAM
  • 1GB of available hard-disk space for installation; additional free space required during installation (cannot install on flash-based storage devices)
  • 1,280x800 display with 16-bit video card
  • DVD-ROM drive
  • Broadband Internet connection required for online services*

Mac OS

  • PowerPC® G5 or multicore Intel® processor
  • Mac OS X v10.4.11–10.5.4
  • 512MB of RAM
  • 1.8GB of available hard-disk space for installation; additional free space required during installation (cannot install on a volume that uses a case-sensitive file system or on flash-based storage devices)
  • 1,280x800 display with 16-bit video card
  • DVD-ROM drive
  • Broadband Internet connection required for online services*

The cost of Dreamweaver CS4 by itself is US $399.00 with upgrades starting at US $199.00

A trial version of Dreamweaver CS4 is available from Adobe.

Adobe has added a number of new features that will increase the range of Dreamweaver's abilities. Many are online based or use online resources. InContext Editing is one of them which should be especially useful for web designers who want their clients to be able to work on specific regions of their website. This insures that certain code can be protected by making it non-client editable. I have discussed or listed listed many of these new and enhanced features. In Dreamweaver CS4, you will find a number of older features have been deprecated.

If you are not using Dreamweaver CS4, I recommend it highly and wouldn't use any other program. Understanding coding is necessary if you want to be able to control it and not use deprecated code. In the past I have tried a number of other web authoring software including GoLive, but I have always come back to Dreamweaver. This version has more obvious coding options through the new Properties Panel. You can, also, create new rules through the CSS Style Panel by clicking on the New Rule icon on the bottom right. As I said earlier, the more code you know, the more you will appreciate the new and enhanced features of Dreamweaver CS4.

If you are thinking of upgrading, I always suggest trying the trial version.

For information on the Adobe Creative Suite 4 Master Collection, click on the link. The cost is US $2,499.00 with upgrades from US $899.00 You can get a trial DVD set for US $15.99. This link, also, lists all the programs contained in the Master Collection as well as give information on the individual programs.

  • InDesign® CS4
  • Photoshop® CS4 Extended
  • Illustrator® CS4
  • Acrobat® 9 Pro
  • Flash® CS4 Professional
  • Dreamweaver® CS4

 

  • Fireworks® CS4
  • Contribute® CS4
  • After Effects® CS4
  • Adobe Premiere® Pro CS4
  • Soundbooth® CS4
  • Adobe OnLocation™ CS4
  • Encore® CS4*
  • Adobe Bridge CS4
  • Adobe Device Central CS4
  • Dynamic Link
  • Version Cue® CS4

For more information on Adobe products, go to http://www.adobe.com

Below are links to my reviews of other Adobe CS4 software.

Review of Acrobat 9 Pro

Review of Photoshop CS4 Extended

Review of Illustrator CS4

Review of Fireworks CS4

Review of Flash CS4 Professional

Review of InDesign CS4

Update 02-13-13: The review has been translated into Serbo-Croatian by Anja Skrba. http://science.webhostinggeeks.com/adobe-dreamweaver-cs4