Data files needed for this Case Problem: back.gif, Iogo.gif, logo.jpg, midwest.txt, r317081.jpg, r317082.jpg, r317083.jpg, r317084.jpg, thumbl.jpg, thumb2.jpg. You should have already downloaded these files. See Data Files for Students for more information.

Tutorial 3, Case Problem 4

Midwest Homes

You've been hired by Midwest Homes to assist in developing their Web site. Dawn Upham, the site manager, has asked you to begin work on the new listings section. She's given you a text file containing information about Midwest Homes and the four new listings for the day. She's also provided you with two versions of the company logo (one in JPEG format, and one in GIF format with a transparent background), a background image, image files for the four new properties, and two image files containing thumbnail images of the four new properties-one oriented horizontally, and the other vertically. You are free to supplement this material with any additional resources available to you. Your job is to use this information to design a visually interesting Web site for the new listings.

1. Advice: Dont start this assignment without first completing Tutorial 3 in your text book.
2. This is up to you, but you may want to make a new folder on your computer, and on your Tulane Student Website to contain all the files for this project. For a number of reasons, it is good practive to separate related files, not the least of which is to make it easier for you to find them.
3. Name all of your web pages for this project similarly. Like this: T3CP4_uniqueName_yName.html (use your own name, not yName) (use a name you make up, not uniqueName)
4. HINT: When naming webpages, the underscore character ... " _ " ... is the only special character allowed. You should NEVER use space character in names, use underscore instead. Web pages are named using letters, numbers, and underscore ONLY ... that's it, NO OTHER CHARACTERS. To be compatible with the largest number of web servers, you should limit webpage names to 31 characters.
5. As always, every web page will include the heading comments as demonstrated by our HTML Template.
6. Before getting too far along, review the content of the text files and view the image files. Note that there are four new properties with listing numbers: r317081, r317082, r317083, and r317084. The image files match up with the property descriptions in the midwest.txt file.
7. HINT: If you are unsure how to view image files on your computer, you can user your browser to do so ...
   drag an image file on top of a browser window, or
   use Open ... in the File menu of your browser to locate the image file on your computer

1. Once you become familiar with the contents of this proposed site, start designing the site. There should be five pages: a page introducing the new listings, and one page with details on each of the new homes. The name of the intro page should be 'new', the names of the four listings pages should be 'r317081', 'r317082', 'r317083', and 'r317084'. In your preparations for the site, create a storyboard of the site's contents and links.
2. Make sure that you make your site easy to navigate.
3. Feel free to include other resourses you may find to make your site unique and interesting.
4. The design and layout of the site is up to you, but your pages should include at least one example of the following design elements:
   A style that sets the foreground and background color for a page and an element within the page.
   A style that sets a background image for either the entire page or an element within the page.
   A style that changes the font family for at least one element.
   A style that sets the font size for at least one element.
   A style that sets the font weight and font style for at least one element.
   An inline image that floats along the right or left border of its containing element.
   A style that sets the margin size for an element or-for the entire page.
5. Use one of the supplied thumbnail images to create an image map linking the introduction page to each of the pages describing the new listings. Use a graphics program to determine the coordinates of the hotspots in the image map.
6. Decorate your HTML with comments that make it easy for George to recognize the sections that will be graded.
7. Create the site you outlined in your storyboard. Your code should follow correct XHTML syntax rules for XHTML 1.0 Transitional as confirmed by W3C Markup Validation Service. Your HTML should be easy for others to read and interpret.
8. See Strategy for editing HTML

1. Use FTP to upload your completed web page to your Tulane Student Web Space.
2. Copy the URL of your website's main page and paste it into a new eMail message to George (gnorth@tulane.edu). Subject of this eMail MUST be "Tutorial 3 - Case Problem 4"