Creating Ordered and Unordered Lists

This tutorial will illustrate creating ordered and unordered lists using bullets in Dreamweaver CS5

It's very useful sometimes to be able to present information in the form of a list. Dreamweaver provides three types of list, and we're going to look at two of them here. They are ordered and unordered lists. The third type is a definition list. We'll start with an unordered list.

I'm going to list the continents of the world after the sentence on this page.

Look at the Properties Panel. One of the buttons on the HTML page is used to create an unordered list. You can see the tool tip here.

Press this button, and Dreamweaver starts the list for you by inserting a "bullet" to mark the first item in the list. (By the way, if you look at the bottom of the document window you'll see that it has also inserted a <li> HTML tag for a list item.)

Now type the first item in the list and press the Enter key. a second bullet is created and the list continues.

Type in the rest of the list.

To end the list you can either press Enter when there is only the bullet in a line, or you can press the Unordered List button in the Properties Panel again. The last bullet disappears, as does the <li> tag at the bottom of the document window.

It's also possible to make a list more structured by using indentation. Add an entry to the list in the position shown that says "The Americas". Now select the last two rows and press the Indent button in the Properties Panel.

The last two rows are indented, and the bullet is changed on the indented items.

It's also possible to create an ordered list. We're going to create an ordered list to tell people how to create an unordered list. Here is my starting sentence, with the tool tip for the Ordered List button shown in the Properties Panel.

Press the Ordered List button and a number appears for the first item in the list.

Now type the instructions in order. At the end of each line, pressing Enter starts the next list item and Dreamweaver automatically inserts the next number in sequence.

End the ordered list in the same way that you end an unordered list, either with an empty entry or by pressing the appropriate list button (in this case Ordered List) again.

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

This site proudly build with Site Build It!