Exercises: Web page layout

Exercise: Egyptian layout

Make a layout for a site about ancient Egypt. Put a header in the top region, a nav bar in the left region, and a footer in the bottom region.

Here are some background images that might be useful. They’re from GRSites.

Egyptian image

Egyptian image

Egyptian image

Also check out Webweaver and KingTutOne.

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

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

Exercise: Computer layout

Make a layout for a site about computer electronics. Put a header in the top region, a nav bar in the right region, and a footer in the bottom region.

Here are some background images that might be useful. They’re from GRSites.

Computer image

Computer image

Computer image

Computer image

Computer image

Use other images if you want. Choose fonts and colors that fit.

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

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

Exercise: Change the blog design

Here’s the miniBLOG design from OSWD:

Original design

Figure 1. Original design

Download it, and change it to look like this:

New design

Figure 2. New design

These two images might be handy:

Logo

Body background

(This image is shrunk a little to make it fit. It’ll be bigger when you download it.)

You can try my solution, but don’t look at the source code until you do it yourself!

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

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

Exercise: Dog site layout

Make a Web site about fictional dogs. Here are the specs:

  • At least six pages.
  • Each page with the same layout.
  • The layout should be fixed, 750px wide, centered in browser’s window. There should be a header, a footer, a right region with a vertical nav bar, and a content area.
  • The header should have a tiled background. The header should have the same text and background on all pages.
  • The navigation bar should have buttons with an animated mouse-over effect. Every page should have the same buttons.
  • The footer should use a smaller font than the rest of the page.
  • Use sans serif fonts for everything.
  • Use a monochrome color scheme with a single accent color.

One of the pages should be a faux contact form. It should have fields for:

  • Name
  • Email address
  • Message

For each field, the label should be above the field. There should be a Send button. It should validate the comment field; there must be something in the comment field (show an error message if there is not. The other fields can be empty.

The form doesn’t actually have to send a message; it’s just pretend. But you should thank the user for sending a message, after s/he clicks the Send button.

Upload your solution to your hosting account. Put the URL below.

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


Lessons

User login


Dogs