GrantPalin.com

Dreamweaver CS3 isn’t a huge update over version 8, although it does bring a few new things to the party.

Interface

The interface hasn’t really changed the way Photoshop, Illustrator, or Flash have. It looks quite like Dreamweaver 8. There’s still the same sliding palette layout down the right side, although one palette did get renamed. And the toolbar is at the top like it has been in the last few versions. And the left bar, introduced in Dreamweaver 8, is back, sporting some useful code control functions (indent/outdent line, add/remove comment, etc).

Cross-Application Integration

Previously, when moving back and forth between Photoshop and Dreamweaver, I would have to save an image in Photoshop, then switch to Dreamweaver to import the image. This can become repetitive and annoying when frequently refining images to fit a website. CS3 provides a way to reduce this issue. When in Photoshop, and with an image open, you can select all of the image (or part, if necessary), go File->Copy, or File->Copy Merged (if the image is multiple layers), and do a paste in Dreamweaver. A window will appear, asking for your preference of image format, transparency colour, etc, and when that is done, your image is immediately imported into Dreamweaver.

This technique can be done in the same way with Fireworks in place of Photoshop.

This might seem like a little thing, but I know that I will get great use out of it when implementing a new design onto a website. I’m often wanting to tweak and fine-tune images, so I have to go back to Photoshop/Fireworks and make adjustments, then back to Dreamweaver to re-import the images and ensure they comes across all right. This ability to be more direct about the process will be a good time saver.

Prebuilt Templates & Layouts

When you ask Dreamweaver to create a new document, you get a box similar to the figure below; it shows several categories of documents you can create.

In Dreamweaver 2004 and 8, at least, there were prebuilt templates you could use as a starting point. This trend has continued in CS3. The templates are located under Page from Sample; we have CSS Style Sheet, Frameset, Starter Page (Theme), and Starter Page (Basic).

CSS Style Sheet

Basic, bare-bones style sheets for a quick start. Usually just adjusts font size, face, and colour, for paragraphs, lists, headers, and tables. Also provides basic styling of links.

Frameset

I haven’t used frames for a long time, so these aren’t too useful to me these days. However, they could be useful to someone who is not familiar with the markup involved in setting frames up correctly (they do take a little fussing to ge right). This list has numerous commonly-used frameset layouts.

Starter Page (Theme)

These are more-or-less complete templates with full markup and styles. They are grouped by type of site (Entertainment, Lodging, Restaurant, etc), and then by page type (Calendar, Catalog, Home Page, Product Page, Text Page). You can use them as-is, or customize the styles and markup as needed. Unfortunately, these templates use tables for layout, which reduces their usefulness in my eyes. If the templates are already using CSS for styling, why not go all the way and use CSS for layout also? I find this a shame, really, since CSS for styles and layout has been increasingly prevalent the last few years. Providing table-ridden layouts with Dreamweaver seems like a non-feature to me.

Starter Page (Basic)

Provides basic markup for numerous common page types, from shopping carts to photo galleries to Login forms. No styles are used here. These templates tend to use a mess of tables to get everything into position. I would not recommend using these templates as-is, as they are somewhat messy, and personally I would never use tables for layout now that CSS can be used for positioning.

So some of those templates are rather basic, using minimal styles, if any, or using tables for layout - very poor in 2007, and from Adobe - without cause.

There is something good after all this however. Adobe has seen fit to include a number of common page layouts - not templates for common page types as shown above - that use CSS for laying out pages - hallelujah! They are found in the New Document window, under Blank Page and Blank Template.

Many of the popular page layouts are here: 1 column, 2 column, 3 column, fixed, fluid, elastic, hybrid, and with and without headers and footers. Some of these layouts can be tricky to get right when building your own page template for a new site, so the inclusion of these layouts is greatly appreciated, as they will be great time savers. They are also fully customizable, and have comments explaining the CSS. Good one Adobe!

Spry Framework

Ajax and Web 2.0 are big buzzwords these days; lately, it seems that so many people and companies are jumping on the buzzword bandwagon. Adobe seems to have joined in this practice by including Spry, their custom-built Ajax framework, with Dreamweaver.

The reasoning behind it is fair enough: to provide a set of prebuilt, ready to use scripts, widgets, and behaviours to simplify the inclusion of Ajax in websites. When using Spry, there is less need to deal with nitty-gritty code; Dreamweaver users can just drag-and-drop the desired components into their pages. A Spry toolbar has been added to the main toolbar in Dreamweaver to provide easy access.

Some of the widgets are useful enough: form input validators, drop down menus, tabbed boxes, and dynamic data display. They do save a fair bit of time that would otherwise be spent on building the same functionalities from scratch. As an extra plus, the generated markup and styles are decent, and not messy like I have come to expect from other code generators.

The worrisome point of these widgets is the dependence on JavaScript, which can be executed differently by different browsers, or not at all if JavaScript is disabled in the browser. But the widgets seem to be developed with graceful degradation in mind, so that lack of JS support in the browser would not be an issue. This is also better than I have come to expect from code generators or prebuilt scripts.

Improved CSS Support

There is an improved CSS checked in this edition of Dreamweaver, which is worthwhile. You can open a CSS file, and go to File->Check Page->Browser Compatibility. Dreamweaver then goes through your CSS file and points out any potential issues for particular selectors, properties, and values for specific browsers. You are able to specify which browsers, and which versions, you wish to check support for, as shown in the image below. IE5 for Mac was end-of-lifed some time ago, so it may not be necessary to worry about supporting it nowadays.

In the main document window, potentially problematic items are indicated with green squiggly underlines. And the same potential problems are also listed in the Results panel, as shown in the next image.

When inspecting the list of potential problems, there is a link you can click on that takes you to Adobe’s web site, where you can read in more detail about browser issues. The sections there are organized both by type of styling (text, background, colour, etc), and by browser. Unsurprisingly, good old Internet Explorer has more issues listed than any other browser. There are discussions for specific issues, almost like a blog or forum. This site will be a good place to check up on when Dreamweaver points out browser issues with your CSS. This does create an annoyance in that I need to go to a separate location for this information when it could well be displayed within Dreamweaver.

Updated Browser Support

In relation to the CSS checking feature above, Dreamweaver is able to check for problems in newer browsers, such as Internet Explorer 7, Firefox 2, and Opera 9, in addition to the last few versions of those browsers. Good for Adobe to be keeping up with this. Not much else to say about it.

Conclusion

There are a few things I don’t like about Dreamweaver. First, the supplied page templates are laid out using tables, something I would not have expected from a company like Adobe, and not in this standards-aware day and age. So their usefulness to me is limited. With the CSS checker, you need to go to Adobe’s website to read details on specific issues picked up on by Dreamweaver. The interactive discussions could be up on the site for sure, but the essential information - problem details, possible solutions - should have been within Dreamweaver itself. And of course, Dreamweaver as a package can be intimidating for new users - not an issue for me, as I’ve used the last few versions, but still - as there are numerous palettes and menus to navigate.

Along with the bad, there is the good. Or something like that. Anyway, some features I have enjoyed in Dreamweaver for several years are still here and as useful as ever - code folding, asset and site management, and browser support checking, to name a few. And the newcomers, including CSS layouts, better CSS support, up-to-date browser checking, and directly importing images from Photoshop and Fireworks, are also useful and welcome.

This seems more like Dreamweaver 8.5, than a whole new version. I have read on other websites speculation that Adobe just shoved a slightly facelifted version of Dreamweaver into the package at the time the suite was going to production. I’d have to agree. If you’re using Dreamweaver 8, you’re not going to miss much in CS3. There are a few items of interest, but they may not be worth the amount of money the upgrade costs. And I do wish they had updated the interface to match Illustrator, Photoshop, and Flash. Make it seem more like an actual suite.

Bottom Line

In closing, there are some new and returning goodies and features that make Dreamweaver enjoyable to use, but it also has some downfalls, and the fact that it’s otherwise not much of an upgrade. For my part, that’s not so much an issue, since it was part of the Web Premium package that I got. But in hindsight, if I were using a standalone Dreamweaver 8, I wouldn’t pay to upgrade to CS3. If you’ve using MX or MX 2004, then CS3 is a better upgrade.