NHS Designs - Web Design - Instructions for Test #3

Instructions for Test #3

Redesign a Web Page - 50 points [open notes]

You will be given a Web page for an air conditioning service company. It will be your job to redesign the Web page to be HTML 4.01 Strict, and to be very usable.

Copy the Files to your Folder

Navigate to RMK201\Period X\Outbox.
Right-click on the folder "test3" and select Copy.
Navigate into your root folder
Right-click in an open, white area and select Paste.
Right-click on the new "test3" folder and select Rename.
Rename the folder "lastname_test3" (replace lastname with your own last name.)

Redesign and Recode the Page

Take a look at the file structure.
1. There is one index.html file at the top level of the folder. This is the page you will recode.
2. There is one file in the workdesk folder called airshoplogo.psd. It is the original logo file in Photoshop format.
3. There is one file in the images folder called airshoplogo.gif. It is the final logo file currently being used on the page.
Resave the logo for Web. 10 points.
1. Remember the rules about the correct method for resizing web images. Start with airshoplogo.psd.
2. Remember the maximum width for web images.
3. Keep the background transparent.
4. Remember to match the matte to the Web page's current background color (it can be found in the <body> tag.
5. Save the new image in the "images" folder, and name it airshoplogoweb.gif.
Convert the Web page to HTML 4.01 Strict. 5 points.
1. Add the DOCTYPE listed below.
2. Add the <meta> tag listed below.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Delete any deprecated (non-standard) tags and attributes. 5 points.
1. The <body> tag should not have any attributes.
2. No <center> tags.
3. No <font> tags.
4. Remove any extra tags, and close any that have not been closed.
Style the background color and font using CSS. 5 points.
1. Put a style element in the correct location.
2. Between the style tags, put the code below.

body {
font-family: Garamond, "Times New Roman", Times, serif;
background-color: #33ffff;
}

Use your new logo image on the page. 5 points.
1. Change the src attribute to the new file name.
2. Fix the width and height attributes.
3. Include a descriptive alt attribute for the image.
Structure the text on the page. 10 points.
1. Arrange the text on the page using block elements. For example, you might use <h1>, <h2>, <p> and/or <br>.
2. Break up the text into bits of information that go together.
3. Spread out the links somehow. One way is to separate them with "pipes". They look like this: | and they are found on your keyboard on the same key as the backslash \.
A few more details. 5 points.
1. Don't worry about the link destinations. There aren't any other pages yet for them to go to. Leave the href attributes as they are.
2. Retitle the page. The <title> element can be a whole lot more useful.
3. Double-check all your nesting!
Test your page. 5 points.
1. Check your code by uploading your page at http://validator.w3.org.
2. You should see a green banner that says "This Page Is Valid HTML 4.01 Strict!"
3. If you do not get that result, read down to see where the errors might be. Correct the errors and retest the page.
Turn in your Test 3 folder.
1. Right-click on your "lastname_test3" folder and select Copy.
2. Navigate to RMK201\Period X\Inbox\Test 3.
3. Right-click on the "Test 3" folder and select Paste.