Web Site with Graphical Menu

 

Today's exercise will use a graphical menu to link all pages in a web environment. It is based upon the environment used previously in the relative links exercise. In this work, place all of the graphics as before, but add a clickable menu at the left of the page that allows access to any page at any time. This exercise is to be completed using your choice of HTML editor, working basically on your own.

This is an example of the final site

Step One

Create a structure of folders as illustrated below, using the suggested names:

Step Two

Download the graphics from this page and place them in the WGraphics folder

Download this home page and place it in the root directory of the site

Download this lesson page and place it in the Lessons folder

Download this quiz page and place it in the Quiz folder

Step Three

Each page contains instructions, most of which are within [brackets]. Follow these to create a skeleton structure for an educational web site.

Format the page using HTML. You will want the buttons to show in a consistent part of each page.

Advanced: Create a visual cue with each button that lets the user know they are on that page (i.e. the Quiz button is darkened when on the Quiz page, and contains no link).