What to do

You will need to consult DreamWeaver basics to check that Dreamweaver is set up correctly.

Then in Dreamweaver Code View you will practice entering the html codes for lists that are covered in this session.

To do the practice, print this page and print out the demo page of codes (this is in Acrobat format). You'll also want to print the DreamWeaver basics page.

Now create a new DW file, and enter the codes. Save the file in H:\www with the filename lists_links.htm

Lists: Basic Types
Ch 13, p 204

Two basic types:

  1. Unordered or bullet
    <ul> ... </ul>
  2. Ordered - numbers / letters
    <ol> ... </ol>

The items on the list are indicated with <li> ... </li>

Ross Shannon's HTMLSource has a good overview of Lists. You should also read Castro chap 13 (this also has good stuff with styles which we haven't looked at yet).

Attributes
Ch 13, p 206

An unordered list can have different bullet shapes:

  • type="disc"  (default)
  • type="circle"
  • type="square"

example of use:

<ul type="circle">
     <li> .... </li>
</ul>

Practice unordered lists using lists demo page as an example.

Ordered lists can also have different markers:

  1. type="1" (default)
  2. type="A" or type="a" — alphabetic
  3. type="i" or type="I" — roman

    <ol type="a">
        <li> ... </li>
    </ol>
Nesting Lists
Ch 13, fig 13.22

Lists can be nested within each other but you need to be careful to make all the tags line up:

<ul type="square">
   <li>first item</li>
   <li>second item
        <ol type="a">
            <li>sublist item a</li>
        </ol>
     </li>
   <li>third item</li>
</ul>

Note: the nested <ol> list is located inside the <li> tag.
Note: observe how the list codes can be indented to clearly indicate where the list starts and finishes. This helps reduce confusion especially with long multiply nested lists.

Practice ordered and nested lists using Rugby positions on the List Demo page as an example.