Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
  • 💬 Discuss

Working with Lists

Lists are an easy way to organize content on your webpage. Dreamweaver supports three types of lists:

  • Numbered lists or Ordered lists, for lists with items that need to be in a particular order red-a.jpg. List items are numbered and indented from the left margin. If you add or remove items from the numbered list, it automatically renumbers.

    04fig23.jpg

    red-a.jpg Numbered lists automatically renumber if you insert a new item between two existing items.

  • Bulleted lists or Unordered lists, for lists of items in no particular order red-b.jpg.

    04fig24.jpg

    red-b.jpg Bulleted lists are single-spaced and indented.

  • Definition lists, where each item has an indented subitem red-c.jpg.

    04fig25.jpg

    click here to view image

    red-c.jpg Definition lists have the definitions indented under the definition terms. The definition terms don’t have to be all uppercase—they just happen to be in this figure.

To create a list

  1. Type the items for your list into the window. After typing each item, press Enter (Return).
  2. Select the items in the list.
  3. Choose Format > List, and then choose Unordered List, Ordered List, or Definition List from the submenu.

    or

    Click either the Unordered List or Ordered List button in the HTML mode of the Property inspector.

    or

    Click one of two buttons in the Structure category of the Insert panel: ul for Unordered List, or ol for Ordered List.

    The text changes to the kind of list you chose.

Setting list properties

You can change numbered list and bulleted list properties in Dreamweaver. Choose between five types of numbering, as shown in Table 4.3. For bulleted lists, you can choose either a round bullet (the default) or a square bullet. There are no properties to set for a definition list.

Table 4.3. Numbered List Style Options

List Name

Example

Number

1, 2, 3, 4

Roman Small

i, ii, iii, iv

Roman Large

I, II, III, IV

Alphabet Small

a, b, c, d

Alphabet Large

A, B, C, D

To set list properties

  1. Click in the list you want to change to place the insertion point.
  2. Choose Format > List > Properties.

    The List Properties dialog appears red-d.jpg.

    04fig26.jpg

    click here to view image

    red-d.jpg In the List Properties dialog, you can change the way lists are numbered and bulleted.

  3. Do one or more of the following:

    • In the List type pop-up menu, select Bulleted List, Numbered List, or Directory List (“definition list” is called “Directory List” in this dialog for some reason).
    • In the Style pop-up menu, select one of the Bulleted List or Numbered List styles.
    • Use the Start count text box to set the value for the first item in the numbered list.
  4. Click OK.

Nesting lists

You can indent lists within lists to create nested lists. Because nested lists do not have to be of the same type, you can create, for example, a numbered list with an indented bulleted list, and you can have multiple levels of nested lists within one overall list red-e.jpg.

04fig27.jpg

click here to view image

red-e.jpg You can nest numbered lists inside bulleted lists.

To create a nested list

  1. Click the end of a line within an existing list to place the insertion point.
  2. Press Enter (Return).

    Dreamweaver creates another line of the list.

  3. Press Tab.

    Dreamweaver creates a new indented sublist of the same type as the parent list. For example, if the parent list is a numbered list, the new sublist will also be a numbered list.

  4. (Optional) If you want the sublist to be a different type of list than the parent list, click the Numbered List or Bulleted List button in the HTML mode of the Property inspector.
  5. Type the list item.
  6. Press Enter (Return).

    Dreamweaver creates a new sublist item.

  7. To return to the original list, use the up or down arrow keys to move the insertion point into one of the items in the original list, or click to place the insertion point where you want it.
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus