| Dreamweaver creates three basic types of lists: ordered, unordered, and definition. An ordered list consists of list items that are ordered numerically or alphabetically. You have the option of using Arabic or Roman numerals as well as upper- or lowercase letters. Ordered lists are ideal for situations in which you need to clearly organize and label items, such as presenting a list of steps. An unordered list is often called a bulleted list because each list item has a bullet in front of it. The bullet symbol that Dreamweaver displays by default can be changed to a disc, a circle, or a square. Unordered lists are good for presenting information in which each item needs to be differentiated, but where labeling with numbers or letters is unnecessary, such as a list of food types. Definition lists are composed of terms and their definitions; they will be explored in the next exercise. In all list types, each item in the list needs to be contained in its own paragraph for the list to be correctly formatted. In this exercise, you'll make two lists: one ordered and one unordered. You then tweak the list styles by using the List Properties dialog box. You'll work with a definition list later in this lesson. 1. | In index.html, select the text starting with yama (restraints or moral codes) and ending with samadhi (meditative absorption). Click the Ordered List button in the Property inspector. The selected text is now formatted as a numbered list.
There are a number of options available for lists. You can change the numbering scheme of ordered lists by modifying the list's properties, as you'll do in the next few steps with an unordered list. When modifying an ordered list, the ordered list type is known as a Numbered List in the List type pop-up menu of the List Properties dialog box. | | | 2. | Select the days and their respective times listed under the Schedule heading. Click the Unordered List button in the Property inspector. Tip You can also choose Text > List > Unordered List to format the selected text as an unordered list. The selected text is formatted as a bulleted list. You can change the default bullet symbol of unordered lists by modifying the list's properties, which will be described in more detail below. The appearance of bullet symbols might vary from browser to browser, and all lists use a set amount of spacing that will vary from browser to browser. You have limited options regarding the appearance of numbers/letters, bullets and list spacingfor more control over list appearances, you can make use of style sheets, which are covered in Lesson 4. When modifying an unordered list, the unordered list type is known as a Bulleted List in the List type pop-up menu in the List Properties dialog box. Tip To remove the list formatting or switch to a different type of list, select the entire list and click the corresponding list button in the Property inspector to remove the list formatting (the Ordered List icon if it is an ordered list or the Numbered List icon if it is a numbered list) or the opposite list type to switch to that type of list. | 3. | Place the insertion point at the end of the last line in the bulleted list and then press Return (Macintosh) or Enter (Windows). Type Sunday. When you add text to a list, you need to use a regular paragraph return to create a new text block for the additional item. Every item in a list must be in a separate paragraph. Tip Pressing Return (Macintosh) or Enter (Windows) twice exits the list mode and begins a default paragraph. | | | 4. | Press Shift+Return (Macintosh) or Shift+Enter (Windows) to create a line break, and then type 9-10:30am. Insert another line break and type 11am-12:30pm. Insert a third line break and type 6:15-7:45pm. If you need to create one or more new lines within the same item you can use line breaks, as you've done in this step. Your document should appear similar to the following example.
| | | 5. | Click any line in the bulleted list and then click the List Item button in the Property inspector.
If you select the whole list, the List Item button will be dimmed and unavailable. If the List Item button is not visible, click the expander arrow in the lower-right corner of the Property inspector. Tip With the cursor in the list, you can choose Text > List > Properties to open the same List Properties dialog box. The List Properties dialog box opens. In the List Properties dialog box that opens you can choose the List Type as well as the style you want from the Style pop-up menu. The options in the Style menu will vary depending on whether the list is Ordered or Unordered.
The List item area at the bottom of the List Properties dialog box contains a New style menu that you can use to change the look of a single item or several items in a list, instead of changing the organization and look of the whole list. Also available in this area is the Reset count to text field, which enables you to change the count of the list beginning with the line in which the insertion point is placed. Note The List type menu in the List Properties dialog box contains two additional list types: Menu and Directory. These are older variations in the Bulleted list; both are similar in purpose to unordered lists and are typically displayed exactly the same as unordered lists by most browsers. It is generally recommended that you use the Bulleted list option for all unordered lists. | | | 6. | From the Style menu, choose Square. Click OK. |
Be sure to use the Style menunot the New style menu. If you use the New style menu in the List item area, your change will only be applied to the line of the list in which your insertion point is located. All items in the list now use the square bullet symbol. Note The color of numbers and bullets that is used in ordered or unordered lists is based in the document default for text color. You'll set the document defaults in the Lesson 4 when you begin to work with CSS. Color, size, and other appearance attributesincluding the style of bulletsare best modified through CSS. Leave the index.html document openyou'll return to it later in this lesson. |