|
|
by William Stanek
Beyond the mainstream high-end publishing solutions covered in previous chapters, there is a wide array of other Web publishing tools. Many of these tools offer value-pricing, which makes them extremely attractive if you are looking for a budget alternative.
Until now, the focus in this section of the book has been on WYSIWYG publishing tools. While high-end WYSIWYG tools are great, HTML editors come in two general categories: those that follow a WYSIWYG approach to Web publishing and those that generate raw HTML markup. Unlike their WYSIWYG counterparts that shield users from the markup, content generators insert markup directly into your pages in a viewable format.
Being able to see the markup directly has its advantages and disadvantages. You don't have to wonder about the structure of your pages. You don't have to wonder whether you inserted extra tag pairs or inconsistent tag pairs. You do have to take extra steps to view the page in its final form. With many non-WYSIWYG tools, however, you can configure a browser for viewing your pages. You can then preview a page in your browser of choice at the touch of a button.
This chapter examines six alternative publishing solutions:
WebEdit and WebEdit Pro
HotDog and HotDog Pro
HoTMetaL and HoTMetaL Pro
| Note |
Trial versions of WebEdit, HotDog, and HoTMetaL are included on the CD-ROM accom-panying this book. If you want to test-drive the professional version, visit the developers' Web sites to obtain a limited demo version. Limited demos of WebEdit Pro and HotDog Pro are currently available. |
Nesbitt Software Corporation (www.nesbitt.com) offers two versions of its popular authoring tool called WebEdit. The basic edition, the WebEdit Standard version, retails for $39.95 and is available for Windows 3.1 and Windows 95. The more advanced edition, the WebEdit Professional version (called Web Edit Pro), retails for $109.95 and is available for Windows 3.1 and Windows 95.
For the price, the WebEdit Standard edition is a better value than the WebEdit Professional edition. Both editions of WebEdit fully support HTML 3.0, Netscape 2.0 extensions to HTML, and Internet Explorer 2.0 extensions to HTML. Both editions of WebEdit include a configurable toolbar, shortcut keys, and a spell checker. Where the editions differ is in the automation routines for creating advanced HTML elements such as forms and frames. The professional edition has many wizards to guide you through the creation process and the basic edition has only a few.
| Note |
The current version of WebEdit is 2.0. The developers of WebEdit 2.0 wanted their editor to be on the cutting edge and chose to fully support HTML 3.0. Unfortunately, as you know from reading this book, the HTML standard changed dramatically in early 1996 and HTML 3.0 is now a defunct standard replaced by HTML 3.2. Still, the Cougar specification, which I'll call HTML 3.4, does reintroduce many aspects of the original HTML 3.0 specification. This means that in the coming months, you may be able to put to use some of the advanced tags you will find in this editor. |
As you can see in Figure 15.1, WebEdit has an extensive toolbar. Using this toolbar, you can perform most of the routine functions without having to access a menu or memorize shortcut key combinations.
Figure 15.1 : Examining WebEdit Standard and its toolbar.
With WebEdit, you can have multiple documents open at one time. Although WebEdit doesn't use a Window or Document menu with which you may be familiar to access open documents, it does provide access to the documents using quick tabs. In Figure 15.1, three open documents are in the editor. You can access these documents from the toolbar by clicking the appropriately labeled tab.
Generally, WebEdit inserts markup as a complete HTML element with a begin and end tag. One key way to insert tags into a page is through the Tools menu. This menu is divided into submenus that are organized by element type.
If you examine the Tools menu, you will see options with which you can add every type of HTML element imaginable. With the SSI menu, you can add tags for server side includes. From the Object menu, you can add tags for embedded multimedia objects. From the Java menu, you can add <APPLET> and <PARAM> tags. If an element you are adding to the page has special attributes, WebEdit displays a user-friendly dialog box that shows you all acceptable attributes and enables you to assign values to those attributes.
| Tip |
Right-clicking the mouse displays an extremely useful shortcut menu. Use this menu to save time. |
As you see in Figure 15.2, you can add the HTML element to a page by selecting HTML from the Page Structure Tags submenu. WebEdit then inserts the following tag pair into your page:
Figure 15.2 : Inserting an HTML element.
<HTML> </HTML>
WebEdit's toolbar saves you keystrokes by placing the most commonly used option menus directly on the toolbar. Thus, another way to add page structure tags to your page is to click the Page menu from the toolbar and select an option. Figure 15.3 shows these menus in action. By selecting the Physical menu from the toolbar, you can add physical character elements, such as bold and blink, to your pages.
Figure 15.3 : Inserting the <FONT> tag using the Physical menu.
Following the example, you could add a <FONT> tag to your page by selecting the Font option of the Physical menu. When you do this, WebEdit displays the dialog box shown in Figure 15.4. You can use this dialog box to select the size, color, and typeface of the font you want to use.
Figure 15.4 : WebEdit's Font dialog box.
The WebEdit Professional edition features an interface that is almost identical to the standard edition. You will find the same friendly toolbar and menus. The professional edition differs from the standard edition in features-the standard edition has a table builder and a home page wizard but that's about it for helper tools.
The professional edition adds to this list of helper tools considerably. You will find a tag checker, Frame Wizard, form builder, Multimedia Wizard, and much more. Most of these helper tools are accessible from the Tools menu shown in Figure 15.5.
Figure 15.5 : Examining WebEdit Pro and the Tools menu.
Using the Frame Wizard shown in Figure 15.6, you can frame-enhance your pages using an intuitive graphical interface. Step by step, the Frame Wizard guides you through the frame creation process.
Figure 15.6 : Creating frames with the Frame Wizard.
Using the wizard page shown in Figure 15.6, you can divide a page into frames simply by selecting either a horizontal or vertical divider and left-clicking to place the divider on the page. You can adjust the size of any frame by moving the pointer over the divide then clicking and holding the left-mouse button as you drag the divider to a new location on the page.
| Tip |
If you make a mistake, you can clear the page and start anew by clicking the Clear button. |
With the Home Page Wizard shown in Figure 15.7, WebEdit guides you through the home page creation process. The first step is to select a heading and subtitle for the page and define the layout style. Next, define the background style and text colors for the page. Then add a logo to the page. Afterward, the wizard helps you finish the page with text, links, and contact information.
Figure 15.7 : Creating a home page with the Home Page Wizard.
While Sausage Software's HTML editor, called HotDog, is very comparable to WebEdit, you will find that HotDog is loaded with extras. Like WebEdit, HotDog is available in two versions: The standard edition, called simply HotDog, retails for $39.95 and the professional edition, HotDog Pro, retails for $99.95.
Currently this editor is only available for Windows 3.1 and Windows 95. Although Sausage Software's Web Site (www.sausage.com) has long displayed a message stating that HotDog will soon be available for Macintosh and UNIX, it will probably be well into 1997 before the editor is available on other operating systems-if at all.
| Note |
The version of HotDog and HotDog Pro featured in this section is 2.5.3. This version features many improvements over previous versions. |
As with WebEdit, the standard edition is a better value than the professional edition. HotDog fully supports HTML 3.0, Netscape 2.0 extensions to HTML, and Internet Explorer 2.0 extensions to HTML. When you have multiple documents open in the editor, you can switch between them quickly using tabs at the bottom of the editor window.
HotDog features one of the friendliest interfaces you'll find in value-priced HTML editors (see Figure 15.8). As with WebEdit, with HotDog you can select a browser in which to view your pages. Unlike WebEdit, with HotDog you can preview your pages without having to save the page before you preview it. HotDog does this by automatically parsing the file before passing the file to your browser. Other features include an advanced correction system that automatically replaces text and file paths when you publish your pages.
Figure 15.8 : HotDog has a very friendly interface.
HotDog is designed for beginners and experts alike. You'll know this immediately when you start HotDog and see the dialog box shown in Figure 15.9. Using this dialog box, beginners can access the help file tutorials to learn about HTML, use HotDog to create Web pages, and also cover HotDog's features.
Figure 15.9 : Accessing help files from the HotDog startup dialog box.
In addition to being able to insert many common tags into a page directly from the toolbar, HotDog has a terrific dialog box for adding tags (see Figure 15.10). Once the Tags dialog box is displayed, you can add a tag by finding it in the option list and double-clicking. HotDog has a similar dialog box that lets you add character entities, such as & for the ampersand symbol. Another way to add tags is via the popup menus accessible by selecting options on the Tag menu.
Figure 15.10: Using the Tags dialog box to insert tags and attributes.
| Tip |
A problem beginners may encounter with the Tags dialog box is that tags and their attributes are displayed. After adding an HTML element, such as the begin and end tags for the BODY element, you must then select attributes for the tag individually. Therefore, to create a BODY element with a background image, you would select the <BODY> tag, then select the BACKGROUND attribute. |
Creating forms with HotDog is easy-just click the Forms icon on the toolbar and HotDog displays a form builder. As you can see from Figure 15.11, the form builder provides a friendly interface for selecting the type of element you want to add to a form.
Figure 15.11: Building a form using the Define Form Elements dialog box.
Simply click the appropriately labeled button, such as Text Area, and you can define the attributes for a <TEXTAREA> form element. To insert the form element after you define it, click the Insert button. By repeating these steps, you can add as many form elements as you want.
| Tip |
When you first open the Define Form Elements dialog box, click the Insert button immediately to define the submission method, action, and encoding type for the form. |
HotDog features many other friendly tools for managing links, building tables, and creating frames. Figure 15.12 shows the Create Table dialog box. Not only can you create a table with this dialog box, you can also use it to display the table with the columns and rows you've defined then enter text directly into the cells of your table. When you are finished defining the table, click the OK button to insert the table into your page.
Figure 15.12: Creating a table in HotDog.
HotDog Pro features the same friendly interface as the standard HotDog editor, yet it has many advanced features that make it a terrific editor of choice. Unlike WebEdit, only the professional version of HotDog includes a spell checker. HotDog Pro further separates itself from the standard edition with multilevel undo and the ability to handle files of unlimited size. HotDog is limited to an arbitrary file length of 32 K, however, which is disappointing because these are useful features that should be included in both editions of HotDog.
With HotDog Pro, not only can you customize the toolbar, you can select the icons and labels for toolbar buttons as well. To do this, select Tools | Customize Button Bar. This displays the dialog box shown in Figure 15.13. Next, click the button you want to redefine. You can now reset the label, icon, and function of the button.
Figure 15.13: Customizing the HotDog Pro toolbar.
Another nice feature of HotDog Pro is the ability to define your own tags or tag sets that can be accessed via the menus. Using this customizing feature, you can add new tags to any of the tag-related menus and redefine any existing tab-related options. Keep in mind that tag-related menus are accessed as pop-up menus by selecting options on the Tag menu.
To define tags, select Tag Information from the Edit menu. This displays the dialog box shown in Figure 15.14. Next, select the menu to which you want to add or redefine options. You can now create or update a tag definition.
Figure 15.14: Defining new tags for use with HotDog Pro.
If you are creating a new tag, do the following:
If you are updating an existing tag, do the following:
With HotDog Pro, you can group pages into projects, which allows quick access to groups of pages for editing and publishing. HotDog Pro even has a Project Manager to help you through the projection creation and management process-to access it, select Project Manager under the File menu. Once you create a project using the Project Manager, you can open any of your projects using the Open Project option of the File menu.
| Tip |
If you are using projects in HotDog Pro, be sure to use the Save Project or Save All options of the File menu versus the Save option. This lets you save all the files in your project at one time and ensures that the updates you've made are saved. |
The Project Manager has three setup pages that are accessed using tabs at the top of the Project Manager dialog box:
Details
Files
Links
Using the Details page shown in Figure 15.15, you can select a name for the project and define the directory in which to store the project. If you plan to use HotDog Pro's quick publishing feature, you can configure the editor to access your Web server of choice.
Figure 15.15: Setting project details in the Project Manager.
Using the Files page of the Project Manager, you can add and delete pages (see Figure 15.16). A handy feature is the ability to add all open documents to the current project using the button labeled Add Opened Docs.
Figure 15.16: Adding files to a project in the Project Manager.
Using the Links page of the Project Manager, you can check the accuracy of links used in the pages of your project (see Figure 15.17). You can do this on a page-by-page basis, or you can check all the links in all your pages.
Figure 15.17: Checking links in your project.
HoTMetaL is an editor from SoftQuad Incorporated (www.sq.com). Like the other editors examined in this chapter, there are two editions of HoTMetaL. Value hunters will want to test drive HotMetaL immediately-it is free! What is even better is that SoftQuad has made a serious commitment to continue to develop and improve this freeware editor. HotMetaL Pro, on the other hand, carries a $159 price tag and supports features that put it in the same league as Microsoft FrontPage and Macromedia Backstage.
Still, SoftQuad has the market experience to back its offerings with solid support and continual upgrades. Before you make a decision on the editor you need, you should give HoTMetaL and HoTMetaL Pro a serious look. Versions of this editor are available for Windows, Macintosh, Power Macintosh, and UNIX.
As you see in Figure 15.18, HoTMetaL is a unique editor because it enters elements using a WYSIWYG approach, yet it inserts tag markers like the content generators examined earlier. This approach to authoring Web pages works well for beginners and advanced publishers alike. After using both WYSIWYG editors and content generators, you will appreciate the skillful combination that gives you the best of both worlds.
| Note |
The version of HoTMetaL featured in this section is version 2.0. The improvements over version 1.0 are vast, so if you used HoTMetaL 1.0 in the past, be sure to check out HoTMetaL 2.0. |
Because HoTMetaL has been through numerous revisions, you will find that it runs fast, handles updates smoothly, and is relatively free of bugs. The same cannot be said about many other HTML editors entering today's market. HoTMetaL is also fully compliant with HTML 3.0 and Netscape 2.0 extensions to HTML.
As you see in Figure 15.19, HoTMetaL lets you hide tags to give your document a complete WYSIWYG feel. To do this, select Hide Tags from the View menu. Later if you want to view the tags, select Show Tags from the View menu. Using a similar feature, HoTMetaL lets you hide or display invisible elements like comments. You can also hide or display inline images.
Figure 15.19: With HoTMetaL, you can hide the markup tags.
Although HoTMetaL features an extensive toolbar for adding markup to your pages, the easiest way to add markup is to select Insert Element from the Markup menu. Using the dialog box shown in Figure 15.20, you can select from a list of elements to add to the page. When you find the right element, double-click its listing, and HoTMetaL will insert the appropriate tag markers and, if necessary, display a dialog with which you can define attributes for the element.
Figure 15.20: Adding tags with the Insert Element dialog box.
| Tip |
Often when you are adding a new element, HoTMetaL will display a dialog box that lets you define only the required attributes. You can later define extended attributes for the element. To do this, after you insert the element and close the associated dialog box, move the cursor between the begin and end tag markers for the element, then press f6. You should now see a dialog box that lets you set all attributes associated with the element. |
The Insert Element dialog box is context-sensitive when rules checking is on. What this means is that the dialog box only displays elements that can be inserted at the current cursor position.
Using the rule checking feature in HoTMetaL, you cannot insert markup where it does not belong. For example, if you move the cursor between the begin and end markers for an IMG element, the Insert Element option on the Markup menu is grayed out because there are no tags you can insert into an IMG element. If you move the cursor between the begin and end markers for a HEAD element, the Insert Element dialog box displays only elements you can use in page headers, such as the TITLE element.
| Tip |
You can turn rules checking on or off by pressing Ctrl+K or by selecting Turn Rules Checking On/Off from the Special menu. |
HoTMetaL Pro 3 is an advanced authoring system that supports the most current HTML specification and extensions. You will find that HoTMetaL Pro supports everything you want to use, including HTML 3.2, Java, ActiveX, objects, scripts and even Shockwave.
Like its counterpart HoTMetaL, HoTMetaL Pro follows an integrated WYSIWYG and tag marker approach. If you like the look and feel of HoTMetaL and are looking for advanced help with your page creation efforts, HoTMetaL Pro is for you.
A feature you'll want to check out is the multiple browser preview with which you can preview your page in any browser at the touch of a button. This feature is great if you want to test your page in several browsers. Other features include automatic conversion of other document formats to HTML. All you have to do is open a MS Word, WordPerfect, or AmiPro document in HoTMetaL Pro, and it is instantly converted to HTML.
The best feature of HoTMetaL Pro is the template system. Unlike the basic templates included with most of the other editors discussed in this chapter, HoTMetaL Pro's templates are as advanced as they come. You will find hundreds of templates with which you instantly can create pages, ready-made tables, frames, Java applets, scripts, and Shockwave animation.
You can access templates whenever you create a new page. To do this, select New from the File menu, and then select a template group. As you see in Figure 15.21, HoTMetaL Pro provides three general template groups: Company, Personal, and Intranet.
Figure 15.21: Creating pages the easy way--with templates.
Another terrific feature of HoTMetaL Pro is the Frames Editor, which is one of the most advanced you'll find anywhere. As you see in Figure 15.22, creating a frame-enhanced page is done completely with an easy-to-use graphical interface. As you define frames, you can also define the document sources for the frames by dragging and dropping Web pages into your frames.
Figure 15.22: HoTMetaL Pro's Frames Editor is terrific for creating frames without hassles.
HoTMetaL Pro comes with a built-in graphics editor called MetalWorks. Whenever you want to manipulate an image, all you need to do is right-click on the image to display a pop-up menu with which you can define image attributes, create transparent images, and build image maps. HoTMetaL Pro supports both server-side and client-side image maps.
As shown in Figure 15.23, building an image map from an existing image is handled through a dialog box called MetalWorks Map. Using this dialog box, you can create very precise image maps by enlarging or shrinking the image to suit your needs. Before you can define hot spots on the map, you must select a shape for the hot spot. Hot spots are circular, rectangular, or polygonal.
Figure 15.23: Creating an image map with the built-in Metal Works graphics editor..
Many different types of HTML editors are available today. Beyond the high-end WYSIWYG tools is a whole range of editors. One of these editors may just fit your needs. Most developers produce a basic and an advanced version of their editor. Sometimes the basic version of an editor is the better value, especially if you don't need the fancy automation tools built into the advanced version.
