Exercises: Web page layout

You should do the recommended exercises. Do the optional exercises if you want more practice.

Recommended

Exercise: Dreamy

Check out the Dreamy template from OSWD.

I adjusted the template a little, made it simpler. You can see it.

Download a zip file with the HTML, CSS, and image files.

Use the template to make a site with animal jokes. Have a home page, a page for dog jokes, another for cat jokes, and another for horse jokes. Add other pages if you want. Remember to replace the placeholders in the template (title, slogan, etc.) with appropriate content.

In the right sidebar, add images of the appropriate animal. Use public domain or otherwise free images. There are links to free image sites on the links page.

Upload your site to your server, and put the URL below.

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

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

Optional

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

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

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


How to...

Lessons

User login

Log in problems? Try here


Dogs