1. Nested Lists Web Design – Section 3-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

2. Objectives • The Student will: • Be able to nest a list within another parent list.

3. Why Nest Lists • Sometimes it is necessary to embed or nest lists within lists because there are subtopics of one or more of the list Topics.

4. Things to Consider • Remember that you must “close” all the inside tags before you close the outside tag • Indentation helps keep the lists and the tags straight. • Structure: <ol> <li> Topic 1 <ul> <li> Sub Topic 1 </li> <li> Sub Topic 2 </li> </ul> </li> <li> Topic 2 </li> </ol>

5. <ul> <li>Unit Four: Graphics <ul> <li>Evaluation of web graphics</li> <li>GIF vs. JPEG</li> <li>Web photo album</li> <li>Sample buttons</li> <li>3-D box</li> <li>Receive instructor's approval of banner </li> </ul> </li> <li>Unit Five: Overall Site Design and Management <ul> <li>Usability study report</li> <li>Receive instructor's approval of the raw HTML list that will be turned into the navigation system</li> <li>Receive instructor's approval of your use of an external style page</li> <li>Receive instructor's approval as to how you're controlling the site's navigational menu with your external style sheet</li> <li>Javascript enhancement</li> </ul> </li> </ul> In this list it’s difficult to find the beginning and the ending of each of the lists. It’s almost impossible to find the nested lists. Keeping things clear

6. <ul> <li>Unit Four: Graphics <ul> <li>Evaluation of web graphics</li> <li>GIF vs. JPEG</li> <li>Web photo album</li> <li>Sample buttons</li> <li>3-D box</li> <li>Receive instructor's approval of banner </li> </ul> </li> <li>Unit Five: Overall Site Design and Management <ul> <li>Usability study report</li> <li>Receive instructor's approval of the raw HTML list that will be turned into the navigation system</li> <li>Receive instructor's approval of your use of an external style page</li> <li>Receive instructor's approval as to how you're controlling the site's navigational menu with your external style sheet</li> <li>Javascript enhancement</li> </ul> </li> </ul> If you indent you can easily find the beginning and ending of the lists Keeping things clear

7. This is how that list looks:

8. Summary • Nested lists are a great way to organize data • To make it easier to understand and edit your list • Indent • Indent • indent

9. Rest of Today • Follow the directions in Nested Lists.doc on the Hancock Website.