My recommended path for a Web author is to learn XHTML first. You want to know what your graphical editor is doing, whether it's doing things correctly, and how to augment its capabilities or fix any mistakes or problems that crop up by digging into the code. If you've been reading the chapters of this book in order, you should have no problem managing a graphical editor.

The advantages of a graphical editor are obvious—you don't have to type all those crazy codes! Nearly all graphical editors let you lay out your page with tables, create framesets, or even add some JavaScript to the page. At the high end, a graphical editor can enable you to work with complex style sheet configurations and CSS positioning or other DHTML procedures. Best of all, you generally do less editing of elements and tags by hand.

In this chapter, you'll take a look at some popular graphical editors, including the differences between them and the advantages for Web authoring.

This chapter discusses the following:

• Netscape Composer

• Adobe GoLive

• Macromedia Dreamweaver

• Microsoft FrontPage 2002

Netscape Composer

While Netscape Composer doesn't exactly belong in the same class as the other graphical editors discussed in this chapter, it's worth covering for one primary reason—it's free. It's also gotten a bad rap from some Web authors, perhaps because earlier versions were partial to Netscape-only elements and the code tended to be a bit messy. The fact that Netscape Communicator (the main version of Netscape's software in the late 1990s) went quite a while without significant updates also hurt Composer, because it was stuck at a particular support level of HTML for quite a while.

Composer has been updated for Netscape 6.x, however, and it turns in a decent performance. It's part of the standard Netscape distribution, which now incorporates all the modules (Web browsing, e-mail, newsgroups, and Composer) that used to comprise Netscape Communicator. In Netscape 6.x, all you need to do is choose File, New, Blank Page to Edit to begin working with Composer.

Where to Get It

You can get Composer simply by downloading Netscape from http://home.netscape.com/computing/download/index.html. Once that's downloaded and installed, Composer is available immediately.

Composer's Strengths

Composer is an HTML 4.01 transitional DTD-compliant Web browser. It doesn't follow all the rules of an XHTML document—for instance, empty elements don't include a trailing slash. However, it does follow many of the rules, including closing most container elements, avoiding most deprecated elements, and using the appropriate elements for much of the markup. Likewise, the raw markup is reasonably clean and easy to read, which was a problem with earlier versions of Composer (as with many early graphical editors).

Composer features a number of different modes that are great for the Web developer who is learning HTML code. The Show All Tags mode (see Figure 1) can be used to quickly see which elements are being used on a particular page. This mode enables you not only to see potential mistakes (such as the two <div> elements that appear in Figure 1), but also to double-click an element and change its attributes or add inline style or JavaScript event handlers.

Figure 1 In Show All Tags mode, Composer gives you a special view that displays the elements being used. You can also change them and add inline styles.

Composer offers two other modes: HTML Source and Preview. The HTML Source mode is useful for seeing the source that Composer is developing, as well as for making alterations yourself when necessary. And the Preview mode is useful because it can show you exactly how the page will look—at least in Netscape 6.x. You can also edit in Preview mode, if desired, without the guides that are shown in the Normal mode.

Composer's Weaknesses

Composer isn't really an XHTML tool, although generally Composer will create pages that validate to the HTML 4.01 transitional DTD. (And in fact, a validation tool is built into Composer.) Composer tends to use <font> elements for changing the size and typeface of fonts, although you can opt to add inline styles to elements one by one.

Composer is designed primarily to edit individual pages. As you'll see with the other tools discussed in this chapter, pro-level editors tend to help you manage an entire site, including uploading and downloading the site or otherwise working with the server. Composer is really a page editor, leaving most of the site management up to you.

Probably its biggest weakness is that it has very little support for adding <style> and <script> elements to the page in any mode other than the HTML Source mode. While Composer doesn't seem to damage the <style> and <script> elements, it doesn't always recognize them, either. For instance, style definitions in the <head> of the document don't appear to change the Preview mode presentation of the page. If you click the Browse button to see the page in a full-fledged Netscape browser window, however, the style sheet definitions are put into place.

The other weakness is an interface issue. Most commercial Web authoring packages use small windows, called palettes, to make common settings available as you're editing. For instance, a Web editor might have a palette for settings so that when you click inside a table cell, the cell's alignment, width, background color, and other settings are available immediately. In Composer, these settings are handled using dialog boxes, which simply adds a step to the process. You need to double-click an element, either in Normal mode or Show All Tags mode, before you can see the dialog box that governs that element's settings. While the dialog boxes tend to be powerful (as I mentioned, you can add inline style and JavaScript event handlers), all that double-clicking can get tiresome.

Composer's Highlights

If you're interested in trying out Composer, simply launch Netscape 6.x and choose File, New, Blank Page to Edit, or choose Tasks, Composer to launch Composer directly. (Netscape 6 also has a small menu bar, usually in the bottom-left corner, that has a Composer launch button.) Once it's launched, you can begin typing directly in the window. Composer considers the entire window to be within the bounds of the <body> of your document, unless you're editing in Source mode.

As you type, note that the menu in the top-left corner can be used to change the current paragraph on the page to a particular block style, either a paragraph style or a heading, as shown in Figure 2. You needn't highlight block elements to change them—simply place the insertion point in a paragraph and choose from the menu.

Figure 2 Changing block level styles with the menu bar menu.

You can change font typefaces, sizes, and text styles by highlighting words and choosing styles from the toolbar, or by opening the Format menu and choosing from the Font, Size, and Text Style submenus.

Also on the Format menu are controls for editing table properties, as well as the Format, Page Title, and Properties menu items, where you can enter the title and some <head>-level elements.

Adding other elements is accomplished via the Insert menu, where you can add images, hyperlinks, tables, and other HTML markup. For instance, choose Insert, Image and the resulting dialog box enables you to locate the image on your hard disk. (Remember, it should be in the same relative location that it will be once it's uploaded to your Web server.) The Image Properties dialog box allows you to add alternative text, specify the width and height of the image, or create an imagemap. Once you've made your settings and click OK, the image is added where the insertion point is on your page. You can then drag the image around to change its location.

Adding a table is a similar prospect. Choose Insert, Table and a dialog box appears. In that dialog box, choose the number of rows and columns for the table, the width, and the border thickness. For more advanced options, including cellpadding and cellspacing, click the Advanced Edit button. Otherwise, click the OK button to add the blank table to your page. You'll see the cells, ready for you to begin typing (or pasting) content.

As a knowledgeable Web author, you'll likely find yourself spending at least some time in the HTML Source mode. There you can edit the elements directly, and you can add <head>-level elements, scripting, or style code. Netscape Composer is fairly good at staying out of your way after you've edited the source code. (In fact, in the Preferences dialog box, you can tell Composer to maintain the original formatting of the HTML that you type in manually.)

Finally, you have a few different choices when you're ready to preview the page. Click the Preview mode tab for an editable preview of your page. Click the Browser button in the toolbar to see the page in an actual Netscape browser window, where you'll likely see even truer representations. (Plus, JavaScript and CSS will work in those browser windows.) Finally, choose Edit, Validate HTML to automatically connect to the W3C's validator page and test your document to make sure it's valid HTML. (Again, it's compared against the HTML 4.01 transitional DTD, which is similar to the XHTML 1.0 transitional DTD but slightly less strict. )