You use the WebMagic authoring tool to create HTML documents that can be viewed on the World Wide Web (the Web) by any HTML browser or HTML player.
WebMagic lets you create documents from scratch or from existing document templates. It is a point and click text editor that also supports:
paragraph markup for structuring your document
character tags for formatting and categorizing text elements
inclusion of inline images
inclusion of multi-media files by referring to them via a link
inclusion of forms so your page becomes interactive
hyper-links from your document to other documents or files
For task-oriented information on using WebMagic, choose a topic from the WebMagic Help menu. For context-sensitive information on a particular area or item in the WebMagic editing window, choose “Click for Help” from the Help menu, then click on the area or item (see also Chapter 2, “WebMagic Reference”).
Each time you create a document using WebMagic, you follow most of these steps:
If this is the first HTML document you've created with WebMagic, set up your work area; see “Setting Up a Work Area for Easy Publishing” and “About the Home Page.”
If WebMagic is not already running, start it by double-clicking the WebMagic icon on the shelf of your project root directory.
If you like, use a template; see “Opening an Existing Document as a Template.”
Create content.
Give the document a title; see “Specifying a Title.”
Save the document; see “Saving Changes.”
View the document using Netscape so you can test links and formatting; see “Viewing and Publishing the Document.”
If you like, print the document; see “Printing a Document.”
Make the document available on the Web; see “Publishing a Document on the Web.”
All HTML documents that you can view on the Web reside on specially configured systems called web servers. When you place an HTML document in a specific location on the web server, your document becomes available for viewing. Placing your document on the web server in this way is called publishing a document.
If your system is running the Out Box server, publishing Web documents on your server is easy. Open your home directory and locate the directory named public_html. This is referred to as your project root directory; it was automatically created for you. Create your HTML documents in this directory and they are automatically available for viewing on the Web. For step-by-step instructions, see “Creating and Publishing Files Using the public_html Directory.”
If you're authoring the document on your system but need to copy it to another web server, publishing is a bit more involved. After creating your document, you need to copy it to a specified location on the web server. To ensure that all of your links work, you may need to translate the link pathnames (URLs) first. See “Creating and Publishing Documents For Use on Another Server.”
This section describes how to author and publish files easily. The method described works only if your system is running the Out Box server.
Open your home directory and locate the directory public_html; open this directory.
This is the directory in which you'll author all your HTML documents.
Add a shelf to the open project root directory window by choosing “Shelf” from the View window.
Place the webmagic icon on the shelf.
Choose “Web Tools” from the Find toolchest.
Drag the webmagic icon from the Web Tools page of the icon catalog onto the shelf.
If you plan to include images and other types of media in your documents, create subdirectories for each media type.
For example, you might create one subdirectory called images and another called movies.
For each subdirectory you created, create a shelf as you did in the project root directory, and drag the appropriate media tools onto the shelf.
Choose “Media Tools” from the Find toolchest to see all the available tools. This step makes it easy for you to create media files and save them in the proper subdirectory.
Create the files you plan to link to or, if they already exist in another location on your system, move them or place copies of them in the appropriate subdirectories.
For example, copy several GIF or JPEG files into your images directory.
Note: To save on disk space, rather than copying files into the subdirectories, you can make linked copies of files using the “Make Linked Copy” choice in the Selected menu on a directory view window. Then drag the linked copies into the subdirectories and remove “link_to_” from the file name. Start WebMagic from the shelf, either by double-clicking the WebMagic icon, or by dragging an HTML document icon from the project root directory onto the WebMagic icon.
Create your HTML document in the public_html directory.
The document is automatically available for viewing. Other users can view the document by specifying the following URL: http://<machinename>/~<username>/<filename>.
| Note: All files and directories in public_html are available for others to view. As such, you probably don't want to place confidential files in this directory. |
To make publishing on another server easier, you can create your HTML file in one directory and place all the files it references in the same directory or one of its subdirectories.
Create a project root directory. This is the directory in which you'll author your HTML documents.
If your system is running the Out Box server, you automatically have a directory named public_html in your home directory. You can author HTML documents here, then copy them to the other web server. The Out Box server makes documents placed here automatically available for viewing. If you don't want people to view your file while it's under construction, create a different project root directory.
If your system isn't running the Out Box server, create a project root directory in your home directory.
Open the project root directory, then add a shelf by choosing “Shelf” from the View window.
Finish setting up your work area by following steps 2 through 7 in “Creating and Publishing Files Using the public_html Directory.”
Once you've set up your work area and created your HTML document, you're ready to copy it to the web server. See “Publishing a Document on the Web.”
Every person or organization may have a home page. It's the main entrance into information about an entity. By default, if your system is running the Out Box server, you have a basic home page. It's stored in your home directory, in a subdirectory called public_html. The file is named index.html. You can use WebMagic to customize this page.
You can use your home page to share files with other people. Use the Out Box tool to specify which file icons you'd like to share; these icons appear in the lower portion of your home page. To open Out Box, click the words OutBox now.
Choose a topic from the list:
WebMagic can open any HTML document that you have permission to view, and will let you edit any HTML document that you have permission to change. For more information, refer to the Desktop User's Guide, which is one of the Online Books accessible through the Help menu of the desktop Toolchest.
To open a HTML document, follow these steps:
Choose “Open” from the File menu.
The Open Document window appears. The Files area of this window shows all files and directories that are contained in the directory whose full pathname is shown in the Open file field.
Locate the file that you want to open.
If you see the file in the scrolling Files area, go to the next step.
To look in a subdirectory for the file, 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 Open file 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.
Open the file using one of these methods:
Double-click its name in the Files list.
Click its name in the Files list, then click the OK button.
Enter its full pathname in the Open file field, then click the OK button.
Once you open a document, WebMagic automatically saves your changes every two minutes. To change the interval of time between automatic saves or to turn off this feature, choose “Preferences” from the File menu, and see “Saving Changes Automatically.”
WebMagic automatically saves your changes every 2 minutes (see “Saving Changes Automatically”). To explicitly save changes, follow these steps:
Choose “Save” from File menu.
If you have previously saved the file, you are done. If you have never saved this file before, you see the Save Document window; go on to the next step.
Specify a name for the file that ends in .html and contains no spaces or special characters.
To save the file in the same directory whose contents are displayed in the scrolling Files area, delete the name default.html from the Save to file field, and enter a new name.
To save the file in a subdirectory, double-click the directory name (directory names end in /) in the Files area, then enter the file name at the end of the full pathname displayed in the Save to file field.
To save the file in a completely different area of the filesystem, type a different pathname in the Save to file 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.
Save the document in the file, or cancel your request.
Click the OK button to save the document in the file whose name appears in the Save to file field.
Click the Cancel button to discard any information you entered in the window and to leave the document unsaved.
To save your document under a different name, choose “Save as” from the File menu, then follow steps 2 and 3 above.
By default, WebMagic automatically saves all changes every two minutes in a checkpoint file and makes a backup copy of the original file when you save your edits.
The checkpoint (autosave) files are named basefilename-username-uniqueID.filesuffix. sav. For example, the checkpoint file for joe's febproj.html file would be named febproj-joe-443.html.sav
The backup file is named filename.bak
You can change your preferences so WebMagic does not create autosave or backup files, or so WebMagic performs autosaves more or less frequently. Choose “Preferences” from the File menu to change these preferences, then click the Help button in the Preferences window for more information.
WebMagic provides several template documents that you can open, edit, and save as your own. In this way you can quickly create standard documents such as a home page (see also “About the Home Page”). These documents are located in the /usr/share/WebMagic/templates directory.
You can open a template file in the /usr/share/WebMagic/templates directory by following these steps:
Choose “Open Template” from the File menu.
In the Open Template File window, open a file using either of these methods:
Double-click the file.
Click the file to select it, then click the OK button.
You can open any HTML file as a template. To do so, enter the pathname of the directory that contains the file in the Open template field, press <Enter> to see all the files that the directory contains, then double-click the file. To see the contents of the default template directory again, click the Default Template Directory button.
WebMagic lets you insert the following types of files:
other HTML files
ASCII text files
Rich Text Format (RTF) files. Many word processing applications let you save the document in this format.
image files
When you insert a text or HTML file, you copy the entire contents of the file into your open WebMagic document. When you insert an image file, you do not copy the image file into the document; you create an inline image link to the file.
To insert a text, HTML, RTF, or image file, follow these steps:
Choose an item from the “Insert” rollover in the File menu.
The Insert window appears. The Files area of this window shows all files and directories that are contained in the directory whose full pathname is shown in the Selection field.
Locate the file that you want to open.
If you see the file in the scrolling Files area, go to the next step.
To look in a subdirectory for the file, 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 Selection 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.
Insert the file using one of these methods:
Double-click its name in the Files list.
Click its name in the Files list, then click the OK button.
Enter its full pathname in the Selection field, then click the OK button.
If you are inserting a text or HTML file, the contents of the file are copied into your open document and the insertion is complete.
If you are inserting an image file, the Create Link window appears; click the Apply button in this window to complete the insertion (to create an inline image link). For more information, see “Inserting Images.”
This section explains how to place text on the page, copy and paste text, and change its color.
To position the insertion cursor:
move the mouse so its cursor is positioned where you want to enter text or an image, then click the left mouse button; or
use the up, down, left, and right arrow keys on the keyboard to move the cursor.
Once the insertion cursor is positioned, you can enter text in these ways:
Type on the keyboard to enter text.
Use the “Insert” choice on the File menu to add an entire text file. See also “Inserting Text Files.”
Use the <Enter> key to erase characters that appear behind the insertion cursor, and use <Enter> key to start a new paragraph.
To insert text files, open the File menu, then choose “Text File...” from the Insert rollover menu. Step-by-step instructions follow.
Choose “Text File...” from the “Insert” rollover in the File menu.
The Insert window appears. The Files area of this window shows all files and directories that are contained in the directory whose full pathname is shown in the Selection field.
Locate the file that you want to open.
If you see the file in the scrolling Files area, go to the next step.
To look in a subdirectory for the file, 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 Selection 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.
Insert the file using one of these methods:
Double-click its name in the Files list.
Click its name in the Files list, then click the OK button.
Enter its full pathname in the Selection field, then click the OK button.
A dialog box appears.
Use the dialog box that appears to specify how you want to treat line breaks in the text file.
You can preserve the line breaks, in which case each line will appear as a separate paragraph, or you can merge the lines and form paragraphs. You can also choose to convert the text file into a table. See “Converting Text Files into Tables.”
Click the Insert button and the text appears in your document.
You can select text in these ways:
Position the mouse cursor at one end of the text, press and hold the left mouse button, and drag the mouse to highlight the string of text.
Position the insertion cursor at one end of the text using the arrow keys, then press and hold down the <Shift> key and create the selection range using the arrow keys.
Position the cursor over a word, then double click to select the word. Keep pressing the left mouse button and drag the mouse to select additional words.
Position the cursor in a line of text, then click the mouse button three times to select the entire line. Keep pressing the mouse button and drag the cursor to select additional lines.
Position the cursor in a paragraph, then click four times to select the entire paragraph.
When text reaches the right edge of the page, it automatically breaks and continues on a new line. To break the line of text before it reaches the edge, chose “Line Break” from the Element menu.
If you inserted an image so that text flows on the left or right side of the image, and you insert a line break, you might also want to use the “Break Clear” command. 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.
WebMagic supports all special characters in the ISO Latin 1 character set. This includes characters such as the copyright and registered trademark symbols.
For a full list of supported characters, see the composetable(5) man page. Some commonly-used special characters include:
| Character: | Two-character keyboard combination: | |
| Copyright | <c> <o> | |
| Registered Trademark |
| |
| Pound | <L> <-> | |
| Yen | <y> <=> | |
| One-half | <1> <2> |
To enter special characters, follow these steps:
Use the Language Controls window to change your keyboard style from US to en_US.
Choose “Language” from the Customize rollover menu in the Desktop toolchest.
In the Language Controls window, click to select en_US in the Keyboards list.
Click the Apply button to switch to the new keyboard, then click the Close button to close the window.
Position your cursor in the WebMagic window where you want to insert the special character.
Press and hold down the <Shift> key, press and hold down the right-hand <Alt> key, then release both keys. This places WebMagic in a special character entry mode.
Type the two-letter combination for your special character. After you type the two-letter combination, WebMagic automatically returns to its regular entry mode.
When you cut a section of text, WebMagic removes the text from your document and saves it in memory until you cut or copy another item. Immediately after you cut the item, you can paste it into another location of your document (see “Pasting Text”).
To cut text:
Select the text (see “Selecting Text”).
You can select a single character or several paragraphs.
Choose “Cut” from the Edit menu.
The text disappears from the screen, but is saved by WebMagic until the next time you cut or copy an item.
To place the cut item somewhere else in your document, move the insertion cursor to the new location, then choose “Paste” from the Edit menu.
When you copy a section of text, WebMagic places a copy of it in memory until you cut or copy another item. Immediately after you copy the item, you can paste it elsewhere in the document or paste it in another open document
To copy text:
Select the text (see “Selecting Text”).
You can select a single character or several paragraphs of text.
Choose “Copy” from the Edit menu.
The text is saved by WebMagic until the next time you cut or copy an item.
To place the copied text somewhere else in your document, move the insertion cursor to the new location, then choose “Paste” from the Edit menu.
After you cut or copy a section of text, you can place the item in a new location in the same document or in another HTML document.
To paste text into the same document from which you cut or copied it, follow these steps:
Move the insertion cursor to the new location.
Choose “Paste” from the Edit menu.
To paste text into a different document, follow these steps:
Open the document into which you want to paste the item using either of these methods:
Move the insertion cursor to the new location (see “Entering and Editing Text”).
Choose “Paste” from the Edit menu.
If you've created a table in a text file, you can preserve the format when you insert the text file into WebMagic. For instance, many spreadsheet applications let you save a spreadsheet as a text file. You can insert this into WebMagic and preserve the formatting.
Choose “Text File...” from the “Insert” rollover in the File menu.
The Insert window appears. The Files area of this window shows all files and directories that are contained in the directory whose full pathname is shown in the Selection field.
Locate the file that you want to open, then insert it by double-clicking its name.
A dialog box appears.
Click Convert to Table..., then click the Insert button.
The Insert Table dialog box appears.
Choose how you want to format the table.
In your text file, if you used tabs, spaces, or a particular key to separate table cells, you want to treat each line as a row. Choose one of the three options. 1) Click Tabs. 2) Click Spaces, then enter the number of spaces you used to separate the rows. 3) Or click Other, then enter a key. For instance, you might have used a comma or colon to separate the rows.
If each line contains one item, you should treat each item as a cell. Enter the number of columns you want to use in your table.
Provide additional formatting by completing the Table Attributes settings.
To place a border around the table and each of its cells, type a number in the Border Size field. The border size is measured in pixels.
Type a number in the Cell Padding field to specify how much space appears between the text and the edge of a cell. By default, WebMagic uses a cell padding of 2 pixels.
Type a number in the Cell Spacing field to determine how much blank space surrounds each cell. By default, WebMagic uses a spacing of 2 pixels.
Click the Insert button.
The text appears in your document. You see icons interspersed in the text; these represent the HTML table tags.
To view the table, choose “Preview” from the File menu.
You can search for words or phrases and replace them. To do so, choose “Find/Change...” from the Edit menu. Step-by-step instructions follow.
Choose “Find/Change...” from the Edit menu.
The Find/Change window appears.
In the Find field, type the word or phrase you want to find.
Select the options you want by clicking Consider Case, Whole Words, and Find Backward.
Click Consider Case if you want WebMagic to find the word only if it's capitalized exactly as you typed it. By default, WebMagic finds all instances of the word, no matter how they're capitalized.
Click Whole Words if you want WebMagic to find that word alone and not just a sequence of characters. For instance, suppose you're searching for “the.” If you don't select Whole Words, WebMagic will also find “the” in “there.”
By default, WebMagic begins searching at the cursor location. When it reaches the end of the document, it jumps to the top of the document and continues searching. Click Find Backward if you want WebMagic to start at the cursor location and search backward.
Click the Find button.
If the text string appears in the document, the cursor moves to that location and WebMagic highlights the string.
To continue searching, click Find again or press the <Enter> key.
If you want to replace text strings, do the following:
Specify what you want to replace the text with. You have two options:
Type a replacement word in the Change field. Make sure the menu button is labeled To.
Find a string of text in the document, then choose “Copy” from the Edit menu. In the Find/Change window, choose “By Paste” from the menu button next to Change.
Use the buttons along the bottom of the window to find and replace the text. You have several options:
Click Find, then click the Change button. This lets you find each occurrence of the word and decide if you want to replace it.
Click Find & Change to find the next instance of the word and automatically change it.
Click Change All to automatically replace all instances of that word.
You use the Format menu, the paragraph markup menu button, the character style menu button, and the indent and outdent icon buttons to format your text and to add different degrees of structure to your HTML document. Click a topic for more information.
You can mark a text string in a way that either:
attaches visual characteristics to the text (such as boldface type), or
categorizes the text string as an identifiable document element (such as a a document citation).
Tagging text strings in this way allows HTML viewers to identify the strings and to display them appropriately.
To apply a character tag to a text string, follow these steps:
Select the text you want to change.
Choose a tag in one of these ways:
Open the Format menu, then choose a tag from the Character or Style rollover menus.
Use the Character Style menu button. It lists the same items as the Style rollover menu.
Click the button for bold, italic, fixed font, underline, or strike. These buttons appear in the toolbar near the top of the window.
By default, the text you type is black. You can change all of the regular text to a different color.
Choose “Background/Text Colors...” from the Element menu.
The Background & Colors window appears.
In the middle of the window, you see a list of items whose colors you can change. Click Text.
A blue triangle indicates it's selected.
Click in the color wheel to select a new color or adjust the RGB and value sliders. If the color wheel is black, drag the Value slider to the right.
The color chip changes to show the color you've selected.
Press the Apply button to apply the color change and leave the Background & Colors window open; press the OK button to apply the color change and close the window.
All of the text in the document changes.
By default, text that users can click to follow a link is blue. To change the color of these links, see “Changing the Appearance of Links.”
You can make selected text smaller or larger by opening the Format menu and choosing a number from the Size rollover menu. “1” is the smallest front size; “7” is the largest font size. You can also use the Font Size menu button. It provides the same choices.
By default, text is aligned with the left edge of the page. You can center text or align it with the right edge instead.
Click to place the insertion cursor within the paragraph.
Open the Format menu, then choose an item from the Justify rollover menu.
Optionally, you can click the alignment buttons in the toolbar.
A structured document is one that contains identifiable elements, such as body paragraphs and headings. A document is visually structured when the elements have different looks (e.g., the headings are in a different weight and type of font than the body text). A document is truly structured when the different elements have unique names, and you apply a structure to a string of text to identify it (to `mark it up'). Once you've marked up a document, viewers interpret the markup to determine how to display the document.
For example, if your document has body paragraphs and headings, a particular viewer may display all headings in 12-point Helvetica bold font, and all body paragraphs in 10-point regular Times. A different viewer may display the elements completely differently. However, each viewer will display the elements consistently. That is, in a given viewer, all level one headings will look identical.
If you are not familiar with structured documents, see “About HTML.”
To apply structure to a paragraph, follow these steps:
Click to place the insertion cursor within the paragraph.
Open the Format menu, then choose an item from the Paragraph rollover menu or choose an item from the paragraph markup menu button.
The name of the structure that you applied appears in the WebMagic status region and, in some cases, the font style or formatting of the paragraph changes.
The structure that you apply effects only the paragraph in which the insertion cursor is currently placed. If the cursor is at the end of the paragraph and you press <Enter> to start a new paragraph, WebMagic applies the same or a complementary structure to the new paragraph as shown in the table below.
Table 1-1. Automatically applied paragraph structures
Pressing <Enter> in a paragraph of this type: | Creates a new paragraph of this type: |
|---|---|
Body | Body |
any Heading | Body |
any List | the next item in the same type of List; for an ordered list, the item's number is incremented by one |
Descriptive Title | Descriptive Data |
Descriptive Data | Descriptive Data |
Preformatted | Preformatted |
Block Quote | Block Quote |
Address | Address |
To change the automatically applied structure, leave the insertion cursor in the new paragraph, and choose a different structure from the paragraph markup menu button.
WebMagic supports six heading levels, which means you can hierarchically structure or nest sections six levels deep. If you are not familiar with structured documents, see “About HTML.”
In WebMagic and in most HTML viewers, each heading level is visually distinct. For example, a Heading 1 paragraph might be displayed in 14-point Helvetica bold, while a Heading 2 paragraph is displayed in 12-point Helvetica bold and is indented one inch. When authoring a long document, it's often useful to first create an outline that consists of headings of varying levels.
To designate a paragraph as a heading, follow these steps:
Click to place the insertion cursor within the paragraph.
Choose a heading level from the paragraph markup menu button, or open the Format menu and choose an item from the Paragraph rollover menu.
The name of the heading level that you applied appears in the WebMagic status region and the font style and/or formatting of the paragraph changes.
Press <Enter> to start a new paragraph.
By default the new paragraph will be a body text paragraph.
WebMagic lets you create four different types of lists:
Bulleted lists are not ordered, and each item is preceded by a bullet or other single, non-alphanumeric character (the list you are reading now is a bulleted list).
Numbered lists are ordered, where each item is preceded by an ordering character such as an english numeral, roman numeral, or a letter of the alphabet. When you add an item, the next sequential ordered character automatically precedes it.
Menu lists are not ordered, and each item appears on its own line.
Directory lists are not ordered, and each item must contain 20 characters or less. Many viewers arrange directory lists in columns.
To create these types of lists, see “Creating a List.” To nest lists of the same or different types, see “Nesting a List within Another List.”
To create a list, follow these steps:
Click to place the insertion cursor within the paragraph that you want for the first item in the list.
Choose a list type from the paragraph markup menu button, or open the Format menu and choose an item from the Paragraph rollover menu.
When you have finished entering the text for the list item, press <Enter> to create a new paragraph which is automatically designated as the next item in the list.
You can nest lists of the same or different types using the indent and outdent icon buttons. The list below is an example of an ordered list that has a bulleted list nested within it.
Ordered item 1.
Ordered item 2.
Nested bullet item 1.
Nested bullet item 2.
Ordered item 3.
In WebMagic and in many viewers, when you nest lists of the same type, both the indentation and the character that precedes each list item change to visually reinforce the nesting. In the example above, the nested list is indented.
To create a nested list within a list, follow these steps:
After typing the list item that will directly precede the nested list, press <Enter> to create a new list item.
While the insertion cursor is positioned in the new list item paragraph, choose a type for your new nested list from the paragraph markup menu button or from the Paragraph rollover on the Format menu.
To structurally and visually nest the list, click the indent icon button (the icon button whose arrow points to the right).
Alternatively, you can choose “Indent List” or “Outdent List” from the Format menu.
Type the text for the first nested list item, then press <Enter> to create the next item in the nested list. Repeat this for each item in the nested list.
After typing the final item in the nested list, press <Enter> to create a new paragraph.
While the insertion cursor is in the new paragraph, click the outdent icon button (the one whose arrow points to the left) and, if the nested list is of a different type from the original list, choose the original list type from the paragraph markup menu button. This creates the next sequential list item in the original list.
If you're familiar with the raw HTML markup language, you can edit markup directly.
To insert new HTML markup, follow these steps:
Choose “Insert Markup” from the Tools menu.
In the markup dialog that appears, enter the markup commands.
Click the OK button to insert the raw HTML, or click the Cancel button to discard your entry.
When you insert text from another HTML document, you may see some question mark icons. These appear when the text contains HTML markup that WebMagic does not interpret directly. To change such markup, follow these steps:
Highlight the question mark icon, then choose “Markup” from the Edit menu.
In the markup dialog that appears, enter a new markup command.
Click the OK button to insert the raw HTML, or click the Cancel button to discard your entry.
To visually distinguish one area of the page from another, you can add a horizontal rule. To do so:
Choose “Horizontal Rule” from the Element menu.
Or click the horizontal rule button in the toolbar. This is the rightmost button in the toolbar.
Click a topic for more information:
You can insert images in your HTML document. When you insert an image file, you do not copy the image file into the document; you create an inline image link to the file.
You can insert an image by dragging and dropping an image file icon or by using the “Insert” command. For details, see:
| Note: WebMagic knows how to display GIF, JPEG, XBM, and XPM image files. If you insert another type of image, WebMagic displays a box as a placeholder. Preview the document to see if your HTML browser display the image properly. If it doesn't, you can create an external link to the image file. See “Creating a Link to Other Types of Files.” |
To insert an image by dragging and dropping its icon:
Position the cursor in the document, then click to place the insertion mark.
When you insert the image, it appears to the left of the insertion cursor.
Find the desktop icon that represents the image file you want to insert, drag the icon over the WebMagic page, then release the mouse button.
The image automatically appears on the page.
To insert an image using the “Insert” command:
Position the cursor in the document, then click to place the insertion mark.
When you insert the image, it appears to the left of the insertion cursor.
Open the File menu, then choose “Image File...” from the Insert rollover menu. Use the file browser that appears to select the image.
The Create Link window appears. It lists the pathname of the image you're inserting.
Click Top, Middle, or Bottom to specify whether the image should be aligned with the top, middle, or bottom of the paragraph in which the insertion cursor is placed.
Click Left or Right to specify whether you want the image to appear on the left or right side of the text.
In the Alternate Text field, enter the text that should replace the image on systems that are able to view HTML documents but are unable to display images.
Click the OK button.
The image appears on the page.
You select images the same way that you select text. Position the mouse cursor on either side of the image, press and hold the left mouse button, and drag the mouse to highlight the image. You can also place the cursor over the image, then double-click the left mouse button to select the image.
A thin yellow line surrounds the image when it's selected. If you've attached a hypertext link to the image, you see a thin blue line instead.
When you cut an image, WebMagic removes the image from your document and saves it in memory until you cut or copy another item. Immediately after you cut the item, you can paste it into another location of your document.
To cut images:
Select the image.
See “Selecting Images” for instructions.
Choose “Cut” from the Edit menu.
The image disappears from the screen, but is saved by WebMagic until the next time you cut or copy an item.
To place the cut image somewhere else in your document, move the insertion cursor to the new location, then choose “Paste” from the Edit menu.
You can also paste the image into another WebMagic document. Use the “Open” command to open the file, place the cursor in that document, then choose “Paste.”
| Note: You can also use the <Enter> key to remove an image from the page. You cannot paste an image you have removed this way. |
When you copy an image, WebMagic places a copy of it in memory until you cut or copy another item. Immediately after you copy the image, you can paste it into another location of your document.
To copy an image:
Select the image.
See “Selecting Images” for instructions.
Choose “Copy” from the Edit menu.
The image is saved by WebMagic until the next time you cut or copy an item.
To place the copied image somewhere else in your document, move the insertion cursor to the new location, then choose “Paste” from the Edit menu.
| Note: You can paste the image into another WebMagic document. Place the cursor in that document, then choose “Paste.” |
By default, when you insert an image it appears at the location of the insertion cursor. If the insertion cursor is on a blank line, the image is aligned with the left edge of the page. You can change this by doing one of two things:
Select the image, then choose “Image Attributes...” from the Element menu. Enter numbers in the Border, Vertical Space, and Horizontal Space fields, then click the OK button. This creates a blank area around the image.
Place the cursor on the line that contains the image, open the Format menu, then choose “Left,” “Center,” or “Right” from the Justify rollover menu. The image and any text in the associated paragraph are repositioned.
You can also click the justification buttons that appear near the top of the WebMagic window.
When you insert an image, you can specify how you want it to be aligned with the surrounding text. You can align text with the top, middle, or bottom of the image. And you can choose whether the image appears to the left or right of the text. To change the alignment once the image appears on the page:
Select the image.
See “Selecting Images” for instructions.
Open the Element menu, then choose an item from the Image Alignment rollover menu.
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 won't move the image from left to right. To see this change, choose “Preview” from the File menu.
Click “Right” to have the image appear on the right side of the page. The text flows along the left side. WebMagic won't move the image from left to right. To see this change, choose “Preview” from the File menu.
By default, images appear at their full size. You can scale them on the page by doing the following:
Select the image you want to resize.
See “Selecting Images” for instructions.
Choose “Image Attributes...” from the Element menu.
Use the Width and Height fields to specify the new size.
You can specify an exact measurement in pixels or you can specify the percentage of the page you want the image to occupy. WebMagic preserves the aspect ratio if you enter a value in only one field, either Height or Width.
Use the menu button to the right of the Height and Width fields to switch between pixels and percentages.
Click the OK button.
The image on the page is resized.
| Note: This technique changes the size of the image as it's displayed on the page. It does not modify the original image. |
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.
To create hotspots:
Select the image for which you want to create the links.
See “Selecting Images” for instructions.
Choose “Image Map” from the Element menu.
The Image Map window appears. It contains three drawing tools—a rectangle tool, a circle tool, and a custom polygon tool.
Use the drawing tools to mark off the area of the image you want to associate the link with. This area is called a hotspot.
To mark off a rectangular area, click the rectangle tool, place the cursor over the image, then press the left mouse button and drag the cursor. A rectangle appears. Release the mouse button when the rectangle is the proper size.
The rectangle must not extend beyond the left or top edge of the image.
To mark off a circular area, click the circle tool, place the cursor over the image, then press the left mouse button and drag the cursor. A circle appears. Release the mouse button when the circle is the proper size.
The center of the circle cannot be placed above or to the left of the image.
To create a custom shape, click the polygon tool, place the cursor over the image, then click to place the first point. Move the cursor, then click to place the second point. To signal that you are finished drawing, click the middle mouse button.
The polygon must not extend beyond the left or top edge of the image.
While the hotspot is still selected, click the Link button in the Image Map window or choose “Link” from the Element menu.
Small red boxes outline the hotspot when it's selected. If the hotspot is not selected, see “Selecting Hotspots.”
Set up the link according to the instructions in “Creating and Editing Links.”
The hotspot highlights blue when it has an associated link.
When you're ready to publish your document, you may need to modify the image map slightly. See “Preparing Your Image Map for Publishing.”
| Note: You can test most links by choosing “Preview” from the File menu. This technique does not work for image maps. You need to open your HTML browser, then open the document by typing its URL. |
“Creating the Hotspots” explains how you attach links to certain areas of an image. This section explains how to create a default link for the entire image. In other words, it tells you how to specify what happens when a user clicks the image but does not click a hotspot.
Select the entire image.
If you aren't able to select the image, click once on the page background, then try selecting the image again. Or, in the Image Map window, click the button that displays a text insertion cursor.
Click the link button in the Image Map window or choose “Link” from the Element menu.
The Create Link window appears.
Set up the link according to the instructions in “Creating and Editing Links.”
You select a hotspot when you want to create or edit its link or move, delete, or resize the hotspot. To do so:
Place the cursor over the hotspot.
If the cursor resembles a cross, move on to the next step. If the cursor resembles a text cursor, open the Image Map window, then click the button in the upper left corner. This button displays an arrow pointing to a small blue box.
Click the mouse button to select the hotspot.
Small red boxes outline the hotspot when it's selected.
To move a hotspot, place the cursor over the middle of the hotspot, then press and hold the left mouse button. Move the cursor and the hotspot moves. Release the mouse button when the hotspot is placed appropriately.
If the hotspot doesn't move, check the appearance of the cursor. It should resemble an arrow. If it resembles a text insertion cursor, open the Image Map window, then click the button in the upper left corner. This button displays an arrow pointing to a small blue box.
| Note: If you move a rectangle or polygon beyond the left or top edge of the image, WebMagic reshapes the hotspot so it fits within the boundaries of the image. If you move a circle so the center point is beyond the left or top edge of the image, WebMagic changes the position so the center is within the boundaries of the image. |
You can make a hotspot larger or smaller.
Select the hotspot.
See “Selecting Hotspots” for instructions.
Place the cursor over one of the red boxes surrounding the hotspot, then press the left mouse button and drag the cursor.
The hotspot becomes larger or smaller.
You can change the shape of a polygon by adding, moving, or deleting points.
Select the hotspot.
See “Selecting Hotspots” for instructions.
Change the shape by doing either of the following:
Place the cursor over one of the red boxes surrounding the hotspot, then press the left mouse button and drag the cursor to move that point.
Place the cursor over one of the red boxes surrounding the hotspot, then click the left mouse button to select that point. Press the <Enter> key to delete the point.
Place the cursor over the outline of the polygon, then press the left mouse button and drag the cursor. This lets you add and position a new point.
WebMagic keeps track of an image's hotspots and links using a map file. It automatically creates this file when you start adding hotspots to an image and saves it when you save your HTML document. As a result, you don't usually need to open, save, or rename map files. There are a few exceptions:
You may want to use an existing map file. For example, suppose you use the same image at the beginning of all your documents. Instead of creating the hotspots and links repeatedly, you can use the original map file as a template of sorts.
If you want the hotspots and the links to be the same, choose “Use Map File...” from the File menu on the Image Map window. If you want to edit the hotspots or change the link behavior, choose “Insert from Map File...” from the File menu. You can change the hotspots and links without altering the original file.
WebMagic automatically creates the map file for you and gives it a default name. The Image Map window displays this name. If you want to change the file name, use the “Save Map File As...” command.
After you've created the image map and set up the links, you need to prepare the image map so it can be viewed on the Web server. The procedure you follow varies depending on the type of server you publish your files on.
If your Silicon Graphics workstation is configured as an Out Box server or you are running a NetSite server, you do not need to do anything further. Your image map will work.
If your administrator says that you are running an NCSA server that does not need an imagemap.conf file. See “Using Image Maps on a Server Without an imagemap.conf File.”
If your administrator says that the NCSA server requires an imagemap.conf file, see “Using Image Maps on an NCSA Server With an imagemap.conf File.”
If your administrator says that you are running an NCSA server that does not need an imagemap.conf file, complete the following steps before publishing your file.
Place your cursor in the document, then click the mouse button once.
This ensures that you're in the proper mode when you create the link. If the Image Map window is open, you can click the text insertion button.
Select the image, then choose “Link” from the Element menu or click the Link button.
The Link To field displays the name of the map file associated with that image.
In the Link To field, type /cgi-bin/imagemap followed by the full pathname of the map file on the server.
To find the name of the map file, select the image, then open the Image Map tool. The name of the map file appears in the lower portion of the window.
If you've created your document in the public_html directory and you haven't moved the map file to a new location, append the file name to this path. For example, if your map file is named bicycle.map, type: /cgi-bin/imagemap/bicycle.map.
If you've moved the map file to a new location, perhaps a subdirectory named images, type the following: /cgi-bin/imagemap/images/bicycle.map
| Note: Next time you open this document, you will get an error message because WebMagic will not be able to find this file. If you want to edit the map file, you'll need to restore the original link. When it's time to publish the file, you'll need to change the link again. |
If your administrator says that you are running an NCSA server that requires an imagemap.conf file, complete the following steps before publishing your file.
Ask the server administrator for the pathname to the imagemap program.
Place your cursor in the document, then click the mouse button once.
This ensures that you're in the proper mode when you create the link. If the Image Map window is open, you can click the text insertion button.
Select the image, then choose “Link” from the Element menu or click the Link button.
The Link To field displays the name of the map file associated with that image.
In the Link To field, type the pathname to the imagemap program, followed by a symbolic name for your file.
For instance, suppose the program path is /cgi-bin/imagemap and you want to use the symbolic name “bicycle.” Type: /cgi-bin/imagemap/bicycle.
Ask the server administrator to edit the imagemap.conf file and include the symbolic name followed by the path to your image map file.
For instance, the file might contain an entry like:
bicycle: bicycle.map
| Note: Next time you open this document, you will get an error message because WebMagic will not be able to find this file. If you want to edit the map file, you'll need to restore the original link. When it's time to publish the file, you'll need to change the link again. |
Click a topic for more information:
“About Links and Targets” describes the types of hypertext links you can create with WebMagic. Read this section if you are unfamiliar with the concepts or terms of linking to targets.
“Creating a Link to Other HTML Documents” provides step-by-step instructions for linking to another document.
“Creating a Link to Other Types of Files” provides step-by-step instructions for launching applications and opening other types of files.
“Creating a Link to Remote HTML Documents” provides step-by-step instructions for providing links to documents on another system.
“Creating a Link to a Specific Location within an HTML Document” provides step-by-step instructions for linking to a particular location within a document.
“Creating a Link Target” provides step-by-step instructions for designating an element in your document as a target to which you and other authors can link.
“Showing and Hiding Link Targets in a Document” explains how to use the View window to show and hide targets.
“Changing the Appearance of Links” explains how to change the color of links.
“Testing Links” explains how to preview your document and try out the links you've created.
See also “Attaching Hypertext Links to Areas of an Image.” It provides a description of image maps and explains how to create them.
WebMagic lets you add hypertext links to your HTML document. A link is a pointer that specifies the location of:
an entire HTML document
a specific location within an HTML document
another type of file, such as an image, audio, or movie file
Any item that a link points to is called a destination. When you create a link, you are storing in the HTML document the location of a specific destination.
You can create two types of links:
an external link. You must explicitly follow the link (usually by clicking on it) to view the destination.
For example, at the beginning of your document you create a topic list of the major sections in your document. You link each item in the list to the actual location (target) in the document that covers the topic. When a person viewing the document wants to go to a location (i.e., when he wants the viewer to display this portion of the document), he clicks on the item in the topic list.
an inline image link. The image is automatically displayed on an HTML page, even though the image resides in a separate image file. A person viewing the document does not have to explicitly follow this link; once an inline image link exists, the image is always displayed. See “Inserting Images” for details.
When you publish a document on the Web, it is an available destination to which other authors can link. However, to allow yourself and other authors to link to specific locations within your HTML document, you need to identify each location of interest as a target and must create a unique target name for it. See “Creating a Link Target.”
You can create a link to another HTML document by dragging and dropping the file icon or by using the “Link...” command.
This section describes how to link to a document on your local system. For instructions on linking to a document on a remote system, see “Creating a Link to Remote HTML Documents.”
Specify the location in the document for the link.
Select the text string or image that the user will click to follow the link.
Or select the hotspot that the user will click to follow the link. See “Creating the Hotspots” and “Selecting Hotspots” for details.
Make the link by doing either of the following:
Find the desktop icon for the HTML file you want to link to, then drag it onto the page. Release the mouse button and the link is complete.
Choose “Link...” from the Element menu or click the Link button. The Create Link window appears. In the Link To field, enter the file name of the document you want to link to. You can type in the name or you can click the Browse button and use the Link to Document window to choose a file. Click the OK button to create the link.
Note: If you set up your work area as described in “Setting Up a Work Area for Easy Publishing,” the filename or pathname that you enter in this field will not start with /; for more information, see “About URL Translations.” The selected item turns blue, indicating it has an attached link. If you hadn't selected anything, WebMagic inserts the file name you are linking to at the cursor location.
You can create a link to an HTML document that's on another system. To do so:
Specify the location in the document for the link.
Select the text string or image that the user will click to follow the link.
Or select the hotspot that the user will click to follow the link. See “Creating the Hotspots” and “Selecting Hotspots” for details.
Choose “Link...” from the Element menu or click the Link button.
The Create Link window appears.
In the Link To field, enter the URL of the document you want to link to.
If you want to link to a specific location within that document, place a # sign and the target name after the URL. For instance, the Link To field may contain:
http://skippy/docplan.html#target1
When you follow the link, you open the file docplan.html and you are scrolled to the paragraph the author marked as target1.
Click the OK button to create the link.
You can create a link to another type of file by dragging and dropping the file icon or by using the “Link...” command. For these links to work properly in your HTML browser, you need to name the files according to certain conventions. For instance, the Netscape™ browser recognizes Showcase™ files if they end with .showcase, .slides, .sc, .sho, or .show. For a complete listing of the file types and extensions that Netscape recognizes, see /usr/local/lib/netscape/mime.types.
For step-by-step instructions, see “Creating a Link to Other HTML Documents.” The procedure is the same.
You can create a link to a specific location within an HTML document. When you follow such a link, the document opens and displays the specified section.
This section describes how to link to a document on your local system. For instructions on linking to a document on a remote system, see “Creating a Link to Remote HTML Documents.”
Specify the location in the document for the link.
Select the text string that the user will click to follow the link.
Or select the hotspot that the user will click to follow the link. See “Creating the Hotspots” and “Selecting Hotspots” for details.
Choose “Link...” from the Element menu or click the Link button.
The Create Link window appears.
If you want to link to a location in another HTML document, open that document now using the “Open...” command on the File menu.
If you want to link to a location in another HTML document, enter the name of the document in the Link To field. If you want to link to a location in the same document, skip this step.
You can either type in the name, or you can click the Browse button and use the Link to Document window to choose a file.
Note: If you set up your work area as described in “Setting Up a Work Area for Easy Publishing,” the filename or pathname that you enter in this field will not start with /; for more information, see “About URL Translations.” Use the menu button labeled Document to choose which list of targets to display—those in the current document or those in the document specified in the Link To field.
This menu button lists the documents that are currently open. If the menu button doesn't list the document you want, check to make sure that the document is open.
Along the right edge of the Create Link window, you see a list of elements you can list. Click to select or deselect items.
Display Targets if you want to see a list of items the author has marked as targets for links. These items begin with a #.
Display Headings if you want to see a list of all the paragraphs the author has marked as headings. You can link to these even if the author has not designated them as targets.
Click to select an item in the list, then press the OK button.
WebMagic makes the link. If you selected a heading that isn't already marked as a target, WebMagic automatically designates the item as a target and gives it a unique target name. Consequently, when you close that file, you'll need to save the changes. If you do not have permission to save changes to the file, you will not be able to use this technique.
| Note: If you're making a link from a hotspot on an image, you need to enter the document and target name in the Link To field and separate the two entries with a # sign. You cannot follow the procedure outlined above. For instance, to create a link to a target named target1 in a document named file1, you type file1#target1. |
To allow yourself and other authors to link to specific locations within your HTML document, you need to identify each location of interest as a target and must create a unique target name for it. There is one exception. You do not need to create target names for any items you have marked as headings.
To identify a location as a target, follow these steps:
Select the text or image that will be a target.
Click on the target icon button, or choose “Target (Anchor)...” from the Element menu.
The Create Link Target window appears.
In the Create Link Target window, enter a unique, meaningful name for the target in the Target Name field.
Create the target, or cancel your request.
Click OK to give the target the name you entered. The text or the outline of the image that you named as a target turns blue, and a target icon appears in the left margin.
Click Cancel to dismiss the Create Link Target without naming the text or image as a target.
Now you and other authors can create links to your target; see “Creating a Link to a Specific Location within an HTML Document.” If you need to edit the target, select the entire item you marked as a target, then choose “Target(Anchor)...” from the Element menu.
You can copy and paste links the same way you copy and paste text and images.
Select the item whose link you want to copy.
Choose “Copy Link” from the Edit menu.
Select the item to which you want to paste the link.
For instance, if you want to paste the link onto a particular word, select the word.
Choose “Paste Link” from the Edit menu.
You've just created a link.
By default, WebMagic identifies targets by placing a green marker in the left margin. To hide these markers while you're working on a document, choose “Targets” from the View menu. The red checkmark next to the menu entry disappears and the target markers are hidden. To display them, choose “Targets” again.
By default, links appear blue. Once a link has been followed, it turns purple. While a link is being executed, it turns red. You can change these colors.
Choose “Background/Text Colors...” from the Element menu.
The Background & Colors window appears.
Click on Link, Visited Link, or Activated Link.
A blue triangle indicates which item is selected.
Click in the color wheel to select a new color or adjust the RGB and value sliders.
The color chip changes to show the color you've selected.
Press the Apply button to apply the color change and leave the Background & Colors window open; press the OK button to apply the color change and close the window.
You can test links in one of several ways.
While you're working on a document, choose “Preview” from the File menu. Netscape appears and displays your document. Click on text or images to test the links.
Drag your file's icon onto the Netscape icon or double-click your file's icon. Netscape appears and displays your document. Click on text or images to test the links.
| Note: These techniques do not work for image maps. You need to open your HTML browser, then open the document by typing its URL. |
Web documents let you deliver information to other people on the Internet. In addition, you can use a Web document to gather information from other people. You do so using forms. This section contains:
You can think of forms as small programs. The user interface appears in the Web document; the cgi-bin program that determines what is done with the data is stored on the Web server. You use WebMagic's form tool to design the interface—the text fields, option lists, and more.
Typically, you create a form to let people search for information in a database, submit an online request form, and more. Here are a few specific examples:
Many businesses place catalogs on the Web. To order merchandise, you fill out an online order form. Such a form often contains a variety of elements—a list of items you can order, text fields for entering your name and address, options for choosing the type of delivery you want, options for specifying a payment method, and a button for placing your order. After you submit the order, you may receive a confirmation notice telling you when the item will be shipped to you.
Some Web pages are designed to help you search for documents that contain key words or phrases. You may see one text field, into which you type the word of interest, and one button, which you press to begin the search. After you've performed the search, you'll be presented with a list of documents to view.
For information on constructing a form, see “Building a Form.” For information on writing a cgi-bin program and placing it in the proper place on the Web server, see the NetSite™ Communications Server Administrator's Guide.
You can construct a form using WebMagic's Form tool. To open the tool, choose “Form...” from the Element menu. This tool lets you add items that are commonly found on forms: fill-in text fields, lists, options, and more. No matter what type of item you add, you follow the same basic procedure. The procedure is outlined below; it's followed by step-by-step instructions for each component.
Open the Form tool by choosing “Form...” from the Element menu.
Click a button to select which type of item you want to add to the form.
Identify the item by typing a unique name in the Field Name field.
This name does not appear on the form; it's stored in the HTML file. The cgi-bin script uses this name to identify the information collected from that field
Specify any other attributes, such as the width of the text field, the commands on the menu, or the label on the button.
Click the Insert button.
That element appears on the page. If this is the first item you've added, you'll notice that a thin line appears along the left edge of the page. This shows you which region of the page is designated as a form.
You use fill-in text fields when you need people to enter information by typing. For instance, you might use a text field to gather a person's name or address.
Click the button shown in Figure 1-1.
The Form tool changes. It displays the controls you use to set up a text field.
Enter a name for this item in the Field Name field.
This name does not appear on the form; it's stored in the HTML file. The cgi-bin script uses this name to identify the information collected from that field.
Click Password Field if this is a text field into which people will enter passwords or other confidential information.
When users type into password fields, the text is hidden.
If you want the text field to contain some default text, enter that in the Value field.
In the Width field, specify how wide you want the field to be.
This is measured in characters. If you want the field to be wide enough to display 10 characters, type 10 in the field.
In the Max Length field, enter the number of characters you can type in the field.
For example, you may limit the size of a text field so it fits well on the page. If you want people to be able to enter text strings that are longer than the field, enter a larger number in the Max Length field.
Click the Insert button to place the text field on the page.
You use scrolling text fields when you need people to enter information by typing and you expect them to enter more than a few words. For instance, you would probably provide a scrolling text region for people to type the content of an email message.
Click the button shown in Figure 1-2.
Enter a name for this item in the Field Name field.
This name does not appear on the form; it's stored in the HTML file. The cgi-bin script uses this name to identify the information collected from that field
Enter a number in the Rows field.
This determines how many lines of text display in the field. For instance, if you type 3, only three lines will display. If the text area contains more than three lines, people will have to scroll to view them.
Enter a number in the Columns field.
This determines the width of the text area. It's measured in characters. If you want the field to be wide enough to display 10 characters, type 10 in the field.
In the Value field, type the text you'd like to have appear by default.
If you leave this field blank, the scrolling text region will be empty by default.
Click the Insert button to place that text area on the page.
Now that the text area is on the page, you can add to and edit it directly.
If you need to offer people a list of choices, you can place a selection list on your form. For instance, if you're promoting restaurants, you might include a list of cities. People can select the cities for which they're interested in getting a list of restaurants.
Click the button shown in Figure 1-3.
Enter a name for this item in the Field Name field.
This name does not appear on the form; it's stored in the HTML file. The cgi-bin script uses this name to identify the information collected from that field
Click Multiple Selection if you want to let people select more than one item on the list.
When the checkmark appears, multiple selection is enabled.
Enter a number in the Height field.
This number determines how many list items are displayed. For instance, if you type 3, only three items in the list will display. To see other items in the list, users will have to scroll up and down.
Begin creating the list:
In the Label field, type the text that you want to appear on the list.
Click Checked if you want this list item to be selected by default. A red checkmark indicates it's selected.
Fill in the Value field if you want the data submitted to the server to be different from the choices presented to the user. For instance, you may ask people to indicate whether they prefer the color purple or orange. Instead of returning “purple” or “orange,” you return “p” or “o.” This step is optional.
Add items to the list by clicking the Add After or Add Before button.
New Value and Label fields appear. If they're hidden, use the scroll bar to bring them into view. Create the list item by following the instructions in step 5.
Delete items from the list if necessary.
To delete an item, you need to select it. In the Form tool, place the cursor over the gray area to the right of the Checked label. Click the left mouse button. A thin yellow line appears, indicating the entry is selected. Press the Delete button and that item disappears.
Press the Insert button to place that component on the page.
| Note: If you specify a height of 1 and do not allow multiple selection, you will create a menu button instead of a selection list. |
If you want people to select one item from a list of options, you can add a menu button to your form.
Click the button shown in Figure 1-4.
Enter a name for this item in the Field Name field.
This name does not appear on the form; it's stored in the HTML file. The cgi-bin script uses this name to identify the information collected from that field
Begin creating the list of options for the menu button:
In the Label field, type the text that you want to appear on the list.
Click Selected if you want this item to be the default selection.
Fill in the Value field if you want the data submitted to the server to be different from the choices presented to the user. For instance, you may ask people to indicate whether they prefer the color purple or orange. Instead of returning “purple” or “orange,” you return “p” or “o.” This step is optional.
Add other items to the list by clicking the Add After or Add Before button.
New Value and Label fields appear. If they're hidden, use the scroll bar to bring them into view. Create the list item by following the instructions in step 3.
Delete items from the list if necessary.
To delete an item, you need to select it. In the Form tool, place the cursor over the gray area to the right of the Selected label. Click the left mouse button. A thin yellow line appears, indicating the entry is selected. Press the Delete button and that item disappears.
Press the Insert button to place the menu button on the page.
Radio buttons are similar to menu buttons. Use them when you want users to select one out of several options. Checkboxes can be used in groups or individually.
Click one of the buttons shown in Figure 1-5.
Enter a name for this item in the Field Name field.
Usually, you need to specify a unique field name. Radio buttons are the exception to this rule, however. You need to use the same field name for all the buttons that you group together.
This name does not appear on the form; it's stored in the HTML file. The cgi-bin script uses this name to identify the information collected from that field
Click Checked if you want this button to be selected by default.
A red checkmark indicates it's selected.
Fill in the Value field if you want the data submitted to the server to be different from the choices presented to the user.
For instance, you may ask people to indicate whether they prefer the color purple or orange. Instead of returning “purple” or “orange,” you return “p” or “o.” This step is optional.
Click the Insert button; the radio button or checkbox appears on your page.
The button doesn't have an associated label. You need to type this directly on the page.
Create the other radio buttons or checkboxes by repeating steps 1 through 6.
You add a push button to your form to let people submit their form. For instance, after completing an online order form, a person might press a Send button. You also use buttons if you want to let people quickly restore the default settings or clear the fields.
Click the button shown in Figure 1-6.
Enter a name for this button in the Field Name field.
This name does not appear on the form; it's stored in the HTML file. The cgi-bin script uses this name to identify the information collected from that field
Choose the behavior you want by clicking Submit Button or Reset Button.
Click Submit Button if you want users to click this button when they are finished filling in the form. For instance, they may click a button when they're ready to send their online order form. Or they may click a button when they're ready to begin searching for a specified word.
Click Reset Button if you want people to click the button to restore the default values or clear the fields.
Type the button label in the Value field.
Click the Insert button; the button appears on your page.
A hidden field is a region of the form that is not displayed to the user. You can use these fields to store data and transfer it from one form to another. For instance, suppose a user completes an order form then presses a Send button. You then present the user with a confirmation notice. If the user clicks OK, you want to automatically send the data to the server. In this case, the confirmation window may contain a hidden field; in it is stored the form data.
Click the button shown in Figure 1-7.
Enter a name for this button in the Field Name field.
This name does not appear on the form; it's stored in the HTML file. The cgi-bin script uses this name to identify the information collected from that field
Fill in the Value field if you want to display some default text in this field.
This step is optional. The text is not displayed when the document is viewed using an HTML browser. It's displayed only while you're editing in WebMagic.
Click the Insert button.
A text field appears on the page. It represents the hidden field.
You can change the layout of a form and edit individual pieces.
To move an item from one place to another, select the item, then use the “Cut,” “Copy,” and “Paste” commands on the Edit menu. An item is selected when a thin, yellow line surrounds it.
To change the definition of an item, select the item, then choose “Form...” from the Element menu. The Form tool appears; it displays the values for that item. Make the changes, then click the Insert button.
To change the alignment of an item, place the cursor on the line that contains the item, then click the mouse button. Open the Format menu, then choose “Left,” “Center,” or “Right” from the Justify rollover menu.
WebMagic lets you build a form quite easily. To make the form functional, you need to write a program, called a cgi-bin script, and place it in the proper location on the Web server. This section provides an overview of the steps involved. It does not explain how to write the script, however.
Create the cgi-bin script.
Place it in the proper location on the Web server.
The default directory on a system running Out Box is /var/www/cgi-bin. Check with the server administrator if you're uncertain about the location.
If it isn't already open, open the Form tool by choosing “Form...” from the Element menu.
Place your cursor inside the form area on the page, then click to make sure that form is active.
Click the Script button on the Form tool.
Specify which cgi-bin script to use by typing its pathname in the Form Action field.
If you're unsure of the pathname, ask the server administrator for the correct pathname.
Click GET or POST to specify how you want to package and send the form data.
Unless you are familiar with these options and have a specific need for GET, use the default setting (POST).
Click the Insert button.
By default, when you start creating a form, you see a thin bracket along the left edge of the page. The bracket identifies that portion of the page as a form area. When you're finished creating the form, you can close the form area by pressing the <Enter> key twice. You create a new, empty paragraph that's not a part of the form.
By default, the page background is light gray. You can change the color or place an image on the background. For details, see:
To place an image on the page background:
Choose “Background/Text Colors...” from the Element menu.
The Background & Colors window appears. At the top of the window, you see a type-in field labeled “Background Image.”
Enter the name of the image you want to use or click the Browse... button. Use the file browser that appears to select the image.
Press the Apply button to change the background and leave the Background & Colors window open; press the OK button to change the background and close the window.
The background changes.
| Note: The location of the image file is important. It must be in your project root directory or one of its subdirectories. Otherwise, the background image won't appear when you view the file using your HTML browser. |
To change the color of the page background:
Choose “Background/Text Colors...” from the Element menu.
The Background & Colors window appears.
In the middle of the window, you see a list of items whose colors you can change. Click Background.
A blue triangle indicates it's selected.
Click in the color wheel to select a new color or adjust the RGB and value sliders.
The color chip changes to show the color you've selected.
Press the Apply button to apply the color change and leave the Background & Colors window open; press the OK button to apply the color change and close the window.
The background changes.
WebMagic lets you give your document a title that's different from the name of the HTML file in which your document is stored. For example, the document stored in a file named febproj.html could have a title of February Projects.
To give your document a title, place the cursor in the Document Title field, then type a title. The Document Title field appears near the top of the window. If it's not visible, choose “Document Title” from the View menu.
If you do not explicitly title your document using these steps, WebMagic uses the first level one heading in the document as the title. If your document has no level one headings, WebMagic titles it “Untitled”.
| Note: You should always give your document a meaningful title. Many HTML viewers efficiently search for titles, and they always display the title prominently while displaying the HTML page. |
It's important to view your document at various times during the authoring process to test links and to see how your document will appear to your viewing audience.
To view your HTML document using Netscape, use one of these methods:
Choose “Preview” from WebMagic's File menu.
Drag the document's icon onto the Netscape icon.
For information on publishing, see “Publishing a Document on the Web.”
If your system is running the Out Box server and your HTML file and all files it references reside in the public_html directory or a subdirectory, you do not need to do anything further to publish your files. They are automatically available for others to view. The URL for these files is http://<machinename>/~<username>/filename.
You need to take additional steps under the following circumstances:
You want to publish the document on another web server and all the local files that your document references are in a subdirectory of your project root directory. See “Copying a Document to Another Web Server.”
You do not want people to view your document until it's completed. Instead of creating the document in the public_html directory, you create it in a different directory. See “Copying a Document to Another Web Server.”
Your HTML file has links to files that are not in the same directory as your HTML document. See “Translating URLs Before Publishing a Document.”
This section describes how to copy your document to another web server. These instructions also apply if your system is running the Out Box server but you choose to author HTML documents in a directory other than public_html.
If you plan to publish your document on another web server, ask the server administrator for:
the name of the web server
a location on the server in which you can place your files
If your system is running the Out Box server and you want to publish the files on your system, the default location is the public_html directory in your home directory. See also “Creating and Publishing Files Using the public_html Directory.”
Copy your files into your assigned directory on the web server.
Make sure you keep all subdirectories intact when you copy them, otherwise your HTML document may not be able to follow links.
For example, say your HTML document (mydoc.html) is in your project root directory and the images to which it links are in the images subdirectory. Your administrator tells you to put your document in the /usr/netsite-docs/joe directory. You must copy your files onto the server so that /usr/netsite-docs/joe contains two items: the file mydoc.html and the directory images.
For more information on copying files and directories across the network, refer to the Desktop User's Guide, which is one of the Online Books accessible through the Help menu of the desktop Toolchest.
For the links in your Web document to work properly, the browser must be able find the files to which you've linked. It does using “directions.” For instance, it may look for a file named image1.gif in the /usr/images directory. You need to make sure that these directions are still valid when you copy the files to the web server.
If you have links to files that are not in the same directory as your HTML document or in one of its subdirectories (as in the example cited above), you need to translate the directions (URLs) before publishing the document. To do so, use the “Publish” command. It is similar to the “Find/Change...” command. Instead of searching and replacing text in your document, you search for and replace link references.
Ask the administrator for:
the name of the web server
a location on the server in which you can place your files
Choose “Publish” from the File menu.
A window appears that shows all the files and directories in your current working directory (project root directory) and shows all the Document URLs to which this document links.
If WebMagic does not display your project root directory, enter the full pathname of your project root directory in the Publish to file field, then press <Enter>.
If any items in the Document URLs list begin with a /, you need to change their translations by clicking the Change Translations button. See also “Setting Publishing Preferences” and “About URL Translations.”
Once you change the translations, you can save the HTML file with its new translations by entering the filename in the text entry field and clicking the OK button.
For each local file whose URL you translated, place a copy of the file in the appropriate location in your project root directory.
For example, if you translated the URL of the file face.rgb from /usr/images to images, you must now copy the file face.rgb into the images subdirectory of your project root directory.
Copy your files into your assigned directory on the web server.
Make sure you keep all subdirectories intact when you copy them, otherwise your HTML document may not be able to follow links.
Every document and file stored on a web server has a unique location on the Web called a Universal Resource Locator (URL). People can access a published document either by following a series of links, or by specifying the document's URL. The URL consists of three components:
the protocol used to retrieve the document, file, or program
the name of the web server
the pathname of the document, file, or program on the server
The sample URL below belongs to a document that is retrieved via the http protocol, resides on a web server named www.w3.org, and has a pathname of /hypertext/WWW/MarkUp/MarkUp.html.
http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html |
If you set up a work area as described in “Creating and Publishing Files Using the public_html Directory,” or “Creating and Publishing Documents For Use on Another Server,” WebMagic automatically translates the pathname of your project root directory (and its subdirectories) to keep all links intact.
If you did not set up a standard work area, your HTML document may contain links to files that are located on your own system, but are not in either the same directory as your HTML document or a subdirectory of the directory that contains your HTML document. To publish such a document, you may need to change at least one URL translation; see “Translating URLs Before Publishing a Document.”
The ultimate destination of your HTML document is some location on a web server (see also “About Publishing and URLs”). WebMagic helps you to author your document so that you can easily transfer it to any location on any web server and still preserve all links. The mechanism WebMagic uses is called URL Translations.
For example, URL Translations on your project root directory work in this way:
In the Preferences window, you specify your project root directory.
WebMagic then strips the pathname of your project root directory from every link you make, which makes all links relative rather than absolute (none of the links begin with /).
For example, with a project root directory of /usr/people/job/public_html, when you create a link from /usr/people/job/public_html/mydoc.html to /usr/people/joe/public_html/yourdoc.html, the link refers to only the filename (yourdoc.html), not the full pathname of the file.
Regardless of the full pathname of the directory on the web server in which your HTML document resides, your HTML document will always be able to find the appropriate peer files or subdirectories.
When creating links to other files on your system, try to copy or move those files into subdirectories of your project root directory to keep your document portable and publishable. See also “Setting Up a Work Area for Easy Publishing.”
If you plan to link to locations on your web server, the Server Root translation in the Preferences window must be accurate. When you create a link to a location on the web server, always start the link with / and provide a full pathname that does not include the path of the server root.
For example, if the server root is /var/www/htdocs and you want to link to the file /var/www/htdocs/fred/home.html, the link will be to /fred/home.html.
You can print HTML documents either in formatted PostScript or in raw HTML (so you can see all the HTML markup). You can also use the “Print” choice on the File menu to place the document in a file as either formatted PostScript or HTML.
When you print an HTML document, WebMagic prints only the current document and inline image links; it does not print documents that are referred to via an external link.
To print a file on a printer or to format it for printing then save it in a file, follow these steps:
Choose “Print” from the File menu.
In the Print Document window, use the Print file format menu button to choose to print it as PostScript or HTML.
Choose a page size and orientation.
To send the formatted output to a file rather than a printer, click in the box labeled Print to file, then enter a name for the file.
Choose a printer from the Available Printers list by clicking on its name.
Print the file by clicking the Print button.
WebMagic lets you set two types of preferences; click the type in which you are interested:
By default, WebMagic saves changes to the open file every 2 minutes, and creates a backup file each time it is saved (see “Saving Changes Automatically”). It's also set up to suppresses all HTML warning and error messages and use Netscape as the HTML browser. Lastly, when you drag and drop files onto the page, WebMagic automatically makes a link to the selected text or image.
To change this default behavior, follow these steps:
Choose “Preferences” from the File menu.
The Preferences window appears.
Choose “General” from the Preference Category menu button.
Specify which behavior you want to change.
To stop WebMagic from making a backup file after every save, click to remove the checkmark from the box next to Make a backup file when file is saved.
To stop WebMagic from saving automatically, click to remove the checkmark from the box next to Make a checkpoint file every 2 minutes while editing.
To continue to have WebMagic save automatically but to have it do so more or less frequently, keep the checkmark in the box, and change the value in the editable field from 2 to a different number of minutes.
To see all HTML warnings and errors when WebMagic reads an HTML or RTF file, click to place a checkmark in the box next to Show HTML warnings/errors.
To use an HTML browser other than Netscape, choose an item from the Preview menu button.
To change what happens when you drag and drop files while text or an image is selected, choose an item from the menu button labeled File drag-and-drop action. By default, WebMagic creates a link to the selected item. Instead, you can replace the selected item or open the Create Link window.
If you want to change Publishing Preferences, see “Setting Publishing Preferences.”
Save the preference values, or cancel your changes.
Click OK to save the changes for this file only and to close the window.
Click Save to save the changes for all WebMagic documents and to keep the window open. This saves the general and publishing preferences.
Click Cancel to close the window. If this is the first button you click in this window, no changes will be made.
If you are unfamiliar with URL translations, see “About URL Translations.” To learn more about publishing on the Web, see “Publishing a Document on the Web” and “About Publishing and URLs.”
By default, WebMagic automatically translates URLs when you create links, and it assumes that the server root is /var/www/htdocs and the project root directory is the directory from which you started WebMagic.
To change these default behaviors and to add custom URL translations, follow these steps:
Choose “Preferences” from the File menu.
The Preferences window appears.
Choose “Publishing” from the Preference Category menu button.
Specify which behavior you want to change.
To stop WebMagic from translating URLs when you create links, click to remove the checkmark from the box next to Translate URLs when creating links.
To change the value of the server root path, change the information in the field next to Server Root. Do not change the field below the Server Root field (i.e., keep the / as the only item in the field).
To change the value of the project root directory, change the information in the field next to Project Root. Do not change the field below the Project Root field (i.e., keep the field empty).
To add a custom translation, click the Add button, then enter the full pathname of the directory on your system in the User Defined field, and enter the pathname that the directory will have on the web server in the --> field.
To remove a custom translation, click to select it, then click the Delete button.
If you want to change General Preferences, see “Setting General Preferences.”
Save the preference values now displayed, or cancel your changes.
Click OK to save the changes for this file only and to close the window.
Click Save to save the changes for all WebMagic documents and to keep the window open. This saves the general and publishing preferences.
Click Cancel to close the window. If this is the first button you click in this window, no changes will be made.