The magazine of the Melbourne PC User Group
Macromedia Dreamweaver 4
 Jinny Coyle

There are many Web design packages on the market which are designed so the average computer user can build a simple Web site. However if and when it becomes necessary to go outside of the most basic boundaries and build a more complex or professional site, many of these packages fall over. I have also found that when problems arise with the code, the site can be rendered useless and it is difficult to do a quick fix.

Recently I was telephoned by a panic stricken school teacher who had built a Web site in a desktop publishing package that converts to HTML ready for upload. Nearly all the links had stopped working. On looking at the site code, I discovered that all her basic text had been converted to images so the links could be mapped. This meant that the text was slow to load and when the code got bugs all her links stopped working. What she also had not realised was that people who had their images turned off in their browser preferences could not read anything, rendering the site virtually useless. What a disaster!

Anyone who has tried to build a professional and successful Web site already knows that it is not a mission for the faint hearted. It is a time consuming task and there are a multitude of issues to consider if you are to cater for the diversity of user viewing situations available. Designing for the unknown is every Web designer's personal nightmare. On one hand there are multiple browser versions, platforms and connection speeds. On the other hand are usability issues and ensuring the visitor can find what they are looking for on the site.


Figure 1. Split window in layout view with palettes open.

Over the years, Macromedia has gained a solid reputation within the Web Design industry for practical solutions to many of the idiosyncrasies that come with the job. The latest version Dreamweaver 4 has proven itself to be a powerful and flexible editor, which will suit both visual designers and die hard, hand coders.

The user can choose from three viewing options. Straight code window, part code / part visual design window or design window only. These options are selected via the top tool bar, enabling the user to swap between them with ease.

Visual Design Window: A very accurate WYSIWYG (what you see is what you get) editor. Simply position tables, images or text elements where you require them. By using the properties inspector you are able to change text and paragraph formatting and add links.

Code View Window: If you prefer to directly work with the code, Macromedia has listened to its customers and made this environment far more powerful than in previous versions. Professional designers love the clean code for which Dreamweaver is renowned. The code window is user customisable including syntax colouring, code navigation, and auto-indenting - all accessible from a new toolbar.


Figure 2. The code view with several palettes open.

The ability to open and edit non-html files such as PHP, Perl, ASP or Javascript without having your code removed or changed is another great benefit.
 
By splitting the main window you can watch the code being generated as you build the site - a great way to learn about code. It also means you can cross between visual and code design - a great timesaving feature!

You can still open up the HTML code inspector, a remnant of previous versions, but personally I don't see a need for this with version 4's practical split window.

Reference Library: For learners or those who need an extra hand, Macromedia has teamed up with O'Reilly Publishers to include a comprehensive reference which includes HTML, CSS and Javascript. Launching the code reference while the cursor is on a tag opens the relevant reference, detailing attributes, browser compatibility issues etc.

Site Management: I particularly like the HTML clean-up command, which at the click of a button removes redundant, nested and empty tags. I simply couldn't do without the "Check site links" feature. Both these tools satisfy my pedantic need for clean, usable code.
 
Asset Management: Another new addition, the "Asset Panel" which helps you manage your site's media files. You can sort them, put them in categories and even list colours ready to add to your site on the fly so that you don't have to look up their Hex or RGB codes.

Integration: Not to be overlooked in any review is Dreamweaver's integration with the other programs from Macromedia's Web design suite making it easy to incorporate flash text or buttons. Round-trip graphics using Fireworks enables you to make changes to graphics, which are automatically updated in Dreamweaver.

In all versions of Dreamweaver you have been able to preview your work in a browser but now you can also watch your client-side Javascript execute in your browser and check for syntax and logical errors.
 
The clean up Word HTML feature is very handy, removing Microsoft proprietary tags, and the table object allows you to import Excel files.

Extensions: In order to keep up with the times and individual needs, users have access to the Macromedia exchange where they can download free objects, behaviour actions, commands etc (called extensions) programmed by 3rd party developers and reviewed and rated by users. These add extra functionality to Dreamweaver, without adding cost or the need for programming. Some of my favourite timesaving extensions include a command to let you create alternate background colours in table rows automatically, latin insert (textual placeholders) and a 3rd party object that returns detailed site traffic measurement.


Figure 3. The Asset window.


Figure 4. O'Reilly Reference window.

Customisable Work Environment: Customise Dreamweaver to create the work environment that best suits you. Change keyboard shortcuts, drag and drop window tabs, rearrange objects or create new categories, customise menus or use extensions. Preferences can also be set for colour schemes, highlighting, browsers, site configurations etc.

Additional Features

  • Pages can be easily previewed in your choice of browsers.

  • The History Panel lets you repeat or undo common actions easily.

  • Page weight and estimated download time is displayed in the launch bar.

  • Easily resize your document to view different monitor sizes, (including Web TV)

  • A site report will check for missing alt tags - great for catering for disabilities.

  • Synchronisation between the live site and your computer site.

  • In-built FTP facility

The documentation and help files provided by Macromedia are complete and comprehensive. The Web site also provides official tutorials but many more can also be found by doing a quick search of the Web.

All in all, at a RRP of A$649 this is not a cheap package but if you are serious about building well-designed Web sites, which function as you expect, then you simply must consider it. It is available for both pc and Mac and 30 day trial can be downloaded from the Macromedia Web site.

If you require database integration you can also purchase Macromedia's UltraDev, which includes the full version of Dreamweaver 4.


Figure 5. The Site Manager open, ready for FTP.

Of course if you already use Dreamweaver then I am preaching to the converted so here are a couple of tips:

Stretchy Pages: Creating stretchy pages is difficult when you have multiple columns and tables where you generally need to use a mix of fixed-width columns and spacer GIFs to create a site that will work in both IE and Navigator.
 
With your page open and a table drawn, switch to Layout View. You'll see the column width and a tiny drop-down arrow at the top of each column. Click the arrow on the column you want to stretch and choose Make Column Autostretch (you can only make one column autostretch). You'll now see a wavy line at the top of the column. Dreamweaver automatically creates the spacer gifs, which are denoted by the double bar on top of the column and are necessary to make this layout work. If it's the first time that you're adding a spacer GIF to a site, a dialog box will ask if you want to use an existing spacer GIF, let Dreamweaver create one, or not use spacer GIFs at all. That's it - easy isn't it!

Reconfigure the Site Window: By choosing View|File View Columns from within the Site window, you can customize what and how columns appear. Highlight a column name and use the up or down arrows to rearrange where it appears, or deselect the Show field to hide that column altogether.
 
You can even create new columns by clicking the Plus button and giving your new column a name. You can also associate your column with a Design Note by choosing an existing Note in the drop-down list.

About the Author
Jinny Coyle, jcoyle@coyleit.com, [http://www.coyleit.com ] is a Melb PC member, specialises in Web Site Development for Small Business. Teaches at the Australian Academy of Design and sits on the Moorabool Online Business Committee, she is also a member of Micro Business Network.

Reprinted from the December 2001 issue of PC Update, the magazine of Melbourne PC User Group, Australia