Cascading Style Sheets (CSS)

Navigation Assignment Explained

Listed below are the steps you need to follow to complete the navigation assignments.

1. Read Chapter 6 "Creating Interface Components" (pgs 206-229). The textbook takes you step by step through the process fro converting a list to a vertical or horizontal navigation bar. I recommend you do all the reading in week 1, since there are only 20 pages.
   
2. Open the DVD > css-part2 > start-here.html >list nav. Here is a list of what you need to watch in week 1 of the assignment.
   * list basics
   * modify lists
   * 3 lists variations
   * list sampler
   * horizontal navigation
   * modify navigation
   * IE hack for hover
   
   You also need to access the pop down lesson and view these videos.
   # rollover with color
   # graphics rollover
   # creating the rollover image
   # drop down menus (2nd level navigation)
   # hide drop down menu
   # Add pop out menus (3rd level navigation)
   # add another pop out menu (4th level navigation)
   # insert drop down menu into "live site" part 1
   # insert drop down menu into "live site" part 2
   
3. Create a sample page that has a list which is converted to horizontal navigation
4. Create a page with 3 links that display an image in the background that has 4 states (link, visited, hover, active)
5. Create a sample page that has navigation that displays horizontally and then has drop down navigation, pop out navigation, and second level pop out navigation. (for a total of 4 levels of navigation)
6. In week 2 you will need to view the following lessons. Access DVD > css-part2 > start-here.html >adv. nav lesson and v
   
   View these lessons:
   
   # vertical pop out
   # modify vertical
   # IE hacks - vertical
   # sliding door intro.
   # sliding door images
   # sliding door 1
   # sliding door 2
   # sliding door 3
   # transparent tabs
   # combine tabs
   
7. Create vertical pop out navigation
8. Create sliding door navigation that uses tabbed images (feel free to use the images provided on the DVD in the lesson titled "sliding door images". It takes a long time to make your own tab images and this lesson will keep you busy).
9. Add either horizontal pop down (2 levels), or vertical pop out, or sliding door navigation to the live site
   
10. Now open the "homework.html" page and activate the links for the navigation lesson. This will require you to create a link to these files:
    
    Simple horizontal navigation
    Page with links that display background image w/ 4 states (link, visited, hover, active)
    link to image with 4 states
    Horizontal navigation bar with 4 levels of navigation drop down & pop out navigation.
    Vertical Navigation
    Sliding Door Navigation
    Live site with advanced navigation added
    css for live site
    
11. These files will be placed in the folders indicated below
    
    sample folder
    
    "horizontal-nav.html"
    "4states-image.html"
    "pop-down-nav.html"
    "vertical-nav.html"
    "sliding-door.html"
    images that are used for the image with 4 states and sliding door
    
    live folder
    "live-site.html"
    "live-site.css"
    if images were used for live site navigation, load them into live folder
    
    
12. Please upload the files (including your modified homework page) onto "student". Use a Web browser to view your homework page and click on the links to make sure the homework page links to the new files you have created.
13. I will use the "student work" page to grade your work.