This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating Lists
Lists bring order and structure to text on the Web. Large blocks of text are difficult to read onscreen, so lists break things into manageable highlights.
Lists items are formatted in <li>...</li> tag pairs for each item. The list in its entirety also needs to be defined. The manner in which this is done depends on the type of list.
Unordered (Bulleted) Lists
An unordered list is used when the sequence of the items isn't important. Bulleted lists can be created from text you've already entered, or the list can be created as you type the text. Here's how to make an unordered list:
To configure the list and then type the list items, position the cursor where you want to start the list. If you're converting existing text into a list, select the text.
In the Property inspector, click the Unordered List button. You can also select Text, List, Unordered List.
Type in the text of your list.
To end the list after you enter all the items, press (Return) [Enter] twice or click the Unordered List button in the Property inspector.
List items are spaced more closely together than paragraphs (see Figure 3.10). If you look at the Code view, the unordered list is contained within a <ul>...</ul> tag pair.
)
Figure
3.10 An unordered list is used for items that don't need to appear
in a specific order.
Font faces, colors, sizes, and styles can be applied to lists. Paragraph formatting, however, is likely to destroy the list layout, so it should be avoided. To remove list formatting, select the entire list and then click the Unordered List button in the Property inspector. The text itself remains, but the formatting of the list is deleted as is the markup that created the list.
Ordered (Numbered) Lists
Ordered lists are used when items should be followed sequentially. Create these lists in the same manner as unordered lists, but simply click the Ordered List button instead. Examining the code, you'll see that ordered lists are defined by the <ol>...</ol> tag pair.
One of the best features of an ordered list is its capability to renumber itself as items are added, deleted, or moved. To add an item to the list, position the insertion point at the end of the list item above where you want the addition to appear. Press (Return) [Enter] to add a new line; then type in the new item. To move an item in the list, either use the cut-and-paste method or highlight the list item and then drag it to its new location while holding down the left mouse button.
Changing List Properties
When you create lists, the bullet symbols or numbering sequence might need to be modified to meet your needs. To do this, select a list item and then click the List Item button on the expanded Property inspector (see Figure 3.11). Alternatively, you can select the entire list and use the Text, List, Properties menu option.
){kind=small}
Figure
3.11 The expanded Property inspector has an additional option to format
lists.
CAUTION
If you don't indent the list item before you change the list type, Dreamweaver breaks the selected items into a separate list that's formatted in line with the original list. If more list items are below the selection, they are broken into yet a third separate list.
In the List Properties dialog box, select the style you want from the Style list (see Figure 3.12). The new style is applied to the entire list.
)
Figure
3.12 If you want to have a traditional disk-style bullet for your list,
select Bullet. If you want a square, select Square.
To change the style of a single list item or an item and any subsequent items, change the New Style in the List Item section of the List Properties dialog box. Even if you later change the overall style for the entire list, items that have been individually formatted will retain their unique format.
Nested Lists
Lists aren't always one level deep. If you're outlining a project or giving step-by-step instructions, you might want to provide additional information relating to a specific list item. Nested lists enable you to insert sublists within lists.
To create a nested list, follow these steps:
Select the text you want to reformat from within an existing list, or insert a blank list item where you want the nested list to appear.
In the Property inspector, click the Indent button. Dreamweaver creates a separate list with the original list's properties.
Highlight the list, or place your cursor at one of the bullets in Design view. Click the List Item button in the Property inspector to open the List Properties dialog box.
Select a different list type from the menu if you want to use one.
Click OK.
TIP
If you know the ASCII shortcuts for the symbol you need, you can enter it directly on the Web page. For example, the copyright symbol is Alt+0169 in Windows and Option-G on the Mac. These are operating system shortcuts—not Dreamweaver shortcuts—and are fairly standard across applications on each platform.