Previous Section  < Day Day Up >  Next Section

3.2 Lists

Lists organize the everyday information of our lives: to-do lists, grocery lists, top ten lists, and so on. On Web pages, lists are indispensable for presenting groups of items such as links, company services or employees, or a series of instructions.

HTML offers formatting options for three basic categories of lists (see Figure 3-4). The two most common types of lists are bulleted (called unordered lists in the HTML language) and numbered lists (called ordered in HTML). The third and lesser-known list type, a definition list, comes in handy for creating glossaries or dictionary-like entries.

HTML has several predefined list formats, including bulleted lists and definition lists, which let you organize information into orderly units. Once you've told Dreamweaver that you intend to create a bulleted or numbered list, it adds the bullets or the numbering for you automatically.

3.2.1 Bulleted and Numbered Lists

Bulleted and numbered lists share similar formatting. Dreamweaver automatically indents items in either type of list, and automatically precedes each list item by a character梐 bullet, number, or letter, for example.

  • Unordered or bulleted lists, like this one, are good for groups of items that don't necessarily follow any sequence. They're preceded by a bullet.

  • Ordered lists are useful when presenting items that follow a sequence, such as the numbered instructions in the paragraph below. Instead of a bullet, a number or letter precedes each item in an ordered list. Dreamweaver suggests a number (1, 2, 3, and so on), but you can substitute Roman numerals, letters, and other variations.

You can create a list from scratch within Dreamweaver, or add list formatting to text already on a Web page. Creating a new bulleted or numbered list

When making a list in Dreamweaver, you start by choosing a list format, then typing the list items:

  1. In the document window, click where you wish to start a list.

    See Chapter 2 for full detail on adding text to a Web page.

  2. Apply the list format by clicking the Ordered or Unordered List button in the Property inspector.

    Alternatively, you can choose TextListUnordered List or Ordered List. Either way, the first bullet or number appears in your document automatically.

  3. Type the first list item and then press Enter or Return. Repeat until you've added all items in the list.

    The text you type appears (Organic Compost, for example, in Figure 3-4) after the bullet or number. When you press Return, a new bullet or number appears, ready for your next item. (If you just want to move to the next line without creating a new bullet, insert a line break by pressing Shift-Return.)

  4. When you've finished the list, press Enter or Return twice.

    The double carriage-return ends the list and creates a new empty paragraph. Formatting existing text as a list

You may have several paragraphs of text that you've already typed in or pasted from another application. It's a simple process to change any such group of paragraphs into a list.

  1. Select the text you wish to turn into a list.

    The easiest way to select text is to drag from the first list item straight down into the last item of the list. Lists are block-level elements; each paragraph, whether it's a headline or regular paragraph, becomes one bulleted or numbered item in the list. In other words, you don't actually need to select all of the text in either the first or last paragraph.

  2. Apply the list format.

    As when creating a list from scratch as described above, click either the Unordered or Ordered List button in the Property inspector, or choose from the TextList submenu. The selected paragraphs instantly take on the list formatting, complete with bullets and automatic numbering.


You may sometimes run into this problem: You select what looks like a handful of paragraphs and apply the list format, but only one bullet (or number) appears. This glitch arises when you've used the linebreak <br> tag to move text down a line in a paragraph. While doing so visually separates lines in a paragraph into separate blocks, the text is still part of single paragraph, and will therefore only appear as one bulleted or numbered item. See Section for more on the <br> tag and avoiding this situation.

Whichever way you started making a list梕ither by typing from scratch or reformatting existing text梱ou're not stuck with the results of your early decisions. You can add onto lists, add extra spaces, and even renumber them, as described in the following section.

3.2.2 Reformatting Bulleted and Numbered Lists

HTML tags define lists, just as they define other Web page features. Making changes to an existing list is a matter of changing those tags, using Dreamweaver's menu commands and Property inspector tools.


Web browsers generally display list items one on top of the other. If you want to add a little breathing room between each list item, use the CSS margin properties, as described in Section 6.7.4.

When Not to Approach the Insert Bar

I like the convenience of the Insert bar. Should I use the Insert bar's Text tab for formatting text?

In a word, no. Unlike most of the other panels in the Insert bar, the Text tab is mainly used when working in Code view (see Chapter 10). It contains many of the same formatting options as the Property inspector 梩he h1, h2, and h3 in this figure, for instance, are the same as Headings 1, 2, and 3 in the Property inspector's format pop-up menu. However, using some of the options, such as li, can generate invalid HTML if not used correctly. Furthermore, despite its usual tidiness, Dreamweaver doesn't clean up code produced this way.


In fact, some of these options, when used in Design view, actually split the document window in two, showing the HTML code on top and Design view on bottom. This can be confusing if you're not accustomed to seeing梠r are just uninterested in梩he raw HTML code. All major text-formatting options are available from the Property inspector and Text menu. If you stick to these two tools, you can safely avoid the Text tab. Adding new items to a list

Once you've created a list, it's easy to add additional items. To add an item at the beginning of a list, click before the first character of the first list item, type the item you wish to add, and press Enter or Return. Dreamweaver makes your newly typed item the first in the list, adding a bullet or number accordingly (and renumbering the other list items, if necessary).

The tag selector is a great way to quickly and accurately select an HTML tag. Clicking the <ul> (unordered list) tag, for instance, selects the entire bulleted list.

To add an item at the middle or end of a list, click at the end of the previous list item and press Enter or Return. The insertion point appears after a new bullet or number; type your list item on this new line.

The List Properties dialog box lets you set the type and style of a list. It offers five styles: Number (1, 2, 3), Roman Small (i, ii, iii), Roman Large (I, II, III), Alphabet Small (a, b, c), and Alphabet Large (A, B, C).
figs/03_06.jpg Changing bullets and numbers

Bulleted and numbered lists aren't limited to just the default round black bullet or the numbers 1, 2, or 3. You can choose from two bullet types and a handful of different numbering schemes. Here's how to change their settings:

  1. Click once inside any list item.

    Strangely enough, you can't change the properties of a list if you've first selected the entire list, an entire single list item, or several list items.

  2. Open the List Properties dialog box.

    To do so, either click the List Item button in the bottom half of the Property inspector or choose TextListProperties. (If the list is inside a table cell, your only choice is to use the Text menu. In this situation, the List Item button doesn't appear in the Property inspector.)

  3. Choose a type from the List Type pop-up menu.

    In this way, you can turn a numbered list into a bulleted list, or vice versa. You should avoid the two other options in the menu桪irectory List and Menu List. These are old list types that won't necessarily work in Web browsers of the future.

  4. Choose a bullet or numbering style.

    Bulleted lists can have three different styles: default, bullet, and square. In most browsers, the default bullet style is the same as the bullet style (a simple, solid, black circle). As you might guess, the square style uses a solid black square for the bullet character.

    Ordered lists, on the other hand, have a greater variety of style options. The default is a simple numbering scheme (1, 2, 3...), but you can choose from any of five styles for ordered lists, as shown in Figure 3-6.

  5. Set the starting number for the list.

    You don't have to begin a numbered list at 1, A, or the Roman numeral I. You can start it at another number, if you wish梐 trick that can come in handy if, for example, you're creating a Web page to explain how to rebuild a car's engine:

    As part of each step, you want to include a photograph. You create a numbered list, type in the directions for step 1, hit Return, and insert an image (as described in Chapter 5). You hit Return again and type in the text for step 2. Unfortunately, the photo, because it's technically an item in an ordered list, now has the number 2 next to it, and step 2 is listed as 3!

    When you remove the list formatting from the photo to get rid of the 2, you create one list above it and another below it (as described in Section Step 2, below the photo, now thinks it's the beginning of a new list梐nd starts over with the number 1!

    The solution is to make it think it's a new list that begins with 2.

    To start the list at something other than 1, type the starting number in the Start Count field (Figure 3-6). This must be a number, even if you choose to display the list using letters. So to begin a list at D instead of A, type 4 in the Start Count field.

    In fact, you can even change the style of a single list item. For instance, you could change the third item in a numeric list from a 3 to the letter C. (Of course, just because you can, doesn't mean you should. Dreamweaver is very thorough in supporting the almost overwhelming combination of options available in HTML, but, unless you're building a Dadaist revival site, how often do you want a list that is numbered 1, 2, C, iv, 1?)

  6. Click OK to apply the changes.

Once again, you can access more advanced formatting options for lists using Cascading Style Sheets. For example, you can use a graphic of your own creation to begin each bulleted list item, instead of choosing from the same boring set of square or circular bullets. See Section 6.7.4 for the details.

Top: To create a nested list, start with a single list, in this case a numbered list using capital letters instead of numbers. Select a subtopic and click the Indent button or choose TextIndent.

Bottom: The item becomes a nested list, indented from the main list and with its own numbering. Notice, too, that the major points have been renumbered條etter E from the first figure is letter B in the second figure梩o reflect the new ordering of the list.
figs/03_07.jpg Nested lists

Some complex outlines require multiple levels of lists. Legal documents, for instance, may list major clauses with capital letters (A, B, C, and so on) and use roman numerals (i, ii, iii, and so on) for subclauses (see Figure 3-7).

It's easy to create such nested lists in Dreamweaver; Figure 3-7 shows the steps.

3.2.3 Definition Lists

Definition lists can be used to display items in a dictionary or glossary, or whenever you need to present a term and its definition. Each item in a definition list is composed of two parts: a word or term, and a definition.

As you can see in Figure 3-4, definition lists aren't as fancy as they sound. The first item in the list梩he word or term梚s presented on its own line with no indent, and the second item梩he definition梐ppears directly underneath, indented.


Behind the scenes, Dreamweaver creates a definition list as a whole using the <dl> tag. Each item in the list is then composed of two tags: <dt> for the definition term or word and <dd> for the definition itself.

You can't create a definition list using the Property inspector. Instead, start by highlighting the paragraphs that contain the terms and definitions you wish to include in the list; then choose TextListDefinition List.

To turn a definition list back to regular paragraphs, select it and choose TextList None, or click the Outdent button in the Property inspector.

3.2.4 Removing and Deleting List Items

Dreamweaver lets you take items out of a list in two ways: either by removing the list formatting from an item or items (and changing them back into normal paragraphs) or by deleting their text outright. Removing list items

To remove list formatting from one or more list items (or an entire list), highlight the lines in question and then choose TextListNone (or just click the Outdent button on the Property inspector). You've just removed all list formatting; the text remains on the screen, now formatted as standard paragraphs. (For nested lists, you'll need to click the Outdent button several times.)

If you reformat an item in the middle of a list using this technique, it becomes a regular paragraph. Dreamweaver turns the items above it and below it into separate lists. Deleting list items

A simple way to delete a list or list item is to use the tag selector in the status bar of the document window (see Figure 3-5). To delete an entire list, click anywhere inside the list, then click its tag in the tag selector?lt;ul> for a bulleted list or <ol> for a numbered list梐nd press Delete. You can also, of course, drag through all the text of the list and then press Delete.

To delete a single list item, click that item in the document window, click the <li> tag in the tag selector, and then press Delete.

You can rearrange a list item by dragging it to another position within the list. If it's an ordered list (1,2,3...), Dreamweaver automatically renumbers the list. For example, if you select an item numbered 4 (or D, if it's an alphabetical list) and drag it to the second position in the list, Dreamweaver changes the item to 2 (or B) and renumbers all items that follow.

However, selecting a list item can be tricky. If you simply drag to select the text, you don't actually select the list item itself, with all its formatting and numbering. To be sure you've selected a list item, click the <li> tag in the tag selector in the document window's status bar (see Figure 3-5). Now, when you drag the selection to a new position in the list, the number (or bullet) follows. You can also select a list item in this way, copy or cut it, and paste it back into the list in another position.

    Previous Section  < Day Day Up >  Next Section