Copyright: 2000 The Computer Guys Web-O-Rama Help


Web-O-Rama Help

Help v. 05.12.00

Contents

Introduction

General Instructions

Menus and Buttons

    Main Menu

        File Menu

        Edit Menu

        Insert Menu

        Preferences Menu

        View Menu

        Folder Menu

        Tags Menu

        Text Menu

        Browser Menu

        Window Menu

        Help Menu

    Dialog Buttons

    Editing Buttons

    File View

    Status Bar

Dialogs

    Body Dialog

    Character Dialog

    Copy Files Dialog

    Find and Replace

    Font Dialog

    Form Dialog

    Frames Dialog

    Hex Value Dialog

    Image Dialog

    Links Dialog

    List Dialog

    Marquee Text Dialog

    Metaname Dialog

    Page Creator Dialog

    Preferences Dialog

    Rules Dialog

    Sound Dialog

    Style Sheet Dialog

    Table Dialog

    Tag List Dialog

    User Buttons Dialog

Special Features

Ordering Web-O-Rama

Problems

Acknowledgments


Introduction

Word of Caution

Because Web-O-Rama is continually evolving, keeping this Help file current is a nearly impossible task. Please notify me (see Contact Information, below) if you find major discrepancies between the Help file and the program.

What This Help File Is Not

Web-O-Rama is a full-featured, text-based HTML editing program written in Microsoft’s Visual Basic 6 programming language. Although it has been designed to be as intuitive as possible, a basic understanding of HTML (HyperText Markup Language) is necessary to use Web-O-Rama effectively. Because of space and time limitations, this Help file is not a substitute for an HTML manual; details of HTML coding are explained only where necessary for an understanding of a Web-O-Rama feature. The Internet is a rich source of information about HTML. A search will return the addresses of a multitude of sites devoted to explaining HTML coding in intricate detail. There are also hundreds of hard-copy HTML texts; check your local bookstore. Please do not contact me with HTML coding questions except as they apply specifically to Web-O-Rama.

Web-O-Rama is text-based. That means it is not WYSIWYG (“What You See Is What You Get”), as are many HTML editing programs, such as Microsoft’s Front Page. People who want to create Web pages without understanding the inner workings of HTML code should look elsewhere for an HTML editing program. There are no plans to make Web-O-Rama WYSIWYG, although Web-O-Rama Professional has a Web View tab that allows you to switch back and forth between your HTML code and an Internet Explorer-type WYSIWYG display.

Use of Help Graphics

When I first started writing this Help file, I intended to use graphics to illustrate the various functions of Web-O-Rama. Unfortunately, I found that the Help file was quickly expanding to gigantic proportions. In addition, Web-O-Rama’s dialogs change often, which would render any graphic of a particular feature obsolete almost immediately. After lengthy consideration, I decided to forgo all graphics and to keep this Help file small but informative.

Contact Information

I can most likely be reached at kgunn@cjnetworks.com. If e-mail sent to that address bounces, you can always send a hard-copy letter to Kevin Gunn, P.O. Box 442155, Lawrence  KS  66044-8933 (please include an e-mail address on hard-copy correspondence). The current location of Web-O-Rama’s home page is http://people.delphi.com/krgunn/index.html. At some point in the future, it is possible that will change to http://www.cjnetworks.com/~kgunn/index.html. Program suggestions and bug reports are always welcome. Pointing out any glaring factual or grammatical errors in this Help file would be appreciated, as well.


General Instructions

When the Program Starts

Web-O-Rama starts with a new file, “Untitled:1,” open and ready to edit. If you do not type anything into the new file and open an existing file, the new file closes. If you make changes to the new file, you will be prompted to save the file before you close it. This is similar to the operation of Microsoft Word and other word-processing programs. Any editing window labeled “Untitled:” and followed by a number has not been given a name and saved.

OK, Exit, Clear, the Push-Pin, and the Copy-to-Clipboard Button

Many of the dialogs have four buttons at the bottom: OK, on the left, Exit, on the right, a small button with an illustration of a push-pin immediately to the right of the OK button, and a button with the standard copy to clipboard graphic to the right of the push-pin button. Some dialogs also have a Clear button between OK and Exit that clears any text boxes and returns a dialog’s settings to its default values. OK generally copies the material that has been selected to the HTML document. Exit closes the dialog without copying anything to the document.

The push-pin is used to “tack” the dialog to the foreground. When the push-pin graphic is white, clicking with the mouse outside the area of the dialog causes the dialog to move to the background (in other words, it disappears). When the push-pin graphic is red, the dialog is in front of all the other dialogs. The dialog will remain visible even if you click outside the dialog area. This is particularly useful when working with such dialogs as the Character Dialog, which you may want in the foreground while adding characters to an HTML document. When the push-pin is red (the dialog is in the on-top position), clicking the OK button copies data to the HTML document but leaves the dialog open. The push-pin setting is “remembered” by Web-O-Rama.

The copy-to-clipboard button is a handy feature when working with multiple HTML documents. When the graphic is white, the copy-to-clipboard function is disabled. When it is red, any dialog data will be copied to the Windows clipboard when the dialog’s OK button is pressed, in addition to being copied to the document. The data can then be pasted into different locations or into multiple documents. The copy-to-clipboard setting is “remembered” by Web-O-Rama.

Dialog Position

All dialogs “remember” their last position. Each time you open a dialog, it will be in the same place on the screen where you last closed it. Dialogs can be dragged around the screen by placing the mouse cursor over the colored bar at the top of the dialog and moving the mouse holding down the left mouse button.

Minimize and Maximize Buttons

There is a group of three tiny buttons at the top right of all the dialogs (the standard Windows buttons). Dialogs can be minimized by pressing the left-most button of the group, labeled with a small black bar. The minimize button shrinks the form into an icon. The icon will remain visible at the bottom of the Web-O-Rama screen. The maximize button, in the middle of the group, with a graphic of two overlapped squares on it, is disabled; the dialogs are fixed in size and cannot be made larger. Dialogs can be closed by pressing the “X” button on the far right. It is better to close the dialogs rather than to minimize them. Although Web-O-Rama does not use a great deal of memory, having multiple dialogs open but minimized will cause a noticeable decrease in performance. As a general rule, there is not much point in having dialogs open unless you are using them.

Font List

If you have a large number of fonts installed on your computer, it takes a few seconds for Windows to gather up information about them in order to display the standard Windows font dialog. Try clicking the Fonts icon in the Windows Control Panel; there will be a definite time lag before the font information appears. Each time you start Web-O-Rama, it gathers a list of all the fonts on your computer and stores it in memory. This font list is accessed by a number of Web-O-Rama’s dialogs, and it seemed more expedient to create the font list as Web-O-Rama loads rather than each time a font list is accessed from one of the dialogs. Instead of showing the standard Windows font dialog, fonts in Web-O-Rama are available through drop-down lists on the dialogs themselves. The slight sluggishness you may notice as Web-O-Rama loads (as it gathers font information) is compensated for by a much quicker response to font selections. [Note: Disabling the splash screen using the Preferences dialog will speed load time.]

Tool Tips

Most of Web-O-Rama’s features have tool tips associated with them. By allowing the mouse to pause over a button, list, or other area on a toolbar or dialog, a message will appear, in a small, shaded box immediately below the mouse cursor, with a short description of the item. Although tool tips are necessarily brief, they are invaluable for a quick reminder of an item’s function.


Menus and Buttons

Web-O-Rama includes a main menu, a dialog buttons toolbar, an editing buttons toolbar, the File View tabs (Files, Tags, and Characters), and a status bar. All of these can be toggled on or off (made visible or invisible) under the main menu item View. The on or off status is remembered between Web-O-Rama sessions.

Main Menu

Web-O-Rama’s main menu is located at the top of the program and consists of the following menu items: File, Edit, Insert, Preferences, View, Folders, Tags, Text, Browser, Window, and Help. The main menu is explained fully in the Main Menu Help topic.

Dialog Buttons

The dialog buttons are on the toolbar immediately below the editing buttons. These buttons provide quick access to Web-O-Rama’s dialogs. Each button has an image that relates to the dialog’s function. See the Dialog Buttons Help topic for more information.

Editing Buttons

The editing buttons are on the toolbar immediately below the main menu. These buttons provide quick access to Web-O-Rama’s editing features. The Editing Buttons Help topic has additional details.

File View

The File View tabs, on the left side of the editing window, show Files, Tags, and Characters. See the File View Help topic for further details.

Status Bar

The status bar is at the bottom of the program. The Status Bar Help topic has additional information.


Main Menu

The main menu, located across the top of the program, consists of standard Windows menu items, such as File, Edit, and Window, as well as features unique to Web-O-Rama. The menu items are the File Menu, Edit Menu, Insert Menu, Preferences Menu, View Menu, Folder Menu, Tags Menu, Text Menu, Browser Menu, Window Menu, and the Help Menu.


File Menu

New—Starts a new (blank) file.

Open…—Opens an existing file.

Close—Closes a file. You will be prompted to save the file if changes have been made to an existing file. You will be prompted to name the file if it has not been previously named and saved..

Close All—If more than one file is open, the Close All menu item will be visible. It closes all open files. You will be prompted to save changes.

Save—Saves a file. If the file has not been previously saved with an identifying file name, you will be asked to Save As… and prompted for a file name.

Save As…—Saves a file for the first time, or allows you to save a file with a different file name.

Save All—If multiple files are open, the Save All menu item will be visible. This allows you to save all open files with one mouse click.

Print—Prints the file, or a highlighted section of the file. [Caution: Trying to print from Web-O-Rama if no printer is attached to your computer may cause the program to crash.]

Recent Files list—The recent files list shows the eight most recently opened files, allowing quick access. When you run Web-O-Rama for the first time, the recent files list will be empty.

Exit—Closes the program. You will be prompted to save any changes made to files.


Edit Menu

The Edit menu item appears on the main menu. It can also be accessed by clicking with the right mouse button while the cursor is in the text area of a document.

Undo—Allows you to undo the last operation performed on a document.

Cut—Cuts (deletes) a selected portion of text, which can then be pasted into another area of the document or into a different document.

Copy—Copies a selected portion of text (but leaves it in place, unlike Cut), which can be then pasted into another area of the document or into a different document.

Paste—Adds text that has been cut or copied.

Delete—Deletes a selected portion of text.

Select All—Selects the entire document.

Find…—Opens the Find dialog. Allows you to search the document for a specific word or phrase.

Find Next—Continues to perform the Find operation without the Find dialog being open.

Replace…—Opens the Replace dialog.

View in Primary Browser…—Opens the current document in the browser you have selected as the primary browser. If you have not chosen a primary browser, the item will be grayed out. Primary browser is different from your computer’s default browser.

Check Spelling…—[This feature was removed in v. 7.X. It will be available again when a built-in spell checker is added.] Checks spelling using Microsoft Word (Windows 95, 98, or NT version 7.0 or higher). Word has to be installed on your computer and you need to have identified the location of the Word directory using the Preferences Dialog before using the spell checker; otherwise, Check Spelling… will be disabled.


Insert Menu

Standard Template—Inserts a standard, blank HTML template into the document:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

</HTML>

These are required elements of an HTML document.

Start Page Creator…—Opens the Page Creator Dialog, which allows you to build a set of HTML tags, including the basic template, Metaname information, and Body and Font tags.

Bold—Inserts tags for bold type (<B></B>). Bold type is darker and heavier than standard type. If text is selected, tags are placed around selected text.

Break—Inserts the tag for a line break (<BR>). A line break adds a line of vertical space, or forces a line to end in a specific place. HTML code does not support standard carriage returns.

Comment—Inserts tags for a comment (<!- - comment here - ->). Comments are not displayed by browsers. If text is selected, comment tags are placed around selected text.

Date/Time—Inserts current date, time, or both, which allows you to insert past or future dates. Date/Time has the following options:

Date: Inserts date in month/day/year format. The year is in two-digit format no matter what your Windows date format is.

Time: Inserts time in hour:minute:second AM/PM format.

Date and Time: Inserts date and time.

File…—Inserts an existing file into HTML document.

Heading—Inserts tags for headings (<H1></H1>, <H2></H2>, <H3></H3>, <H4></H4>, <H5></H5>, <H6></H6>). Headings are set apart from standard text, often with vertical space above and below, and are usually displayed in a different size of type. Head One is the largest, approximately 36-point type. Head Six is the smallest, approximately 7- or 8-point type. Standard text is approximately 9- or 10-point type. Web browsers, however, can be customized to display text by default in larger or smaller point sizes; each person viewing a page may see something slightly different.

Italic—Inserts tags for italic type (<I></I>). Italic type slants slightly to the right. If text is selected, italic tags are placed around selected text.

Link to File…—Allows you to add a link to a file in <A HREF=“file name”></A> format.

List Item—Inserts tags for list item (<LI></LI>). If text is selected, list tags are placed around selected text.

Metaname Information…—Opens the Metaname Dialog, which allows you to add Meta tags (Generator, Author, Description, and Key Words) to the HTML document.

No-break Space—Inserts the HTML code (&#160;) for a no-break space. Adding a no-break space between two words will prevent them from being separated at the end of a line.

Paragraph—Inserts tags for paragraph. The options are:

Left-justified: Paragraph aligned on the left (<P ALIGN=“LEFT”></P>)

Centered: Paragraph centered (<P ALIGN=“CENTER”></P>)

Right-justified: Paragraph aligned on the right (<P ALIGN=“RIGHT”></P>)

Standard: Standard paragraph (<P></P>)

Quote Mark—Inserts the HTML code for a double quote (&#34;). Since the keyboard quote mark is used in HTML commands, it is better to use &#34; for quote marks.

Standard Rule—Inserts standard horizontal rule, with or without a shadow. The shadow gives the rule a three-dimensional appearance.

Strikethru—Inserts tags for strikethru text (<STRIKE></STRIKE>). Strikethru text has a horizontal line through the middle of it. (“Strikethru” is the way the word is spelled in most computer programs.)

Subscript—Inserts tags for subscript character (<SUB></SUB>). Subscript characters are smaller and below the baseline of standard text.

Superscript—Inserts tags for superscript character (<SUP></SUP>). Superscript characters are smaller and above the baseline of standard text.

Tag…—Opens the Tag List Dialog, which contains a comprehensive list of HTML tags.

Tags—Inserts tags for ADDRESS, BLOCKQUOTE, CITE, CODE, KBD, PRE, SAMP, and VAR. These tags format the text in various ways. ADDRESS, BLOCKQUOTE, and CITE all indent the text and add vertical space above and below. CODE, KBD (“keyboard”), and SAMP (“sample”) render the text in monospaced type (not justified type; resembles an old-fashioned typewriter font). PRE will attempt to preserve non-HTML formatting, such as tab indents and spacing, that already exist in the document. Results will vary. VAR (“variable”) refers to a mathematical variable. Type will appear in italics. See the Tag List Dialog for additional details.

Underline—Inserts tags for underlined text (<U></U>).


Preferences Menu

Set Preferences…—Opens the Preferences Dialog, where you can select a number of user preferences for Web-O-Rama.


View Menu

View

With the View menu, you can toggle on and off the dialog buttons, editing buttons, File View, and status bar. View menu choices are remembered between Web-O-Rama sessions.

View Dialogs

The View Dialogs menu provides quick access to all of Web-O-Rama’s dialogs.


Folder Menu

If you have selected a default folder using the Preferences Dialog, you will be able to open the folder under Folder on the main menu. The default folder can also be set or changed from the Folder menu.

The Folder menu also lists the eight most recently opened folders. The first time you use Web-O-Rama, the list will be blank.


Tags Menu

Color Tags Now—Colors the HTML tags. The default color is blue, but you can select any color using the Preferences Dialog. If there are errors in your HTML code, such as missing “<” or “>”, all the tags may not color. Files using JavaScript will not color completely.

Uncolor Tags—Removes tag color.

Make Tags Lowercase—Makes the HTML tags lowercase. Does not change the case of anything between double quote marks.

Make Tags Uppercase—Makes the HTML tags uppercase. Does not change the case of anything between double quote marks.


Text Menu

Make Selected Text Lowercase—Makes selected text lowercase. This command changes the case of everything selected, including HTML tags.

Make Selected Text Uppercase—Makes selected text uppercase. This command changes the case of everything selected, including HTML tags.

Remove HTML Tags from Text—Strips all HTML tags from selected text.

Unformat Text—This removes any special formatting from selected text. If you copy and paste material from a Word document, for example, the pasted material may have colored text, different fonts, or different type sizes. Unformat Text changes the text to the current Web-O-Rama default style.


Browser Menu

View in System Default Browser…—If you do not select a browser (see below), clicking on View in System Default Browser will open the current HTML document in whichever browser currently on your computer is configured as the default browser. If you have not installed a browser, this will be Internet Explorer.

Choose Browser…—Opens the Preferences Dialog to the Browsers tab. You can select up to eight browsers (they must be installed on your computer) with which to view HTML documents using the Browser List. At present, you need to know where the browsers’ main folders are in order to find and select the executable file (netscape.exe, iexplore.exe, etc.). For example, netscape.exe (for Netscape Communicator, v. 4.X) is located in the Program Files \ Netscape \ Communicator \ Program folder. Internet Explorer, v. 4.X and 5.X, is in Program Files \ Internet Explorer. Earlier versions of Internet Explorer are often in the Program Files \ Plus! Folder.

Browser List—Immediately below Choose Browser, the Browser list can show up to eight browsers you have selected, using Choose Browser, to view HTML documents. The list will be grayed out if you have not chosen any browsers. Clicking on the Browser List will open the selected browser with the current HTML document displayed in it. Clicking on a Browser a second time to display changes, however, with the same browser currently open, will start a second instance of the browser. In other words, if you make changes to your HTML document, display it in a browser, make some more changes, and choose to display the changes in the same browser without closing the browser first, you will have two instances of the same browser running, one displaying the first set of changes and the other displaying the second set. Since each browser on the market requires complicated, specialized code in order for other programs (such as Web-O-Rama) to communicate with it directly (to send a changed HTML document to the browser screen and to refresh the screen), this is unavoidable as long as the browsers can be selected by the user. As a workaround, if you are using Autosave Files on Viewing (see below), you can save your current file, bring the open browser to the front (click on the browser’s button on the Windows task bar, usually at the very bottom of your screen), and push the Refresh or Reload button on the browser to see the latest changes.

Autosave Files on Viewing—Changes to files will be saved when you view them by starting a browser from the Browser List. Otherwise, changes are not saved. You will be prompted to save changed files before exiting.

Autosave Files in Web View [Web-O-Rama Professional only]—Changes to files will be saved when you click on the Web View tab.


Window Menu

Cascade—Arranges all open editing windows front to back, overlapped.

Tile—Arranges all open windows like tiles.

Arrange Icons—If you have several editing windows open but minimized, Arrange Icons will arrange the minimized windows neatly at the bottom of the program.

Window list—The Window list shows all open editing windows. Clicking on one of them brings the editing window to the front.


Help Menu

Web-O-Rama Help…—Displays this Help file.

HTML 3.2…—Displays a Help file explaining the HTML 3.2 specifications. Used by permission of the Web Design Group (Liam Quinn).

HTML 4.0…—Displays a Help file explaining the HTML 4.0 specifications. Used by permission of the Web Design Group (Liam Quinn).

Style Sheets…—Displays a Help file explaining cascading style sheets. Used by permission of the Web Design Group (Liam Quinn).

About Web-O-Rama…[only available in certain versions]—Displays Web-O-Rama’s About box.


Dialog Buttons

The dialog buttons, on the toolbar below the editing buttons, open the various dialogs. From left to right, the buttons open the Body, Character, Copy Files, Font, Form, Frames, Hex Value, Image, Links, List, Marquee Text, Metaname, Rules, Sound, Style Sheet, Table, Tag List, and User Buttons dialogs.

The next two buttons open the primary browser and alternate browser and display the current HTML document. If you have not selected any browsers using the Preferences Dialog, the buttons will be disabled.

If you have the professional version of Web-O-Rama, the Full Screen button on the far right will display the HTML document in a separate, full screen window.


Editing Buttons

The editing buttons provide quick access to many of Web-O-Rama’s editing features. The buttons are on a toolbar immediately below the main menu. From left to right, they are New (File), Open (File), Close (File), Print (File), Save (File), Cut, Copy Paste, Find, Undo, Paragraph, Centered Paragraph, Right-aligned Paragraph, List Item, Break, Center, Bold, Italic, Underline, and numbered buttons for Head 1, Head 2, Head 3, Head 4, Head 5, and Head 6. See File, Main Menu, Edit, Main Menu, and Insert, Main Menu for specific details about the functions.


File View

The File View feature consists of three tabs: Files, Tags, and Characters.

Files Tab

The Files tab has a drive selection box, a directory selection box, and a file list. Clicking on a file in the file list will open it. If the file is currently open, clicking on the file in the file list will bring it to the front.

Tags Tab

The Tags tab lists all the HTML tags that are supported by both Netscape and Internet Explorer. If the Insert option is selected, clicking on a tag inserts it into the HTML document. If View is selected, clicking on a tag will open the Tag List Dialog with the selected tag’s definition displayed.

Characters Tab

The Characters tab displays all special HTML characters. Clicking on a character inserts it into the document.


Status Bar

The status bar, displayed across the bottom of the Web-O-Rama screen, shows the line number/total number of lines; number of bytes in the file being viewed; number of open files; the time; whether or not Caps Lock is on; whether or not Insert is on; and whether or not Num Lock is on.


Dialogs

The dialogs are, to use Microsoft’s terminology, “wizards” that make HTML coding much easier. The dialogs accessible from the Dialog Buttons are the Body, Character, Copy Files, Font, Form, Frames, Hex Value, Image, Links, List, Marquee Text, Metaname, Rules, Sound, Style Sheet, Table, Tag List, and User Buttons dialogs.

In addition, there is a Page Creator Dialog.


Body Dialog

The Body dialog inserts the body attributes. Body tags are required HTML components. The dialog consists of three tabs: Body Attributes, Background, and Margins.

Body Attributes Tab

Color Attributes—Select colors for Background, Text, Link, Visited Link, and Clicked Link. Background color is the overall color of the Web page. Text color is the color of text on the Web page. Link color is the color hypertext links will appear on the page. Visited Link color is the color a hypertext link will appear if the person viewing the page has already been to the linked Web page. Clicked Link color is the color a link will change to momentarily when the visitor clicks it. The viewing area on the right of the dialog displays the background and various text colors.

Standard Template—When this box is checked, a standard HTML template, including the doctype, head, and title tags, will be inserted along with the Body tags.

Font Attributes—Up to five fonts can be selected to add with the Body tags. Font size can be specified. Size 1 is the smallest, approximately 7- or 8-point type. Size 7 is the largest, approximately 36-point type. The font can be regular, bold, italic, or bold italic. Changes in font and font style appear in the viewing area on the right. [Note: Only those fonts that are installed on a person’s computer can be displayed when that person visits a Web site. It is better to choose relatively “standard” fonts, such as Times Roman and Arial. Web-browser default is usually Times Roman.]

Background Tab

The Background tab allows you to choose an image to be tiled onto the background of your Web page. You can select Name, if the image is going to be in the same folder as your HTML document, or Path, if the image is in a subfolder. For example, if your HTML document is in a folder called “myweb” and the image (for example, “myimage.gif”) is in a subfolder of “myweb” called “myimage,” the relative path would be “myimage/myimage.gif.” You need to indicate the root folder, and the image folder must be a subfolder of the root folder. The Default checkbox will make Name the default choice when an image is selected. Using the relative path feature will become more comprehensible with use.

The Copy File to Folder checkbox will put a copy of the image, no matter where it is located on your hard drive, into the folder specified in the Root drop-down list. Copy File to Folder will not overwrite an image of the same name as the image being copied.

Image File Size displays the size of the image in bytes, and Download Time gives an approximation of the length of time it will take the image to load for visitors to your Web page.

Margins Tab

You can set margins for your Web page on the Margins tab. Margins are the space above and below and on the left and right. Netscape and Internet Explorer require different HTML tags for margins. Both can be used at the same time.


Character Dialog

The Character dialog is used to insert special characters into an HTML document. Since certain characters (such as quote marks) are used in HTML code, it is better to use HTML code for characters rather than keyboard characters. The Character dialog consists of four tabs: Keyboard, Special, Accented, and Calendar. Certain characters can also be accessed using the File View menu.

Keyboard Tab

The Keyboard tab lists the characters found on a standard keyboard having HTML equivalents. You can choose to Add Character to the HTML document or Replace Throughout the document. Add Character will add an individual character to the document when you press one of the character buttons. Replace Throughout will replace an individual character throughout an HTML document when a character button is pressed. Characters within HTML tags, such as quote marks around tag attributes, are not altered when using Replace Throughout.

Special Tab

The Special tab contains characters not found on a standard keyboard for which there are HTML codes. The numerical values are based on the ISO Standard for ASCII characters. You can also create homemade fractions using superior and inferior characters and a forward slash.

Accented Tab

The Accented tab lists all characters for which there are accents.

Calendar Tab

The Calendar tab allows you to insert dates and times from a pop-up calendar.


Copy Files Dialog

The Copy Files dialog is a handy tool for copying or moving files from place to place on your hard drive. In particular, when you are designing Web sites, it is helpful to gather images into one folder or multiple folders that will match the layout of the site.

The Select File Types tab selects the file types to be displayed in the file list. Default is “All.” Choosing “Selected” in the File Attributes to Display box shows the Select File Attributes tab. Multiple file types can be chosen to display. Do not attempt to move system files, and use caution when moving hidden files.

Files can be copied or moved. If you attempt to overwrite an existing file, a message box will ask you to confirm or cancel the operation.


Find and Replace

The Find dialog will search the text for specific words or phrases. Match Case specifies whether or not a distinction is made between uppercase and lowercase letters. If you select Match Case, searching for “Web-O-Rama” will not find “web-o-rama.” Match Whole Word looks for complete words only. Searching for “house” with the Match Whole Word box unchecked will find “house,” as well as “housewarming” and “outhouse.” The Find operation can be performed on only one document at a time. Pressing the F3 key after the Find dialog has closed will continue to search the document.

The Replace dialog allows you to search for and replace specific words and phrases in the Current File or in All Open Files. Undo All will attempt to undo the Replace operation. Use care when using the Replace option.


Font Dialog

The Font dialog allows you to change the Font, Font Color, Font Size, and Font Style. You can select up to five fonts at a time. Multiple fonts are displayed in the order they are listed. The first font listed is the primary font and is the font that will be displayed unless that font is not available on the computer of the person viewing the Web page. For example, if you select “Arial,” “Times Roman,” and “Verdana,” the text will be displayed in Arial as long as the font is installed on the visitor’s computer. If Arial is unavailable, the text will be displayed in Times Roman. If Times Roman is not installed, the text will be displayed in Verdana, etc. This is useful if you are using an unusual font (such as Algerian or Joker) for the primary font of your Web page. Times Roman is the default browser font for both Netscape and Internet Explorer.

Changes to font attributes are displayed in the “Appearance” box. This is an approximation of the appearance only.

Relative Font Sizing enlarges or reduces the current size of the font in your HTML document by the numerical amount indicated. If the font size is “3,” selecting “+1” will raise the size to “4.” Selecting “+2” will raise the size to “5.” Selecting “-1” will reduce the size to “2.” If the current font size is “7,” the maximum, selecting a “+” size will not make the text any larger. Pressing any of the Relative Font Sizing buttons will add the information immediately to the HTML document and close the Font dialog (unless the push-pin is in the red, “on top” position). Font attributes selected elsewhere on the dialog will be included.


Form Dialog

A Form is an element you can add to your Web site that allows visitors to do such things as submit or request information, navigate to your various pages, or otherwise interact with your site. The Form dialog was designed to make it easier to create forms, but, as with the Style Sheet Dialog, a reasonable understanding of HTML is required. Although the dialog itself is fairly intuitive, and you may possibly have a certain amount of success through trial and error, it is advisable to have reference material about HTML forms available before trying to design any yourself. The Form dialog will make much more sense if you know something about Forms. In addition, some form functions may require CGI (Common Gateway Interface) or JavaScript programming, which is far beyond the scope of this Help file. See HTML 3.2 Help and HTML 4.0 Help for additional details.

The Form dialog consists of seven tabs: Start Form, Submit/Reset, Input Button, List, Text Area, Text Box, and Complete Form. The middle five tabs are not necessarily in the order you will want to use to add elements.

Start Form Tab

The Start Form tab has a number of available options. The default options are pre-selected; using anything other than the default options will generally require CGI or JavaScript code.

Caption: Type in a caption for the form.

Method: The options are Post and Get. Post is used for simple Mail To forms; the information typed into the form is posted to an e-mail address. Get is used to get special instructions—usually in the form of a CGI script—that tell the form what to do (the form “gets” the instructions).

Media: Media is the format in which the material is transmitted. The options are Text and Encoded. Text is plain text, which is what you should use unless you have a specific reason not to use it. Encoded encodes the text using the only currently supported format, application/x-www-form-urlencoded.

Action: The options are Mail To and CGI Script. Mail To mails the form information to the e-mail address specified in the Address box. CGI Script gets information from a CGI script, the location of which is specified in the Script Location box (the Address box changes automatically to the Script Location box if CGI Script is selected).

Address: E-mail address or location of CGI script.

Font Attributes: See Font Dialog for a detailed explanation of font choices. Font choices are basically the same from dialog to dialog.

After selecting options on the Start tab, you must press Add Form to transfer the information to the Form tab, which accumulates all of the form information before transferring it to the HTML document. Do not press the OK button at the bottom of the Form dialog until you have completed the form.

Submit/Reset Tab

The Submit/Reset tab allows you to select buttons to perform actions. The two basic form buttons are Submit and Reset. You will probably want to add Submit and Reset buttons to your form after you have added everything else so they will be at the bottom of the form.

Submit: Performs the action specified on the Form tab (such as Mail To).

Reset: Clears any information the visitor has typed into the form.

Name: A unique identifying name for the button.

Button Label: The text on the button itself that the visitor will see.

Remember to push Add Button to add the button to the form.

Input Button Tab

The Input Button tab is used to add Radio Buttons (only one of a group of radio buttons can be selected at a time) or Check Boxes (multiple check boxes can be checked) into the form. Radio buttons look like the two option buttons labeled “Radio” and “Check Box” in the Input Type box on the Input tab. Check boxes look like the check box to the right of the label “Button Value” in the Attributes box on the Input Button tab.

Caption: Provides a caption or label for the button.

Name: A unique identifying name for the button.

Return Value: The value (“true,” “false,” “yes,” “no,” or anything else you like) you want returned to you when the visitor submits the information. For example, if you have a check box named “visitor wants more information” and you give the check box a return value of “true,” when the form information is e-mailed to you, it will be in the format visitor wants more information=true. It is important to make the button name and return value something that you can easily interpret.

Button Value: Selected means that the radio button or check box will display to the visitor as having already been selected (the radio button will be filled in, the check box will have a check in it). One of a group of radio buttons should always be given the Selected value. Check boxes should generally not have a Selected value.

When you have finished adding input buttons, press Add Input to add the buttons to the form.

List Tab

The List tab is used to add drop-down lists to your form. The Font Attributes box contains a drop-down list.

Item Text: An item that will appear on the list.

Return Value: Value returned when the visitor submits information.

Selected: List item will be visible to the visitor (in the same way “No font selected” is visible in the drop-down box in the Font Attributes box).

Add Item: Pressing this button adds an individual list item to the list. This transfers the list item to the List Text box.

Caption: Caption for the entire list.

Name: A unique identifying name for the list.

Displayed: The number of list items that will be displayed to the visitor. The drop-down list in the Font Attributes box displays one item.

When you have finished adding all the list items, press Add List to add the list to the form.

Text Area Tab

The Text Area tab is used to add text areas to your form into which the visitor can type.

Text Wrap: How the text wraps when the text reaches the right edge of the text area. Options are Hard, Soft, and None. Hard keeps hyphenated words together on one line. Soft will break hyphenated words after the hyphen. None will prevent the text from wrapping (the text will be one long line).

Caption: Caption for the text area.

Name: Unique identifying name.

Width: Width of text area in columns. Columns are generally the width of a character, so the number of columns will change depending on the font size. The default value of “80” has been pre-selected. You will have to experiment; Internet Explorer and Netscape display the width of text areas differently, so it is nearly impossible to get forms to look similar in both browsers.

Height: Height of text area in number of lines.

Remember to press the Add Text button to add the text area to the form.

Text Box Tab

This tab is used to add a text box (technically an input box) to the form. The text box is similar to the text area, but you can specify a maximum length of text the input box will hold (to keep the visitor from rambling indefinitely).

Caption: Caption for the text box.

Name: Unique identifying name.

Value: Return value. This is optional. If you want to specify something such as “blank” for the Value, that is what will be returned if the visitor does not type anything into the text box.

Width: Width in columns. Text boxes tend to display differently than text areas (see above), so the default value is “40.” You will have to experiment to get an appearance you like.

Maximum Length: Total number of characters the visitor can enter into the text box. The default value is “255,” but you can choose any length you like.

Do not forget to press the Add Box button to add the information to the form.

Complete Form Tab

The completed form. You can edit information in the Form Text box. When you are ready to add the form to your HTML document, press the OK button on the bottom left of the Form dialog.


Frames Dialog

Introduction to Frames

Frames divide the screen into multiple areas, each showing a different HTML document. Frames can be fixed or sizeable and can have scroll bars to move the pages up and down and from side to side. A typical use of frames is to have the site contents in a frame on the left side and the main page in a frame on the right. Clicking on a link in the contents frame changes the page in the right frame. Although this may seem handy, frames should be used only when the site is so large or complicated that other methods of navigation are impractical. Many people consider them an annoyance.

Creating Frames

If you are designing a site with two frames, as described above, you will actually need three HTML files. The first file, which has nothing in it that will be visible (except Text for Frame-incapable Browsers, described below), must be named “index.html.” This file will contain the instructions specifying the size and organization of the frames, as well as identifying the specific files that will be displayed in the frames. The “index.html” file of a simple two-frame site would contain the following code:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<TITLE>A title goes here</TITLE>

</HEAD>

<!- - This file must be named index.html and the other frame files linked to it - ->

<FRAMESET COLS=“25%,75%”>

    <FRAME NAME=“contents” SRC=“contents.htm”>

    <FRAME NAME=“mainpage” SRC=“mainpage.htm”>

</FRAMESET>

<NOFRAMES>

<!- - Text to display for frame-incapable browsers - ->

</NOFRAMES>

</HTML>

The TITLE of the page will be displayed in the browser’s title bar (the colored band at the very top of the browser) but will not otherwise be visible (see below). COLS refers to columns, which are the vertical frame divisions. ROWS (there are no rows in this example) are horizontal divisions. Note that each frame is given an identifying frame name as well as being linked to an HTML file (“contents.htm” and “mainpage.htm” are the two HTML source files in this example).

Although the Frames dialog will definitely make it easier to build a site that uses frames, a certain amount of experience with frames, or additional reference material about frames, will be extremely helpful. The HTML 3.2 Help and HTML 4.0 Help files included in the Web-O-Rama package are a good source of information.

The Frames Dialog

The Frames dialog consists of three main tabs, Style, Names, and Details, and eight specific frame styles (A through H) on the Style tab. The different frame styles are illustrated on the tabs. Frame Dimensions can be in Percent (such as 25% for the left frame and 75% for the right, as in the above example) or Pixels (such as 200 pixels for the left frame and 600 pixels for the right) and you can select the Target Screen Resolution. Target Screen Resolution will be grayed out if Percent is selected (the default). The radio button closest to your current screen resolution will be filled in.

Style Tabs

The frame style tabs all operate in the same manner. Choose a frame style (A through H) that resembles the site you want to create. The frame dimensions can be manipulated using the slider bars. The buttons within the frames are linked to text boxes on the Names tab. Each frame must have a Unique Identifying Frame Name, and an Actual Frame Source File linked to it.

The asterisk (*) can be used in place of a numerical value. This instructs the browser to assign all of the remaining space to a specific frame. If you have given the left frame a value of 200 pixels and have selected Autoright as the value for the right frame, at 800 by 600 screen resolution the right frame will be assigned a width of 600 pixels (800 pixels total width minus 200 pixels for the left frame). If the screen resolution is 640 by 480, the right frame will be assigned a width of 440 pixels (640 pixels total width minus 200 pixels for the left frame). Autoleft, Autotop, and Autobottom all work in the same manner as Autoright.

Names Tab

Each frame must have a Unique Identifying Frame Name and an Actual Frame Source File. The identifying name can be anything you want, although it is helpful to name it something descriptive (“contents” and “mainpage” in the example above). Frame source files are standard .htm or .html files. If you have already created the source files, you can use the Find Frame… buttons to locate them on your hard drive. You must Select Current Working Folder to Use Relative Path before you select files using the Find Frame… buttons. This is slightly different from the way the relative path feature operates on some of the other dialogs.

Details Tab

The Details tab allows you to select frame options. The Page Title is the title that will be displayed in the browser. (Title is also what will be used as the bookmark if the visitor to your site bookmarks it, so keep titles short but descriptive! Many “professional” sites do not seem to grasp this concept.) You can either choose to Use Border (the horizontal or vertical dividers between the frames) or have no border(s). Frames can be Resizable or fixed in size. You can select a Color for the frame borders. Margin Width and Margin Height specify the amount of horizontal and vertical space between the text of the pages and the frame borders. Frame Spacing is the width of the borders.

Some older browsers cannot display frames, so you should add a few lines of Text for Frame-incapable Browsers. This text will appear, even though the frames will not.

Frame Scroll Bars, which allow the visitor to your site to scroll the pages up and down and from side to side, can be added automatically (Add as Needed), always visible (Always Add), or never visible (Never Add).

Using frames successfully will require some experimentation.


Hex Value Dialog

Hex values are six-digit alpha-numeric values, such as 0066FF, that browsers interpret as colors. These hex values are based on the RGB (red/green/blue) color scheme, which is a way of combining red, green, and blue to produce a wide variety of colors. It is important to remember that not all computers are capable of displaying 16,777,216 colors (the upper limit of the RGB color scheme). Some older computers may only be able to display 16 colors, and many graphics cards can display only 256 colors.

The Hex Value dialog consists of four tabs: Hex Value, Color Chart, Find Image Color, and Saved Colors.

The OK button is disabled unless you are viewing the first (Hex) tab. Colors can be added to your HTML document from the Saved Colors tab, however, without returning to the first tab.

Hex Value Tab

You can select colors using several different methods. Pressing the Select Color button in the All Colors box will open the standard Windows Color Dialog, which gives you access to all the colors available to your computer (you will be limited by the number of colors your graphics card can display). If you select a color, the hex value will appear in the Hex Value box, the color will be displayed in the Color box, and the red, green, and blue components of the color will be displayed in the RGB Value box. Colors can be saved using the Save Current Color feature. You need to select a Color Number before saving a color; otherwise, the Save Color button will be disabled.

The 16-color Palette is a drop-down list containing the 16 standard colors available to all computers. Choosing a color from the 16-color Palette will add the hex value to the Hex Value box and display the color in the Color box.

Most browsers can only display 216 colors without dithering, which is a method of manipulating the pixels on the screen in order to simulate additional colors. These 216 colors are often referred to as “Web-safe Colors.” You can use the slider bars in the Non-dithered Color Palette box to select from the 216 non-dithered colors. [Note: If you have chosen Use Non-dithered Colors on the Preferences Dialog, the Hex Value dialog will appear when you select colors on any of the dialogs. Otherwise, the standard Windows Color Dialog will display.]

The RGB values for all colors are displayed in the RGB Value box.

Press OK to add the color to your HTML document.

Color Chart Tab

The Color Chart tab presents a visual display of the Non-dithered Color Palette. Pausing the mouse cursor over any of the colors in the Non-dithered Color Chart will show the hex value of the color in a tool tip. Clicking on the color returns you to the Hex Value tab, where you can save the color, or add the color to your HTML document by pressing OK.

Find Image Color Tab

The Find Image Color tab gives you the ability to coordinate colors between images and your Web page. Find an image using the Find Image button. When the mouse cursor is moved over the image, the color directly beneath the mouse cursor will display in the small box to the right of the Find Image button. Once you have found the color you want, click with the left mouse button and the hex value will appear in the Value box. Pressing the Match Safe (as in “Web-safe”) button will match the color you have selected as closely as possible to the Non-dithered Color Palette and return you to the Hex Value tab. Otherwise, press the Use Color button to return to the Hex Value tab, where you can save the color, or press OK to add the color to your HTML document by pressing OK.

Saved Colors Tab

Colors can be saved to the Saved Colors tab from the Hex Value tab. Select a color number from the drop-down list in the Save Current Color box on the Hex tab to save the color to Saved Colors tab. Press the Use Color… button on the Saved Colors tab to add the hex value to your HTML document.


Image Dialog

The Image dialog is used to add images to your HTML document. The Image dialog consists of three tabs: Image Data, View Image, and Quick View.

Image Data Tab

Find Image—Locates an image to insert into your HTML document. Once you have selected an image, you can choose to use Name, if the image is in the same folder as your HTML document, or Path, if the image is in a subfolder of the Root Folder where your HTML document is located. For example, if your HTML document is in a folder called “myweb” and the image (for example, “myimage.gif”) is in a subfolder of “myweb” called “myimage,” the relative path would be “myimage/myimage.gif.” You need to select the Root Folder if you are using the relative path, and the image folder must be a subfolder of the root folder (generally, the folder where “index.html” is located). Using the relative path feature will become more comprehensible with experimentation. The Copy File to Folder button will put a copy of the image, no matter where it is located on your hard drive, into the folder specified in the Root Folder drop-down list. Copy File to Folder will not overwrite an image of the same name as the image being copied.

Image Attributes—Displays attributes of the current image. Alternate Text is text that will display in the image area while the image is loading. There are a number of preset options in the drop-down list. Image Size is the size of the image in bytes. Image Height and Image Width are the dimensions of the image in pixels. Click the Border Width checkbox to add a border around the image. Vertical Space and Horizontal Space add blank space around the image.

Alignment—The Stand-alone option should be used when you want the image to be by itself in a specific location on the page and not aligned within a block of text. Stand-alone adds paragraph tags (<P></P>) and the Left, Right, or Center commands. Align on Text should be used when you want the image aligned within a block of text. The Left and Right options will wrap the text around the image, with the image on the specified side of the page. Top aligns the top of the image with the tallest thing in the paragraph, whether it is another image or the top of the text. Texttop aligns the image with the top of the tallest letter in the paragraph. Middle aligns the vertical center of the image with the baseline of the middle line of the paragraph (this alignment stuff gets pretty esoteric). Absmiddle aligns the vertical center of the image with the vertical center of the middle line of the paragraph. Baseline aligns the bottom of the image with the baseline of the last line of text (“baseline” does not take descenders, such as the bottom part of a “g” or “p,” into account). Bottom appears to be identical to baseline; if you figure out a difference, let me know. Absbottom aligns the bottom of the image with the bottom of the last line of text. If there are letters with descenders, such as “g” or “p,” in the last line, the image will be aligned with the lowest descender.

Special thanks to Alan Simpson’s HTML Publishing Bible for helping me to understand the non-intuitive image alignment commands.

View Image Tab

The View Image tab allows you to view the image you have selected full size. If the image is larger than the viewing area, you can move the slider bars to see all parts of the image. Download Time is an estimation of the amount of time it will take the image to download to a visitor’s browser. Different modem speeds are listed. The Autoshow View Image Tab option is checked by default. When you select an image, you will automatically be taken to the View Image tab, where the image will be displayed. Unchecking the option will keep you on the Image Data tab after you select an image. You can still click on the View Image tab to see the image.

Quick View Tab

I created the Quick View tab because I frequently want to scroll through a number of images to find the one I want, having forgotten what I have named particular images. The Select Image box contains a drive list, directory list, and file list to help locate the correct file. Images are displayed in the Thumbnail Viewer and are reduced to fit, if necessary. If they are displayed actual size, that will be indicated. If the images are reduced, the original size and percent of reduction will be displayed. The Image Data button will snap back to the Image Data tab, where the data for the selected image will be shown. The View Image button will display the View Image tab, where the image can be viewed full size. [Note: Some users have reported an illegal operation error message when scrolling rapidly through a list of images. It is apparently possible to exceed the design limitations of certain computers.]


Links Dialog

Links, more accurately called hypertext links, give visitors to your site the ability to jump to various pages on your site or to pages on other sites. Various features on the Links dialog are enabled or disabled, depending on the choices made from the drop-down lists.

Type of Link—Choose the type of link you want to add.

A relative link is a link to a Web page located on your own site, or to a specific place on a page located on your site (called an anchor). This kind of link does not require a URL (Universal Resource Locator, such as “www.anothersite.com”), merely a file name. For example, if “mypage.htm” were located on your site, the link would be coded as

<A HREF=”mypage.htm”>link text to be displayed</A>

The Use External Link box is disabled if “relative” (the default) is selected as the link type. If it were on another site, the link would require the URL, such as

<A HREF=”http://www.anothersite.com/mypage.htm”>link text to be displayed</A>

This kind of link is referred to on the drop-down list as an http link. Selecting “http link” enables the Use External Link box and disables the Find Local Link box.

An ftp link is a link to an FTP (File Transfer Protocol) site, and usually to a specific file. FTP sites are sites where files can be uploaded or downloaded. While not a graphical Web page per se, an FTP site will normally present a graphical interface when viewed in a Web browser. An ftp link to a specific file will allow that file to be downloaded when the link is clicked.

The mailto link, when clicked, will bring up the default e-mail client with the linked e-mail address automatically filled in.

Target—When you put a link inside a frame, you need to specify the frame in which the linked page will be displayed. There are four predefined targets and the option to create a user-defined target.

_blank: Displays the linked page in a new, unnamed window.

_self: Displays the linked page in the current frame.

_parent: Displays the linked page in the immediate FRAMESET parent.

_top: Displays the linked page in full-screen in an unframed window.

custom: Displays the linked page in a frame of your choice.

Selecting custom from the Target drop-down list enables the Custom Target box immediately below it. If one of your frames were labeled “main,” for example, and you wanted the link to display the linked page in your “main” frame, you would select custom and type “main” into the Custom Target box.

Experimentation with frames will make the target choices more understandable.

Link Text to be Displayed—This is the text that will actually appear when your HTML document is viewed. The link text will appear on your Web page in the color specified for links in the body attributes and will be underlined.

Find Local Link—The Find Local Link box will be enabled if you have selected relative link from the Type of Link drop-down box and disabled if you have made any other selection. The Find Link button allows you to browse your hard drive for the page you wish to display. The Root Folder button can be used to browse for a folder not listed on the drop-down list to the right of the button. The list shows the eight most recently opened folders. Once you have selected an HTML file, you can choose to use Name, if the file is in the same folder as the HTML document containing the link, or Path, if the link is in a subfolder of the root folder where the HTML document is located. For example, if your HTML document is in a folder called “myweb” (in this case considered the root folder) and the linked file (for example, “mylinkedfile.htm”) is in a subfolder of “myweb” called “myfolder,” the relative path would be “myfolder/mylinkedfile.htm.” You need to select the root folder, using either the drop-down list or the Root Folder button if you are using the relative path, and the linked file’s folder must be a subfolder of the root folder (generally, the folder containing index.html). The Default checkbox sets Name as the default option when the Links dialog is opened; otherwise, Path is the default. Using the relative path feature will become more comprehensible with experimentation.

Use External Link—Use External Link will be enabled if you have chosen “http,” “ftp,” or “mailto” from the Type of Link drop-down list. The label to the left of the text box in the Use External Link area will change to reflect the target choice. In each case, type the URL (“www.anothersite.com”), the ftp address (“ftpsite.com”), or the e-mail address (“me@mymail.com”) without the prefix (“http,” “ftp,” or “mailto”).


List Dialog

The List dialog adds lists to your HTML document, set off from regular text with either symbols (unnumbered or unordered list) or numbers/letters (numbered or ordered list) for each list item. An unnumbered list (using the Default Bullet Style) would appear as

•	List item one

•	List item two

•	List item three

A numbered list (using the Default Number Style, with a Starting Number of “1”) would appear as

1.	List item one

1.	List item two

1.	List item three

The Unnumbered tab (default) at the top of the List dialog has a Bullet Style drop-down list with four choices: “Default,” “Disk,” “Square,” and “Circle.” “Default” is the default bullet style the browser uses to display unnumbered lists, usually a filled circle. “Disk” is a filled circle, “Square” is a filled square, and “Circle” is an empty circle. The appearance of these symbols is dependent on the browser you are using.

The Numbered tab offers multiple choices for Number Style: “Default” (browser default; usually a standard numerical list using “1,” “2,” etc.), “1,” a standard numerical list, “a,” a lettered list using lowercase letters (“a,” “b,” etc.), “A,” a lettered list using uppercase letters, “i,” a roman-numeral style list using lowercase roman numerals (“i,” “ii,” “iii,” etc.), and “I,” a roman-numeral style list using uppercase roman numerals (“I,” “II,” “III”). You can change the starting value by putting a different value into the Starting Value box. If you put a “3” into the Starting Value box, for example, your list would start with the numeral “3” rather than “1.”

Enter list items in the Individual List Items text box and press the Add Item button after adding each. The cumulative list will appear in the List Text box, where it can be edited before you add the list to your HTML document.


Marquee Text Dialog

Marquee Text is scrolling text (text that moves across the screen from left to right or right to left) that can be displayed only by Microsoft’s Internet Explorer. Although the Marquee Text dialog is included in Web-O-Rama, it is not generally recommended that anyone use browser-specific features on his or her Web site. That said, the Marquee Text dialog is one of the easiest of Web-O-Rama’s dialogs to use.

There are two tabs on the Marquee Text dialog, the Marquee Text tab and the Marquee Options tab.

Marquee Text Tab

Enter the text to be scrolled across the screen into the Marquee Text box. You can select Font Attributes (see Font Dialog for more information about font attributes) and Marquee Text Area attributes. Marquee Text Area attributes include Back Color, the color of the rectangular area in which the scrolling text will appear, and the Height and Width of the area. Height and width can be specified in Percent (default) of screen area or in Pixels.

Marquee Options Tab

The Marquee Options tab includes additional options for the display of marquee text.

Alignment—You can specify the horizontal and vertical alignment of the marquee area. Horizontal Alignment can be “LEFT,” “RIGHT,” or “CENTER.” Vertical Alignment can be “TOP,” “MIDDLE,” or “BOTTOM.”

Direction—Marquee text can scroll from the right side to the left side (“LEFT”), from the left side to the right side (“RIGHT”), or it can scroll from one side to the other, then scroll back (“LOOP”).

Speed—The speed at which marquee text moves can be adjusted. Delay refers to the amount of time (in milliseconds) it takes for a single letter to be redrawn in the marquee text box as the text scrolls. Amount refers to the distance (in pixels) the text moves each time the text is redrawn.

Behavior—Marquee text can move from one side of the marquee to the other and disappear (Scroll); move from one side of the marquee to the other and stop, remaining in view (Slide); or move from one side of the screen to the other and then back again (Alternate).


Metaname Dialog

Metadata is generally used to provide information for Internet search engines. Search engines “crawl” through the Web, determining the content of sites and then indexing the content. Four of the most commonly used meta tags are provided on the Metaname dialog: Generator, Author, Description, and Key Words. The text boxes into which you enter metadata are disabled by default. Before you can add text, you need to click on the checkbox immediately to the left of the text box.

Generator—The format for metadata is straightforward. Using the Generator tag as an example, the metaname is defined first (Generator is usually the HTML editing program with which the document has been created):

META NAME=”GENERATOR”

Next, the name of the generator is provided by the subsequent content tag:

CONTENT=”Kevin Gunn's Web-O-Rama, v. X.XX”

Although Generator information is automatically filled when you open the Metaname dialog (program name and current version), it can be changed to anything you like.

Author—The author of the HTML document.

Description—A short description of the site’s content (100 characters or fewer is recommended).

Key Words—A few descriptive key words suitable for indexing purposes.

Add Placement Reminder to Code—This option, provided as a convenience for forgetful HTML authors, will add the comment

<!- - This material must go between TITLE and HEAD - ->

to the HTML document. Because it is enclosed in comment tags (“<!- -“ and “- ->”), the comment will not be visible to Web browsers.


Page Creator Dialog

The Page Creator dialog (accessible from the Insert menu and the View > Dialogs… menu) simplifies the process of creating a basic Web page. There are two tabs on the Page Creator dialog: Page Attributes and Template.

[Note: In Web-O-Rama, v. 7.05, and earlier, clicking on the OK button will add the information on the Page Attributes tab to the HTML document, whether you are on the Page Attributes or the Template tab. In later versions, if you are on the Template tab, clicking the OK button will add the information from the Template tab to the HTML document.]

Page Attributes Tab

Page Title—The page title will appear in the title bar at the top of the Web browser being used to view the page and will be the name given to the bookmark if the visitor bookmarks the Web page. The page title will not otherwise be visible to the browser. Because the page title becomes the bookmark name, it is advisable to keep the page title short. [Note: Bookmarks longer than 256 characters will cause many bookmark converters—such as those used to convert Netscape bookmarks to Internet Explorer “favorites” and vice versa—to crash.]

Meta Tags—Press the Get Meta button to access the Metaname Dialog. The information you select will appear in the Meta Tags text box. Information can also be filled in manually.

Body Tags—Press the Get Body button to access the Body Dialog. The information you select will appear in the Body Tags text box. Information can also be filled in manually.

Once you have filled in the information on the Page Attributes tab, pressing OK will transfer the information to your HTML document.

Make Template—The Make Template button will transfer all information from the Page Attributes text boxes into a single text box on the Template tab. [Note: Pressing the Make Template button without entering any information into the Meta Tags and Body Tags text boxes will add a standard template to the Make Template text box.]

Template Tab

The Template tab is basically a text editor with limited functions.

Template Name—If you have not opened an existing template, the template name will appear as “Untitled” by default. If you are working with a preexisting template, the template’s name will appear in the Template Name box.

The text of the template will appear in the text box below the Template Name box.

Open Existing—Pressing the Open Existing button will allow you to browse for a template you have previously saved.

Clear Text—This button will clear all the text from the text box.

Save Template—This button allows you to save the template with a name of your choice. Template files are plain text files and have a default .txt file extension.


Preferences Dialog

You can set global program preferences with the Preferences dialog. The Apply button will apply your choices immediately without closing the dialog; otherwise, your choices will be applied if you choose OK. You can cancel at any time by using the Cancel button, although changes previously made by using the Apply button will not be overridden.

General Preferences Tab

Splash Screen—Enables or disables the splash screen, the graphic that appears when you first start the program.

Toolbar Button Style—The toolbar buttons can have a Flat (default) or Raised appearance.

Select Default Folder for Program Startup—When you select a default folder, Web-O-Rama will look there first for files when you click on File > Open. You can toggle the feature on and off with the Start in Default Folder when Opening Files checkbox.

Select Root Folder for Relative Path Feature on Dialogs—Several of the dialogs, such as the Body, Image, and Sound dialogs, have a relative path feature that will automatically insert the relative path to images or sound files from the root folder you are working in. This feature is convenient if you maintain a single Web site. You can toggle the feature on and off with the Use Root Folder on Dialogs with Relative Path Feature checkbox.

Cursor Position—You can choose where the mouse cursor will appear after you insert paired HTML tags into your document (such as <B></B> for bold text). The mouse cursor can appear between the tags under all circumstances (Always Between Tags, the default, useful when creating an HTML document from scratch) or outside the tags if you are placing tags around existing text (At End if Text Selected, useful when tagging a preexisting document).

Additional Options Tab

At present, the only additional options are to Clear File and Folder Lists. Clear Recent File List will remove the eight most recently opened files from the File menu. Clear Recent Folders will clear the eight most recently opened folders from the Folders menu.

More options are planned for future releases of Web-O-Rama.

Colors and Styles Tab

Editing Window Back Color—The editing window is the main window in which you type text. Use the Background button to select a background color for the editing window. By default, the color of the editing window is the system default of a Windows text box.

Editing Window Font and Style—You can choose font color, font face, and font size for the editing window.

HTML Document Type Declaration (DTD) Style—A Document Type Declaration (DTD) is the first thing in an HTML document, taking the form of “<!DOCTYPE…,” followed by specific DTD information. Some browsers interpret page contents based on the DTD, and the appearance of the page will be based on the interpretation. Most current browsers display pages in a similar fashion regardless of the DTD.

There are four DTD choices:

HTML 3.2: The default DTD. This is considered the “safest” choice at present and can be interpreted by most browsers, even older ones.

HTML 4.0 Frameset: DTD for pages utilizing frames and the HTML 4.0 specifications.

HTML 4.0 Strict: The DTD for Web pages adhering strictly to the HTML 4.0 specifications.

HTML 4.0 Transitional: The second “safest” choice; includes all HTML 4.0 tags as well as many tags used in HTML 3.2 but not in the HTML 4.0 specifications.

Internet Explorer 4.x (and higher) and Netscape 4.x (and higher) are designed to interpret both HTML 3.2 and HTML 4.0 specifications. Earlier versions may have difficulty with HTML 4.0.

Non-dithered Color Palette—See the Hex Value Dialog for further details about this option.

“Open File” Dialog Default File Type—When opening files, you can choose to have only HTM(L) files (the default) displayed or All Files displayed.

HTML Style Options—Depending on personal preference, you may want to use <STRONG> (strong emphasis) for <B> (bold) and <EM> (emphasis) for <I> (italic). <B> is considered a typographical convention, while <STRONG> is content-based and is actually “more correct” in an HTML document. The same is true for <EM> versus <I>.

Select Browsers Tab

Select Browsers for Browser Menu—You can select up to eight browsers with which to view your HTML documents. The browsers you select will appear on the Browser Menu. The browsers must already be on your system; Web-O-Rama does not install any browsers on your computer (although Internet Explorer 5.x is included on the Web-O-Rama Professional CD for compatibility reasons). The buttons on the left allow you to locate the browsers’ .exe files (the main executable files; iexplore.exe for Internet Explorer and netscape.exe for Netscape, for example).

Menu Name—You can customize the way the browsers’ names will appear on the Browser Menu.

Clear Browsers—You can clear browsers from the browser menu by selecting the browser you want to clear from the drop-down list and pressing the Clear button.

Autosave Files on Viewing—If this option is enabled, changes to your HTML documents will be automatically saved when you view them in one of your browser choices.


Rules Dialog

Rules are horizontal dividers used to separate page content or merely to add decoration to Web pages. The Rules dialog simplifies the process of adding rules to your HTML document.

The Rules dialog consists of two tabs: Standard Rule and Graphic Rule. [Note: Not all browsers display rules in the same manner. What looks good in Netscape many not look the same in Internet Explorer, and vice versa. It is recommended that you check the appearance of your Web page in several browsers.]

Standard Rule Tab

A standard rule is a narrow horizontal bar, with or without a shadow that adds a three-dimensional quality to the rule.

Size—Select the height and width of the rule. You can specify the Height in Pixels (a pixel is the smallest visual unit your browser can display—at 800 by 600 screen resolution, your screen is 800 pixels wide) and the Width in Percent (the default; percent of screen width) or Width in Pixels (by unchecking the Width in Percent checkbox). To define a custom Height in Pixels, uncheck the Use Default Height checkbox. Not all browsers interpret a custom height correctly.

Alignment—The rule can be aligned in the Center of your Web page or aligned on the Left or Right.

Shadow—A shadow adds a three-dimensional quality to the rule. You can choose not to have a shadow.

Rule Color (Internet Explorer Only)—Internet Explorer allows you to specify a color for the rule. Use the Select Color button to select a color. The Hex Value of the color will be displayed and the color itself will appear in the box to the right. Netscape will ignore Rule Color.

Graphic Rule Tab

An image can be used in place of a standard rule. You can reduce the height of any image by specifying a custom height.

Find Graphic Rule—Click the Find Graphic button to locate a graphic. The image will be displayed in the rectangle below. See the Background section of the Body Dialog in this Help file for a detailed explanation of Root Folder and other features.

Graphic—The image you select will be displayed in the Graphic image box. You can choose an Alignment for the graphic. Default is generally interpreted by browsers as centered. You can specify CENTER, LEFT, or RIGHT.

Dimensions in Pixels—Specify a Height and Width for the graphic.


Sound Dialog

You can add sound to your Web page by using the Sound dialog. This feature should be used with care; sound files are often large and take a long time to download, sometimes irritating visitors to Web sites.

The Sound dialog consists of two tabs: Sound File and Sound Options.

Sound File Tab

Find Sound File—Use the Find Sound button to browse for a sound file. See the Background section of the Body Dialog in this Help file for a detailed explanation of Root Folder and other features.

Sound File Size—The size of the sound file, in bytes, will be displayed.

Approximate Download Time—You can check to see how long the sound file will take to download at various standard modem speeds. Remember that many people still use 14.4 and 28.8 modems.

Sound Options Tab

Sound Options—The sound can either Loop (start over at the beginning when it has finished playing) or Play Once. Autostart (the default) means that the sound will start playing automatically, without any input from the visitor to your site. The Sound Player is an applet with sound control buttons on it (Play, Stop, Rewind, etc.). The sound player is hidden by default, but will be displayed if you uncheck the Hide Player checkbox.

Sound Player Size—If you have unchecked the Hide Player checkbox, the Sound Player Size options will be enabled. Clicking the User radio button will allow you to specify a custom Height and Width for the player. The default values are 60 pixels in height and 145 pixels in width.

Test Sound—If you have selected a sound file, the Test Sound buttons will be enabled. You can Start and Stop the sound.


Style Sheet Dialog

Introduction to Style Sheets

The Style Sheet dialog is intended for HTML authors who are already familiar with cascading style sheets (CSS). It is beyond the limited scope of this Help file to provide detailed instructions on style-sheet specifics. There are many books on the market devoted to creating and using style sheets.

Very simply, style sheets are sets of instructions that define such things as font size, weight, and color for various HTML tags. These instructions are either contained within the Web page itself (embedded style sheet) or in a separate file linked to all the pages on a site (linked style sheet). Linked style sheets are useful for large sites with many individual pages having a similar style; embedded style sheets allow you to define a specific style for the HTML elements on a Web page, which can simplify the coding process. An example of a simple selector for the HTML level one heading tag (<H1>) is:

H1 {font-size: 24pt; color: red}

If this were specified in a linked or embedded style sheet, each time you used the <H1> tag, the font would be 24 points in height and displayed in red type. Without using a style sheet, the same heading would be coded:

<H1><FONT COLOR=“FF0000” SIZE=“6”>Head One</FONT></H1>

[Note: A font size of “6” is a rough approximation of 24-point type. The size of type displayed, however, is dependent on the specific browser being used to view the page, and on the visitor’s browser settings.]

As you can see from the examples above, style sheets can reduce the amount of HTML coding necessary to achieve a particular result. They are helpful, too, in maintaining style consistency throughout a Web page or Web site.

The major drawback to style sheets is that not all browsers support them. Keep in mind that even browsers that are able to interpret style sheets (Netscape 4.5 and higher; Internet Explorer 3.01 [to a limited degree] and higher; some later versions of Opera) may do so in an unreliable or unexpected manner. Browsers that are unable to interpret style sheets correctly will display something when a Web site using style sheets is encountered, but the pages will generally lose much of their formatting.

The Style Sheet Dialog

The Style Sheet dialog has three tabs: Style Sheet, Define Elements, and Define Classes.

Style Sheet Tab

Style Type—The Style Type drop-down list contains one item, “text/css.” At present, this is the only accepted style type. Space has been left for future options.

Containment Type—The style sheet can be embedded (the default) or linked. An embedded style sheet will write out all necessary instructions at the beginning of an individual Web page. A linked style sheet will need to be saved as a file of type .css and linked to specific Web pages. When the Containment Type is “embedded,” the button in the lower right of the Style Sheet tab will be labeled Add to Document. When “linked” is selected, the button will be labeled Save to File. If you have made changes to the main editing window on the Style Sheet tab with “linked” as the Containment Type, you will be prompted to save your changes when you exit the dialog.

Style Sheet Name—By default, the Style Sheet Name is “Untitled.” If you have saved the style sheet or have opened an existing style sheet, the Style Sheet Name will show the path and file name.

Open Existing—The Open Existing button allows you to open an existing .css file (the default) to edit or to add to your HTML document.

Clear Text—The Clear Text button clears the main editing window on the Style Sheet tab.

Add to Document/Save to File—The Add to Document button adds the text in the main editing window to your HTML document. If you have chosen “linked” as the Containment Type, the button will be labeled Save to File.

Define Elements Tab

In order to give a rough idea of the way the Style Sheet dialog works, a “Simple” style sheet element, defining attributes for a level one heading (<H1>), will be used as an example throughout this section.

Type of Element—Select the Type of Element you want to add to the style sheet. “Simple” is the default.

Sample Format—A visual example of the Type of Element you have selected. For the “Simple” style-sheet element, the example is:

H1{ font-weight: normal; }

Note that this example starts with the HTML tag (<H1>) to which you are assigning attributes. The specific attributes (in this case, a single attribute, “font-weight”; multiple attributes are allowed) follow the tag and are enclosed in braces.

Select Tag—Select the tag to which you want to assign attributes. The first drop-down list in the Select Tag box helps you narrow the selection process by showing tags grouped into types. The default is “All Tags,” which lists all HTML tags. The <H1> tag is a member of the “Text Layout” group. The next drop-down list, to the left of the Pointing Hand button, will display either all the tags or a specific group of tags, depending upon your previous selection. Continuing with the H1 example above, you would choose <H1> from the list. Selecting a specific tag enables the Pointing Hand button. Clicking on the Pointing Hand adds the selected tag to the Selected Tag box to the right.

Selected Tag—The Selected Tag text box displays the tag you have chosen. Once you have added a tag, the Add to Definition and Clear buttons will be enabled. You can either add the tag immediately to the Completed Definition box at the bottom of the Define Elements tab by pressing Add to Definition, or wait until you have created the entire definition to add the tag. If you want to start over, pressing the Clear button clears the Selected Tag text box.

In addition to the Add to Definition and Clear buttons, there is a square button located between them that will be enabled under certain circumstances. If you have chosen “Child” from the Selector Type drop-down list, the button will be labeled with a “>” sign; if you have chosen “Adjacent,” the button will be labeled with a “+” sign. These signs are used to show relationships between tags for those specific selectors.

Select Property—Select a property for the tag. The first drop-down list helps you narrow your property choices. The default is “All Properties.” In the example I have been using throughout, “Font Properties” would be the appropriate choice. The drop-down list to the left of the Pointing Hand will display a list of properties based on your selection in the first drop-down list. “Font Properties” include the “font-weight” property. Once you have selected a specific property, the Pointing Hand will be enabled and you can add the property to the Selected Properties box.

Selected Property—The Selected Property text box displays the property you have chosen. Once you have added a property, the Add to Definition and Clear buttons will be enabled. You can either add the property immediately to the Completed Definition box at the bottom of the Define Elements tab by pressing Add to Definition (as long as you have added a tag first; see above), or wait until you have created the entire definition to add the property. If you want to start over, pressing the Clear button clears the Selected Property text box.

Select Property Value—The Select Property Value drop-down list will only display values appropriate to your previous choices. The “normal” property value applies to the “font-weight” selection. Making a choice from the Select Property Value drop-down list enables the Pointing Hand, which adds the selection to the Selected Value box to the right.

Selected Value—The Selected Value text box displays the value you have chosen. Once you have added a value, the Add to Definition and Clear buttons will be enabled. You can either add the value immediately to the Completed Definition box at the bottom of the Define Elements tab by pressing Add to Definition (as long as you have added a tag and a property first), or wait until you have created the entire definition to add the value. If you want to start over, pressing the Clear button clears the Selected Value text box. The small drop-down list above the Clear button will display additional options if available for the Selected Value.

Once you have made choices for Tag, Property, and Value, press the Add to Definition button in each of the Selected… boxes, working from the top of the dialog to the bottom. This will “build” the tag in the Completed Definition text box.

Completed Definition—After you have completed the definition, you can Add to Document, Add to Style Sheet, or Clear Definition. Add to Document inserts the tag immediately into an open HTML document, which is useful for adding additional definitions to a preexisting embedded style sheet. Add to Style Sheet moves the definition to the main editing window on the Style Sheet tab.

Define Classes Tab

Classes are broad categories that apply to more than a specific tag or group of tags. The Define Classes tab works much the same way as the Define Elements tab. In-depth understanding of style sheets is recommended before using the Define Elements tab.


Table Dialog

A table groups material neatly into columns (vertical) and rows (horizontal). The Table Dialog makes adding tables to your HTML documents a simple process.

Table Style Tab

Complete or Partial Table—You can either create an entire table from scratch (Complete) or add material to a preexisting table (Partial). Selecting Partial will disable some of the Table Dialog options.

Caption and Body Attributes—Select attributes for the table.

Caption: Type a caption into the text box. The caption can appear at the Top or the Bottom of the table.

Table Color: This specifies the background color of the table. Cell Color takes precedence over Table Color.

Table Width: The width of the table in percent of page width or in pixels.

Table Units: Specifies Percent or Pixels for Table Width.

Border Width: Width of the outside table “frame.”

Cell Padding: The space between the text inside a cell and the cell border.

Cell Spacing: The width of the cell border.

Cell Alignment and Attributes—Select attributes for the individual table cells.

Horizontal: Specifies the horizontal alignment of the text within a cell.

Vertical: Specifies the vertical alignment of the text within a cell.

Cell Color: Specifies the color of the cell. Each individual cell in a table can be displayed in a different color.

Font: Unless you choose a font for the table cell, most browsers will default to Times Roman.

Font Color, Font Size, and Font Style: See the Font Dialog for a detailed explanation of font attributes.

Clear Style: Clears your style selections.

Table Text Tab

Tables are constructed from Cells—individual “blocks” of text—arranged into columns (vertical) and rows (horizontal).

Cell Text—Enter the text of an individual cell.

Add Cell to Row—The Add Cell button adds the Cell Text to a cumulative Row Text box. The Cells box to the right keeps track of the number of cells you have added.

Add Row to Table—When you have finished adding cells to the row, click the Add Row button. This inserts the row into the Table Text box. The Rows box to the right keeps track of the number of rows you have added. The Clear Text button clears the contents of the Table Text box.


Tag List Dialog

The Tag List dialog is a dictionary of HTML tags and their attributes, covering those tags accepted in the HTML 3.2 and HTML 4.0 guidelines. Several tags specific to Internet Explorer and Netscape are also included.

Comprehensive Tag List Tab

Tag List and Description—The drop-down list can be used to display “All” HTML tags (the default) or a limited selection of tags. The box below the drop-down list shows the individual tags. Clicking on a tag will provide a brief description in the box to the right.

Tag Compatibility—The Tag Compatibility chart shows whether an individual tag is compatible with Internet Explorer 2, 3, or 4/5, Netscape 2, 3, or 4, and whether the tag conforms to HTML 2, 3.2, or 4.0 specifications. Green indicates compatibility; red indicates incompatibility.

Individual Tag Attributes Tab

Attributes and Details—Attributes of the tag selected on the Comprehensive Tag List tab will display in the top box. Clicking on an attribute will provide additional details in the box below.

Add—The Add button will add the selected attribute to the Start and End Tags boxes at the bottom of the dialog.

Attribute Compatibility—Shows browser and HTML compatibility of the selected attribute.


User Buttons Dialog

The User Buttons dialog can be used to create custom buttons for frequently used HTML tags, templates, addresses, etc. For example, I have a button that contains my e-mail address.

The User Buttons dialog consists of three tabs: User Buttons, Define User Buttons, and Import Data.

[Note: On some of the tabs, certain buttons will be disabled unless you have selected a Button Number.]

User Buttons Tab

The User Buttons tab consists of eighteen buttons. The buttons are labeled “1” through “18,” but when you define a button, you can add your own caption. Clicking a button that has not yet been defined will display the Define User Buttons tab, with the button already selected in the Button Number drop-down list. Clicking a custom-defined button will add the defined tag or text to the HTML document. You can Exit at any time.

Define User Buttons Tab

Button Number—Select a button to define. If you have clicked a button on the User Buttons tab, the Button Number and any user-defined information will be filled in.

Button Caption—Optional caption for a user-defined button. If no caption is entered, the user button will remain numbered.

Start Tag—A text box for an HTML “start tag,” or other information. You are not limited to using tags for user-defined buttons. If you do not use an HTML tag, however, you should enter the User Button’s information into the Start Tag text box and leave the End Tag text box empty.

End Tag—Text box for optional HTML “end tag.” Leave this box blank if you are not defining an HTML tag.

Add Button—Creates or modifies the user-defined button selected from the Button Number list.

Import Data—Displays the Import Data tab.

Clear Button—Deletes user-defined information from the button listed in the Button Number list.

Import Data Tab

Import Data—You can choose to import data from the Body Dialog, Hex Value Dialog, or Tag List Dialog by selecting a dialog and pressing the Get Data button. Data selected on these dialogs will automatically import into the Imported Start Tag and/or Imported End Tag text boxes.

Clear—Clears data from the Import Data tab.

Use Data—Moves data to the appropriate boxes on the Define User Buttons tab.


Special Features

Web-O-Rama Professional

If you have purchased Web-O-Rama Professional, the main editing window will have two tabs: Edit View and Web View. Edit View is the “standard” editing window. Clicking on the Web View tab will display an instant preview of your HTML code as it will appear in a Web browser.

Future Releases

An upcoming release of Web-O-Rama Professional will include a built-in spell checker with as-you-type spell-checking capabilities.

On the drawing board are an FTP program, an image mapper, JavaScript support, and context-sensitive HTML tag coloring. Some of these enhancements may be created as stand-alone programs.


Ordering Web-O-Rama

What is Donationware?

Web-O-Rama was never intended to be a free program. Although people who were truly too broke to send a donation were welcome to use the program free of charge, donations have always been anticipated from those who could afford to make them. This has been clearly expressed in the program documentation and on my Web site. However, in spite of having had over 115,000 visitors (as of spring 2000) to my site at http://people.delphi.com/krgunn/index.html, I have received a total of about 40 donations over the past two years.

Programming is both time-consuming and expensive. It requires large blocks of free time as well as frequent hardware and software upgrades. Due to the sparseness of donations, it is doubtful I can continue to provide Web-O-Rama as donationware. Certain limitations may be imposed on the “free” versions of the program, such as a nag screen reminding people to send money, or a 30-day time limit on use. If you are using a limited version of Web-O-Rama, please contact me (see below) for additional information.

Ordering Web-O-Rama

Web-O-Rama will be available in a standard version, with Help documentation and a built-in spell checker, and a professional version that includes all the features of the standard version, plus the Web View window and additional enhancements. Pricing is currently under review. The standard version will probably be priced in the mid-$20 range and the professional version in the high-$20 to low-$30 range. I do not want to put Web-O-Rama out of reach of typical users.

Web-O-Rama can be ordered by contacting me at kgunn@cjnetworks.com. I can also be reached at Kevin Gunn, P.O. Box 442155, Lawrence  KS  66044-8933. Please include an e-mail address if sending mail to my post-office box.


Problems with Web-O-Rama
Problems

General

Web-O-Rama, v. 7.05 and later, has proven to be extremely stable. Please make sure you are using the latest version before reporting bugs to me at kgunn@cjnetworks.com.

Before assuming you have a problem with Web-O-Rama, make sure you have sufficient resources and free memory. Running ScanDisk and Disk Defragmentor on a regular basis may help your computer, as well as Web-O-Rama, run more smoothly. If ScanDisk finds and repairs problems, it may be necessary to reinstall Web-O-Rama.

Troubleshooting

In all cases that have been brought to my attention, problems with Web-O-Rama, v. 7.05 and later, can be traced to hardware or software problems specific to the computers on which it is installed. The only exception is a known issue when saving files to a network drive with “\\” in the path. In this situation, files save normally, but an error message is displayed.

If you are having trouble opening files, saving files, or accessing any of the dialogs, try uninstalling and reinstalling Web-O-Rama. Installing certain third-party programs may overwrite crucial support files (usually having a .dll or .ocx extension) with older versions of the files. Reinstalling Web-O-Rama should fix the problem without harming any other programs.

Problems with the Web View Tab

The Web View tab requires, at minimum, Internet Explorer 4.01. If you experience problems with the Web View tab, you may want to install Internet Explorer 5.X (included on the Web-O-Rama Professional CD). [Note: The Web View tab is available only in Web-O-Rama Professional.] “Page Not Found” messages displayed on the Web View tab may occur on slow or older computers. Maximizing system resources or increasing memory may help under these circumstances.


Acknowledgments

Alan Simpson’s HTML Publishing Bible (IDG Books Worldwide, Inc., 1996) was my first HTML manual and has proven to be an invaluable and timeless resource. Unfortunately, this fine book is currently out of print. I have specifically credited Alan in places where I have found myself paraphrasing him. Permission was obtained from Alan (e-mail, summer 1999) to “lean” on the HTML Publishing Bible for several nearly incomprehensible HTML issues.

I relied on Frank Boumphrey’s excellent Professional Style Sheets for HTML and XML (Wrox Press, 1998) for a basic understanding of style sheets.

Written permission was obtained from Liam Quinn of the Web Design Group (e-mail, August 1999) to distribute WDG’s Help files with Web-O-Rama.

Written permission was obtained from Microsoft (Independent Software Vendor’s license, August 1999) to include Internet Explorer on the Web-O-Rama Professional CD.

The Wrox Ultimate HTML Reference Database, currently located at http://webdev.wrox.co.uk/reference/html4db, is the final authority on HTML 4 specifications. I checked compatibility information on the Tag List Dialog for accuracy against their incredibly detailed database. Any errors, however, are mine. The Tag List itself was cobbled together from many different Web resources as well as my own trial-and-error experimentation; I did my best to avoid stepping on anyone’s copyrighted toes.

The “Web-safe color” idea was inspired, in part, by Lynda Weinman’s “Browser-safe Color Palette.” Lynda is the author of a number of Web design books. As of spring 2000, her web site was located at http://www.lynda.com.

In 1999, Geoff Hudik e-mailed me and asked for some assistance in creating his own HTML editing program. I do not recall being of much help, but he claims that I was. Geoff asked permission to borrow a few ideas from Web-O-Rama, and I saw no reason not to let him. Other Visual Basic programmers had done the same for me. When he sent me the results, Web Mechanic, it turned out to be a quality product with many great features. Geoff had made interesting use of Visual Basic’s Tree View control, showing an HTML tag list on the left side of the screen. I asked Geoff if he would mind if I implemented something similar to his Tag List in Web-O-Rama. I had been tinkering along the same lines, but had never thought of a good way to accomplish what I wanted. So, some of Web-O-Rama’s File View features owe credit to Geoff and Web Mechanic.

Web-O-Rama is an on-going team effort. I thank all of my patient on-line friends who have cheerfully looked over new versions and have offered suggestions and pointed out bugs. Thanks, as well, to users who have e-mailed suggestions and been dragged into the project as beta testers. Special thanks to P. Smith, R. A. Parks, and K. Berger, who helped debug v. 6.71. D. Wall was extremely helpful with v. 7.02, and also discovered the incompatibility (fixed) between Web-O-Rama Professional and Internet Explorer 5.5. S. Ausland helped debug v. 7.08 and confirmed the problem with IE 5.5.

Special thanks to my wife, Karen, who continues to put up patiently with being a “computer widow.”