Tools for Web designers have come a long way. No longer do Web-page creators struggle with a mélange of lousy programs to get the job done. Whether you’re a code-shy graphic designer, a jaded HTML geek, or someone in between, you can probably find a Web tool that fits your skill level.
Now, Macromedia’s $299 Dreamweaver 3 (upgrade, $129; 800/457-1774, https://www.macromedia.com ) is hitting the scene, offering an unprecedented mixture of friendly visual tools and fast, powerful access to the HTML code that underlies all Web pages.
This new version builds on the program’s traditional strengths; adds a slew of features that enable collaborative teams to work together to build sites; and, of course, supports the latest other programs from Macromedia, such as the new Fireworks 3 (see the sidebar “Fireworks 3 Fights Back”).
Better Web PagesThe quality of your individual pages is the ultimate test of your skill as a Web developer–and Dreamweaver 3 doesn’t disappoint in this department, with new features that make it easier and faster to create first-rate Web pages and meet deadlines.
Perhaps the most innovative new feature in Dreamweaver 3 is Quick Tag Editor, a pop-up window that allows you to view and edit the underlying HTML code for any object while you’re still in the visual editing environment. Previously you had to take time to switch out of visual editing and open an HTML window to get at the code. With Quick Tag Editor, you can peer beneath the surface of your document.
 |
| Code on Demand Pressing command-T provides handy instant access to HTML code from within Dreamweaver’s graphical interface. |
To invoke Quick Tag Editor, select an object and choose Quick Tag Editor from the Modify menu, or better yet, press command-T. The free-floating Quick Tag Editor appears, showing you the HTML associated with that object (see the screen shot “Code on Demand”). To help you write code, a pop-up hints list appears when you pause while typing in Quick Tag Editor, showing you a list of all the HTML tags Dreamweaver understands. The hints list is context-sensitive, so if you pause on a particular tag, a list of its attributes appears.
Quick Tag Editor is terrific for quick edits, and you see the results immediately. Let’s say you’ve inherited a table from your predecessor and it has a border 10 pixels wide and cell spacing of 8 pixels. You want a cleaner look, so you select the table and press command-T to call up Quick Tag Editor. In the Edit Tag window, change border=10 to border=1, and cellspacing=8 to cellspacing=0. Then press the enter key to accept your changes, and the table assumes its new look. You could also use the floating Properties palette to modify these attributes, but hardened HTML code jockeys will find using Quick Tag Editor a much more familiar and efficient way of making changes.
History PaletteThe ability to undo a mistaken action is good, but having almost unlimited undo’s is even better. Dreamweaver 3’s new History palette keeps track of what you’ve done, and a slider bar lets you move backward and forward through your actions (you set a preference for the number of undo’s available, but most people won’t need to go beyond the default setting of 500). If you want, you can even select and replay one or more steps.
However, the undo feature is limited to actions you take from the keyboard; if you drag out a table with the mouse, the History palette can’t track and repeat the action. But if you insert and specify the table’s attributes with keyboard commands, you can replay them as much as you want.
 |
| History Repeating You can select a series of entries in Dreamweaver’s History palette and turn them into a macro by choosing Save As Command. |
Have you ever done a bunch of intricate formatting and wished you could save your steps so you wouldn’t have to do them again? With Dreamweaver 3, you can. You’ll need to perform the actions once, making sure that you use the keyboard whenever possible. Then select the steps in the History palette and choose Save As Command from the pop-up menu in the palette (see the screen shot “History Repeating”). Name the new command, and it appears in the Commands menu.
What’s happening behind the scenes is that Dreamweaver is translating your steps into JavaScript code and then saving that code in a form it can reuse.
A New Kind of StyleNo matter what kind of site you’re building, chances are you’ve settled on a certain set of type attributes you’re going to use throughout–say, slightly larger than normal type in Arial or Helvetica, colored dark blue, and in boldface. Up to now, most programs have let you format text with ‹font› tag attributes or Cascading Style Sheets (CSS), and Dreamweaver 3 retains these abilities. Both approaches have their problems. CSS styles display reliably only in version 4.0 or later browsers, and even then your Web pages can look different depending on the end user’s browser version.
In general, ‹font› tag attributes display accurately in any browser, but if you want multiple attributes as in our earlier example (bold, blue, and larger), you have to apply them individually–and repetitively–to each text selection.
Dreamweaver 3 has finally merged the ease of use of CSS with the compatibility of ‹font› tag attributes, in a feature called HTML Styles.
 |
| Stylin’ HTML Styles work a lot like a word-processing program’s style sheets: once you’ve set up attributes, you can apply them anywhere you like. |
The new HTML Styles palette, which displays all the styles for the site you’re working on, holds both character and paragraph styles. To apply a style, you simply select some text and click on the style name. You can create new styles by selecting text that’s already formatted the way you want and then choosing Text: HTML Styles: New Style. In the resulting dialog box, you give the style a name and add or modify other font and paragraph attributes as you see fit (see the screen shot “Stylin'”).
Dreamweaver stores a site’s HTML Styles in an XML document in the site folder, making the styles available to anyone who works on your site. (XML stands for Extensible Markup Language; it’s a more flexible cousin of HTML that Dreamweaver uses to store many different kinds of data, including styles, its own menus, and page templates.) Having a separate style sheet also makes it easy to collaborate with other workgroups and helps ensure that companies with multiple sites maintain a consistent look by using the same XML style sheet.
Time-SaversWith its big new features, Dreamweaver 3 should satisfy your lust for more, more, more power! Yet the program also has lots of small but useful improvements that will make your work go more quickly and cut down on your boredom quotient.
Do That Again!This year’s “Cool, but why didn’t it do that before?” award goes to the new Repeat Last Action feature, which works with the History palette to give you the remarkably useful ability to redo whatever you last did by pressing command-Y.
This feature makes quick work of crashingly dull text-formatting jobs when you combine it with HTML Styles. For example, say you have subheads throughout a page and you want to apply a style to them all. Define an HTML Style with those attributes, and then apply the new style to the first subhead. Select the next subhead with the mouse, and press command-Y to repeat the style application.
Setting Foundations with TemplatesOn the Web, consistency isn’t the hobgoblin of little minds; it’s the sign of a professional. Dreamweaver’s templates are perfect tools for keeping your pages consistent. You can edit the default template (you’ll find it inside the Dreamweaver folder, in Configuration: Templates: Default.htm) to make sure that all the pages you create contain the proper ‹meta› tags, with your company and copyright information. Dreamweaver includes any changes you make to the default template on every page it creates from then on.
Clearing Cobwebby CodeYou don’t just build a Web site and leave it–it requires regular maintenance to stay vital. Cleaning up old HTML code is a dull task that you probably know better than you ever wanted to and would love to simplify. You might need to clean up old code that a previously used WYSIWYG tool employing proprietary tags left behind–Adobe PageMill, say. Or you might want to strip out old, deprecated tags from previous versions of HTML. You can use the search and replace features in Dreamweaver 2 or 3, along with regular expressions, as your garbage collector. Here’s how, with the hated ‹blink› tag as our example.
Choose Replace from the Edit menu. From the pop-up menu next to Find In, choose whether you want to apply your changes to the current document, the current site, or a folder that you select.
Set the Find What pop-up menu to HTML Source, and click on the Use Regular Expressions check box.
Type the following inside the Find What box: ‹blink[^›]*›. Don’t type anything in the Replace With box. That regular expression (see “”Web: Transform HTML with Regular Expressions”,” Create , November 1998) selects the opening ‹blink› tag, and if the tag has any attributes, it selects those, too.
Click on either the Replace or Replace All button.
To get rid of the closing tag, type ‹/blink› in the Find What box and then click on either the Replace or Replace All button again.
Instant Site PrototypingPeople tend to use Dreamweaver’s Site Manager feature mostly to detect and mend broken links, upload and download files from the remote server, and ensure that only one person is editing a file at any given time. But Site Manager is also perfect for creating and mapping out the initial structure and pages of your site. After you’ve done–offline–the really hard work of figuring out the structure of your site (see “”Dress It Up”,” November 1999), the Site Map window lets you add the actual individual pages and linked pages to your site, complete with page titles and text links between pages.
Working with the site structure as a whole before you get bogged down in designing individual pages will help you organize your site better and make it easier to navigate. After you create the pages you need, you can open them up from the Site Map window to get started on design.
To begin building your site, first define a new site by choosing New Site from the Site menu, giving the site a name and picking the local site folder. Then choose Site Map under the Window menu. The icon for the home page of the site will be in the Site Map window, as the home-page file is created along with the new site.
 |
| Site Skeleton Dreamweaver 3 lets you create the structure of your site, including links, before you get down to the business of designing pages. |
To create a new linked file, control-click on the home page’s icon and choose Link To New File from the contextual menu. In the dialog box that appears, name the new HTML file, give the page a title, and enter the text for the link. When you click on OK, Dreamweaver creates the HTML page and an icon for the new page appears in the Site Map window, with a line connecting it to the original page. To create more linked pages from the home page, repeat the process.
You can also add text links to any page with the same technique. A page’s text links show in the Site Map as a line of smaller pages under and connected to their parent page (see the screen shot “Site Skeleton”).
Cleaning Up After Microsoft OfficeA lot of Web content starts out life as Microsoft Word documents. Word makes it easy to save its documents in HTML format, and since Word handles text and graphics, you might think you could dispense with programs like Dreamweaver.
That may be true for very small sites, but Word’s limitations for larger Web sites quickly become apparent. The trouble is that extra code bloats Word-generated HTML documents, making your page load and display slower than it should. The larger a page is, the longer it takes to get through your modem to your browser, and the more time and effort a browser must expend to display the convoluted code.
Dreamweaver 3 solves this problem and saves tons of boring code-stripping work with its impressive new Clean Up Word HTML command. Invoking this command on your Word-generated HTML files can quickly shrink file sizes by as much as 50 percent.
There’s help in Dreamweaver 3 for Microsoft Excel users, too. Rather than saving spreadsheets and other tables from Excel as Web pages, and then cleaning up Microsoft’s messy HTML in Dreamweaver, use the new Insert Tabular Data command to convert any text-only delimited file into a clean table. You can then use Dreamweaver’s unmatched table-editing and -formatting abilities to tweak the data’s appearance.
Improving TeamworkAs Web sites get bigger, more complex, and more central to many businesses’ corporate strategies, they’ve become too much for one person or even a small team to handle. It’s not unusual to have dozens of people contributing to major corporate sites, including designers, content writers, graphic artists, and programmers. Professional-level tools need to offer team management features. Dreamweaver 3 improves site management and adds many other features that make it easier to share sites in a workgroup.
Keeping Collaborators PostedOne of the biggest hassles Web teams face is keeping track of who made what changes to a particular file, and when. Some teams try to deal with this problem by sending e-mail detailing changes. More-sophisticated teams might use a central database to hold change notes. The problem with both these solutions is that the change records don’t stay with the file, so they’re easy for others to overlook.
Dreamweaver 3’s new Design Notes track your changes to HTML pages and let you add date-stamped comments that your coworkers can view and edit. A Design Note for one of your HTML pages is a separate XML document that Dreamweaver keeps in a Notes folder, so it doesn’t add to the size of your production file. And since the folder doesn’t get uploaded, it doesn’t waste space on your server, either.
Staying in Sync with SitesWith its new feature that synchronizes local site folders and remote servers, Dreamweaver 3 plays catch-up with competitor Adobe GoLive. This feature ensures that you’re never working on an outdated page. The file-synchronization feature compares files in both locations and lets you know which files need replacing. You get to choose whether to give priority to local or remote files, and you get a summary of all the files that Dreamweaver proposes to move. You can override the program’s recommendations on a file-by-file basis.
If you’ve made wholesale deletions from your site, Dreamweaver can remove files on the local or remote sides to keep both sites in sync.
The Sky’s the LimitCustomization is an important part of Dreamweaver’s appeal, and Dreamweaver 3 lets almost anyone take advantage of its extensibility. For example, if you have attractive content on your site, sooner or later some other site managers will hijack your content into a frame on their site. You can tell your pages to burst out of other people’s frames, so long as you know how to program this with JavaScript.
With Dreamweaver 2, it was much easier to add features to the program via JavaScript. You could add new behaviors and commands and even change the program’s property inspectors if you were proficient with HTML and JavaScript. So adding a script that took your pages out of someone else’s frame set became as easy as dropping a JavaScript file into Dreamweaver’s Actions folder. A cottage industry of JavaScript coders sprang up to support Dreamweaver’s extensibility, writing hundreds of new actions, objects, and commands. In fact, if you’re thinking of writing a Dreamweaver extension, check the Dreamweaver Extension Database, at https://www.idest.com/cgi-bin/database.cgi, and make sure no one’s already thought of your idea. There’s no point in reinventing the wheel.
Dreamweaver 3 takes this customization to an almost absurd level. Literally everything in Dreamweaver–menus, dialog boxes, palettes, and functions–is defined by some combination of XML files, HTML files, and JavaScript.
Because the entire menu system in Dreamweaver is accessible, corporate departments and Web design shops can create custom versions of Dreamweaver with little effort, adding and removing keyboard shortcuts, menu commands, property inspectors, and other features to suit their needs or the needs of their clients. You can give a customized version of Dreamweaver to your clients so that they can make routine content changes and even create new pages from your templates without messing up your designs–all of which frees you from day-to-day content maintenance. (See the sidebar “Making Dreamweaver 3 Work Magic” for details on how to modify Dreamweaver 3 to suit you.)
The Last WordDreamweaver 3 is an impressive successor to an already good Web design tool. With new features such as HTML Styles and Microsoft Office cleanup, it’s easier than ever to create pages and whole sites with Dreamweaver. But you never sacrifice your control over the HTML–instead, tools such as Quick Tag Editor strengthen it. Dreamweaver 3 directly targets advanced Web-site developers, and Macromedia keeps adding features at the request of hard-core Web geeks.
The arrival of Dreamweaver 3 is the opening salvo of the latest round of innovation in Web design tools, and Macromedia’s chief rival, Adobe Systems, is sure to return fire with the next version of GoLive. But Dreamweaver 3 certainly demonstrates that there’s plenty of room for innovation in sophisticated Web publishing tools. Even if Adobe and Macromedia continue to slug it out, the real winners are professional Web-site developers, who will surely benefit from the software improvements that arise from the struggle.
Contributing Editor TOM NEGRINO is a coauthor of JavaScript for the World Wide Web: Visual QuickStart Guide, third edition (Peachpit Press, 1999).The author thanks Joseph Lowery, author of Dreamweaver 2 Bible (IDG Books World-wide, 1999), and Massimo Foti of The Fantastic Corporation for their Dreamweaver tips and insights.
February 2000 page: 79
Making Dreamweaver 3 Work MagicEveryone likes to watch a magician performing a routine. But while some people simply enjoy magic tricks as entertainment, some of us remain frustrated until we’ve figured out how the magician did it.
Dreamweaver 3 is a lot like that magician. You can simply sit back and enjoy its magic, or you can go behind the scenes of the software and learn its tricks yourself. The advantage of the latter approach is that you can then change its tricks–not only can you pull a rabbit out of a hat, but you can also change that rabbit to a mouse or even an elephant if you choose. All it takes are three magic words: HTML , JavaScript , and XML .
Start your quest for knowledge by finding the Configuration folder inside your Dreamweaver folder. Inside this folder and its subfolders lie hundreds of HTML, JavaScript, and XML files. Dreamweaver uses these files for just about everything it does–if you change any of them, you can change the way the program behaves.
. . . A Rabbit Out of My HatWhen modifying Dreamweaver, you must change the right file to achieve the right effect. Here’s a tour of the Configuration folder to show what’s hiding where. (A word of warning: Before changing a file, always make a copy of it first. That way, if things don’t go right, you can just put the original back and start again.)
BehaviorsThis folder contains two subfolders: Actions and Events. You can create a Dreamweaver behavior when you combine an event with an action, in a cause (the event) and effect (the action) relationship. The Events folder consists of one HTML file per browser type, each containing a list of the events that browser supports. The Actions folder contains an HTML file for every possible action in Dreamweaver, and many of these have a corresponding JavaScript file.
 |
| Let’s Play An HTML file is at the heart of this Dreamweaver dialog box. |
As an example, say you want to play a sound when the user mouses over an image. You’d need to combine the onMouseover event with the Play Sound action. When you choose Play Sound, Dreamweaver displays a dialog box that’s defined in the file Play Sound.htm, located in the Actions folder (see the screen shot “Let’s Play”). The Actions folder also contains Play Sound.js, which stores the JavaScript code that Dreamweaver inserts in your page to make a sound play.
CommandsEach item in Dreamweaver’s Commands menu corresponds to an HTML file in the Actions folder. (While behaviors add an action to your page, commands act upon the page itself.) For instance, the Clean Up HTML command gets its dialog box from the Clean Up HTML.htm file, and the JavaScript file Clean Up HTML.js handles the actual cleanup.
InspectorsThis folder contains the HTML and JavaScript files that modify the Property Inspector floating palette for particular tags. When you want to change the ‹title› tag, for example, the Property Inspector palette gets its dialog box from the title.htm HTML file. The title.js JavaScript file then does the actual work of changing the title of your page.
MenusThis folder contains two items: menus.xml and the MM folder. The MM folder holds files that correspond to every command in every Dreamweaver menu. The menus.xml file tells Dreamweaver under which menu and in what order those commands should appear, as well as what keyboard shortcuts to assign them. To change Dreamweaver’s menus, you just change this file. Removing lines from this file is a handy way to create a streamlined and simplified set of menus for less savvy users.
ObjectsWhen first installed, this folder contains six subfolders: Characters, Common, Forms, Frames, Head, and Invisibles. Each of these corresponds to a submenu in the Objects palette and to an entry in the Insert menu. In addition to an HTML file, each object has a corresponding GIF file containing the icon for that object in Dreamweaver’s Objects palette. To add a new object, just add a GIF and an HTML file. To add a new subfolder, create a new subfolder in the Finder and put your desired objects in it.
Start-upIf you want a command to run every time you launch Dreamweaver, all you need to do is write an appropriate HTML file and put it in the Startup folder. Similarly, if you want a command to run whenever you quit Dreamweaver, add a Shutdown folder (it doesn’t exist at installation) containing your HTML command file.
For each of the above folders, modifying the enclosed files enables you to change how a command or behavior acts within Dreamweaver.
Nothing Up My Sleeve . . .Not only can you add, change, and delete extensions in your copy of Dreamweaver, but you can pass your changes on to others, too. A number of Web sites also offer Dreamweaver extensions for download; two of the best are Dreamweaver Depot, at https://people.netscape.com/andreww/dreamweaver/, and the Dreamweaver Extensions database, at https://www.idest.com/cgi-bin/database.cgi.
Combine downloadable extensions and your own modifications, and you can create a version of Dreamweaver 3 unlike anyone else’s–one that uniquely fits your work habits. When the tricks you’ve performed with your Web authoring program of choice amaze your audience, just smile and say, “It’s magic.”
DORI SMITH is a coauthor, with Tom Negrino, of JavaScript for the World Wide Web: Visual QuickStart Guide, third edition (Peachpit Press, 1999), and author of Java for the World Wide Web: Visual QuickStart Guide (Peachpit Press, 1998). Fireworks 3 Fights BackPutting together pages isn’t a Web designer’s only task. You’ve got to have content for those pages–and often that means preparing lots and lots of graphics. It’s fortunate that Dreamweaver 3’s companion product, the $199 Web-graphics utility Fireworks (upgrade, $99; with Dreamweaver, $399), has also received an update.
Fireworks is locked in a tough fight with Adobe Photoshop. Adobe has rolled Web-graphics features into Photoshop 5.5 and includes Fireworks competitor ImageReady with every copy of the program. To fight back, Fireworks 3 incorporates many of the graphics effects on which Photoshop veterans have come to depend, while adding some impressive automation features both new and seasoned Web designers will appreciate.
Take It EasySummed up in one phrase, Macromedia’s vision for Fireworks would be, “Don’t work so hard!” Most of the new features in Fireworks 3 aim at providing maximum flexibility while eliminating repetition.
No addition embodies this directive better than the new History palette. Although at first glance this feature may appear to be little more than a cheap imitation of Photoshop’s own History palette, behind that less-than-glamorous face is a useful tool that not only removes mistakes but also automates tasks at the click of a button.
Making History  |
| Room for Error The History palette lets you quickly toggle between your current document and earlier versions, and a pop-up menu even lets you save a group of commands for later reuse. |
The History palette is a close cousin of Fireworks’ Undo command. But unlike the latter, which requires you to backstep through recent actions one at a time, the History palette lets you undo and redo multiple editing steps with a few clicks (see the screen shot “Room for Error”).
As you work, Fireworks records a complete list of all recent actions in the History palette. To return to a previous setting, you simply move the palette’s slider up and down the list of steps; the page updates to reflect the selected stage of the design.
Say you’ve spent ten minutes making a series of changes to your image, but now you’re not sure you want them. By clicking back and forth in the History palette, you can do quick before-and-after comparisons and judge whether the alterations are worth keeping. If not, place the slider on the last version you like and revert to that one. You can even undo Save commands if you accidentally wrote over a previous version of your document.
How many actions the History palette records is up to you (the default setting is 20), but the more actions you save, the more Fireworks taxes your Mac’s memory.
Redoing CommandsJust as impressive as the ability to undo commands is the ability to redo them at will. As with Dreamweaver 3, Fireworks 3 allows you to select groups of actions from the History palette and save them as independent commands.
For example, say you’ve created a navigation bar with ten black buttons, each with a unique shape. At the last minute, your client decides that all these buttons should be green, with beveled edges and a texture. Rather than changing them one at a time, just change the first one, select the relevant steps from the History palette, choose Save As Command from the palette’s pop-up menu, and specify a name. Now all you have to do is select the other buttons one at a time and choose your new command from the Commands menu.
Since commands are just JavaScript files, you can share them with coworkers–whether they’re working in Fireworks on Macs or on Windows PCs–who need to make similar changes. By standardizing a project’s design specs–say, the standard options for generating a beveled button–in a JavaScript file, you can ensure a consistent look in all your project’s graphics.
Take Control of ImagesEditing photographs in Fireworks can be a frustrating experience–one that probably drives most Fireworks users back to Photoshop regularly. Fireworks’ greatest weakness has always been its limited support for editing bitmapped images. For example, in past versions it provided no way to adjust the contrast or colors for imported photographs–two of the most basic functions for any image-editing tool. If you brought a Photoshop file into Fireworks, you lost the ability to edit layers and layer effects.
True ColorsIn Fireworks 3, Macromedia has begun to address some of these shortcomings. The most useful improvement is the addition of image-correction tools such as brightness and contrast, hue and saturation, levels and curves. This means you no longer have to turn to another program, such as Photoshop, to fix photos that need only basic image editing. Designers can adjust colors, remove scratches, and sharpen photos, all within their Fireworks document.
Fireworks 3 also allows you to incorporate your favorite Photoshop filters and plug-ins. You can even use these filters on vector graphics and text without rendering them uneditable. Whereas earlier versions of the program transformed text and vector graphics into bitmapped images before applying filters such as Motion Blur or Spherize, Fireworks 3 retains the selection’s original format. You don’t have to start from scratch if you discover a typo after applying a filter such as Fire (part of Alien Skin Software’s Eye Candy) to your company’s logo. Just fix the type with the text tool, and the filter will apply to the new text.
If you do need to use other image-editing programs, you can do so with impunity. Fireworks 3 now opens native Photoshop and Adobe Illustrator documents and preserves their editable layers and effects palettes.
Special Effects  |
| Reapplying Effects Use the Effect palette to experiment with your favorite filters and plug-ins. The palette records every effect applied to your image; you can toggle effects on and off via the corresponding check box. |
The retooled Effect palette is an indecisive designer’s dream. Although similar in nature to the History palette, the Effect palette is both more flexible and less comprehensive. It saves a complete, editable record of the filters applied to an image. Each image has its own Effect palette that you can edit at any time. You can turn filters on or off independently at any point, experimenting to find the perfect combination of filters and effects without worrying about data loss (see the screen shot “Reapplying Effects”).
Let’s say you’ve got a photograph you want to incorporate into your Web site. To give it a slightly faded look, you might tweak the hue and saturation settings. As a finishing touch, you might apply the Radial Blur and Noise filters. If you decide after you’re finished that the Radial Blur is too distracting, you can simply uncheck a box in the Effect palette, and the effects of that filter disappear, leaving all your other effects intact. Change your mind later on, and all you have to do to restore the initial blur effect is check the box and turn that filter back on.
As with the History palette, you can save combinations of effects and apply them to other images for maximum efficiency. This means that once you find the perfect combination of effects, you can reuse them on all of your photographs with a single click.
Seeing Is BelievingPerhaps the most frustrating aspect of Web design is the almost total lack of control over the viewing environment. Differences in Web browsers, monitors, operating systems–including various versions of the same operating system–mean there’s no way of knowing exactly what your viewers will see.
Gamma HoorayThe gamma value determines how light (or dark) a monitor displays an image’s midtones. Windows uses a higher gamma value than the Mac OS, causing beautifully rendered images from your Mac to look dark and muddy on a colleague’s PC.
Many Web designers try to compensate for this difference by blindly lightening photos on the Mac and hoping they’ll look okay on Windows PCs. Fireworks 3 takes some of the guesswork out of color correction with a Windows gamma setting–turn it on by selecting Windows Gamma in the View menu. This way you can switch back and forth between the Windows and Mac gamma until you find the best compromise for your images.
Effortless PreviewsStill, no matter how great your images look to you, they are useless if they’re so enormous that they crash your viewers’ computers. One of the unique features that made Fireworks an early success was the way it helped designers find a compromise between image quality and compact file size. It let users quickly compare the differences between multiple image settings via the Export Preview window, which simultaneously displayed as many as four variations on the original image.
Unfortunately, that window was the only place where you could see the effects of size-slimming changes; to see how a particular design element would look when you saved it as a GIF or JPEG, you had to open the Export Preview window, adjust your settings, and then cancel.
Well, no more–in Fireworks 3, without ever leaving the workspace, you can see what your designs will look like. Tabs at the top of the document window let you switch immediately among your work areas and three different windows for previewing how your graphics look on the Web. The 2-Up and 4-Up windows offer multiple views of the same image for comparing the results of different file formats.
You can also use the preview tabs to immediately test rollovers (another of Fireworks’ specialties). Previously you had to export the images, tell Fireworks to generate an HTML document, and open that document in a browser window before knowing for sure that your rollover worked correctly. Now you can easily see how your rollovers will work, by switching to your Preview window and running your mouse over the graphics.
The Last WordEvolution on the Internet is measured in weeks, not years. Companies don’t just create a site and say, “Well, that’s that!” Instead, they continue modifying and expanding it–sometimes daily. This results in large teams working together under tight deadlines.
Will Fireworks survive the competition from Photoshop? That’s up to the users to decide. But with its tight Dreamweaver integration and bevy of new timesaving features, it’s certainly got a chance.
Assistant Editor KATHRYN LUNSFORD teaches desktop publishing at the University of California, Berkeley Graduate School of Journalism.