1 / 9

Nested Lists

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. Objectives. The Student will: Be able to nest a list within another parent list. Why Nest Lists.

morgan
Download Presentation

Nested Lists

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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.

More Related