January 01, 2002
Dreamweaver 4 UnveiledChristian MacAuley
Macromedia has made improvements to Dreamweaver that might finally make the software appeal to multidisciplinary Web teams. If Dreamweaver 3 had the WYSIWYG design population hooked, then version 4 of the program will make hand-coding purists take notice of its smart, coder-friendly features. Not that designers have been left behind—new design tools make it easier for the HTML-challenged to design dynamic page and table layouts. Also, tight integration between Dreamweaver and its sister program, Fireworks, and cousins, Flash and Freehand, should give designers fewer headaches when moving designs between programs. Dreamweaver's site management tool has also been dramatically revamped.
As a designer and a developer, I've had fun evaluating Dreamweaver 4 over the past month. I've used many of the new features constantly, and others I've chosen to stay away from.
Cross-Browser Javascript Debugging Is Born
My favorite new tool in Dreamweaver 4 is the live JavaScript debugger (Figure 1). As someone who codes in multiple languages, including JavaScript, I was always annoyed at how few debugging tools existed for JavaScript compared to Java, C++, or Perl. My complaints have been addressed—Dreamweaver 4's JavaScript debugger lets you set breakpoints in JavaScript within an HTML page or JS file, then step though the code point by point in Netscape or Internet Explorer to find bugs more easily.
While this process is pretty intuitive to someone who's familiar with programming environments like Borland JBuilder or Visual Basic, it'll probably require some getting used to for JavaScript-only coders.
The HTML View: More than a Smaller, Grayer Version of Notepad
My second favorite new feature in Dreamweaver 4 is the Split View (Figure 2), which uses two panes in Dreamweaver's main window to allow designers to code HTML and edit the page graphically in the same view. Each pane dynamically updates while the other is being edited, and when a graphic or text is highlighted in one pane the HTML code is highlighted in the other—as it was when you used the HTML inspector in Dreamweaver 3. The Split View is useful for both coders and people who are still learning HTML.
Instead of using the Split View, you can maximize one or the other in your window by using the toggle buttons in the window's top-left toolbar.
For HTML authors, the new Split View is a huge improvement from Dreamweaver's previous HTML coding interface, which opened HTML in an inspector that was difficult to use and annoyingly unstable. Just in case anyone preferred the HTML inspector in Dreamweaver 3 to the new interface, though, it hasn't been removed—you can still open it from the Launcher.
Not only is HTML easier to access in Dreamweaver 4, it's easier to code and read. The lack of any useful or customizable syntax highlighting was another discouragement to developers who might have written HTML in Dreamweaver 3. In the new version, HTML and JavaScript syntax is updated live, while you type, and you can customize the syntax highlighting in your Preferences.
The only problem I have with Dreamweaver 4's new HTML view is its somewhat slow response time. When I write code, I prefer not to notice any lag between typing a word and having the characters appear on screen. In Dreamweaver 4, however, using my reasonably beefy PC workstation, I experienced a short lag. The lag was comparable to that of Allaire HomeSite—not serious, but noticeable for fast typists with caffeine-induced, razor-sharp coding reflexes.
If you still prefer using HomeSite on your PC or BBEdit on your Macintosh, don't fret. Macromedia will continue to ship these products with Dreamweaver 4.
Reference Inspector: Your Bookshelf in Softcopy
One awesome feature in Dreamweaver 4 is the integrated O'Reilly coding references (Figure 3). If you're like me, you're sitting near a bookshelf right now that contains such O'Reilly titles as HTML: the Definitive Guide, CSS: the Definitive Guide, and the mammoth JavaScript: the Definitive Guide. You'll love the new code Reference inspector in Dreamweaver 4, which puts all the information in these books just a few mouse clicks away.
To use the reference, you can either look up a keyword directly in the Reference inspector, or simply highlight some code in your document that you want to look up, and then push the reference button on the uppermost toolbar of your window. The information you seek will simply pop up inside the Reference inspector.
The Reference inspector works the same way from the design view as well, which makes it a terrific guide for someone who's learning HTML, CSS, or JavaScript. Those who code fast and furious will appreciate the way the Reference inspector provides quick lists of CSS attributes and quick references to JavaScript objects in DOM context.
Table Layout Tools for the HTML Challenged
The most interesting new feature that's strictly for visual page design is the Layout View. In the Layout View a designer can draw tables and cells directly onto the page. This saves people who aren't able to hand-code complex HTML tables from having to bother. Within Dreamweaver 4's Layout View, you only have to choose whether you want the cell or table to be a variable width or a fixed width, and whether or not to use a spacer image.
To use Layout tables and cells, Dreamweaver needs to be in Layout View. You can turn Layout View on by clicking the bottom right icon in the Objects inspector.
Another neat table editing feature that was added in Dreamweaver 4 is automatic table un-nesting in Layout View. I think this is a great idea! Many people have Web pages with too many nested tables, which can cause slow or sloppy rendering. Fixing them can consume a lot of time and effort. Because the feature doesn't have any options, my tables required some extra editing after un-nesting. This feature is accessible from a button on the Properties inspector when a table is highlighted in Layout View.
Flash for Everyone
Another new feature that Flash designers and Flash designer wannabes will appreciate is Flash Buttons (Figure 4) and Flash Text.
Flash Buttons provide a user-friendly interface for making attractive buttons from templates in all shapes and sizes. When someone wants to make a Flash Button in Dreamweaver 4, all they need to do is hit the "Insert Flash Button" button from the Objects palette, pick which button template they want to use, then type the text that should appear on the button and the Web address to which the button is to be linked.
My version of Dreamweaver shipped with over 50 Flash button templates. More templates can be designed in Flash or downloaded from the Macromedia Exchange Web site.
If you don't need a button, you can use Flash Text, the other new Flash creation tool in Dreamweaver 4. To insert Flash Text, select Flash Text from the Objects inspector. Then pick the font face, size, and color of your Flash Text.
Flash Buttons and Flash Text are useful for creating quick, fast loading, attractive text elements, but should be used with caution because their text isn't normally searchable or accessible from text-only or nonvisual browsers.
Tighter Integration Across the Macromedia Board
Dreamweaver 4 and Fireworks 4 are even more tightly integrated than previous versions. Dreamweaver 4 also integrates more closely with other popular Macromedia products, like Flash and Freehand.
Clicking on any graphic in Dreamweaver will automatically launch Fireworks to open the file for editing. If that sounds annoying, you can disable it—I did. Fireworks will no longer mutilate code that you carefully tuned in Dreamweaver, and in turn Dreamweaver now recognizes and preserves fine-tuned Fireworks HTML. Also, behaviors created in Fireworks are now fully imported into Dreamweaver.
Macromedia also tightened product integration by standardizing the keyboard shortcuts in all their new products and making all the keyboard shortcuts customizable. More Choices for Collaborative Teams to Argue Over
Another obstacle that made Dreamweaver 3 a hard sell to collaborative teams was its lack of support for nonproprietary content management systems. Dreamweaver 4 supports the WebDAV protocol, the standard protocol for distribution and versioning, which makes it compatible with Microsoft Visual SourceSafe and other WebDAV-compliant content management systems. It's compatible with Broadvision, Vignette, ATG, and Documentum.
Dreamweaver 4 also has an improved site management tool, which can serve as a low-level content management tool for teams who don't want to buy something new. The new site management features allow files to be "owned" by a particular team member for a particular period of time, let team members communicate using email and file notes, and enable files to be marked with a workflow status.
Assets, Not Libraries
Every site in Dreamweaver 4 contains an Assets inspector, which is similar to your Dreamweaver 3 Library, but has more features. Not only does the Assets inspector contain Library items, it automatically scans your site for new images, colors, external URLs, rich media, templates, and scripts. You can easily drag these items from the Assets Inspector into your pages. The Assets inspector has a preview pane, and will organize your items by which are most often or most recently used, or by categories and nicknames. Site Reporting: Find New Things to Blame Your Co-workers For
My favorite new site feature is Site Reports. Site Reports are generated when Dreamweaver scans your whole local site and points out which files have certain undesirable problems, such as missing Alt attributes on images, nested Font tags, and Untitled Documents. I'm confident that this will save some HTML lackeys out there from running screaming back to the world of unskilled labor.
Something They All Might Agree On
Dreamweaver 4 has created some unusual harmony between my internal developer and my internal designer. It was a welcome change from my usual practice of switching between WYSIWYG and text editors constantly.
Making a whole Web team stick to one product is a daunting task. Designers and developers tend to be very loyal to their preferred software. But, because Dreamweaver 4 has so much to offer to developers, maybe, if you're lucky, they'll give it a chance.
Christian enjoys designing, coding, and writing for the Web, and does it all for both fun and profit. For the skinny about her and her work, visit colortheory.net.
|
|
||||||||||||||||||||||||||||
|
|
 |
||||
 |
|
|||
 |
||||
 |
|
|||
|
||||
 |
|
|||
|
||||
 |
|
|||
|
||||
 |
|
|||
|
||||
more
