Mary did an amazing job of teaching us the basics of CSS, HTML and Wordpress. I'd highly recommend using her for...More Testimonials »

Lists

HTML provides three types of lists: unordered lists, ordered lists, and definition lists. In this lesson, we will learn how to create all three.

Lesson Goals

  • Create unordered lists.
  • Create ordered lists.
  • Create nested lists.
  • Create definition lists.

Ordered and Unordered Lists

There are three types of lists:

  1. Unordered Lists - used to create lists in which the order of the list items is not important (e.g., a grocery list or a list of people in a group).
  2. Ordered Lists - used to create lists in which the order is important (e.g., a recipe or setup instructions).
  3. Definition Lists - used to create lists containing terms and definitions (e.g, a dictionary or glossary).

Creating ordered and unordered lists in Dreamweaver is simple using the list icons in the Properties Inspector: To illustrate:

  1. Open ClassFiles/Dreamweaver/Exercises/Anchors-list.html in Dreamweaver.
  2. Place the cursor on the line with the three linked story titles.
  3. Click on the Unordered List icon in the Properties Inspector. Your page should appear as follows:
  4. Place the cursor at the end of "Pooh Goes Visiting" and delete the dividing bar:
  5. Press Enter:
  6. Place the cursor at the end of "A Mad Tea-Party," delete the dividing bar and press Enter:
  7. To add another bullet at the end of the list, place the cursor at the end of "The Naughty Boy" and press Enter and type a story name:
  8. You can add additional bullets by typing story names and pressing Enter just as you would in a typical Word processing tool.

You create ordered (or numbered) lists in the same way. In step 3 above, you would click the Ordered List icon instead of the Unordered List icon.

To create an ordered or unordered list from scratch, simply start a new paragraph and press the appropriate list icon on the Properties Inspector.

Nesting Lists

Unordered and ordered lists may be nested any number of levels deep. To illustrate:

  1. Open ClassFiles/Dreamweaver/Exercises/nested-list.html in Dreamweaver.
  2. The page is currently empty. Type "Grocery List" and make it a Heading 1.
  3. With the cursor below the heading, begin an unordered list by clicking on the Unordered List icon in the Properties Inspector.
  4. Type "Fruit" and press Enter:
  5. To create your nested list, press Tab (or click the Indent icon on the Properties Inspector) and type "Apples" Enter, "Pears" Enter, "Bananas" Enter:
  6. There are multiple ways to get back to the parent list:
    1. Press Enter again.
    2. Press Shift+Tab.
    3. Click the Indent icon on the Properties Inspector.
  7. Type "Meat" and press Enter:
  8. Continue with your list until it looks like this:
  9. To get out of a list, make sure the cursor is at the very end of the last item in the list and press Enter twice.

Converting Lists

To convert an unordered list to an ordered list (or vice versa), click somewhere within the list (or sublist) and then click the appropriate list icon on the Properties Inspector.

Definition Lists

Definition lists, which are used less frequently than unordered and ordered lists, are used to create lists containing terms and definitions. Dreamweaver does not provide a way to create them using the Properties Inspector. You can insert a definition list in Dreamweaver CS6 using the Insert menu:

In Dreamweaver CC:

  1. Select the location to place the list.
  2. Choose Format > List > Definition List.
  3. Enter the list items.

To illustrate how a definition list is added to a page:

  1. Open ClassFiles/Dreamweaver/Exercises/definition-list.html in Dreamweaver.
  2. The page is currently empty. Type "Abbreviations" and make it a Heading 1.
  3. With the cursor below the heading, begin a definition list: Insert > HTML > Text Objects > Definition List. You will not notice any change on the page, but if you look at the Tag Inspector on the bottom left, just above the Properties Inspector, you will see this: This indicates that you are in a defintion term (dt) within the definition list (dl).
  4. Type the following:
    • ol Enter
    • Ordered List Enter
    • ul Enter
    • Unordered List Enter
    • dl Enter
    • Definition List Enter Enter
  5. After pressing Enter twice at the end of the list, you should no longer be in the definition list and your page should look as follows:

The display of definition lists is a little odd, but if you learn CSS well, you will be able to change the display to look like the page below (or however else you like):

Creating Lists

Duration: 15 to 25 minutes.

In this exercise you will create a new page that looks like this:

  1. Create a new page and save it as RunningTerms.html in ClassFiles/Dreamweaver/Exercises.
  2. Add the title and heading level 1.
  3. Create the list of links at the top. Here are the links:
    • Home: index.html
    • Races: Races.html
    • Resources: Resources.html
    • Calculator: Calculator.html
    • Running Log: RunningLog.html
    • My Account: MyAccount.html
    • Log out: Logout.html
  4. Add the definition list below the navigation menu.
    • If you do not want to type the whole list out, you can grab the content from ClassFiles/Dreamweaver/Exercises/RunningTerms.txt; however, do not copy and paste the whole thing at once as that will add a bunch of unwanted paragraphs. Rather, copy and paste each term and definition as needed.
  5. Save your page and open it in the browser. Does it look right?

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Converting Existing Content to Lists

Converting existing content to lists in Dreamweaver can be tricky. The easiest way to see this is to illustrate with an example. Our end goal is a list that looks like this:

  1. Open ClassFiles/Dreamweaver/Exercises/groceries.html in Dreamweaver.
  2. Open ClassFiles/Dreamweaver/Exercises/groceries.txt and copy and paste its entire content into groceries.html:
  3. Highlight everything you just pasted in and click the Ordered List icon in the Properties Inspector:
  4. Now we want to turn the actual food items into sublists. Highlight the three fruit items like this: And press Tab.
  5. That didn't work, did it? Your list probably looks like this:
  6. Undo using Edit > Undo Indent or by pressing CTRL+Z.

Here's the problem: those breaks that move the names of the food items to the next lines are line breaks not new paragraphs. The content that comes after them (i.e, the fruit item names) are considered part of the "Fruit" list item. So you cannot indent the individual items without indenting the "Fruit" list item as well.

The solution is to delete the line breaks:

  1. Place the cursor immediately before the letter "A" in "Apples" and press Backspace until "Apples" is on the same line as "Fruit":
  2. Press Enter to create a new list item:
  3. Do the same thing with "Pears" and "Bananas" and then highlight all three fruit:
  4. Press Tab. That should have worked:
  5. Now we can covert the sublist to an unordered list by highlighting all three fruit names and clicking the Unordered List icon in the Properties Inspector:

Watch as your instructor repeats this for the "Meat" and "Dairy" list items.

When working with nested lists, if things get messed up, usually the easiest thing is to get rid of the list and start over. To remove a list, highlight the whole thing and click the relevant list icon in the Properties Inspector.

Converting Content to a List

Duration: 15 to 25 minutes.

In this exercise you will modify Resources.html, which currently looks like this:

Notice that it contains a list of resources. Although the order may not matter, it would be nice to be able to refer to a resource by number, so that the list could be represented as an ordered (or numbered) list. Each resource has some related information, which could be represented in a nested list:

  • The date it was posted.
  • A description.

Modify the page to look like this:

  1. Open ClassFiles/Dreamweaver/Exercises/Resources.html in Dreamweaver.
  2. Modify the page so that it appears as shown in the second screen shot above.
  3. Save your work and open your new page in a browser to test it.

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Tables → ← Images

Client Success
  1. Compare Us
  2. Client List
  3. Testimonials
Join The Team
  1. Learn how you can become a Webucator Trainer
  2. Career Opportunities
Locations
© Webucator, Inc. All rights reserved. |Toll Free: 1-877-932-8228Toll Free: 1-877-932-8228 |Outside the USA: 315-849-2724|Fax: 315-849-2723