Dreamweaver 8 Design and Construction (OReilly Digital Studio)

14.4. Adding Lists

If you're typing your text as you go, you can insert a list from the Property Inspector by clicking the Unordered List button for a bulleted list or the Ordered List button for a numbered list, which are shown in Figure 14-10. After the last list item, click this button again to return to normal text.

Occasionally, when you paste text from a text editor, Dreamweaver doesn't format the lists correctly, and you get something like the list in Figure 14-11. To remedy this situation, select the text that you want to convert to a list and click the appropriate button on the Property Inspector. Dreamweaver turns the items into a list, as Figure 14-12 shows.

To modify the appearance of a list, create a style rule:

• If you want to change the appearance of all lists of a given type on your site, choose Tag as the selector type from the New CSS Rule dialog box. To change all ordered lists, type ol in the Tag field. To change all unordered lists, type ul.

• If you want to change the appearance of a particular list without affecting the others, choose Advanced as the selector type from the New CSS Rule dialog box. In the Selector field, type ol or ul, a period (.), and then a brief but descriptive name for the list, such as hatelist.

  The style definitions specifically relating to lists appear in the List category of the CSS Rule Definition dialog box, as shown in Figure 14-13.

  Figure 14-13. Build a style rule for your list under the List category

The values in the Type menu describe the leading character of the list. The Disc, Circle, and Square options work better for unordered lists, while Decimal (1, 2, 3), Lower-roman (i, ii, iii), Upper-roman (I, II, III), Lower-alpha (a, b, c), and Upper-alpha (A, B, C) work better for ordered lists.

For an unordered list, you may also use your own bullet graphic. Click the Browse button, and navigate to the image file that you want to use. Make sure that the image file is in the images or img folder of your site, or else your custom graphic won't appear properly when you post your site on the Web.

The values in the Position menu determine the placement of the leading character, be it a bullet, number, or letter. The Inside value refers to inside the margin of the list, while Outside refers to outside the margin of the list.

Of course, with CSS, you can change everything else about the presentation of the list, too. Browse the other categories of the CSS Rule Definition dialog box to change the font, the weight, the color, the type size, and so on.