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.



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.





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:

Figure 1. Original design
Download it, and change it to look like this:

Figure 2. New design
These two images might be handy:


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