Web Design for Both Sides of the Brain

Every creative field has its purists. Some photographers scorn digital retouching; some actors insist on doing their own stunts; and some television writers . . . well, OK, maybe not every field.

When it comes to Web design, the purists are hand coders – HTML mavericks who distrust any code generated by software instead of a human brain. Of course, their suspicion is easy to understand. Early WYSIWYG Web design programs did a decent job of approximating basic Web designs, but they generated HTML code that was junky, complicated, and sometimes just plain wrong. Although today’s advanced Web design tools are much smarter when it comes to writing HTML, most serious Web coders still refuse to rely solely on a visual page editor.

The new Macromedia Dreamweaver 4 ($299; 800/457-1774, www.macromedia.com ) appeals to both sides of a Web designer’s nature: the part that needs hands-on editing of HTML, and the part that appreciates easy-to-use visual tools for building complex designs. Dreamweaver 4 has a load of new features that make page design easier even if you never look at a single HTML tag. But if you are concerned with code, it also gives you the control you crave.

Integrated Code

In previous versions of Dreamweaver, the only way to view and edit a page’s HTML code was to pop open the floating Code Inspector window. Although it was useful, this code view had some limitations. First, you could examine only one document’s code at a time. And since the common window-closing keyboard shortcut command-W didn’t work for the Code Inspector window, designers sometimes closed their documents by mistake.

Dreamweaver 4 provides a new option for accessing your code. You can mix Code and Design views in a split-pane view that shows the HTML code in one half of the window and the graphical representation in the other, so you can readily observe what effect one is having on the other (see “A Code with a View”).

This split view is a real boon to designers who like to code pages by hand but also appreciate Dreamweaver’s visual approach to page design. However, it does have constraints: for one, it requires a large display. At a screen resolution of 1,024 by 768 pixels, the combination of Dreamweaver’s main window and all its floating panels (the new term for palettes) already crowd the monitor. Now imagine that editing window cut in half – only a sliver of your Web page is visible at any given time.

In addition, when you’re editing code, the Design view doesn’t update the display automatically to reflect your work – you must either click on the Refresh button in the Properties Inspector window or press the F5 key. (Modifications you make in the Design view appear automatically in the Code view, so you can watch Dreamweaver write code as you work.)

Quick Coding Help

With code, the devil is in the details. And there are a lot of details. But Dreamweaver 4’s tool bar includes a collection of new features that will be welcome relief to anyone without a photographic memory.

If you ever struggle to remember the precise syntax for a JavaScript command or the difference between cell padding and cell spacing in HTML tables, you’ll appreciate Dreamweaver’s new Reference panel. It’s stocked with three reference guides from the coding geek’s favorite publisher, O’Reilly & Associates. This panel provides context-sensitive information about the proper use of HTML, Cascading Style Sheets (CSS), and JavaScript.

Say you’re creating an HTML form and you can’t recall what code to write so the form data display in the URL, rather than being sent invisibly. You simply type <form in the Code view, and then either press shift-F1 or click on the Reference button in the tool bar. Up pops the Reference panel with useful details on the <form> tag, including the code you seek: method=get. Even better, the guide explains that you’re not supposed to use method=get anymore, because it’s frowned on in HTML 4.0. That’s a lot of information at your fingertips.

The new tool bar also provides quick access to other common tasks, including shortcuts to upload and download commands, browser previews, and all three view options. You can open the new in-browser JavaScript debugger to test your script for errors (it works only with Netscape Navigator on the Mac). The tool bar even has a Title box, so you can name your page without having to choose Page Properties from the Modify menu.

Tables in a Hurry

Perhaps Dreamweaver 4’s most intriguing new feature is the Layout view. Activated from the Objects panel, the Layout view lets you create HTML tables – the design building blocks for almost every page on the Web – simply by drawing them on your screen. Layout view actually incorporates two different tools: the Draw Layout Table tool, with which you define the boundary of your table, and the Draw Layout Cell tool, which you can use to add cells to those tables in free-form fashion. As you add cells, Dreamweaver rejiggers the number and size of rows and columns in the table to accommodate what you draw (see “Setting Your Table”).

While in the Layout view, you can specify the width of each column. For a more fluid approach, you can instead set column widths to Autostretch . Then columns will resize on-the-fly based on the width of the viewer’s browser window – so your page will look good when displayed at any window width or resolution.

Meticulous table designers will probably find the Layout view a needless complication. But anyone who’s ever gotten a headache trying to organize myriad rows and cells to get a table’s design just right may find Dreamweaver’s new alternate approach useful. Even if you prefer to manually specify your table widths in Dreamweaver’s standard view – or in the code itself – you can use this approach to generate the fundamental structure of tables in a hurry, freeing you to sweat the details.

Flash … without Flash

Macromedia’s Flash allows designers to create bandwidth-efficient, vector-based animations and embed them in Web pages. Until recently the only way to build even the simplest Flash files (which use the SWF file format) was to buy – and learn – a Flash animation program such as Macromedia Flash or Adobe LiveMotion. Now Macromedia makes it easier, with two tools built into Dreamweaver’s Objects panel.

The first, Insert Flash Button, lets you create animated, clickable buttons in SWF format. You simply enter the text, choose the button’s destination link, and pick a template from a catalog of more than 50 styles. Your choices range from hypnotic, pulsating buttons to finely beveled designs. (Flash users can also make new templates by saving Flash Generator format files to the Flash Templates subfolder within Dreamweaver’s Configuration folder.)

The second is Insert Flash Text, which generates text in the SWF format. Traditionally, you couldn’t be absolutely sure that type would display correctly on your Web page unless you either used one of a handful of commonly available typefaces (Arial, Helvetica, and Times are the usual suspects) or saved the text as a GIF image file. But because Flash uses vectors, Insert Flash Text lets you embed text files that are smaller than comparable GIF images and that stay true to their original font – as long as the browser on the other end can display SWF format.

And that’s the catch with both of these new features. For all the advantages of Flash, it’s a data format that you can’t view without a plug-in. Given that GIF images aren’t that much bigger – and that file size is becoming less of a concern as Internet connections continue to speed up – adding Flash buttons and text to your Web site may not be worth the risk of compatibility problems.

Work with Fireworks

Among the other changes in Dreamweaver 4 is tighter integration with Fireworks 4, the latest version of Macromedia’s Web graphics application. (To learn what’s new in Fireworks 4, go to www.macworld.com/2000/11/13/fireworks.html.) You can now pass graphics files and their accompanying HTML code between the two programs seamlessly.

For example, let’s say you’ve created a complicated layout in Fireworks, divided the image into slices, and imported these slices into Dreamweaver. You then deleted several placeholder images and replaced them with text, or perhaps you modified the hyperlinks for some of the images. In previous versions of both programs, once such modifications were done, it was impossible to reconcile the current version with the original Fireworks file. This created problems if you needed to return to Fireworks to tweak the original design.

But version 4 lets you transfer items back and forth between programs without losing any changes. When you’re editing a table that was generated by Fireworks 4, Dreamweaver’s Properties Inspector includes an Edit In Fireworks button. When you click on this button, Fireworks opens and displays a version of your table – including all the changes you’ve made within Dreamweaver – beneath a text banner that reads, “Editing from Dreamweaver.” When you’ve finished your editing, simply click on the Done button and the changes you’ve made in Fireworks are automatically sent back to Dreamweaver.

This all adds up to a major change in graphics and Web workflow. If you need to modify an image long after a graphic designer has passed off the work to you, reconciling changes made in Dreamweaver with the original Fireworks file is no longer an arduous process.

Other New Features

Dreamweaver 4 also contains a raft of small but useful additions that will improve the way you work. The new Assets panel, for example, offers a convenient way to organize and access your site’s vast and unwieldy assortment of images, colors, and hyperlinks. You can even group your most commonly used assets into a list of favorites so you don’t have to search the entire haystack every time you need one. Other improvements include a new Site Reporting feature that scans sites for errors (see “Report Your Web Site”); an improved window-management system that places windows out of the way of floating panels; and a command that automatically integrates nested tables into the structure of their parent tables.

The Last Word

Dreamweaver 4 is a major update with a mix of subtle and snazzy new features. Some items, such as Flash Text and Buttons, are heavier on style than on substance. But when it comes to geeky additions – such as the Code view, the Layout view, and online reference materials – Dreamweaver 4 has taken great strides. The program is a serious tool for serious Web designers – even those designers who would never admit to using anything but a plain old text editor.

Macworld.com Editor JASON SNELL has been publishing on the Internet since 1991 and covering Web publishing since 1993.