NHS Designs - Web Design - Review for Test 3

Review for Test #3 - Activity

Redesign a Web Page

You will be given a Web page for homemade soaps. It is based on a real Web page found at http://www.willowbrookacres.com/gsoap.html

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 "test3review" and select Copy.
Navigate into your root folder
Right-click in an open, white area and select Paste.
Right-click on the new "test3review" folder and select Rename.
Rename the folder "lastname_test3review" (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 gsoap_with_label.psd. It is the original logo file in Photoshop format.
3. There are five files in the images folder.
Resave the logo for Web.
1. Remember the rules about the correct method for resizing web images. Start with gsoap_with_label.psd. Make it 200 x 127.
2. Keep the background transparent.
3. Remember to match the matte to the Web page's background color (we're going to make the background a shade of green: #9dc5b2.)
4. Save the new image in the "images" folder, and name it gsoaplogo.gif.
Convert the Web page to HTML 4.01 Strict.
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.
1. The <body> tag should not have any attributes.
2. No <center> tags.
3. No tags.
4. Replace with and with .
5. Remove any extra tags, and close any that have not been closed.
Style the background color and font using CSS.
1. Put a style element in the correct location.
2. Between the style tags, put the code below.
3. We're going to leave off the animated background image, because it makes the text hard to read.

body {
font-family: "Comic Sans MS", Arial, Helvitca, sans-serif;
background-color: #9dc5b2;
}

Use your new logo image on the page.
1. Locate the first <img> element at the top of the page.
2. Change the src attribute to gsoaplogo.gif.
3. Fix the width and height attributes.
4. Include a descriptive alt attribute for the image.
Fix the image sizes at the bottom for the three photos.
1. The original designer tried to resize them to make them bigger than they actually are; this makes them look pixelated.
2. Set the width for each <img> to 200.
3. Set the height for each <img> to 150.
Improve the structure of the page.
1. Get rid of all the blockquotes. <blockquote> is for quotes only, not for positioning text on the page. Later on, you'll learn better methods for positioning text.
2. Make sure all inline elements (such as <img> and ) are inside block elements.
A few more details.
1. Check the link for the logo at the top of the page to make sure it works.
2. Retitle the page. The <title> element is currently useless. make it meaningful.
3. Double-check all your nesting!
Test your page.
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 Review folder.
1. Right-click on your "lastname_test3review" folder and select Copy.
2. Navigate to RMK201\Period X\Inbox\Test 3 Review.
3. Right-click on the "Test 3 Review" folder and select Paste.

Page 1 | 2