Chapter 9

Organizing Information with Lists

• How Different Browsers Support Lists
• Working with Numbered Lists
• Creating a Numbered List
• Creating a Nested Numbered List
• Changing the Numbered List Type
• Changing the Starting Number
• Adding Extended Attributes to Numbered Lists
• Working with Bulleted Lists
• Creating a Bulleted List
• Creating a Nested Bulleted List
• Changing the Bulleted List Type
• Adding Extended Attributes to Bulleted Lists
• Working with Definition Lists
• Using a Definition List
• Working with Directory and Menu Lists
• Creating Directory and Menu Lists
• Editing Lists
• Changing the List Type
  • Deleting Lists or List Items
  • Inserting List Items
• Workshop Wrap-Up
  • Next Steps
  • Q&A

Do you have links to sites that you want to point people to? Have you written a great paper that shows people how to build, install, or complete something? Lists are among the best ways to organize information. They help information stand out clearly. You can use several different types of lists in your pages.

How Different Browsers Support Lists

You can use five basic types of lists in your pages-numbered lists, bulleted lists, definition lists, directory lists, and menu lists. When you use a list type, FrontPage anticipates how you want the list to be formatted. For numbered lists, FrontPage automatically places numbers at the beginning of the line. Bulleted lists are preceded by bullets. Definition lists start with a term at the beginning of the line and indent the definition. Directory and menu lists are preceded by bullets.

Browsers display lists differently. For a comparison, I've made some comments about how the current versions of four popular browsers display lists. These comparisons are shown in Table 9.1. The following abbreviations are used in the table:

IE3.0       Microsoft Internet Explorer, Version 3.0
Net3.0     Netscape Navigator, Version 3.0
NCSA     NCSA Mosaic, Version 2.1.1
Spry       CompuServe (Spry) Mosaic, Version 3.0A

Working with Numbered Lists

Numbered lists are used to place items in a definite order. They are good for describing steps or procedures. In its most basic form, the FrontPage Editor begins a numbered list with the number 1 and numbers the remaining items in the list for you automa-tically. If you want to change the appearance of the numbered list by adding large or small Roman numerals, large letters, or small letters, you can do that as well, but as shown in Table 9.1, browsers handle these other attributes differently. Preview your pages in different browsers to view the differences.

Creating a Numbered List

Top Ten lists are popular on the Web. Obviously, many people like to use numbered lists. I have my own Top Ten list, shown in Figure 9.1. You can create this list yourself by following a few easy steps.

Figure 9.1 : Use numbered lists when you need to arrange items in a specific order.

Numbered lists are usually rendered as paragraphs separated by white space and prefixed by numbers.

To create a numbered list, do the following:

1. Position the insertion point on a new line. Enter the following text:
   Top ten ways I like to spend my time:
2. Press Enter. The insertion point moves to the beginning of the next line.
3. Choose Numbered List from the Style Bar, or click the Numbered List button on the Format toolbar. FrontPage enters the first number for you automatically.
4. Enter the first item in the list. (You can replace these examples with your own list items if you prefer.)
   Looking at the stars.
5. Press Enter at the end of each line, and add the additional list items:
   Sitting on the beach.
   Playing computer games.
   Going to movies.
   Going to book stores - lots of them!
   Drawing, painting, and animating.
   On the Internet.
   With my pets.
   With my friends.
   With my family.
6. At the end of the last item, press Enter twice, or use Ctrl+Enter to complete the list.

Creating a Nested Numbered List

Sometimes you need to create nested lists-that is, multilevel lists-to arrange content. You can use the Increase Indent and Decrease Indent buttons to create a nested list.

1. Position the insertion point at the end of the list item that reads Looking at the stars and press Enter. The insertion point moves to the next line and starts a new list item.
2. Press the Increase Indent button on the Format toolbar twice. The insertion point indents, moves to the next line, and starts a new number sequence.
3. Enter two more list items, pressing Enter at the end of each line:
   My favorite constellations
   The best time to go out.
4. Add the last item in the list. At this point, your list should look like Figure 9.2.
   Figure 9.2 : You create a nested numbered list using the Increase Indent and Decrease Indent buttons on the Format toolbar.

   
   Great ways to see stars.

5. Position the insertion point at the end of the line that reads My favorite constellations. Press Enter to begin a new list item.
6. Press the Increase Indent button on the Format toolbar twice. The list indents to a new level.
7. Enter the following three list items. When you reach the end of the last item, your list should look like Figure 9.3.
   Figure 9.3 : A third level is added to the numbered list.

   
   The Big Dipper
   Orion
   The Pleiades

Changing the Numbered List Type

Look at the numbered list in Figure 9.3. A multilevel list is sometimes arranged with numbers and letters to designate the levels, as in an outline. How can you do that?

In FrontPage, the default is to use numbers in a numbered list, but you can assign other attributes to them. For example, you can specify large letters, small letters, large Roman numerals, or small Roman numerals in a numbered list. To do this, you use the Format | Bullets and Numbering command.

To change the numbered list type, perform the following steps:

1. Position the insertion point anywhere within the Looking at the stars list item.
2. Choose Format | Bullets and Numbering. The List Properties dialog box shown in Figure 9.4 appears.
   Figure 9.4 : Use the List Properties dialog box to select the type of numbered list you are creating.

3. Select the Large Roman Numerals list type (third type in the first row, labeled I, II, III) and choose OK. All list items in the first level change to large Roman numerals.
4. Position the insertion point at the beginning of the list item that reads My favorite constellations.
5. Choose Format | Bullets and Numbering. The List Properties dialog box appears.
6. Select the Large Letters list type (first type in the second row, labeled A, B, C) and choose OK. All list items in the second level change to large letters. Your list should look as shown in Figure 9.5.
   Figure 9.5 : The numbered list now contains three different number types.

Changing the Starting Number

Sometimes, you might want to begin a numbered list with a different number. For example, if you're writing instructions on how to complete a process, you enter a few steps in a numbered list. Then, you use a graphic to illustrate a point before you continue with the instructions. You want the list that follows the table to pick up where the preceding numbered list left off. Figure 9.6 shows what the lists looks like before you change the number.
Figure 9.6 : By default, all numbered lists begin with the number 1.

To change the starting number of a numbered list, follow these steps:

1. Position the insertion point anywhere within the list item that you want to change.
2. Choose Format | Bullets and Numbering, or right-click and choose List Properties from the pop-up menu. The List Properties dialog box appears, opened to the Numbered tab.
3. In the Start field of the Numbered tab, enter the new starting number for the list. In the example shown, you enter the number 4.
4. Choose OK. The starting number of the list changes, as shown in Figure 9.7.
   Figure 9.7 : You change the starting number of the list in the Numbered tab of the List Properties dialog box.

Adding Extended Attributes to Numbered Lists

The most commonly used attributes are built into FrontPage 97. FrontPage 97 gives you the ability to enter proposed and future tag attributes through the use of extended attributes. In most cases, extended attributes are usually necessary with FrontPage when an attribute is either proposed or not widely supported. Use extended attributes with caution-or check out your page in several different browsers to see if it's worth using.

To specify an extended attribute for a numbered list, do the following:

1. Position the insertion point anywhere in the list that you want to change.
2. To change the attributes for the entire list, right-click and choose List Properties from the pop-up menu. The List Properties dialog box appears, opened to the Numbered tab.
3. Click the Extended button. The Extended Attributes dialog box appears. It notifies you that the attributes apply to the <OL> tag.
4. Click the Add button to add an attribute. The Name/Value Pair dialog box appears.
5. Enter the attribute name in the Name field and its value (if applicable) in the Value field.
6. Click OK to exit the Name/Value Pair, Extended Attributes, and List Properties dialog boxes.
7. Preview your page in one or more browsers, using the File | Preview in Browser command.

Working with Bulleted Lists

You use bulleted lists when you do not need to list items in a specific order. Many people use bulleted lists to display links to their favorite sites, and there are many other applications for them as well. Bulleted lists are usually rendered as paragraphs separated by white space and prefixed by filled or unfilled circles and squares. Different browsers display the bullets differently. For example, Netscape renders bullets exactly the way you see them in FrontPage. Internet Explorer renders all bullets as solid circles, regardless of the bullet type you specify. Spry Mosaic renders level 1 bullets as shaded circles, level 2 bullets as shaded diamonds, and level 3 bullets as shaded squares, regardless of the bullet you specify. WYSIWYG is WYSIWYG only to a point when it comes to bulleted lists.

Creating a Bulleted List

Bulleted lists are created using similar procedures as those mentioned for numbered lists. You use the same list items from the previous tasks in the following example.

To create a bulleted list, perform the following steps:

1. Position the insertion point on a new line. Enter the following text:
   Top ten ways I like to spend my time:
2. Press Enter. The insertion point moves to the beginning of the next line.
3. Choose Bulleted List from the Change Style drop-down menu in the Format toolbar, or use the Bulleted List button on the Format toolbar. FrontPage enters the bullet for you automatically.
4. Enter the first item in the list. (You can replace these examples with your own list items if you prefer.)
   Looking at the stars.
5. Press Enter at the end of each line, and add the additional list items:
   Sitting on the beach.
   Playing computer games.
   Going to movies.
   Going to book stores - lots of them!
   Drawing, painting, and animating.
   On the Internet.
   With my pets.
   With my friends.
   With my family.
6. At the end of the last item, press Enter twice, or use Ctrl+Enter to complete the list. Your list should look as shown in Figure 9.8.
   Figure 9.8 : Use bulleted lists to present a list of items that don't need to be arranged in a specific order.

Creating a Nested Bulleted List

You create nested bulleted lists using the same basic procedures as those for a nested numbered list. When you create nested bulleted lists, each level in the list is represented by a different bullet type:

1. Position the insertion point at the end of the list item that reads Looking at the stars and press Enter. The insertion point moves to the next line and starts a new list item.
2. Click the Increase Indent button on the Format toolbar twice. The insertion point indents, moves to the next line, and changes the bullet to an unfilled circle.
3. Enter two more list items, pressing Enter at the end of each line:
   My favorite constellations:
   The best time to go out:
4. Add the last item in the list:
   Great ways to see stars:
5. Position the insertion point at the end of the line that reads My favorite constellations. Press Enter to begin a new list item.
6. Click the Increase Indent button on the Format toolbar twice. The list indents to a new level and the bullet changes to a square.
7. Enter the following three list items. When you reach the end of the last item, your list should look as shown in Figure 9.9.
   Figure 9.9 : The bulleted list now contains three levels.

   
   The Big Dipper
   Orion
   The Pleiades

Changing the Bulleted List Type

When you create nested bulleted lists, each level automatically receives a different bulleted type. If you want to change the bullets in the list, you can use the same basic procedures outlined for numbered lists.

To change the bulleted list type, follow these steps:

1. Position the insertion point anywhere within the list item that reads My favorite constellations.
2. Choose Format | Bullets and Numbering. The List Properties dialog box appears, opened to the Bulleted tab shown in Figure 9.10.
   Figure 9.10 : Use the Bulleted tab to change the type of bullet in your bulleted list.

3. Select the square bullets list type (second type in the second row) and choose OK. All list items in the second level change to square bullets.
4. Position the insertion point anywhere within the list item that reads The Big Dipper.
5. Choose Format | Bullets and Numbering. The List Properties dialog box appears, opened to the Bulleted tab.
6. Select the unfilled circle bullet list type (first in the second row) and choose OK. All list items in the third level change to unfilled circles. Your list should look as shown in Figure 9.11.
   Figure 9.11 : Now, the bulleted list uses bullet types that you specify.

Adding Extended Attributes to Bulleted Lists

The most commonly used attributes for bulleted lists are built into FrontPage 97. One of the proposed tags coming down the road, for example, is the ability to specify a graphic for your bullet rather than use the default circles and squares.

To specify an extended attribute for a bulleted list, do the following:

1. Position the insertion point anywhere in the list that you want to change.
2. To change the attributes for the entire list (<UL> tag), right-click and choose List Properties from the pop-up menu. The List Properties dialog box appears, opened to the Bulleted tab.
3. Click the Extended button. The Extended Attributes dialog box appears. It notifies you that the attributes apply to the <UL> tag.
4. Click the Add button to add an attribute. The Name/Value Pair dialog box appears.
5. Enter the attribute name in the Name field and its value (if applicable) in the Value field.
6. Click OK to exit the Name/Value Pair, Extended Attributes, and List Properties dialog boxes.
7. Preview your page in one or more browsers, using the File | Preview in Browser command.

Working with Definition Lists

Use definition lists to present a term and its definition, such as in a glossary. You also use definition lists to provide a list of items when you want to include a description for each one. Generally, the definition term is aligned with the left margin of the page and its definition is indented.

Most browsers display definition lists in the same way. The amount of indentation of the definition may vary slightly.

Using a Definition List

It is very easy to create a definition list in FrontPage. You format the first list item as a defined term. Pressing the Enter key formats the next item as a definition. Pressing the Enter key again starts a new term, followed by a new definition, and so on.

To create a definition list, follow these steps:

1. Position the insertion point on your page, and enter the following text:
   The different types of lists you can use in your pages are:
2. Press Enter. The insertion point moves to the next line.
3. Choose Defined Term from the Change Style drop-down menu in the Format toolbar. Enter the following term:
   Numbered Lists
4. Press Enter to add the definition. The insertion point moves to the next line. The Change Style drop-down menu shows the line formatted as Normal, but your HTML code uses the <dd> tag, which designates it as a definition. Enter the following definition:
   Used when the list must be arranged in a definite order.
5. Press Enter to add the next defined term:
   Bulleted Lists
6. Press Enter again to add the next definition:
   Used when the list does not have to be arranged in a definite order.
7. Continue to add the remaining list items, pressing Enter at the end of each line:
   Term: Definition List
   Definition: Used to display a list of terms and their definitions.
   Term: Directory List
   Definition: Used to list the contents of a directory. Primarily used by programmers and not widely supported by browsers.
   Term: Menu List
   Definition: Used to list the contents of a menu or short items (20 characters or less). Primarily used by programmers and not widely supported by browsers.
8. At the end of the last list item, press Enter three times or use Ctrl+Enter to end the list. When you finish, your list should look as shown in Figure 9.12.
   Figure 9.12 : A definition list shows a list of terms and their definitions.

Working with Directory and Menu Lists

FrontPage supports two more types of lists: directory lists and menu lists. As you learned in the previous definition list task, they were intended for programmers and are not used very often any more. Many browsers do not support them well. Directory lists typically listed the contents of a directory. Similarly, menu lists displayed the contents of a menu or short items of twenty characters or less. Figure 9.13 shows examples of both types of lists.

Figure 9.13 : Directory and menu lists look similar to bulleted lists in the FrontPage Editor, but many browsers no longer support them. Where possible, use bulleted lists instead.

Creating Directory and Menu Lists

Directory and menu lists look much like bulleted lists. Because they are not widely supported by browsers, consider using bulleted lists in lieu of these list types.

To create a directory or menu list, perform the following steps:

1. Place the insertion point at the beginning of the line on which you want to create the list.
2. Choose Directory List or Menu List from the Change Style drop-down menu on the Format toolbar.
3. Enter a list item.
4. Press Enter to add additional items.
5. Press Enter twice to end the list.

Editing Lists

You can easily change one type of list to another, insert new items in a list, or delete list items all together.

Changing the List Type

If you change your mind about how you want to present your lists, you can change the list type easily. Here are some notes and pointers about changing list types:

• Basic numbered lists convert to bulleted lists, and bulleted lists to numbered lists, with no problem.
• Nested bulleted lists and nested numbered lists retain their level structure, but you need to change one level at a time to change the list type.
• You can use a combination of bullets and numbers in a nested list.
• When you change from any other type of list to a definition list, all the list items become formatted as definitions-not as terms. You can easily change the definitions to terms by selecting them all and choosing Defined Term from the Change Style drop-down menu in the Format toolbar.

To change the list type, follow these steps:

1. Position the insertion point anywhere within the list you want to change.
2. Choose a new list type from the Change Style drop-down menu in the Format toolbar, or right-click and choose List Properties from the pop-up menu. From the List Properties dialog box, select the Bulleted or Numbered tab to change the style of your list, and click OK.

Deleting Lists or List Items

To delete a list or a list item from a page, do the following:

1. Select the list or list item that you want to delete. To select a list, move the pointer to the selection bar next to the list and double-click; the entire list is selected. To select a list item, place the pointer over the number or bullet of the item and double-click; the item is selected.
2. Choose Edit | Clear, or press the Delete key.

Inserting List Items

To insert list items, just place the insertion point where you want to insert the new item and press Enter. A new number, bullet, or term is started for you. Enter the new list item as you usually do.

Workshop Wrap-Up

Organizing your information in lists is easy. The hardest part is thinking of the information that you want to include. Keep in mind that lists can appear differently in your visitors' browsers. While you develop your site, have a few different browsers on hand to check the appearance of your pages.

In this chapter, you learned how to format information in different types of lists. You learned how to create basic and nested lists and how to change their appearances by specifying different bullet and numbering types. You also learned how to prepare yourself for new list tags coming down the road by examining how to add an extended attribute to a list.

Next Steps

In Chapter 10, "Sprucing Up Your Pages," you learn how to create your own style sheets and how to add images and animation to your pages. You learn how to make images appear as though they float on your pages by using transparent GIFs. Read on to learn how to use color and images effectively. You even get tips on how to create your own images.

To learn more about creating page content, refer to the following chapters:

• Refer to Chapter 7 "Getting from Here to There," to learn how to add and edit the hyperlinks in your Web pages.
• Refer to Chapter 8 "Composing and Editing Page Content," to learn how to add and edit paragraphs, text, and headings.
• Refer to Chapter 11, "Your Tables are Ready," to learn how to add and format tables and use them for page layout.

Q&A