This is one long exercise that covers all the concepts in this lesson.

You are hired to create a site about fictional dogs.

I don’t know why. Maybe an eccentric millionaire. Maybe as part of a media promotion. Just go with it, OK?

The site will have the following structure:

• Home page
• Dogs on screen
  • Dogs in film
  • Dogs on TV
• Dogs in print
  • Dogs in literature
  • Dogs in comics
• Dogs on radio
• Contact page
• Credits, permissions, terms of use page
• Site map

Create the directory structure

Here is how the files will be laid out. Create a directory structure to match.

The library directory contains files that are shared by pages in several parts of the site. fictional-dogs.css will be used by every page.

Create a CSS file

Create a CSS file. Put it in the library.

Choose fonts for the site. Choose font sizes. Set the colors of the heading tags. Set a background color, if you want.

Experiment. Have fun. Be puppy-like.

Create a vertical nav bar

Create a vertical nav bar with rollover effects. Include buttons for the home page, screen, print, and radio. The nav bar should show on the left edge of every page.

The nav bar can be plain text, or you can use images. Here are some images, if you want to use them. You can make your own if you prefer.

Create a horizontal nav bar for the footer

The footer for each page should look something like this:

It has links to the contact page, the credits, permissions, and terms of use page, and the site map.

Create the home page

It should have the usual stuff. Mine looks like this (shrunk, of course):

Create the credits, permissions, and terms of use page

This page has three parts to it. Add a table of contents at the top. Mine looks something like this:

Create a site map

Mine looks something like this:

You can see my solution.

Upload your solution to your server. Enter the URL of the home page below.

(Log in to enter your solution to this exercise.)

Create a set of three Web pages about insects.

The first one should look like this:

There’s a 36 pixel heading at the top. Then there’s a horizontal nav bar with three images. Clicking on the first one opens the beetles page. Clicking on the second one shows the butterfly page. Clicking on the third one shows the DIY (do-it-yourself) page.

The buttons in the nav bar have image rollovers:

The butterflies page looks like this:

The DIY page looks like this when it loads:

The first text field has the focus.

The user enters the number of beetles and butterflies s/he wants to make, and the page shows the number of insect parts the user should order. For example:

A beetle requires a head, a body, four wings, and six legs. A butterfly requires a head, a body, two wings, and six legs.

You can see my solution, but try it yourself first!

Here are some images you can use.

Upload your solution to your server and put the URL below.

(Log in to enter your solution to this exercise.)