[ONLINE] feature

Weaving an Untangled Web: Macromedia's Dreamweaver 3

Jim Rible

ONLINE, September 2000
Copyright © 2000 Information Today, Inc.

Subscribe

"I like to code by hand."

"Those WYSIWYG editors don't give me enough control."

"I created a 300-page site in two weeks with Notepad."

Product at a Glance
Dreamweaver 3
Macromedia, Inc.
600 Townsend Street
San Francisco, CA 94103
Tel: 415/252-2000
Fax: 415/626-0554
http://www.macromedia.com

Price: $299; $399 when bundled with Fireworks

Pros: Powerful features that don't require coding knowledge; site management functionality; lots of labor saving features.

Cons: Hard to master all the features; adding metatags to template pages is difficult.

While not exact quotes, these were the sentiments expressed in a recent discussion on Web4- Lib, an electronic discussion for library-based Web managers sponsored by The Library, UC Berkeley and Sun Microsystems, Inc. I have to admit that I often use a text editor in my Web work, but was appalled at the direction the Web4Lib thread took. There was little to no mention of the advantages of using visual Web authoring software. In fact, such programs were mentioned with a little disdain. Although I taught classes in HTML for years, today I can't imagine creating and maintaining Web sites without a great WYSIWYG editor like Macromedia's Dreamweaver. Now in its third version in two years, Dreamweaver has over 60% of the market for professional, visual Web authoring software. Despite its abilities and numerous rave reviews, however, the feature-rich Dreamweaver is not an easy program to learn. Why, then, is it so successful?

BEHAVIORS

The original reason I bought Dreamweaver was because of its Behaviors-built-in JavaScript code you can assign to objects like graphics or links. Behaviors give you the ability to program Web page effects without having to write any code. For example, you are probably familiar with the rollover effect on Web pages: moving the cursor over a graphic causes it to magically change shape, color, glow, etc. The rollover is just a second graphic that is displayed while the cursor is moved over it. This effect is achieved by a little bit of JavaScript programming embedded in the page's HTML. Knowing how to create such an effect previously required the Web page author to know some programming. But Dreamweaver generates the code automatically via the Swap Image Behavior. Altogether there are about twenty built-in Behaviors that come with Dreamweaver while more can be added via Macromedia's Web site (see Extensibility later in article).

SITE MANAGEMENT

Putting your files on the Web can be an extremely trying process, especially for those of you that do little file management. It is an unfortunate fact of life for system administrators that computer users aren't as good at deleting files as they are at creating them. Dreamweaver's built-in Site Management gives users plenty of options for managing their files. While all of the pages you create in Dreamweaver are saved to a local drive, you have the option of transferring them to your Web site either via a built-in FTP client or another networked drive. The advantage to using one of these two methods is that you always have a copy of your entire site on your hard drive. Likewise, if your files somehow become lost or deleted off your hard drive, you can still FTP them back within Dreamweaver.

Site Management also has a built-in Synchronization feature that compares the files in your local directory to the one on your Web sever, giving you the option of transferring the latest version of each file either to the Web server or your hard drive. This can be useful if you work in a collaborative environment and other people are adding and updating files in the same Web directory as yourself. To this end, Dreamweaver has a file "check-in/check-out" system. If you have a team of people using Dreamweaver and working on the same site, you can tag the files you are working on so that others can see that those files are currently in use.

The best feature of the Site Management tool is its ability to keep track of all your Web site's links and file names. If you change the name of a file in the Site Management dialog box, it updates every page in your site with that name. This is an extremely powerful tool, especially when someone complains about the esoteric file names you have chosen.

Adjuncts to Site Management: Styles, Templates, and Libraries

Keeping a Web site updated that grows beyond a handful of pages can be a time-consuming and complicated task. Redesigning a Web site of even just a hundred pages can be a nightmare. In fact, you might as well start over. But this time you have the opportunity to do it right. Dreamweaver offers three tools that give you control over the look and feel of your entire site. Styles that are applied to regions of text, Templates that define an entire page, and Libraries that contain elements used repeatedly on your Web pages.

Styles

A Dreamweaver style is simply a set of attributes applied to a region of text. Dreamweaver offers two methods of assigning styles: HTML Styles and Cascading Style Sheets (CSS). For example, you can designate the attributes for all of the text on your Web pages to show up with a Verdana font face, in red color, and one point size larger than a standard Web browser would display it. If you apply such a style to all of the text in your Web pages they would have a standard look. The difference between an HTML style and CSS is that an HTML style applied to a paragraph would need to be reapplied if you change the style. If you make a change using CSS, however, it updates the entire page or Web site that uses the CSS. Even if your site contains thousands of pages! You only have to make one change, in one place, in one file. Why not always choose CSS over HTML styles? CSS is not fully supported by all Web browsers (see the sidebar on CSS).

Templates

Templates are used to define a standard set of elements on a Web page. The idea is not new and many Web authors create their own templates. However, Dreamweaver creates templates that can be utilized to update every page on your Web site. Typically, you might want to have a standard header and footer on a Web page. You might even employ something like a copyright date in the footer. Unfortunately, that means every year you will need to change the copyright date. If you use a Dreamweaver template for all your Web pages you would only need to change the date once. Every page using that template is automatically updated.

One of the best features in using templates is that you can take a group of documents and quickly create a Web site with a standard look and feel. I was recently asked to put a list of films on my library's Web site. It was a huge list that took about a minute to download over a 28.8K modem. I decided to break it down into 26 lists, one for each letter of the alphabet. I quickly designed a template, cut and pasted each part of the alphabetical list into a separate Web page, applied the template to each page, and violˆ! Instant Web site. What I really loved about this was that after I created all those pages, I wanted to put a navigation bar on each page with the letters of the alphabet. All I needed to do was to create it on the master template and each page was instantly updated. The entire job took me about an hour.

While Dreamweaver's Templates can be a powerful tool, they can cause problems when trying to alter the pages that use them. The same feature that is so wonderful in updating a series of pages also locks those parts of the pages that use the template. Trying to add metatags can be particularly frustrating because that portion of a template-built page is off limits. You can get around this by breaking a Web page's link with its template, but then the page is no longer updatable via the cool feature I just described. The alternative is to make your standard header and footers Library items.

Libraries

A Dreamweaver Library contains items that will be used repeatedly. If you have a logo or a paragraph of text that you often use, you can put them in the Library and drag them out whenever you want them. What makes Library items wonderful is that when you update them you are given the choice of updating any page that uses them. That way, if you break a Web page's link with its template, it will still update the page. I find that creating Templates containing Library items is the best method for creating an easily updatable Web site. By making your standard headers and footers Library items, and then creating a Template that uses them, you can quickly apply your look and feel to a page, break its link with the Template, and then easily update the Library items if you need to change something in the header or footer. In the example of the copyright date given earlier, you would probably want to tag it as a Library item.

MORE COOL STUFF

These tools are the essence of what makes creating Web pages in Dreamweaver a powerful Web authoring environment. But what really makes it fun are all the other labor-saving devices that come with it. What is listed here are just a few selected features that I like. There isn't nearly enough room to discuss all of them.

Roundtrip HTML

After you have been using Dreamweaver for a while, you will no doubt be creating extraneous bits of HTML in your document. For example, you might bold some text and then delete the text, only to have the empty "bold" tags sitting in your document. This same kind of thing happens in word processing programs. In Dreamweaver, you can assign the Clean up HTML command to get rid of these codes. There is even a special version of this command for Web pages created with Microsoft Word: Clean up Word HTML. This can be extremely useful when the content for the Web pages you are creating was originally created in Word.

Target Browsers

Dreamweaver has two methods of checking your work for compatibility with the two major Web browsers on the market. One is Preview in Browser and the other is Check Target Browsers. With Preview in Browser, you can configure Dreamweaver to display whatever page you are working on in one of two selected browsers. By pressing F12 (or control-F12 for your secondary browser), the browser instantly launches and displays your page. Note: you must already have the browsers loaded on your computer to do this.

Because Dreamweaver has the capability to add code to Web pages that may not function in all browsers, it gives you the opportunity to check your work for browser compatibility. Choosing Check Target Browsers from the File menu performs a check on your document, giving you a report of what features are not supported in the major browsers.

Web Photo Album

Dreamweaver is designed to work in tandem with another product of Macromedia's, Fireworks 3. Fireworks is a hybrid graphics program, being something of a cross of Illustrator or Freehand and PhotoShop. (See the review, "Five Web Graphic Software Packages for Dummies and Smarties," by Jim Rible in the September 1999 issue of ONLINE for more information.) When you have both Fireworks 3 and Dreamweaver 3 (Macromedia sells them at a reduced price together) loaded on your computer, Dreamweaver gives you a special command to create a Web Photo Album. This nifty little feature takes all the pictures you put in a folder and creates a Web page of thumbnails. You can click on these thumbnails to give you the full picture. It also creates a Web page for each picture complete with navigation buttons, so you can click on "next" or "previous." This is a very handy organizing feature for keeping track of all the pictures you may have scanned or taken with a digital camera.

Extensibility

An ongoing attractiveness of Dreamweaver is its ability to add Extensions. These are essentially extra Behaviors and Commands that can be downloaded from Macromedia's Web site. They range from a cascading drop-down menu to a simple word count. As of this writing, there are about one hundred extensions that can be downloaded, all for free. Written by third-party developers, each Extension has its own discussion thread offering support in its use.

Support

Macromedia offers 90 days of toll-free telephone support for Dreamweaver. Beyond that, you can sign up for a variety of personal support options, but you probably won't need to. There is plenty of information via Macromedia's own Web site and help via the Dreamweaver newsgroup (see http://www.macromedia.com/support/dreamweaver). The newsgroup is very active and Macromedia technicians monitor the newsgroup, sometimes answering questions in addition to the numerous experts that are willing to help you.

While Dreamweaver comes with a fairly thick manual, it also incorporates all of it into Web pages that are loaded to your hard drive along with the program. This makes finding information a few clicks away. Additionally, there are tutorials for some of Dreamweaver's most popular features. DREAMWEAVER ULTRADEV In early June, Macromedia came out with a companion product to Dreamweaver called Dreamweaver UltraDev. This product incorporates everything in Dreamweaver 3, but also includes the ability to write Active Server Pages (ASP) or Java Server Pages (JSP) without knowing any programming. ASP or JSP is used to link the databases to Web pages, creating dynamically generated Web pages. Dreamweaver UltraDev is really a redesign of Drumbeat, which Macromedia bought last year from Elemental Software. Macromedia will continue to support Dreamweaver as a separate product and is marketing Dreamweaver UltraDev to Web software developers. DREAMWEAVER VERSUS ALL THE OTHERS How does Dreamweaver stack up against all the other WYSIWYG Web editors? No contest. FrontPage has clunky site management and requires an NT server to use some of its best features. Adobe GoLive, Dreamweaver's closest competitor, has an awkward interface and esoteric features like a QuickTime editor. Netobjects Fusion depends too much on built-in templates. It's a given that these terse statements might offend some people, especially users of these programs, but there is a reason that Dreamweaver has such a large share of the market. It simply does the best overall job of creating and managing a Web site.

I have to admit that in writing this review I haven't been very critical. In fact, I have a hard time finding fault with a product that has advanced so much in two years. Macromedia does a wonderful job of listening to their users and incorporating their requests. I think the biggest drawback to Dreamweaver is that it is difficult to master all of its features, but that is hardly a criticism. The casual Web page author can always use a simple editor like Netscape's Composer or Microsoft's Frontpage Express. But if you create Web pages everyday or have the responsibility for managing a Web site, you will find Dreamweaver a time and energy saver.

Cascading Style Sheets

Cascading Style Sheets, also known simply as CSS, allow the Web author to create a template of styles that can be incorporated into one paragraph, one page, or a whole Web site. The "cascading" nature of CSS is the hierarchy of implementation. A paragraph style overrules a page style and a site style. A page style overrules a site style. CSS allows you to implement other features as well, such as precise positioning of elements. However, a major stumbling block to its implementation is that not all browsers support CSS. Version four of both Internet Explorer and Netscape Communicator support CSS, but any version below that doesn't.


Jim Rible (rible@sou.edu) was the Webmaster for Southern Oregon University for four years. He has returned to his job full time as SOU's Network Librarian and is working on becoming a Flashmaster.

Comments? Email letters to the Editor at editor@infotoday.com.

[infotoday.com] [ONLINE] [Current Issue] [Subscriptions] [Top]

Copyright © 2000, Information Today, Inc. All rights reserved.
Comments