Web Design and Implementation

Spring 2004

Lab 5 – 20 points

Due Feb. 11 (accepted through Feb. 17)

Continuing with Frames
Forms and Validation

Part I. Getting started

Create a subdirectory on your web site named Lab5 and put all files relating to this assignment in this folder.

For each file, put the name of the file, your name and a brief description of the purpose of the page in comments at the top of the page.

Part II. Rotating pages

Create (or rename) five simple web pages. Name them rotate1.html, rotate2.html, rotate3.html, big.html and little.html. Note that the names must be exactly as I have shown in order for the example to work. You can use FrontPage or DreamWeaver (or any other tool) to do this if you like.

Put your name in one or more of the web pages.

Implement the example on page 43 of your textbook.

Change the example as necessary so the rotating window occupies the bottom 1/4 of the screen.

For this example, focus on understanding the following concepts:

onLoad event

nested framesets

setTimeOut()

Part III. Forms

Create a form. Use the table tags to make your form as attractive as possible. Do NOT use FrontPage or DreamWeaver to do this part of the assignment. Your goal is to understand HTML forms and tables from the ground up.

Your form should have at least four textfields – one for a name, one for an age, one for a phone number and one for an email address.

Include both submit and reset buttons.

Write and call functions to validate the fields according to these rules.

Names should have only alphabetic characters.

Ages should have only integers.

Phone numbers should be in the format 999-999-9999. Alternatively allow the user to include the country code and validate international calling. Be sure to include on the web page a hint to the user as to the format of the number they should type in for international dialing.

Email addresses must have at least three components (name@site.domain) and must include the @ sign and at least one period.

If a field does not meet its validation test, display an Alert box and focus on that field.

Part IV. Extra Credit (NOT REQUIRED)

Implement the auto-scrolling program from page 48-49 of your text. Include the following changes:

Put your name in one of the frames

Use your own picture

Scroll 5 to 6 times faster than the example

Add the ability to scroll up and down as well as left and right.

Hand In or Mail In:

The URLs where your work can be found. Clearly identify which URL belongs with which part of the assignment.