Chapter 9

Composing and Editing Page Content


CONTENTS

Now that you are thinking about what you want to put on your site, you probably want to start building your own pages. You should have a fairly good idea of the types of pages you want to put in your web. Roll up your sleeves, because it is time to start building those pages. This chapter starts with the basics: working with headings, paragraphs, and text styles.

Working with a Normal Web

As you read along, you should reproduce the examples in this chapter and the ones that follow. Create a web in which you can practice. When you create a normal web, a single blank page is placed in it. You already know the procedure: Simply specify a normal web in the FrontPage Editor's New Web dialog box.

Building a Page

It is usually best to build pages in several passes. First, plan the content of your pages by putting in the headings. Starting this way gives you a feel for the content that you want to include on a page. It is also easier to create bookmarks when there is not much text in between headings-you have less to scroll through.

After you enter the headings, enter the content beneath each heading. Look at the section and decide what best conveys the information that you want to include. Sometimes, plain text is all that is necessary. Other times, a list or a table might be more effective in getting the message across.

While you enter the content, create the links to the other pages in the same section; create the new pages in the process. Add the pages to your To Do list, and enhance the task descriptions if necessary.

After the basic content is on the pages, develop the navigation links for the section. This gives you the opportunity to take a final look at the pages. Decide which pages belong in the navigation bar and which ones should have the navigation bar included on them. Use the Include Bot to place a text version of the navigation links on the page first. This way, you can make sure that you like how the links flow before you make the graphics. You can even put pages on the Web at this point. At least they will be doing something while you develop the graphics.

After the graphics are done, edit the navigation bar to display the graphics in place of or in addition to the text links. All the pages that contain the new navigation bar are updated automatically because of the Include bot.

Finally, develop header graphics and footers, using the same basic design throughout each of the pages in a section. Try to give your pages a consistent look and feel. Update the pages to which you added graphics on the remote server-including the pages that have the navigation bar included within them.

Now, take a look at the basic building blocks that you use in your pages-headings and paragraphs.

Using Paragraphs and Headings

A paragraph is a line or a group of contiguous lines that use the same format and are separated in the FrontPage Editor with white space. Once you hit the Enter key at the end of a line, you start a new paragraph. The paragraph is separated by what appears to be an extra space.

NOTE
You can use line breaks to start a new line in the same paragraph.

When you format a paragraph, all the text contained in the paragraph changes to that format. You cannot mix paragraph styles in a paragraph. You can, however, mix character styles in a paragraph, which are discussed later in this chapter.

Entering Headings on a Page

You have a blank page in front of you, and you are wondering where to start. First, organize your thoughts by putting headings on your pages. Figure 9.1 shows three levels of headings for a page in the early stages of development. The first heading-the page title-is Heading 1. Four sections are formatted as Heading 2: Picking Your Potato, Making the Gravy, Adding Spices, and What to Top Your Potatoes With. Some sections have additional topics listed beneath them. Those headings are formatted as Heading 3. It is like formatting an outline in a word processor.

Figure 9.1: Organize your thoughts by placing headings on your page first.

When you create a page based on the Normal template in FrontPage, it opens up in the FrontPage Editor and appears completely blank. If you immediately start typing, the text is entered on the page in normal paragraph format.

A Quick Way to Format a Paragraph or Heading

A quick way to format the first line on your page into a Heading 1 paragraph is to use the style bar, shown in Figure 9.2. Click the arrow in the drop-down menu box, and choose the heading or other paragraph style.

Figure 9.2: Use the style bar to format text into another commonly used style.

Formatting with the Paragraph Format Dialog Box

You can also use the Format | Paragraph command to insert a paragraph or heading. When you use this command, the Paragraph Format dialog box, shown in Figure 9.3, appears.

Figure 9.3: The Paragraph Format dialog box provides one way to format the paragraphs on a page.

From the Paragraph Format dialog box, you can perform these procedures:

Figure 9.4: Normal paragraphs are used most commonly in your pages.

TIP
Use the alignment buttons on the FrontPage Format toolbar to align paragraphs or text quickly.

After you make your paragraph format choices, click OK to return to the FrontPage Editor.

Inserting Headings

After you place a heading on a page, you probably want to press Enter and start typing another line. When you do this, the new line uses the same format as the previous one-including its alignment, color, and character style. In the example here, your second line would appear as a Heading 1. Use the Insert | Heading command to start a new line with a different heading.

  1. Position the cursor at the end of the line after which you want to insert the heading.
  2. Select the Insert | Heading | 2 (Large) command-or whatever heading you plan to use. The insertion point moves to a new line-actually, a new paragraph-and is formatted to the heading or paragraph style that you select.

Six levels of headings are available in FrontPage. Their font sizes are shown in
Table 9.1.

NOTE
Table 9.1 lists the font sizes as they are applied in the FrontPage Editor. Users might have their browsers set to display headings and fonts differently.

Table 9.1. Heading styles-HTML tags and font sizes.

Heading
HTML Tag
Font Size in FrontPage Editor
Heading 1
<H1>
24-point bold
Heading 2
<H2>
18-point bold
Heading 3
<H3>
14-point bold
Heading 4
<H4>
14-point bold
Heading 5
<H5>
10-point bold
Heading 6
<H6>
8-point bold

Inserting Paragraphs

You use some of the same methods discussed earlier to add text content to a page. For example, you can use the style bar or the Format | Paragraph command to format text paragraphs. To insert a new paragraph on your page, use Insert | Paragraph. You can choose from three types of text paragraphs: normal, formatted, and address.

Normal Paragraphs

Normal paragraphs are the meat-and-potatoes paragraph of your Web page. You use them for most of your content.

To insert a normal paragraph on a page:

  1. Position the cursor at the end of the line that precedes the paragraph you want to start. In the example shown in Figure 9.4, the insertion point is placed at the end of the first heading.
    Figure 9.5: Use formatted paragraphs when you need to use fixed-width text.
  2. Choose Insert | Paragraph | Normal. FrontPage begins a new paragraph on a new line, putting white space between the paragraphs.
  3. Enter the text for the paragraph. You can continue to add paragraphs by pressing the Enter key. A new paragraph begins; it uses the same formatting as the preceding paragraph. The same character styles and formats are used until you position the insertion point on another part of the page.

Formatted Paragraphs

Use formatted paragraphs when you need to provide content in a fixed-width format. You cannot use tabs in HTML pages, but formatted paragraphs enable you to add additional spaces to your text and give the appearance of using tabs. This type of paragraph is good for text-based tables, ASCII art, and code. Figure 9.5 shows three examples of formatted paragraphs. Line breaks split each paragraph into several lines.

To insert a formatted paragraph on a page:

  1. Position the cursor at the end of the line that precedes the paragraph you want to start.
  2. Choose Insert | Paragraph | Formatted. FrontPage begins a new paragraph on a new line, putting extra space between the paragraphs.
  3. Enter the text for the paragraph. The text appears in fixed-width format. Use line breaks to begin new lines within the same paragraph.

Address Paragraphs

Address paragraphs format text in italics. The traditional use for an address paragraph is to place author information at the beginning or the end of a page. Most commonly, this information is placed at the end of a page, as shown in Figure 9.6.

Figure 9.6: Use address paragraphs to place author information or other italicized content on a page.

To insert an address paragraph on a page:

  1. Position the cursor at the end of the line that precedes the paragraph you want to start.
  2. Choose Insert | Paragraph | Address. FrontPage begins a new paragraph on a new line, putting extra space between the paragraphs.
  3. Enter the text for the paragraph. The text appears in italic format. Use line breaks to begin new lines within the same paragraph.

Reformatting Paragraphs

You can easily change a paragraph from one format to another. For example,
you can change an address paragraph to a heading, a normal paragraph, or a formatted paragraph. In Figure 9.7, the address paragraph has been reformatted to a Heading 5.

Figure 9.7: You can change the formatting of a paragraph.

To change a paragraph style:

  1. Position the cursor at the far left side of the page. It turns into a selection pointer (an arrow pointing to the right).
  2. Double-click to select the paragraph. It appears in inverse video when selected.
  3. Choose a new paragraph style from the style bar, or use the Format | Paragraph command to select a style from the Paragraph Format dialog box.

Splitting Paragraphs

To split a paragraph into two or more paragraphs that use the same paragraph style, position the insertion point where you want to split the paragraph. Then press Enter. The paragraph is split at the point you specified, and the parts are separated by white space.

To split a paragraph into two paragraphs while applying a different style for the second paragraph, position the insertion point where you want the paragraph to break. Choose the Insert | Paragraph command, and select a new style. FrontPage splits the current paragraph at the insertion point.

Adding Line Breaks

When you press the Enter key to start a new line on a page, it starts a new paragraph and inserts white space after the preceding paragraph. To start a new line of text without starting a new paragraph or adding white space, use line breaks.

TIP
To view where the line breaks are on your page, click the Show/Hide button, which shows and hides paragraph marks. This button is the one
with the paragraph mark on it. It is located just to the left of the Create or Edit Link button on the tool bar.

To insert a line break:

  1. Choose Insert | Line Break. The Break Properties dialog box appears.
  2. Choose Normal Line Break. This forces a line break without clearing images in the left or right margin.
  3. Click OK.

Adding Extended Attributes to Paragraphs

You can add extended attributes to paragraphs by clicking the Extended button in the Paragraph Format dialog box. These attributes are added to the HTML code that FrontPage generates for the paragraph.

To add extended attributes to a paragraph:

  1. Select the paragraph to which you want to add the attribute.
  2. Choose Edit | Properties. The Paragraph Format dialog box appears. Click Extended. The Extended Attributes dialog box appears. Click Add. The Set Attribute Value dialog box appears.
  3. In the Name field, enter the name of the attribute.
  4. To associate a value with the name, select Specify Value and add the value of the attribute in the Value field. If you select Specify Value but leave the value field empty, FrontPage associates the name with an empty string.
  5. Click OK.

Text Styles and When to Use Them

You can format any text on your page to use a different color, alignment, or font size. You can also use several different types of text styles. Table 9.2 describes the various styles and typical uses for them.

NOTE
Text styles are not to be confused with font faces. The FrontPage Editor works with two basic types of text styles-a proportional font (Times Roman) and a fixed-width font (Courier). All of the character styles you choose in FrontPage are based on these two font styles. Refer to Chapter 21, "Using Your Own HTML Code," to learn how to assign different font faces to your Web pages.

Table 9.2. Character styles and HTML tags.

StyleHTML Tag Typical Use Regular Styles
Regular Styles
Strong<STRONG> Marks a strong emphasis. It is often rendered the same as bold text.
Emphasis<EM> Emphasizes text. It can be rendered in italics or as underlined text in browsers.
Underline<U> Underlines text. You can also use the Underline button on the FrontPage Editor tool bar.
Strikethrough<STRIKE> Renders text with a line drawn through it. It is often used in legal online documents.
Typewriter font<TT> Renders text in fixed-width format. You can also use the TT button on the FrontPage Editor Format toolbar.
Special Styles
Citation<CITE> Marks a citation from a book or other published source.
Definition<DFN> Marks a definition. It is usually preceded by a term.
Sample<SAMP> Renders sample text or special characters.
Blink<BLINK> Causes selected text to blink on and off. Use it sparingly.
Code<CODE> Marks computer source code. It is rendered as fixed-width text in FrontPage Editor, but it is rendered as monospaced text in some browsers.
Variable<VAR> Marks a variable used in computer code, equations, or similar work. It is usually rendered in italics.
Bold<B> Renders text as bold. Can use Bold button on the FrontPage Editor tool bar.
Italic<I> Renders text as italic. You can also use the Italic button on the Frontpage Editor toolbar.
Keyboard<KBD> Marks instructions that a user enters by keyboard. It is rendered as fixed-width text in FrontPage Editor, but it is rendered as monospaced text in some browsers.

Use the Format | Characters command to apply formatting to the text on a page. You can apply formatting to a single character, a word, a group of words, a sentence, a paragraph, or even the entire page.

  1. Select the text you want to format. You can select a contiguous area (multiple lines) by using the Shift key and clicking at the start and the end of the area you want to format.
  2. Choose Format | Characters. The Character Styles dialog box appears.
  3. Select the style from the Regular Styles or the Special Styles section of the dialog box. The styles are described in Table 9.2.

    TIP
    You can use the Bold Text, Italic Text, Underline Text, or Typewriter Font buttons on the Format toolbar to change text styles quickly.

  4. Select a font size from the Font Size drop-down list. The available sizes are Normal, 1 (8-point), 2 (10-point), 3 (12-point), 4 (14-point), 5 (18-point), 6 (24-point), and 7 (36-point). The default size is 3 (12-point).

    TIP
    Use the Increase Text Size or Decrease Text Size buttons on the tool bar to change the size of your text quickly. Each time you click the button, the size of the text increases or decreases by one increment.

  5. The default text color is that which you chose in the Page Properties dialog box. You can also specify a different text color. Check the box beside Set Color. Click the Choose button to choose a font color from the Color
    dialog box.

    TIP
    Use the Text Color button on the tool bar to change the color of your text quickly.

  6. Click OK to exit the Character Styles dialog box.

In Figure 9.8, the three aligned paragraphs are selected for formatting. The font size is increased from the default font size-3 (12-point)-to 5 (18-point) by twice using the Increase Text Size button on the tool bar. The Italic button is used to put the text in italics. The Font Color button is used to change the text to blue.

Figure 9.8: Normal text can be reformatted in interesting ways when you combine different formats.

The words They're great shown in Figure 9.8 demonstrate how you can apply character formatting to a portion of a word. The font size is increased a few letters at a time. As you can see, you can use character formatting to achieve interesting effects without relying on graphics.

Special Text Formatting

FrontPage enables you to format text in other ways as well. You can use superscript and subscript text, increase or decrease indentation, and insert special characters. The procedures are quite simple.

Using Superscript and Subscript Text

Use superscript and subscript text to designate footnotes or dropped text. To raise a character or a group of characters above the base line of the text, use superscript text.

  1. Select the text you want to change.
  2. Choose Format | Characters. The Character Styles dialog box appears.
  3. In the Vertical Position field, choose Superscript to raise the text. Click the up arrow or enter a numeric level of superscripting that is one or more levels higher than the text on the base line. Alternatively, choose Subscript to lower the text. Click the down arrow or enter a numeric level of subscripting that is one or more levels lower than the text on the base line.
  4. Press OK to exit the Character Styles dialog box.

Indenting and Outdenting Text

You can indent or outdent text to add emphasis to your layout. Use the Increase Indent button to indent the text toward the right. Use the Decrease Indent button to outdent the text toward the left.

Inserting Special Characters

Special characters are items such as trademark, registration, and copyright symbols; accent marks on text; special currency symbols; and common fractions. To insert a special character:

  1. Choose Insert | Special Character.
  2. Select a character to insert by clicking it. Use the arrow keys to move through the available selections.
  3. Click Insert to insert the currently selected character. You can also insert a character by double-clicking it.
  4. Click Close to exit the Insert Special Character dialog box.

Editing Content

What if you want to rearrange your content and place some of it on a different page? What if you placed section 3 before section 4 instead of after it? Mistakes sometimes happen, but it is not tough to fix them.

Undoing Mistakes

FrontPage has a multiple-level Undo function. This means that you can undo several steps. Choose Edit | Undo or click the Undo button for each step that you want to undo.

Using the Clipboard as a Helper

If your hot list is so long that you have to scroll to read all of it, you might want to split it up into several pages. To do this, you can cut the text from one page, place it in the clipboard, and paste it into another page.

Likewise, consider all those Back to Top links that you must create on a page after the bookmarked sections. You actually need to create them only once. Make the first link, copy it to the clipboard, and paste the text and its link into all the other sections. The same applies for graphics used as bullets or dividers on your pages. Copy the first one into the clipboard, and paste it somewhere else.

To copy and paste text and images to and from the clipboard:

  1. Select the text or image you want to copy.
  2. Choose Edit | Copy, or click the Copy button on the tool bar.
  3. Place the insertion point where you want to paste the text or image. You can place the insertion point anywhere on the current page or on another page that is opened in the FrontPage Editor.
  4. Choose Edit | Paste, or click the Paste button on the toolbar.

Cutting or Deleting Text

There are two ways to delete text. One method places the text into the clipboard for pasting into another location. The other method deletes the text from the page without placing it into the clipboard.

To delete text from a page and place it into the clipboard, use the Edit | Cut command or click the Cut button. To delete text from a page without placing it into the clipboard, choose Edit | Clear or press Del.

You can also delete the character before the insertion point by pressing the Backspace key for each character you want to delete. To delete text after the insertion point, press Del for each character you want to delete.

Removing Formatting

If you change the format of your text-such as if you increase or decrease the font size-you can return the text to the default format. Simply select the text, and press Ctrl+Space. The text returns to the default format for its paragraph style.

Finding and Replacing Text

Suppose that you are writing a page about flowers, and you forget what you wrote about petunias earlier. You need to find exactly what you said about it. To find text:

  1. Choose Edit | Find. The Find dialog box appears.
  2. Specify the text that you want to place in the Find What field.
  3. Choose whether you want to search up or down from the insertion point in the Direction field.
  4. Choose Match Whole Word Only to limit the text to words that match only the whole word you specify. Choose Match Case to limit the text to words that match the capitalization of the word you specify.
  5. To find the next match, click Find Next.
  6. Click Cancel to exit the Find dialog box.

You realize that what you said about petunias actually applies to daffodils. Instead of retyping everything, you can use the Replace command. To replace text:

  1. Choose Edit | Replace. The Replace dialog box appears.
  2. Specify the text that you want to find.
  3. Specify the replacement text in the Replace With field.
  4. Click Replace to replace the most recently found text with the replacement text. Click Find Next to find the next occurrence. This enables you to choose which instances of the text you want to change. Click Replace All to replace all instances of the text.
  5. Click Cancel to exit the Replace dialog box.

Spell-Checking Content

It is always a good idea to spell-check your pages before they go out to the public. FrontPage has a built-in spell-checker at your disposal. The spell-checker starts at the beginning of the page and checks the spelling of each word. When a spelling error is found, it is displayed in the Not in Dictionary field in the Spelling dialog box. If the spelling resembles a word in the standard dictionary, replacement words are suggested. To use the spell-checker:

  1. Choose Tools | Spelling, or click the Check Spelling button.
  2. To correct a spelling error, click one of the proposed corrections in the Suggestions field or edit the Change To field. Click Change to change a single instance of the spelling error. Click Change All to change all instances of the spelling error. The error or errors are corrected, and the next spelling error is displayed.
  3. The spell-checker might indicate that a word is misspelled when actually it is spelled correctly. If you do not want to place the word in your custom dictionary, you can tell the spell-checker to ignore it. Click Ignore to ignore a single instance of the word. Click Ignore All to ignore all instances of the word. You might want to place words that will be used on other pages in your custom dictionary. Simply click the Add to Custom Dictionary button.
  4. Choose Cancel to exit the Spelling dialog box.

Workshop Wrap-Up

Once you have an idea of the information you want to include on your web, entering content into your pages is very simple. Starting with basic headings helps you organize your thoughts. You can use character styles and formatting to add your content. Using different character styles, you can add emphasis to areas on your Web page. After the content is complete, you can use the FrontPage spell-checker to verify that your content is spelled correctly.

Chapter Summary

Your text can be more than simple text. You can use color, change the alignment, increase or decrease the font size, select different formats, and even insert special characters. After your text is placed on a page, you can spell-check it.

Next Steps

Q&A

Q:
Why do the headings get smaller as the numbers get larger, and the character styles get larger as the numbers get larger?
A:
The reason why the headings get smaller as their numbers get larger is because they correspond to hierarchical logic. Typically, your page title is displayed in Heading 1, topics beneath it in Heading 2, topics beneath them in Heading 3, and so on. Text styles increase in size as their designations increase because it is most logical. A small number indicates a small font size; a large number indicates a large font size.
Q:
Are there any rules regarding what font size to use following a heading?
A:
Not really, except that you might want to use a heading that is at least the same size or larger than the text beneath it. Normal paragraphs use a default font size of 3 (12-point), which means that Heading 1 through Heading 4 look all right with it. If you use smaller headings, such as Heading 5 or Heading 6, you might want to decrease the font size.
Q:
Can I change the default size of the font in the FrontPage Editor?
A:
No. This setting is not user-definable. You must set the font size or use the Increase Font Size or Decrease Font Size buttons on the tool bar to change the size of your text.