This chapter describes each element in the WebMagic main window and provides a brief description of many of its subwindows. Click a topic for more information.
The Status Bar reports status information, and displays links and targets when the cursor is positioned over these elements.
Use the horizontal and vertical scroll bars to see different portions of your document. Drag the elevator box in a scroll bar to interactively scroll the window, or click above or below the box to move forward or backwards one page in the document.
The WebMagic menu bar contains five menus. Click a menu name below for detailed information.
The File menu contains these choices:
New: Opens a new WebMagic window and presents a blank page.
Open: Presents a dialog box for opening existing files; see “Opening a Document” in Chapter 1.
Open Template: Presents a dialog box for opening a document to be used as a template; see “Opening an Existing Document as a Template” in Chapter 1.
Re-open: Reverts to the previously saved version of the file.
Insert: Presents a rollover menu from which you can choose to insert an image, HTML, or text document; see “Importing Text, HTML, RTF, and Image Files” in Chapter 1.
Save: Saves the document as it's displayed in the WebMagic window. The first time you choose Save, a dialog prompts you for a filename; see “Saving Changes” in Chapter 1.
Save as: Presents a dialog in which you enter a new filename; see “Saving Changes” in Chapter 1.
Publish: Presents a dialog in which you can change URL translations; see “About Publishing and URLs” in Chapter 1.
Preview: Runs the HTML browser and displays the document you are currently editing. Lets you preview your document and test links you've created.
If you're modifying files that you link to, you may notice that Netscape displays an outdated version of those file. If this happens, press Netscape's Reload button.
Print: Presents a dialog from which you can print the document; see “Printing a Document” in Chapter 1.
Preferences: Presents a dialog in which you can save general and publishing preferences; see “Setting WebMagic Authoring Preferences” in Chapter 1.
Close: Closes that document but leaves other WebMagic documents open.
Exit: Stops WebMagic from running and closes all open documents.
The Edit menu contains these choices:
Undo: Lets you undo the changes you make. For example, suppose you change the appearance of a horizontal rule. Choose “Undo” and the horizontal rule reverts to its original state.
You can undo multiple actions.
Redo: Works with the “Undo” command. For example, suppose you make a horizontal rule thicker. Choose “Undo” and the rule becomes thin again; choose “Redo” and the rule becomes thicker again.
Cut: Select an item and choose “Cut” to remove the item from the WebMagic window and place it in the cut buffer so it is available for future pasting.
Copy: Select an item and choose “Copy” to place a copy of the item in the buffer so it is available for future pasting.
Paste: Position the text entry cursor and choose “Paste” to place the current contents of the cut buffer at the cursor location.
Copy Link: Select an item that has an associated link, then choose “Copy Link.” The link information is copied; use the “Paste Link” command to apply it to another item, thereby creating a link.
Paste Link: Works with the “Copy Link” command. Lets you copy link information and apply it to another item.
Delete: Select an item and choose “Delete” to remove the item from the WebMagic window; this does not place it in the cut buffer.
Select All: Selects all the items in the currently displayed document.
Find/Change...: Opens a dialog box you can use to find and replace text strings in your document. See also “Finding and Changing Text” in Chapter 1.
The Format menu contains these choices:
Character: Presents a rollover menu of character tags. These tags attach visual characteristics to the text. You can make the selected text bold, italic, in a fixed font, or underlined. You can also place a line (strike) through the selected text and you can make it blink. To see the text blink, choose “Preview” from the File menu.
Size: Presents a rollover menu with options for changing the size of selected text. “1” is the smallest font size; “7” is the largest size. These options are identical to those offered on the font size menu button.
Style: Presents a rollover menu that lists preset character styles. You use these styles to categorize the selected text as an identifiable document element (such as a a document citation or keyboard input). These options are identical to those offered on the character style menu button.
Justify: Lets you align a paragraph with the left or right margin or center it on the page. Choosing “Left,” “Center,” or “Right” is equivalent to clicking on the alignment buttons in the toolbar.
Paragraph: Presents a rollover menu that lists the available paragraph tags. Your options are:
Body: A traditional text paragraph.
Bulleted List: An unordered list; each item is preceded by a bullet or other character.
Numbered List: An ordered list; each item is preceded by a numeral which increases by one with each item.
Menu List: An unordered list; each item appears on its own line.
Directory List: An unordered list; each item must contain 20 characters or less. Many viewers arrange directory lists in columns.
Descriptive Title: A title for the paragraphs to follow that are marked as Descriptive Data.
Descriptive Data: A paragraph or group of paragraphs preceded by a Descriptive Title.
Preformatted: Presents sections in a fixed-width font.
Block Quote: A body of information that may be displayed in such a way to indicate that it is a quote. For example, many viewers indent it slightly on both the right and left sides.
Address: Information that describes how to contact an individual or organization.
Heading 1-6: A heading introduces and titles a new section of information. WebMagic automatically inserts a line break before and after each heading.
Indent List: Click in a list item and choose this item to nest the item; see “Creating and Nesting Lists” in Chapter 1. This is identical to clicking the Indent button.
Outdent List: Click in a list item and choose this item to undo the nesting of the item; see “Creating and Nesting Lists” in Chapter 1. This is identical to clicking the Outdent button.
Join Paragraphs: Select multiple paragraphs and choose this item to combine them into one.
The Element menu contains these choices:
Line Break: Choose this item to start a new line; this choice is identical to clicking the Line Break button.
Break Clear: If you've set up an image so that text flows on the left or right side of it, and you want to insert a line break, you may want to use the “Break Clear” command also. By default, if you insert a line break, the new line of text appears directly below the original line. “Break Clear” lets you start the next line when the specified margin is clear.
To see the effects of this command, choose “Preview” from the File menu.
Horizontal Rule: Choose this item to insert a line break and a horizontal line; this is identical to clicking the Horizontal Rule button.
Horizontal Rule Attributes...: Opens a dialog box you use to change the appearance of the selected horizontal rule. You can change the width, height, and shading of the rule.
Link...: Select some text, an image, or a hotspot on an image, then choose “Link...” The Create Link window appears. Use this window to specify the destination of the link. This is identical to clicking the Link button. See also “Creating and Editing Links” in Chapter 1.
Unlink: Select an item that has an associated link, then choose “Unlink.” The link is removed.
Target (Anchor)...: Select some text and choose “Target (Anchor)...” to see a window in which you can name the target; see “Creating a Link Target” in Chapter 1. This is identical to clicking the Target icon button.
Image Alignment: Select an image, then choose “Top”, “Middle”, “Bottom,” “Left,” or “Right” from this menu to specify the alignment of the image to the rest of the text in that paragraph.
Image Attributes...: Select an image, then choose “Image Attributes...” to resize an image, change its alignment, specify alternate text, and more. See also “The Image Attributes Window.”
Image Map...: Lets you attach links to areas of an image. See also “Attaching Hypertext Links to Areas of an Image” in Chapter 1.
Form...: Lets you create a form in your HTML document. Typically, forms are used to gather information or submit requests. See also “Including Forms in a Web Document” in Chapter 1.
Background/Text Colors...: Lets you change the color of the background, all the text in the document, and that of links.
Markup: When a question mark icon appears in the WebMagic window, it's indicating that WebMagic does not interpret that markup. Select the question mark and choose “Markup” to see a window in which you can edit that HTML markup.
You also use this command if you want to use an HTML capability that WebMagic does not provide. See “Entering Raw HTML Markup” in Chapter 1.
The View menu contains these choices:
Symbols: Choose this item to place or remove a checkmark. When the checkmark is present, WebMagic displays editing symbols.
Targets: Choose this item to place or remove a checkmark. When the checkmark is present, WebMagic displays the target icon at the beginning of each line that contains a target.
Text Colors: Choose this item to place or remove a checkmark. When the checkmark is present, WebMagic displays text in the color you have specified. If the checkmark is absent, the text appears black.
Backgrounds: Choose this item to place or remove a checkmark. When the checkmark is present, WebMagic displays background images or colors. Otherwise, WebMagic displays a gray background.
Image Maps: Choose this item to place or remove a checkmark. When the checkmark is present, WebMagic identifies image map hotspots with a dashed line.
Form Bounds: Choose this item to place or remove a checkmark. When the checkmark is present, WebMagic identifies a form area by displaying a thin line along the left margin.
Document Title: Choose this item to place or remove a checkmark. When the checkmark is present, WebMagic displays the Document Title field in the upper portion of the window. When the checkmark is absent, the field is hidden.
Toolbar: Choose this item to place or remove a checkmark. When the checkmark is present, WebMagic displays a toolbar in the upper portion of the window. The toolbar contains buttons for many of the commands on the Format menu. When the checkmark is absent, the toolbar is hidden.
The Help menu contains these choices:
Click for Help: Choose this item to turn your cursor to a question mark, then position the cursor over any area in the WebMagic window for context-sensitive help.
Overview: Choose this item for an overview of WebMagic.
WebMagic Web Page: Displays a web page with information on WebMagic.
Task-Oriented Topics: Choose an item for step-by-step information on how to complete a task.
The main WebMagic window includes three unlabeled menu buttons. The upper menu button is the paragraph markup button; the menu button directly below this is the character tag button. The remaining menu button is the font size button. Click the name of the menu button about which you want information.
The items in this menu button let you apply structure to a paragraph (see also “Applying Structure to a Paragraph” in Chapter 1). Position your cursor in the paragraph to which you want to apply a structure, then choose an item from the menu button. For easy access to the menu choices, choose the dashed horizontal line in this menu button; this places the entire menu in a separate window.
For more information on lists, see “Creating and Nesting Lists” in Chapter 1.
The paragraph markup menu button contains these structures:
Body: A traditional text paragraph.
Bulleted List: An unordered list; each item is preceded by a bullet or other character.
Numbered List: An ordered list; each item is preceded by a numeral which increases by one with each item.
Menu List: An unordered list; each item appears on its own line.
Directory List: An unordered list; each item must contain 20 characters or less. Many viewers arrange directory lists in columns.
Descriptive Title: A title for the paragraphs to follow that are marked as Descriptive Data.
Descriptive Data: A paragraph or group of paragraphs preceded by a Descriptive Title.
Preformatted: Presents sections in a fixed-width font.
Block Quote: A body of information that may be displayed in such a way to indicate that it is a quote. For example, many viewers indent it slightly on both the right and left sides.
Address: Information that describes how to contact an individual or organization.
Heading 1-6: A heading introduces and titles a new section of information. WebMagic automatically inserts a line break before and after each heading.
The items in this menu button let you apply character tags to text (see also “Changing Font Styles” in Chapter 1). Select the text that you want to tag, then choose an item from the menu button. For easy access to the menu choices, choose the dashed horizontal line in this menu button; this places the entire menu in a separate window.
The character style menu button contains these tags:
No Style: The font in which all traditional paragraphs (body paragraphs) will be displayed. A common choice of many viewers is Times or Helvetica.
Citation: A font that indicates that the tagged characters are a citation to another source.
Code: A font (typically fixed-width) that indicates that the tagged characters represent programming code.
Define: A font (often italics) that indicates that the tagged characters are a definition of a word or phrase.
Emphasis: A font that makes the tagged characters stand out from the default font.
Keyboard: A font that indicates that the tagged characters are those that a user may enter at a keyboard.
Sample: A font that indicates that the tagged characters are a sample (or example) of a previously described item.
Strong: This may be a different font family and weight from the default font, depending on the viewer. The resulting font will stand out from the default font.
Variable: A font that indicates that the tagged characters are not the literal characters that a user should enter; rather the characters describe the type of thing a user should enter (e.g., a common variable is filename).
This window also includes a collection of icon buttons. The upper row contains a cluster of five buttons and a cluster of four buttons, arranged from left to right in this order:
Click this button to align the selected paragraph with the left edge of the page. The text and any forms or images in the paragraph are repositioned.
Click this button to center the selected paragraph on the page. The text and any forms or images in the paragraph are repositioned.
Click this button to align the selected paragraph with the right edge of the page. The text and any forms or images in the paragraph are repositioned.
Click in a list item and click this button to nest the item; see “Creating and Nesting Lists” in Chapter 1. This is identical to choosing “Indent List” from the Format menu.
Click in a list item and click this button to undo the nesting of the item; see “Creating and Nesting Lists” in Chapter 1. This is identical to choosing “Outdent List” from the Format menu.
Select some text, an image, or a hotspot on an image and click the Link button to see a window in which you can create a link from that text to a target; see “Creating and Editing Links” in Chapter 1. This is identical to choosing “Link...” from the Element menu.
Select some text and click the Target button to see a window in which you can name the target; see “Creating a Link Target” in Chapter 1. This is identical to choosing “Target (Anchor)...” from the Element menu.
Click this button to start a new line; this is identical to choosing “Line Break” from the Element menu
Click this button to insert a line break and a horizontal line; this is identical to choosing “Horizontal Rule” from the Element menu.
Click this button to make the selected text bold. This is identical to choosing “Bold” from the Character rollover on the Format menu.
Click this button to italicize the selected text. This is identical to choosing “Italic” from the Character rollover on the Format menu.
Click this button to use a fixed width font for the selected text. This is identical to choosing “Typewriter” from the Character rollover on the Format menu.
Click this button to underline the selected text. This is identical to choosing “Underline” from the Character rollover on the Format menu.
Click this button to place a line through the middle of the selected text. This is identical to choosing “Strike” from the Character rollover on the Format menu.
WebMagic lets you give your document a title that's different from the name of the HTML file in which your document is stored. Place the cursor in the Document Title field, then type a title. If the Document Title field is not visible, choose “Document Title” from the View menu.
Web documents let you deliver information to other people on the Internet. In addition, you can include a form in your Web document to gather information from other people. This section provides a brief overview of the Form tool. See “Including Forms in a Web Document” in Chapter 1 for complete instructions.
You begin creating a form by clicking one of the eight buttons along the left edge of the Form tool. Each button lets you add a particular type of item to the form. You can add: fill-in text fields, scrolling text areas, radio buttons, checkboxes, scrolling selection lists, menu buttons, hidden fields, and buttons.
The controls on the right side of the window let you define the characteristics of an item. For instance, suppose you add a scrolling selection list. Use the controls on the right to specify the size of the scrolling list and what text appears in the list.
This tool lets you design the form. To make the form functional, you need to write a program called a cgi-bin script. You cannot create the script using WebMagic. Click the Script button when you're ready to attach the script to the form.
Just as you can select a string of text and turn it into a hypertext link, you can select areas of an image and attach links to them. This combination—an image, its hotspots, and its links—is called an image map. This section describes the Image Map tool.
The left edge of the Image Map window contains two buttons. One button depicts an arrow; the other depicts a text insertion cursor. When the text insertion cursor is selected, you're able to work with the text, forms, and images on the page. When the arrow is selected, you're able to select and manipulate hotspots on an image.
The Image Map window provides you with three drawing tools: a rectangle tool, a circle tool, and a polygon tool. Use these to mark off the region of the image to which you want to attach a link.
The Link button resembles a lightning bolt. Select a hotspot, then click this button to establish the link.
If two hotspots overlap, you need to specify which link is followed when the user clicks in that region. Select one of the hotspots, then pop it to the top or push it to the bottom. This doesn't change the display; it determines which link is followed when a user clicks in the overlapping region.
WebMagic uses a map file to store information about an image and its links. This file specifies the location and size of the hotspots, as well as the link behavior. By default, when you start creating hotspots, WebMagic automatically creates a map file. You use commands on the File menu to open and save these files.
| “Use Map File...:” |
| |
| “Insert from Map File...” |
| |
| “Save Map File” |
| |
| “Save Map File As...” |
| |
| “Remove Map from Image” |
|
To open the Image Attributes window, select an image, then choose “Image Attributes...” from the Element menu. You can use its controls resize an image, change its placement on the page, and more.
The Image Source field shows the pathname of the selected image. To replace the selected image, specify a new image name in this field.
The Alternate Text field displays the text you want to display on systems that can't display the image.
The Width and Height fields let you resize the image. Use the associated menu buttons to specify whether you want the measurement in pixels or percentages. Enter a percentage if you want to specify how much of the page the image should occupy. See also “Resizing Images” in Chapter 1.
Border, Vertical Space, and Horizontal Space let you create space around an image. Set a border size to leave a specified amount of white space around the entire image. Specify horizontal or vertical space to leave a certain amount of blank space between the image and other items on the page.
The Default Values button lets you return to the original size and spacing for an image. Click the Default Values button, then click Apply or OK.
The Image Alignment choices let you specify how to align the image with the surrounding text.
Choose “Top” to align the top of the image with the text.
Click “Middle” to align the middle of the image with the text.
Click “Bottom” to align the bottom of the image with the text.
Click “Left” to have the image appear on the left side of the page. The text flows along the right side. WebMagic does not display this; choose “Preview” to view the change.
Click “Right” to have the image appear on the right side of the page. The text flows along the left side. WebMagic does not display this; choose “Preview” to view the change.
To open the Background/Text Color tool, choose “Background/Text Colors...” from the Element menu.
The top portion of the window lets you choose an image to place on the page background. Type an image name in the available text field or click the Browse... button then use the file browser that appears. The lower portion of the window lets you change the color of various items.
Click Background to change the color of the page background.
Click Text to change the color of all the text in the document.
Click Link, Visited, or Activated to change the way links appear in the HTML browser. By default, links appear blue. While you're in the midst of following a link, the color changes to red. Once you've followed a link, the color changes to purple.
To select a new color, you can use the color wheel or the red, green, and blue sliders. To make a color lighter or darker, adjust the Value slider. A value setting of 0 produces the color black; a value setting of 100 results in the brightest shade of that color. To return to the original color, click Default.
The Insert Text dialog box appears when you insert an ASCII text file into your document. Use it to specify how you want to treat line breaks. Your options are:
Merge the lines into a paragraph. Only create a new paragraph when you encounter a blank line.
Treat each line as a separate paragraph.
Convert the lines of text into a table. See “Converting Text Files into Tables” in Chapter 1.
The Insert Table dialog box lets you format an ASCII text file as a table. It appears when you insert a text file and choose “Convert to Table...” from the dialog box that appears. “Converting Text Files into Tables” in Chapter 1 provides step-by-step instructions. This section provides a brief overview of the dialog box.
You use this dialog box to specify two things:
how you want WebMagic to interpret line breaks in your text file
If each line in your text file contains one item, you want to treat each line ending as a cell. In this case, you need to specify how many columns should appear in your table.
If each line in your text file contains multiple items and you've separated them into columns with tabs, spaces, or some other character, you want to treat each line as a row.
the visual characteristics of the table
You can place a border around the table and you can specify how much space should appear around each item.
The topmost item in the window is a menu button labeled Type. This lets you specify how the link is presented. External means users must click on a particular text string or area of an image to follow the link. Inline is valid with images only. It means the image appears on the HTML page, even though the image resides in a separate image file. This menu button is set based on the way you've opened the Create Link window. For instance, if this window appears while you're inserting an image, the menu button is set to Inline.
The rest of the window varies depending on the link type. If you're creating an inline image link, the window displays controls for specifying the image name, its size, the way its aligned, and more. See also “The Image Attributes Window.” If you're creating a link to another type of file, the window displays controls for specifying the destination of the link. These controls are discussed in the following sections:
You can change the appearance of a horizontal line by selecting it, then choosing “Horizontal Rule Attributes...” from the Element menu.
To make the line wider or narrower, enter a number in the Width field. Use the menu button to specify whether you want the measurement to be in pixels or a percentage.
To make the line thicker or thinner, enter a number in the Height field. Use the menu button to specify whether you want the measurement to be in pixels or a percentage.
By default, the horizontal rule is shaded. To make the line solid black, click Shaded Line. The checkmark disappears, indicating it's not selected.
To restore the default values, click the Default Values button.
When you're ready to make the changes, click the Apply button or the OK button. When you click Apply, the rule is changed and the Attributes window stays open. When you click OK, the rule is changed and the window is closed.
You use the file browser in several situations—when you open or save a file, when you insert a file, when you choose an image to place on the page background, and more. This section provides general instructions for using the browser.
The top port of the browser is labeled Files. It shows all files and directories that are contained in the directory whose full pathname is shown in the middle of the window.
To open a file listed in this area, double-click its name or click its name, then click the OK button.
To look in a subdirectory, double-click the directory name (directory names end in /) in the Files area.
To look in a completely different area of the filesystem, type a different pathname in the type-in field, then press <Enter>.
To restrict your view of files in a particular directory, click the Filter button.
In the Filter window that appears, enter a string and wildcard character (for example, *.html), then click the Apply or OK button. Only those files that fit your match criteria appear in the Files area.