Dreamweaver 4: Something for Everyone
Macromedia Dreamweaver has made building and maintaining Web sites easier since its debut, but as Web development changes, so too must its tools. With version 4, Dreamweaver has grown into a mature tool intended to address the real-world concerns of professional Web designers and developers.
Instead of just adding whiz-bang content features that push the envelope of Web design and test the patience of Web surfers, Macromedia has opted to enhance some already great features and extend the program to address the needs of a variety of types of users. Many new features aim to make Dreamweaver a serious tool for Web developers who like their HTML raw. Macromedia has also added basic tools that should help graphic designers work with the Web.
The Designer’s Dream
Web designers have always been frustrated by the limitations imposed on them by HTML. After all, HTML was never intended for complex layout or subtle graphic design, and it’s only through elaborate workarounds that Web designers have gained the kind of layout control they currently enjoy. Dreamweaver 4 introduces several features intended to buoy the spirits of embattled graphic designers.
Dreamweaver 4 offers up a new treat for designers: the “Layout View.” Taking a tip from traditional page layout programs such as QuarkXPress and Adobe InDesign, Dreamweaver now lets designers simply “draw” their layouts on a Web page with the Draw Cell and Draw Table tools. This intuitive approach allows designers to build complex table-based layouts quickly and without having to understand the many idiosyncrasies of cross-browser table construction. And you can use the “auto-stretch column” option to build flexible page designs that expand to fill the browser window.
Typography is one area in which Web technology lags far behind print. Unless you resort to turning all your text into bitmapped graphics — which adds additional file size to page downloads — you’re stuck using the same fonts over and over again: Arial, Helvetica, Times, Geneva, and Verdana. “Flash Text” is Dreamweaver’s attempt to solve this dilemma. Based on Flash — Macromedia’s vector-based Web animation technology — Flash Ttext lets you use any TrueType font installed on your system. (Unfortunately, PostScript fonts are not supported.) The text is saved as a small Flash movie and embedded into the Web page. You can edit the text within Dreamweaver whenever you want, and, since Flash Text uses vectors rather than bitmaps, file size is relatively small and text quality is relatively high.
There are a couple drawbacks to this feature, however. Flash Text can be aggravating to work with for large blocks of body text. Unlike HTML, which automatically reflows text to fit a given page — inserting line breaks where needed — Flash Text requires the user to manually enter a line break by pressing the return key at the end of each line of text. The width of the resulting Flash file is based on the longest line of text. Your best bet is to use this feature only for headlines and short lines of text. In addition, not only do embedded media like Flash and Shockwave require a plug-in, they do not support the “alt” attribute (used to specify an “alternative” description for an image) — which GIFs do. This poses problems for sites that need to be accessible or which need to comply to ADA requirements.
Flash is also used in the new “Flash Buttons” feature, which lets you add high-quality buttons that can include sound and animation. The buttons included with Dreamweaver are not always of the best design — some, like the “Blue Warper,” are a little cheesy — but you can download more designs from the Web and can even create your own using Flash (the underlying technology is based on Macromedia’s Generator format.)
If you can afford it, spring for the $449 Dreamweaver 4 Fireworks 4 bundle. Not only does Fireworks 4 provide a huge improvement over its predecessor, it integrates beautifully with Dreamweaver 4. “Roundtrip Graphic Editing” lets you work seamlessly between the two applications, updating graphics from within Dreamweaver and generating HTML from Fireworks.
Dreamweaver in the Raw
It’s the legions of handcoders who, while busily pecking away at text editors like HomeSite, BBEdit or Emacs, have historically turned their noses up at WYSIWYG Web page editors such as Dreamweaver. Although the program, with its “Roundtrip HTML,” has always attempted to be friendly to HTML code created in other applications, it hasn’t been the best environment for actually writing straight HTML. Macromedia hopes to lure more handcoders to the Dreamweaver camp with the introduction of several new features.
Most importantly, you can now view any Web document in several different ways. In addition to the normal WYSIWYG view (now called “design view”), you can look at a page’s HTML code in “code view,” or opt for a combination of the two with a “split-view” (see Figure 1). This is a vast improvement over Dreamweaver 3, which used the “Code Inspector” for viewing HTML and only let you view the code of one Web page at a time. In addition, the code view offers live syntax highlighting of JavaScript as well as HTML, line numbering, wordwrapping, auto indenting, and highlighting of invalid HTML. The code view also supports editing of non-HTML files, so you can open and edit Cascading Style Sheets (.css files), external JavaScript files (.js files), text files, and even XML files.
Dreamweaver 4’s split view combines the advantages of the code view, which shows HTML code, and the WYSIWYG design view.
Handcoders will also appreciate the new Code References for HTML, Cascading Styles Sheets, and JavaScript (see Figure 2). These references appear in their own floating window and provide the kind of detailed information a Web developer needs for taking Web pages to the limits. Even better, the reference is context sensitive. Want to know more about the <table> tag? Select a table on the Web page, click the reference button on the new toolbar, and up pops the reference window with a description of the tag, information on how to use the tag, and a list of the browsers that support it!
Dreamweaver now includes detailed documentation for HTML, Cascading Sytle Sheets, and JavaScript.
Serious JavaScript programmers will not want to miss the JavaScript debugger — new in version 4. This clever feat of engineering lets you use traditional debugging practices such as setting breakpoints, stepping into and out of functions, and watching variables to debug JavaScript programs within Netscape Navigator and Internet Explorer. Unfortunately, it only works with Navigator 4 and later on Mac OS and Windows, and Internet Explorer 5 and later on Windows. The debugging feature does not work on Internet Explorer on the Mac.
Productivity Pro
The new version also boasts a host of productivity enhancements that can help individuals as well as groups use Dreamweaver more effectively. Do you use a particular command or feature often? Are you tired of hitting the Ctrl-Option-Shift-Z keyboard shortcut? No problem: With Dreamweaver 4 you can define your own keyboard shortcuts or edit the ones Macromedia supplies. In addition, the new assets panel lets you see lists of images, scripts, Flash and Shockwave files, external URLs, and colors that are used in a site. If you use an element frequently, you’ll probably want to move it into the “favorites” category, where you can organize elements in folders for easy access, and add them to your Web pages with a simple drag and drop.
Workgroups in corporate environments will also appreciate support for professional content management systems that allow for tracking site changes and sharing files. Dreamweaver 3 has a simple “check in/check out” system that lets users check out a file from the Web server for editing. Other users of Dreamweaver see the name of the person who checked out the file displayed in the site window and are prevented from checking out the same file. This keeps users from working on the same file at the same time and overwriting each other’s changes. Unfortunately, this only works for those editing files using Dreamweaver: A problem for large organizations deploying a variety of tools for editing their site files. Dreamweaver 4, while still supporting basic check in and checkout, has responded to the requests of corporate IT professionals by providing support for industry standard tools — Visual SourceSafe and WebDAV. In addition, a customizable site window lets you define custom columns for tracking the information your team needs (see Figure 3). For instance, say you want to track the progress of a page in the site. You could add a ‘status’ category to the Site window and use it to enter status information for each page on the site. All Dreamweaver users working on the site can share these notes.
Version 4 includes a customizable site window that lets you define the coluns your team needs to track development progress.
Make It So
Perhaps this program’s greatest features are the ones that have yet to be developed. Or maybe they have been, and they’re just waiting at the Macromedia Exchange for you to download and install. Dreamweaver’s “extensible” architecture lets you modify the program to fit your needs using the languages of the Web: HTML, JavaScript, and XML. The entire menu system is described in an editable XML file, the program’s dialog boxes are just simple HTML forms, and most of the commands in the program are actually written in JavaScript. Almost every component of the program can be customized. While this has been true of previous versions of the program, version 4 makes significant additions with the introduction of site reports, flash objects, source control, and an improved extensions manager.
Even if you aren’t an accomplished JavaScript programmer, it’s still possible to make your copy of Dreamweaver 4 more powerful and feature rich with a simple trip to the Exchange. This Web site offers a wide range of extensions, free of charge, that you can add to Dreamweaver. Simply download an extension from the Exchange and use the Extension Manager — included with Dreamweaver — to load it into the program. There are hundreds of extensions currently available. Here are just a few highlights:
- The “InstaGraphics Extensions for Dreamweaver” provide powerful integration between Fireworks and Dreamweaver, letting you convert HTML text to graphics and HTML bullets to graphical bullets.
- The “Check Page for Accessiblity” extension can help Web developers who need to make sure their pages are accessible to those with disabilities. This extension analyzes a Web page to see how compliant it is with the W3C’s standards for accessibility.
- The “Site Import/Export” extension lets you export your site definitions, so you can easily transfer local sites to other computers.
- The “Calendar Object Extension” adds a monthly calendar to a Web page with one click.
Jack of All Trades.html
Dreamweaver 4 solidly addresses the concerns of a wide-range of users from graphic designers to professional developers. While the program has always been a good tool for designers who build Web sites, Dreamweaver 4 makes the transition from designer to Web developer that much easier. In addition, with a host of new features — aimed specifically at those who love to swim in pure HTML — professional developers no longer have any excuse for avoiding Dreamweaver. Indeed, after they whet their appetites on all of the code-centric features of this upgrade, they might even dare to try WYSIWYG mode.
This article was last modified on January 8, 2023
This article was first published on December 13, 2000
Commenting is easier and faster when you're logged in!
Leave a Reply
I wish computer companies and software developers would get off their high horses and finally develop something a human being can use and understand. I am talking of clunky at best interactive media streaming, degenerative screen resolutions driving us blind, convoluted scripting languages, raw text files, buggy format conversions, restrictive structure and colour platforms, etc, etc, etc . . .
I always read and print out articles on products I’m considering buying. I find the analysis of the product’s features and capabilities helpful in deciding whether or not to plunk down yet another fistful of dollars for more software. As a new designer just finishing school, I also appreciate the real-world tips and techniques that are often beyond what’s in the manual.
This author is yet another example of your fine writing standards. I appreciate receiving this newsletter. Thank you.
Cristofer AVen
ki*****@*******rf.com