by William Robert Stanek
A key ingredient for success in Web publishing is the ability to create documents with high visual impact and a high level of interactivity. Basic techniques that add to the visual impact of the document include using line breaks to create a column of
text and horizontal lines to visually divide the document into sections. To increase the interactive nature of your document, you can create links to other documents on the Web. You can also create internal links in your document that help guide readers to
key parts of your publication. You can add any of several types of lists to your document, which add to the visual impact of the document by clearly organizing material.
Sometimes the features that seem very basic aren't. Line breaks enable you to break a line without adding a space between the lines. Horizontal lines are graphical lines drawn across the width of the document. Although line breaks and horizontal lines
might seem straightforward, they both have many advanced features.
You can use the simple facility of a line break to format text on your document in many creative ways. Sometimes you don't want a space between lines of text, or you want to highlight an example by breaking the line and starting a new line showing the
example.
Here is how you can do this:
This section will contain: An introduction to the document
You can also use line breaks to format your text into a column or simple list. Not only does text formatted in a column add to the visual impact of the document, but it also gets the reader's attention. The following example shows how you could create
a simple list:
Our on-line publications include: Books Magazines Newspapers Newsletters
To add a line break with FrontPage, press Shift+Enter. Behind the scenes, FrontPage adds the appropriate markup for the line break.
You can use line breaks inside other text formatting without affecting the font or style of the previously declared formatting. If you insert a line break into a heading, the text before and after the break is formatted in the style and font of a
heading. All the line break does is start a new line, like the carriage return on a typewriter.
Netscape 1.0 introduced an extension to line breaks that enables you to clear the margins after a line break. This enhancement is extremely useful when you want to clear the left, right, or both margins after placing an image on the page. If you do not
clear the margin, the text might be aligned in a column to the left or right of the image. In FrontPage, you specify the clear margin attribute after you insert the line break.
To specify margin breaks, select the line break symbol by double-clicking it and then press Alt+Enter. This invokes the Line Break properties window. As you can see from Figure 9.1, this properties window has a series of radio buttons that enable you
to set line break properties.
Figure 9.1. Setting properties for line breaks.
NOTE
You can only see format marks such as line breaks if the Format Marks option of the View menu is selected.
In addition to creating more useful ways to break up text and images, Netscape 1.0 added a way to ensure that text stays together. A non-breaking space tag ensures that two words appear on the same line with no line breaks. A
non-breaking space is useful to ensure that text is formatted as you want it to be, but keep in mind that users might have to scroll their browser windows to finish reading the line of text.
To insert a non-breaking space, press Shift+Space.
Another way to easily add to the visual impact of the document is to use a horizontal line. The two basic styles of horizontal lines are shaded and unshaded. Because shaded lines appear to be engraved into the document and add a special
touch, unshaded lines aren't used very often.
Wherever the horizontal line should appear in the text of your document, open the Insert menu and select Horizontal Line. The great thing about horizontal lines is that you can use them to divide your document visually into sections. However, you
should use horizontal lines sparingly. Too many horizontal lines in the document can spoil the effect. Therefore, use them to highlight or to help the reader better identify the major sections of the document.
Figure 9.2 depicts a combined example using line breaks and horizontal lines. Although the figure shows only the outline of the document, you can see how horizontal lines can divide the document into four major sections.
Figure 9.2. You can break up the document using horizontal lines and line breaks.
Horizontal lines become helpful design tools with Netscape extensions. With these extensions, you can size the horizontal rule to make the separation of topics and subtopics on your pages more distinct. The size of a horizontal line is defined in terms
of pixels.
To separate topics and subtopics visually, you could use one size value for main topics and another size value for each level of subtopics. You should experiment with line sizes in your publications. A size of five pixels is usually sufficient to
separate main topics, and a size of two pixels is usually sufficient for subtopics. To set horizontal line properties, select a horizontal line you've added to the document and press Alt+Enter. This opens the dialog box shown in Figure 9.3.
Figure 9.3. Setting horizontal line properties.
You can align a horizontal line with the left margin, right margin, or center of the page and define the length of the horizontal line in pixels or as the percentage of the browser's window width. By combining the two attributes, you can create
powerful effects, such as the one shown in Figure 9.4.
Figure 9.4. Using fancy horizontal lines.
NOTE
Keep in mind that some browsers might ignore the Netscape sizing and alignment values for horizontal lines. These browsers also display the multiple horizontal lines in the example as ordinary horizontal lines. It is best to use multiple horizontal lines only on pages that are displayed by a Netscape-capable browser.
By default, the color of horizontal lines is set to the color of the background. You can override this default by selecting a specific color value for the horizontal line. As with other elements that use color, the Color field of the Horizontal Line
Properties dialog box has a pull-down list for selecting any of 16 basic colors. The Default value lets you return to the browser default color. The Custom value opens the Color dialog box, which allows you to choose from an expanded selection of colors or
create your own custom colors.
Some Web publishers want to make their documents stand out from other documents on the Web and use graphical lines based on GIF images instead of the standard horizontal line. These graphical lines, although visually appealing, have a major drawback in
that readers with text-only browsers see no line break at all. To a reader with a text-only browser, documents with graphical lines based on images have no subdivisions, which is a problem.
To clear up this problem, HTML 3 enables you to specify images to be used with the horizontal line. Because the image is specified as a part of the horizontal line element, a user with a graphical browser sees a graphical line and a reader with a
text-only browser sees a standard horizontal line.
You specify an image to use instead of the standard horizontal line using an attribute called SRC. To add this attribute, you need to invoke the Horizontal Line Properties window and then access the Extended Attributes
dialog box by clicking the button labeled Extended. In the Extended Attributes dialog box, select the Add button. This displays the Set Attribute Value window.
In the Set Attribute Value dialog box, enter the name of the attribute you want to add to the currently selected element and the value associated with the attribute. As shown in Figure 9.5, you should enter the attribute name SRC and the name of the image you want to use as a graphical line.
Figure 9.5. Setting a source for a rule.
NOTE
The image name can include the full path to the image. (Paths are covered later in this chapter.) Although you can use any image as the source for the horizontal line tag, you should use an image that creates a graphical line. By doing this, you follow the spirit of what the creators of HTML 3 intended and also ensure that readers see your image as a section divider.
A Web document that contains only paragraphs and headings is boring. Often, you want to highlight and emphasize key sections of the text. To do this, you can use a special set of HTML tags called character style tags. Character style tags
highlight your text using techniques such as boldface and italics. Unlike heading and paragraph tags that insert white space into the document, character style tags do not insert white space, which makes it possible to use character style tags within other
tags to highlight a single word or a group of words.
FrontPage enables you to select commonly used character styles directly from the Format toolbar. These styles include bold, italics, and underline. You can also add these and other character styles with the Font dialog box. To open this dialog box,
select Font from the Format menu. You can click the right mouse button and then select Font Properties on the pop-up menu that appears.
HTML has two subsets of character style tags: physical styles and logical styles. Physical styles tell the browser the precise format to display. HTML defines physical styles for bold, italics, underlined, strikethrough, and
monospace typewriter type. A browser accessing documents containing physical styles attempts to display the text using the strict format you have specified. If it is unable to do so, it might substitute another style for the one you are using, or worse, it
might ignore the tag and display the text in the standard style. Consequently, when you want to make sure text is highlighted, use logical styles. Logical styles are the preferred method of adding highlights to Web documents.
Unlike physical style tags, logical style tags do not specify a strict format. They tell your browser how the text should be used and let the browser display the text according to a set of configurations specific to the browser. The logical assignment
of the style to the browser ensures that your text is highlighted in the document in some way. HTML defines logical styles for citations, samples, definitions, code, variables, keyboard input, emphasized text, and strongly emphasized text.
FrontPage does not organize styles as specified by the standard. Styles are grouped into regular styles and special styles. These generic style groupings include both physical and logical styles, which might lead to confusion if a browser doesn't
support what FrontPage calls a regular style.
Just as in your favorite word processor, some regular style formats are directly accessible from the Format toolbar. Regular styles include emphasized, strongly emphasized, underlined, strikethrough, and monospace type. Browsers usually display
emphasized text in italics and strongly emphasized text in bold type. Because these are defined as purely physical styles in HTML, the exact style is ultimately determined by the browser.
Because the logical styles are preferred to the physical styles, the actual markup for bold and italics text is placed in the special style section. Despite what the Format toolbar indicates, when you select the I or B button, you are using emphasized
text and strongly emphasized text.
Netscape 1.0 introduced blinking text, and it has been a subject of controversy ever since. Imagine, for a moment, an entire paragraph or an entire page blinking on and off while you are trying to read it. Text blinking on and off is like a tiny neon
sign on your page that attracts the reader's eyes. Sometimes blinking text is good. You draw the reader's attention temporarily to a key area of the page. At other times, blinking text is bad. It distracts the readers while they are trying to read the text
on the page. The controversy surrounding the blinking text might be the reason the Internet Explorer does not support this feature.
TIP
The key to using blinking text is to confine it to a small area of your page and to be sure that it only affects a few key words.
Other styles in the special style section are not uniquely supported by browsers and duplicate styles you can create using other means. Consequently, these styles are rarely used:
Citation | Indicates the text is a citation. Most browsers display this style in italics. |
Code | Indicates that text is computer code or a program sample. Most browsers display this style in a monospace font such as Courier. |
Definition | Indicates that you are defining the highlighted word. Most browsers display this style in italics. |
Keyboard | Indicates text that a user would type in on the keyboard. Most browsers display this style in a monospace font such as Courier. |
Sample | Indicates a sample of literal characters. Most browsers display this style in a monospace font such as Courier. |
Variable | Indicates that text is a variable name such as those used in computer programs. Most browsers display this style in italics. |
The Font tab of the Font dialog box supports the most commonly used styles (see Figure 9.6). In the Font Style field, you see options for the regular, italics, bold, and bold italics styles. In the Effects field, you see options for the underline,
strikethrough, and typewriter styles. You can combine any of the styles used in the Font tab. The Sample area of this tab gives you a preview of how your chosen style affects text.
Figure 9.6. Setting commonly used text styles.
The Special Styles tab of the Font dialog box supports the styles you'll use less frequently (see Figure 9.7). To insert a style, activate the checkbox associated with the style by clicking it. Although the Special Styles tab lets you combine styles,
you generally should not. As with the Font tab, the Sample area of the Special Styles tab gives you a preview of how your chosen style affects text.
Figure 9.7. Setting special text styles.
Figure 9.8 shows an example of how styles are displayed in FrontPage and in most browsers.
Figure 9.8. Using styles.
The Web without links would not be interactive, so now it is time to put the "hyper" into hypertext. Most Web documents contain hypertext links. Links act as pointers to other resources or files on the Web. Using links, you can connect text,
graphic images, and multimedia objects to your documents. The great thing about hypertext linking is that linked text, images, or objects can be located anywhere on the Web. This means you can add images to your document that don't even reside on your Web
server. For example, if you create a resource guide to the latest in cutting-edge Web technologies, you might want to reference Pepsi's Landing Gear page. You could (with Pepsi's permission) use the Landing Gear logo as the link to the Landing Gear page at
Pepsi.
To do this, you need to know the URL of the image and the URL of the Landing Gear home page. These URLs are
http://www.pepsi.com/landinggear/
http://www.pepsi.com/landinggear/images/top2.gif
Although links might look like a tangled mess, the mess can be easily untangled. Links tell the browser where to send a request for a particular file. Initially, the browser does not care what type of file it is supposed to retrieve; it simply attempts
to retrieve the file. To get to a file, browsers need to know the location of the resource. The resource's location is specified as a Uniform Resource Locator, commonly called a URL.
The first URL tells the browser to use the hypertext transfer protocol to access a file on the www.pepsi.com Web server. Here, the file is the base document in the
/landinggear directory. The second URL tells the browser to use the hypertext transfer protocol to access a file called top2.gif on the www.pepsi.com Web server. Here, the file is a graphic image in the /images/top2.gif directory. URLs such as these with complete address information enable you to link your documents to files on other Web servers.
The address in a link is not visible unless the mouse pointer is over the anchor text or graphic. The anchor is the portion of the link that is visible when a browser displays the document. To activate a link, you move your mouse pointer over the
anchor and click the left mouse button. If a line of text is the anchor, the reader can click the text to activate the link. If an image is the anchor, the reader can click the image to activate the link. You can also create an anchor that uses both text
and an image. More information on using images and linking to images can be found in Chapter 10, "Enhancing Your Web Publication with Imagesthe Easy Way."
As Figure 9.9 shows, text links generally appear in blue letters and images with links have a blue border around them. The first link uses text to anchor the link in the document. The reader clicks The Writer's Gallery to activate the link. The second link uses an image to anchor the link in the document. The reader clicks the image to activate the link. The third link combines a text and image anchor. The
reader clicks either the text or the image to activate the link.
Figure 9.9. Using text and images to create links.
As you can see, hypertext links to text and objects can be the most powerful features on your document. You can add links to your document in three key ways:
You can access local filesfiles on your local Web serverusing a relative file path. URLs with relative file paths generally do not name a protocol or a Web server in the link. When you use a relative path to locate a file, you locate
the file in relation to the current file. Being able to access a file in relation to the current file implies that you have already accessed a file on a particular Web server.
You can use relative file paths in three key ways:
orders.html
../orders.htmlThis file is located two directories above the current directory:
../../orders.html
info/orders.html
TIP
Good links do not say "Click here." A "click here" link disrupts the flow of the text and the natural thought processes. The interactive nature of the Web is such that you should never have to say "click here." Build hypertext links into the text and by doing so, you create documents that flow. When using links, keep in mind that links are highlighted in the document. Typically, links are shown in underlined blue letters, which makes them stand out from surrounding text.
Another way to access files is directly. You do this by specifying the complete path to the file you want to access. Although you must specify the protocol to be used for files directly accessed on a non-local Web server, you do not have to specify the
protocol for files directly accessed on a local Web server.
This means that there are two key ways to access files directly:
http://www.unitedmedia.com/comics/dilbert/index.html
/comics/dilbert/index.html
TIP
Designing good links is easy once you know the basics of using relative and direct paths. The key is to keep the anchor text for the link short but descriptive. Usually this text should be three to five words describing the link in a way that is clear to the user. Anchor text can be the key words of a sentence, but sometimes you might want the anchor text to include an entire short-but-descriptive sentence. Later sections of this chapter show how you can better organize links using lists and menus.
Internal document links are called bookmarks. Bookmarks can provide powerful navigation mechanisms for your readers and are especially useful in long documents. Using bookmarks, you can provide ways to quickly jump to key sections of any
document.
Creating links within documents is a two-part process. First, you specify a link with a key word in a form similar to other links you have seen. The next step is to label the location within the document you want the reader to jump.
The key word used in the link and anchor name must match exactly. When a user activates a bookmark, the section you labeled is displayed. If the bookmark is within the current document, the browser quickly searches the document for the label containing
a key word that matches the key word in the link. When the browser finds the matching key word label, the browser displays the corresponding section of the document. If the internal link is within a different document, the browser loads the document and
then searches for the label that matches the key word in the link. The location of the label relative to the link in the document does not matter. As long as the label is within the body of the document, the browser finds it.
Using bookmarks, you can create an index for your document such as the one shown in Figure 9.10. If you click the overview link, your browser searches for the key word overview. When your
browser finds the key word, the section associated with the key word is displayed. In the example, the browser scrolls forward and displays the overview section of the document. The ellipses show where actual document content belongs.
Figure 9.10. After you activate a link, your browser jumps to a section associated with the key word.
You can specify bookmarks to other documents in many ways. Using relative paths and key words, you can access specific locations in documents on the local Web server. Using direct paths and key words, you can access specific locations in documents
located anywhere on the global Web.
You can use relative paths with bookmarks in three key ways:
You can use direct paths with internal links as well. The two key ways you use internal links with direct paths include the following:
CAUTION
Be careful when specifying internal links to someone else's document. Web documents tend to change frequently, and a key word label that is specified today might not be there tomorrow.
FrontPage offers a very friendly interface for creating links and bookmarks. This section takes you step-by-step through these processes.
You can easily create a link to an open page in the FrontPage Editor. In the Editor, select the text that identifies the link and then either choose Hyperlink from the Edit menu or click the Standard Toolbar's Create or Edit Hyperlink button. This
opens the Create Hyperlink dialog box shown in Figure 9.11.
Figure 9.11. Creating a link to an open page.
In the Create Hyperlink dialog box, click the Open Pages tab and then select the page to which you want to link by double-clicking the title text for the page. Alternately, you can use the cursor keys to move up or down the list of open pages and press
the Enter key to make your selection.
As you make your selection, the Hyperlink Points To field displays the URL to which you link. If you want to link to a bookmark on the page you selected, locate the bookmark in the drop-down list in the Bookmark field.
You can create a text link to a page or file in the current web. In the FrontPage Editor, select the text that identifies the link and then either chose Hyperlink from the Edit menu or click the Create or Edit Hyperlink button. In the Create Hyperlink
dialog box, select the Current FrontPage Web tab. As shown in Figure 9.12, this opens a new view for the dialog box. If you know the URL of the page or file you want to link to, enter it in the Page field.
Figure 9.12. Creating a link to a resource in the current web.
If you do not know the URL, click the Browse button. Select the page or file you want to link to and then click the OK button. If you want to link to a bookmark on the page you selected, enter the name of the bookmark in the Bookmark field and then
click the OK button.
When creating a link to a Web resource, you have to specify the protocol that will be used to transfer the file. FrontPage enables you to easily specify the following protocols: file, FTP, Gopher, Telnet, http, https, mailto, news, and WAIS.
In the FrontPage Editor, select the text that identifies the link and then either chose Hyperlink from the Edit menu or click the Create or Edit Hyperlink button. In the Create Hyperlink dialog box, select the World Wide Web tab. As shown in Figure
9.13, this opens a new view for the dialog box.
Figure 9.13. Creating a link to a Web resource.
NOTE
See the section called "Using Alternate Protocols in Web Documents" at the end of this chapter for more information protocols used in Web documents.
After you select the transfer protocol from the list of supported protocols, the Editor creates the protocol portion of the URL in the URL field. In the URL field, enter the absolute URL of the Web page or resource to which you want to link. When you
are done, click the OK button.
NOTE
If you want to use a protocol that is not on the list, select Other from the Protocol pull-down menu.
When you create a link to a new page, FrontPage creates the page and then creates a link to it from the selected text. In the FrontPage Editor, select the text that identifies the link and then either select Hyperlink from the Edit menu or click the
Create or Edit Hyperlink button. In the Create Hyperlink dialog box, select the New Page tab. As shown in Figure 9.14, this invokes a new view for the dialog box.
Figure 9.14. Creating a new page.
In the Page URL field, enter the URL for the new page. In the Page Title field, enter a title for the new page. If you enter a title first, the FrontPage Editor fills in a URL based on the title. To edit the page as soon as the link is created, select
the Edit New Page Immediately radio button. To create the new page and add a task to finish the page to the current web's To Do List, select the Add New Page to To Do List radio button. When you are finished creating the link, click the OK button.
FrontPage also lets you create a link from any open page to another page in the current web using the FrontPage Explorer. In the FrontPage Explorer, select the page to which you want to link by clicking and holding the left mouse button and then drag
the mouse pointer from the FrontPage Explorer to the line in the FrontPage Editor at which you want to create the link and release the mouse button.
FrontPage creates the link to the page on the line you chose. The anchor text for the link is the name of the page you linked from. As shown in Figure 9.15, the best way to create a link from the FrontPage Explorer to the FrontPage Editor is to resize
them so they can be displayed side by side.
Figure 9.15. Creating a link from the FrontPage Explorer.
Any link you create can be updated, changed, or deleted as necessary. This section guides you through the link editing process.
FrontPage enables you to easily change a link. In the FrontPage Editor, place the pointer anywhere in the text containing the link, or select any part of the link and then either chose Hyperlink from the Edit menu or click the Create or Edit Link
button. This opens the Edit Hyperlink dialog box.
To change the link to an open page, select the Open Pages tab and then edit the Open Pages and Bookmark fields. To change the link to a page in the current web, select the Current Web tab and then edit the Page and Bookmark fields. To change the link
to a page in the World Wide Web, select the World Wide Web tab and then edit the URL field. To change the link to a new page, select the New Page tab and then edit the Page URL and Page Title fields. When you are done editing the link, click the OK button.
The FrontPage Editor enables you to delete links in one of two ways. You either delete the link entirely or delete part of the link text. As you will see, deleting a link is not the same as cutting the link and its associated text using the cut feature
of the Editor.
To delete an entire link in the FrontPage Editor, place the insertion point on the link and then choose Unlink from the Edit menu. The FrontPage Editor deletes the link but not the text associated with the link.
To delete part of a link in the FrontPage Editor, select the text from which you want to delete the link and then choose Unlink from the Edit menu. The FrontPage Editor deletes the link from the text you selected but not the text associated with the
link.
Sometimes before you edit a link, you want to see where the link leads to. FrontPage enables you to follow a link from an open page to the targeted page or bookmark. If the page is not already open in another window, the FrontPage Editor opens the
target page for editing and makes it the active page. If the link is to a bookmark, the FrontPage Editor displays the section of the page containing the bookmark. If the target page is not in the current web, FrontPage opens a copy of the page that you can
save to the current web.
To follow a link in the FrontPage Editor, place the pointer anywhere in the text containing the link or select any part of the link and then chose Follow Hyperlink from the Tools menu. While FrontPage is fetching the page, the Follow Hyperlink pointer
displays. After following a link, you can follow the link back to its source by clicking the Follow Back button. When you do this, the FrontPage Editor opens the source page and displays the section of the page containing the source of the link.
NOTE
Following a link from the FrontPage Editor to a page or resource on the World Wide Web might take a long time. The FrontPage Editor does not time out because it assumes that the page link is valid and that the server the resource resides on is valid. If FrontPage doesn't display your page after a suitable amount of time, you might have to stop following the link by choosing Stop from the Tools menu or clicking the Stop button.
Because bookmarks are links within documents, you create and edit them using a slightly different technique than what you use with other links. Creating a bookmark is a two-part process that involves labeling the bookmark and creating a link to the
bookmark.
When you label a bookmark, you give the bookmark a name. To create a bookmark in the FrontPage Editor, select one or more characters of text and then select Bookmark from the Edit menu. This opens the Bookmark dialog box shown in Figure 9.16.
Figure 9.16. Labeling a bookmark.
In the Bookmark Name field, enter the name of the bookmark. The bookmark name can include spaces but must be unique within the document. Because the name must be unique in the current document, the Bookmark dialog box shows you a list of bookmark names
you've already defined. When you are done, click the OK button.
After a bookmark is labeled, you can create a link to it. To create a link to the page containing the bookmark in the FrontPage Editor, select Hyperlink from the Edit menu or click the Create or Edit Hyperlink button. This opens the Create Hyperlink
dialog box. You can link to a bookmark in an open page, a page in the current web, or a page on the World Wide Web.
To link to a bookmark on an open page or in the current web, select the appropriate tab and then choose the bookmark name from the Bookmark drop-down list. To link to a bookmark on the World Wide Web, select the World Wide Web tag and then enter the
bookmark name in the URL field. Be sure to place a pound-sign character (#) between the bookmark name to the URL, such as
http://tvp.com/fiction.html#Mystery
http://www.tvpress.com/../index.html#orders
When you are done, click the OK button.
Changing or deleting a bookmark in the FrontPage Editor is easy. To do so, either place the pointer anywhere in the text containing the bookmark or select any part of the bookmark and then select Bookmark from the Edit menu. This opens the Bookmark
dialog box.
To change the name of the bookmark's label, simply enter the new name. To delete the bookmark, click the Clear button. When you are done editing the bookmark, click the OK button.
You can visit a bookmark on the current page or on another page using the FrontPage Editor. When you visit a bookmark on the current page, the corresponding link does not have to exist. However, when you visit a bookmark on another page, there must be
a link to that page and the page must have a label that corresponds to the key word in the link.
To visit a bookmark on the current page, select any text and then choose Bookmark from the Edit menu. In the Other Bookmarks on this Page field, select the bookmark that you want to visit and then click the Goto button. The FrontPage Editor displays
the section of the page containing the bookmark you selected. You can close the Bookmark dialog box by clicking the OK or Cancel button.
To visit a bookmark on another page, place the pointer anywhere in the link and then select Follow Hyperlink from the Tools menu. The FrontPage Editor opens the new page and displays the section of the page containing the bookmark you selected.
Lists are one of the most useful tools in your writing and publishing toolkit. Lists can give a clear order to your ideas and add to the visual impact of your document. You can use lists to grab the attention of readers, especially those readers who
might be simply browsing or Web-surfing your site in their quest to find new and interesting places to visit.
The best lists are designed for a specific purpose. For example, the steps for creating a Web document discussed in this chapter would make a great list:
This type of list is called a bulleted list. Bulleted lists are often used to outline goals, objectives, or tasks that have no specific order. Bulleted lists are also called unordered lists. This list, however, is in a specific order, so a
bulleted list is not the best way to present it.
A better way to present the list of steps for creating a Web document is to number the list:
This type of list is called a numbered list. Numbered lists are used when tasks must be performed in a specific order. Numbered lists are also called ordered lists.
Lists are also used in the glossary section found in many nonfiction books. A glossary contains a list of key words and their definitions. You can use definition lists whenever you want to associate a key word with a concept or definition. Many
definition lists look something like this:
Hypertext Markup Language
The Hypertext Markup Language is a markup language based on the Standard Generalized Markup Language that enables you to format information in visually appealing ways without sacrificing ease of use and the potential for wide distribution.
Standard Generalized Markup Language
The Standard Generalized Markup Language forms the basis for most markup languages and is an advanced language with few limitations.
Virtual Reality Modeling Language
Virtual Reality Modeling Language is an advanced markup language based on the Open Inventors ASCII File Format that enables you to create multidimensional documents.
Although the three fundamental types of lists are strongly supported by the HTML standard, the standard defines two additional types of lists designed primarily for programmers. You can use menu lists to list the contents of program menus. You can use
directory lists to list the contents of directories. Menu lists and directory lists have fallen into disuse and are poorly supported by browsers. If you use a menu or directory list, the chances are very high that your browser will display the list
following the rules for another list type. It is generally not a good idea to use menu or directory lists.
The FrontPage Editor enables you to create the five list types defined in the HTML standard. However, like Web browsers, the Editor only uniquely supports the three primary typesbulleted lists, numbered lists, and definition lists. For this
reason, the sections that follow focus only on the primary list types.
Bulleted lists outline goals, objectives, or tasks with no specific order. When your browser sees the beginning of a bulleted list, it does two things:
As Figure 9.17 shows, bulleted lists are generally single spaced. Although most browsers display the bullet as a large solid dot, the actual size and shape of the bullet might be different in your browser. Text browsers, such as Lynx, display the
bullet as an asterisk. Other browsers use a different symbol for the bullets at each level of nested lists.
Figure 9.17. Using a bulleted list.
Creating bulleted lists with the FrontPage Editor is a three-step process. The first step is to begin the list. To begin a bulleted list at the insertion point, click the Bulleted List button or select Bullets and Numbering from the Format menu.
When you select Bullets and Numbering from the Format menu, you see the dialog box shown in Figure 9.18. To display this dialog box at any time, double-click the list item and then press Alt+Enter. If the Bulleted tab is not active, display it by
clicking the tab label. To select the type of bullet for the list, click the graphical icon that depicts the type of bullet you want to use.
Figure 9.18. Selecting the shape of your bullets.
The second step is to enter your list items. FrontPage automatically continues the list for you. To add a list item, simply press the Enter key.
The final step is to end the list. When you want to end the list, press the Enter key twice or press Ctrl+Enter.
FrontPage also enables you to reformat existing text as a bulleted list. To do this, select one or more paragraphs and then click the Bulleted List button or select Bullets and Numbering from the Format menu.
A definition list is generally for words and their definitions, but that does not mean you must use glossary lists for this strict purpose. You can use glossary lists whenever you want to associate a key word, phrase, or sentence with a concept. Each
item in a definition list contains two elements:
As the example in Figure 9.19 shows, glossary lists are usually formatted with the terms and definitions on separate lines. The terms are aligned with the left margin, and the definitions are indented. Additionally, all aspects of glossary lists are
generally single spaced.
Figure 9.19. Using a glossary list.
To create a definition list with the FrontPage Editor at the insertion point, choose Definition from the Format toolbar's Change Style pull-down list. The Change Style pull-down list is the first pull-down list on the Format toolbar. This inserts the
appropriate markup to begin the definition list.
Now you can enter a key word or phrase you want to define. After you press the Enter key, you can enter a definition for the term. You can continue to add terms and definitions to the list in this fashion. To end the list at any time, press the Enter
key twice or press Ctrl+Enter.
TIP
The easiest way to enter more than one definition for a term is to insert a line break. As you may recall, you insert line breaks by pressing Shift+Enter.
Numbered lists are also called ordered lists. Each item in an ordered list is consecutively numbered or lettered. Letters are used only when you nest lists. When a browser sees the beginning of an ordered list, it does three things:
As you can see from the example shown in Figure 9.20, numbered lists are single spaced like other types of lists discussed earlier. You should use numbered lists when tasks must be performed in a particular order or when you want to add specificity to
the list. When you number a list of resources such as those shown in Figure 9.20, you add specificity to the list. Instead of the list being just another list of resources, the list represents the 12 reference works you wish were on your bookshelf.
Figure 9.20. Using a numbered list.
Creating numbered lists with the FrontPage Editor is similar to creating bulleted lists. The first step is to begin the list. You do this by clicking the Numbered List button or selecting Bullets and Numbering from the Format menu.
When you select Bullets and Numbering from the Format menu, you see the dialog box shown in Figure 9.21. To display this dialog box at any time, double-click the list item and press Alt+Enter. If the Numbered tab is not active, display it by clicking
the tab label. To select the type of sequencing for the list, click the graphical icon that depicts the alphabetic or numeric sequencing you want to use.
Figure 9.21. Selecting the alphabetic or numeric sequencing of your list.
Sometimes you want to start your numbered list at a specific value, especially if you are continuing a list from a previous section of the page. You can use the Count field of the Numbered tab to select a specific start count for the sequence.
FrontPage enables you to reformat existing text as a numbered list. To do this, select one or more paragraphs and then click the Numbered List button or select Bullets and Numbering from the Format menu.
A nested list is a list inside another list. In HTML, you nest a list by including the entire structure for a list within your current list. For example, you could put bulleted lists within your numbered list structure.
To create a nested list, move the insertion point to where you want the nested list to begin. Next, follow the procedures for creating the type of list you want to insert. When you are finished, press the Enter key twice to end the nested list. You
might have to press the Enter key a third time to get back to the previous list type. If you press the Enter key a fourth time, you end the previous list type as well.
FrontPage enables you to quickly change one list type to another list type. For example, you can change a bulleted list to a numbered list or a numbered list to a bulleted list.
To change a list type, select the entire list you want to change by moving the mouse cursor to the area where the list begins and double-clicking. You know you've selected the list because the FrontPage Editor highlights the entire section containing
the list.
After the list is selected, open the List Properties dialog box by selected Properties from the Edit menu or pressing Alt+Enter. In the Style tab shown in Figure 9.22, select the new list type and then click the OK button.
Figure 9.22. Changing list types with the Style tab of the List Properties dialog box.
NOTE
Because FrontPage changes only the formatting of the outermost select list, the formatting of any nested lists is retained. Also, when you change a list to a definition list, all list items are changed to the format for definitions, not terms.
The Web was designed to be an open-ended multimedia system based on hypertext. However, the hypertext transfer protocol is not the only protocol you can reference in your Web publications. You can reference files using any valid protocol in the
hypertext links used by your documents. The format of URLs in hypertext links should follow the URL scheme.
The next sections explain how to use the following protocols in your Web documents:
Thousands of files are available on FTP sites around the world. Your Web documents can contain links to files that are retrieved using the File Transfer Protocol. The general form for using a hypertext reference to an FTP file is
ftp://host/path
If you specify a directory path instead of the full path to a file, the reader's browser displays a list of the directory's contents. The following hypertext reference retrieves a list of the MS-DOS directory from an FTP server at the University of
Florida:
ftp://ftp.eng.ufl.edu/pub/msdos
Gopher information is presented to readers as easy-to-navigate menus. You can enable readers to access Gopher files using a hypertext reference, such as
gopher://host/path
The following hypertext reference retrieves information on the DILS Project from a Gopher server at the University of Toronto:
gopher://gopher.epas.utoronto.ca/11/cch/disciplines/medieval_studies/keefer
You can use a special type of link that starts a create-mail session in the reader's browser:
This mailto reference tells the reader's browser to open a create-mail session that is sent to william@tvp.com. This type of link enhances the interactivity of the page and provides a mechanism for getting feedback from
readers. Don't forget to anchor the link to the page with text or graphics that readers can click.
In your Web documents, you can reference any of the thousands of newsgroups on the Internet in two key ways: by using the reader's local news server or through NNTP. Referencing newsgroups on a local news server is easyyou just specify the name
of the newsgroup in the following form:
news:newsgroup.name
Here you could include a link to the alt.books.reviews newsgroup as follows:
The network news transfer protocol transfers postings to and from a news server. Here's how you can use NNTP to link to the alt.books.reviews newsgroup:
nntp://news.aloha.com/alt.books.reviews
CAUTION
Generally, to access the news server, the reader must be a known client. Although this protocol could be useful to an exclusive group of known users, most readers access your pages from a remote site and are unable to use the named news server. Consequently, you should use reference newsgroups available on the reader's local news server using news whenever you want to ensure broader accessibility.
Using Telnet, you can enable readers to access an interactive service on a remote host. In the Telnet session, readers can input commands at a command prompt as if they were logged on to the remote host. You can reference Telnet in your Web documents
as follows:
You can reference indexed databases on wide area information systems using a WAIS URL. To use WAIS, the reader's browser must either be configured to invoke a WAIS client that the reader has installed on their system or be able to act as a WAIS client.
You can reference WAIS in your Web documents as follows:
Scrolling marquees are moving banners that scroll across the screen. Using this feature of Internet Explorer, you can provide readers with real-time information such as stock reports, sports scores, and late-breaking news. You can also animate
advertisements and any other type of information you want to provide at the site.
Marquees are animated billboards in cyberspace. Although marquees can be located anywhere within the body of your HTML document, the key to using marquees is to position them smartly in an area where they are not a distraction. The best locations for
scrolling marquees are in the top or bottom portion of a document. In this way, the marquee is seen either immediately or when the user is nearly finished reading the page.
The development team at Microsoft did a great job of ensuring scrolling marquees aren't as distracting as blinking text. To do this, they provided a number of controls over how a marquee is animated, sized, and positioned, and more importantly, you can
control when a marquee ceases to scroll.
To add a basic marquee to your page, select Marquee from the Insert menu. This opens the Marquee Properties dialog box shown in Figure 9.23. In the Text field, enter the message to scroll and click the OK button. FrontPage inserts the marquee following
the defaults for positioning and behavior.
Figure 9.23. Creating a scrolling marquee.
Think of a marquee as an object on the page whose position can be fine-tuned. The outline of the marquee in the FrontPage Editor is highlighted with a dashed line. Click once on the marquee to manipulate the marquee in your page. On both ends and in
the middle of a selected marquee are resizing points. If you move the pointer to a resizing point and click and hold the left mouse button, you can resize the marquee by dragging the pointer. If you move the pointer to a different area of the marquee and
click and hold the left mouse button, you can drag the marquee to a new location on the page.
Using the Align with Text field of the Marquee Properties dialog box, you can specify how text around the marquee is aligned. Three values for this field enable you to align text around the marquee with the top, middle, or bottom of the marquee. When
the marquee does not fill the width of the browser's window, you find that these values are very useful.
Unless otherwise specified, marquees occupy only a minimum amount of screen space. You can reserve a larger area for the marquee using the Specify Width and Specify Height attributes of the Marquee Properties dialog box. You can specify the width of a
marquee as an absolute value in pixels or as a relative percentage of screen width. Similarly, the height of a marquee can be specified as an absolute value in pixels or as a relative percentage of screen height.
Usually, you want your marquee to run along the full length of the window. This makes the marquee easier to read and follow. The marquee defined in Figure 9.24 occupies 25 percent of the screen height and 100 percent of the width.
Figure 9.24. Adjusting the width and height of a marquee.
Setting the marquee text off from other text on the page is often important. To clearly differentiate between the area reserved for the marquee and other text, you can use the Background Color property. As with other color properties, you have a
pull-down list that lets you access predefined colors.
Ensure your scrolling message is readable against the background color you choose. If it is not, you might want to change the default color for text on the page with the Page Properties dialog box or change the background color of the marquee.
You can control the way marquees move across the screen. Usually, marquees scroll in from the right, move all the way across the screen, and go completely off. You can use four key fields to alter the movement of the marquee: Behavior, Direction,
Repeat, and Movement Speed.
The Behavior field helps you animate the marquee in unique ways. Scroll is the default behavior. A sliding marquee starts completely off one side of the screen, scrolls all the way into position, and then stops. An alternate marquee starts completely
off one side of the screen, scrolls in until it touches the far margin, and then moves back and forth within the area reserved for the marquee.
Using the Direction field, you can change the direction the marquee scrolls. By default, marquees scroll from left to right. If you select Right, the marquee scrolls from right to left.
By default, marquees continuously scroll across the screen. If you deselect the Continuously value of the Repeat field, you can define how many times a marquee repeats. Setting the repeat field to a finite value helps to ensure that your scrolling
message isn't distracting.
Two properties control how fast a marquee moves across the screen. You use the Amount field to specify the number of pixels the marquee moves each time it is drawn on the screen. You use the Delay field to specify the wait in milliseconds between each
successive redraw. Figure 9.25 shows the properties for a slow-moving marquee, and Figure 9.26 shows the properties for a fast-moving marquee.
Figure 9.25. A slow-moving marquee.
Figure 9.26. A fast-moving marquee.
Netscape Navigator plug-ins extend the capabilities of the browser and provide native support for new data types. Plug-ins are player or reader modules for software applications that are created specifically for use with the Netscape Navigator. Most
plug-ins are designed to be used on a specific platform, such as Windows 95 or Macintosh. However, some plug-ins, such as those programmed in Java, can be platform-independent. You can find Netscape plug-ins for Macromedia Director, Apple QuickTime movies,
Adobe Acrobat PDF documents, Microsoft Video for Windows, and Java.
Although plug-ins for the Netscape Navigator are created primarily by third-party vendors, they provide features which, when merged with the baseline features, are indistinguishable to the user. This means the end user can use a plug-in without
worrying about why or how the plug-in is activated and what happens when the plug-in is activated.
The way you incorporate files for use with plug-ins is by accessing the Other Components submenu and then selecting the Plug-Ins menu item. You find Other Components as an option on the Insert menu of the FrontPage Editor.
The Plug-In Properties dialog box is shown in Figure 9.27. Most of the plug-in properties are set to acceptable default values automatically. The key fields you want to fill in are Data Source and Message for Browsers Without Plug-in Support. You use
the Data Source field to enter the URL path to the data file you want to use. The message for browsers without plug-in support is displayed any time a browser cannot run Netscape plug-ins.
Figure 9.27. Setting properties for plug-ins.
Netscape designed plug-ins with three things in mind:
Plug-ins are seamless because they are configured like built-in helper applications. If the plug-in is available, it is used without opening a separate window to display the output. The output of the plug-in is displayed in the current window. If a
plug-in is not available, the browser looks in the helper application configuration table to find an application that can display the object inline. The output of the helper application is also displayed in the current window.
This design concept enables you to embed any type of object into your Netscape-enhanced documents. For example, if your browser is configured to use Windows Paintbrush to display PCX-formatted images, the embedded element shown in Figure 9.28 starts
Windows Paintbrush, builds the image called TIGER.PCX, and then displays the image wherever and however you placed it in the current document.
Figure 9.28. Using a plug-in to display PCX images.
The functionality of plug-ins is also important. The values you pass to plug-ins are platform-independent, meaning a property that is valid for a Windows 95 version of a plug-in should be valid for a Macintosh version of the plug-in. Regardless of
platform, plug-ins can be used in one of three modes:
In embedded mode, the output of the plug-in is placed in the current window. This means embedded objects are a part of a larger HTML document and can be used just like GIF and JPEG images. You can use embedded plug-ins with inline video, animation,
graphic objects, and anything else you want to display within the current window. A key concept with embedded plug-ins is that they can be highly interactive. For example, if the plug-in allows for it, you could use all the controls for dynamic sources and
apply them to your embedded object.
You can use embedded objects like any other type of object on the page. To adjust the size of the embedded object, you use the Height and Width properties of the Size field. Figure 9.29 shows how you can embed a 100×100 image in BMP format. Keep
in mind that as long as the user has a plug-in capable of handling images in BMP format, the plug-in executes and the image displays.
Figure 9.29. Using a plug-in to display BMP images.
In full-screen mode, the output of the plug-in fills the browser's inner window but leaves the user controls in place. This means users have full access to Netscape's pull-down menus, toolbar, directory buttons, and URL window.
You do not need to enter special size properties for full-screen plug-ins. Full-screen plug-ins are sized automatically and can be used with any type of object, including video, animation, and graphic objects. The Adobe Acrobat plug-in uses the
full-screen mode. Using the Acrobat plug-in, you can access PDF documents.
Figure 9.30 shows how you can use a PDF document as a data source. As long as the user has the Adobe Acrobat plug-in, the PDF document displays automatically.
Figure 9.30. Using a plug-in to display PDF documents.
In hidden mode, the output of the plug-in is not seen on the screen. You can use hidden plug-ins with any files that users do not have to see to experience, such as an audio file. You can also use hidden plug-ins to perform background functions, such
as decrypting or decompressing files for display. If you want to use a hidden plug-in, select the Hide Plug-In field.
Using the properties of the Layout field, you can precisely place your plug-in. The Alignment property lets you specify how the plug-in is aligned with text on the same line or area of the page as the plug-in. In the drop-down list for the Alignment
property, you see nine alignment values. Because these are the same alignment values used with images, you'll find a complete discussion of these values in Chapter 10, "Enhancing Your Pages with Imagesthe Easy Way."
The Border Thickness property determines the thickness of the border drawn around embedded objects that are linked to other resources. You specify border thickness in pixels. A value of 5 for this property indicates the plug-in should have a five-pixel
wide border drawn around it if it is linked to another resource.
The spacing around your plug-in is also important. As with borders, you specify the amount of horizontal and vertical space in pixels. Horizontal spacing is the area above and below your plug-in. Vertical spacing is the area to the left and right of
the plug-in.
When you add a plug-in to a page, the FrontPage Editor inserts an image that depicts a piece of a jigsaw puzzle. You can double-click this image to open the Plug-In Properties dialog box.
Click once on the plug-in icon to manipulate the size and position of the plug-in. On both ends and in the middle of a selected plug-in are resizing points. If you move the pointer to a resizing point and click and hold the left mouse button, you can
add vertical and horizontal spacing by dragging the pointer. If you move the pointer to a different area of the plug-in icon and click and hold the left mouse button, you can drag the plug-in to a new location on the page.
Many plug-ins have unique properties beyond these basic layout settings. You can specify values for unique properties by clicking the Extended button of the Plug-In Properties dialog box. In the dialog box shown in Figure 9.31, you can define new
properties by clicking the Add button.
Figure 9.31. Setting additional plug-in properties.
For example, Netscape developers created an AVI plug-in called npavi32.dll to demonstrate the capabilities of plug-ins. Users can see use control buttons to manipulate a video file on their own. You can use two attributes
to specify the behavior for the inline video: AUTOSTART and LOOP.
You can set the AUTOSTART and LOOP attributes to TRUE or FALSE. When AUTOSTART is set to TRUE, the associated video plays as soon as it is finished downloading. Otherwise, the associated video plays only when the user starts it. The LOOP attribute turns looping on or off. When LOOP is set to TRUE, the video loops indefinitely. Otherwise, the video plays only once. Figure 9.32 shows how you can extend the basic properties of plug-ins to accommodate these additional properties.
Figure 9.32. Specifying unique attributes.
If the end user has obtained the npavi32.dll plug-in, the video automatically starts when fully loaded and loops indefinitely. If the end user does not have the npavi32.dll plug-in but
configured a helper application to handle AVI files, the appropriate player is called to play the video.
The ability to create documents with high visual impact and a high level of interactivity is essential to your success as a Web publisher. Basic techniques that add to the visual impact and interactivity of the document include using line breaks,
horizontal lines, lists, hypertext links, and bookmarks. Line breaks can create a column of text. Horizontal lines can visually divide the document into sections. Lists add to the visual impact of the document by clearly organizing material. Hypertext
links increase the interactive nature of your document. Bookmarks guide readers to key parts of your publication.
Two advanced techniques for enhancing your pages are scrolling marquees and Netscape plug-ins. With marquees, you can add moving banners to your pages. With plug-ins, you can extend the functionality of the Netscape browser. Both are
hot features, you can use today.