Due Date: Wednesday, March 14, 2007 by 10:00 PM (Week 10)

This assignment asks you to create a document which contains two separate user interface components: a vertical sidebar-type graphical navigation list/menu and a horizontal top navigational bar which takes up 100% of the window space.

Homework Guidelines

• Use (and know) the XHTML Basic Template found on COIN 65 Resources page. Be sure to use the XHTML 1.0 Strict DOCTYPE.
• Validate your work using an HTML validator (see Resources page).
• Put any images into a folder called images.
• Write your own code. You may use the code you produced from the lecture tutorial. This pertains to this assignment and any other you receive in this class. Do NOT use our (or anyone else's) code. If you do, you will fail the assignment. If you have any questions about this, see the Foothill Honor Code and/or contact us.
• Be sure to test your work. We will be testing and grading your work in Firefox, Netscape 7.X and/or Safari. We strongly suggest you upgrade to the most recent browser(s).
• Do NOT name any file you upload this quarter index.html. We need to be able to look in your directory and see the files and dates/times the files are uploaded.

How do I learn how to create and style lists as menus?

There are multiple sources of information for doing this:

• Read the lecture pages on list properties which will be required to create a menu effect.
   
  Then follow the lecture tutorials for creating a vertical menu and a horizontal menu.
   
  These instructions are an adaptation of Russ Weakly's menu lessons in the CSS in 10 Minutes book.
• An alternative would be to follow the instructions directly from Chapters 15 and 16 in CSS in 10 minutes. These two lessons walk you through the creation of vertical and horizontal menus based on Russ Weakly's step-by-step directions.
• Another option is to follow the Stylin' textbook instructions on pages 173 - 195.
   
  You do not need to go beyond page 195 as the author then enters nested menus. We are not concerned with that this week, we need only a top navigation bar and a sidebar type menu, not nested hierarchal menus!
   
  I will also mention that the example from the Stylin' text is somewhat problematic from a design standpoint. The horizontal menu is not that easy to customize in terms of width and height and employs more IE hacks than the methods from the lecture or CSS in 10 Minutes.
   
  Our recommendation is that you follow our adapted tutorial based on Russ Weakly's information, but you are free to choose your method when creating the two menus.

The Assignment

This assignment is divided into two "parts." You will create two separate navigation DIV elements: a vertical sidebar-type graphical navigation list/menu and a horizontal top navigational bar which takes up 100% of the window space. You will then combine those two "parts" into one document.

It is hoped that the "parts" you develop in this assignment might be used as a resource in your final project. Feel free to personalize the sizing, colors, borders, whatever, to fit your design guidelines. The point of the assignment is to make common navigational menus. What they look like is totally up to you. Play and experiment, please!

Initially, the vertical menu (a sidebar) and the horizontal menu (the top stripe navigation) should probably be developed in isolation. It is normally easier to develop these individual parts separately.

When each of the menu lists (vertical and horizontal) are complete, their styles and list content can then be copied and pasted into a new document. All of the parts will be assembled and made to work and display appropriately within one document which contains all of the parts, resulting in a combined page layout.

Here is an example of what you might submit. The page includes a vertical menu, a horizontal menu, and some textual content. Yours will look different than this example and hopefully more graphically pleasing!

Specifics

• Create a folder named week_9 and save all of your documents in this folder. When the assignment is completed, you will upload this entire folder to your CTIS webspace and create a link from your home page to your submitted assignment.
• The top navigation bar should be at the top of the browser window and should take 100% of the width of the browser window.
• The sidebar should be positioned below the top navigation and have some space on its left side.
• The content area, with text you input, should be below the top navigation area and be positioned to the right of the sidebar. It should also have some margin on the right side so the text is not crammed up against the right side of the window. You may use the Lorem text from this DATA document for your content filler if you wish.
• You are encouraged (expected) to make your menus graphically different than the tutorials! Feel free to change the sizing, colors, whatever. These might be parts which you can later use in your final project, so feel free to personalize them as you require!

Questions?

Please ask in the forum!

- - - - -

Submitting Your Assignment

• Validate your work!
• Create a folder named week_9 and save all of your documents in this folder. When the assignment is completed, you will upload this entire folder to your CTIS webspace.
• Put any images into a sub-folder named images.
• Create links to the documents on your Home page and test.
• Inside ETUDES, click on the "Assignments" link and submit your assignment by pasting in the URL to your home page.