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:

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.

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.)

Write three HTML pages that make an animal quiz. Each page shows four images, and asks the user to click on a particular animal.

You can download all of the images in a zip file. The images are sized, and ready to use. Start by downloading the images, and extracting them into a directory.

Here’s the first page, scaled down to fit in this space:

Figure 1. First page

The text says “Click on the dog.”

When the user hovers over an image, the cursor should be a hand:

Figure 2. Hover cursor

If the user clicks the wrong image, show this:

Figure 3. Wrong

The sad face is included in the image zip file.

If the user clicks the right image, show this:

Figure 4. Right

If the user gets it right, the “You got it wrong” message should vanish before the “You got it right” message appears.

The “You got it right” feedback includes a link to the second page. Here it is.

Figure 5. Second page

The text says “Click on the goose.” The page works the same as the first one.

Here’s the third and last page:

Figure 6. Third page

The message says “Click on the echinda.”

Here is the “right” feedback for the third page:

Figure 7. Third page feedback

Hints:

• Keep all the files together in one directory.

• Use an external style sheet, linked to all three HTML files.

• Use a <div> tag to group the tags in a feedback area. E.g.:

<div id="right">
   <img src="lego…
   You got it!<br>
   ...
</div>

• Add a click() event to each image.

Upload your solution to your server. Put the URL below.

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

Graopugh is a game played by two teams of two dogs each. Each team has a Captain and a Wisher.

Create a site with five pages on it. index.html should look like this:

Each image links to a page about that dog. Here’s a sample:

Make a page for each dog.

Use the following images.

Follow these specifications:

• Use an external stylesheet.
• Use a table.
• Separate the table cells by about 30 pixels.
• Center the dog names in their cells on the home page.
• Put a black border around each dog image.
• The home button image should have no border.
• Make sure each image has an alt.
• Use a sans serif font for everything.
• Make the normal text about 14 pixels high. Make the headings larger.
• Make the main headings dark green. Make the dog names on the dog pages dark red.
• Color the team names appropriately.
• Make the background of every page light yellow.
• Make the position names on the home page bold.
• Give every page a title. The home page should have the title “Graopugh Dog Teams.” The dog pages should have titles like “Graopugh Dog Teams: Buddy.”
• Use only relative links.
• Use any directory structure you like.

Upload your solution to your server. Put the URL below.

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

Write a zombie recognition test. It has three pages. The first page is like this:

Figure 1. First page

The background color is #FFFFDD. The header color is #600000. The font is a generic sans serif. The base font size is 14 pixels. Use these styles on all pages.

Click on the link, and see:

Figure 2. The first question

The screen shot has been scaled down a little to fit on this display.

The user can click on each of the images. Click on a dog, and see:

Figure 3. Wrong

Click on the zombie, and see:

Figure 4. Right

Note! If the user clicks on a dog and then the zombie, the screen should look like Figure 4. The “wrong” message should not appear.

Click on the “Next” link, and see:

Figure 5. Done

Other requirements:

• Make one external CSS style sheet. Use it on all three pages.
• The mouse cursor should be a hand when it is over an image.
• There is a horizontal gap between the images.

Here are the images:

Upload your solution to your server. Enter the URL below.

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

Create a page call dog.html, that looks like this:

Here’s the picture:

Now make a page call cazador.html, that looks like this:

Here’s the picture:

Now make a third page that looks like this:

Use the <iframe> tag, to insert dog.html and cazador.html inside the third page. You’ll have to Google the tag. You’ll need two of them.

Upload your solution to your server, and enter the URL below.

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

Create four pages. Here’s how they work together:

Hint: Check out JavaScript’s window.open() function.

Upload your solution to your server, and enter the URL below.

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