ECPI School Portfolio

Ted DeJong

HTML / CSS

CSA282 Web Page Design

This course used the excellent textbook, New Perspectives on HTML and XHTML - Comprehensive, by Patrick Carey. This book introduces concepts in a very hands-on style and has good reference materials in it. It's good for novices and experts alike. For our lab exercises, like the ones below, we were usually given around an hour to work.

Body Systems - Basic Webpage

Body Systems is one the leading manufacturers of home gyms. The company recently hired you to assist in developing their Web site. Your first task is to create a Web page for the LSM400, a popular weight machine sold by the company. You've been given a text file, smith.txt, describing the features of the LSM400. You've also recieved two image files: logo.jpg, displaying the company's logo and smith.jpg, and mage of the LSM400. You are free to supplement these files with any other resource available to you. You are responsible for the page's content and appearance.

(p.52)

Body Systems - Basic Website

You've been working for a few weeks as a Web site developer with Body Systems, one of the leading manufacturers of home exercise equipment. You've been asked to put together a sample Web site highlightling several Body Systems products. You've been given several text files containing descriptions of these products, as well as contact information for the company, and a file describing the company's history and philosophy. In addistion, you've been given several image files of the products, along with an image file of the company logo. You are free to supplement these files with any other resources available to you. Your job is to use this information to create an effective Web site describing the products and the company for interested consumers.

Use one of the search sites on the Web to locate Web pages on strength training tips and advice.

Once you become familiar with all of the material available for your Web site, create a storyboard for the site. In the storyboard include all of the filenames of the Web pages and indicate any links between the pages.

(p.101)

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 version 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.

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.htm, the names of the four listings pages should be r317081.htm, r317082.htm, r317083.htm, and r317084.htm. In your preparations for the site, create a storyboard of the site's contents and links. Make sure that you make your site easy to navigate.

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.

(p.169)

Note: Although the project did not call for it, I decided to make the page look the same in both Mozilla Firefox and Internet Explorer. I spent a bit of extra time tweaking the styles so that all of the elements are nearly identical in both browsers.

Millennium Computers

You are employed at Millennium Computers, a discount mailorder company specializing in computers and computer components. You've been asked by your supervisor, Sandy Walton, to create an order form Web page so that customers can purchase products online. Your order form is for computer purchases only. There are several options for customers to consider when purchasing computers from Millennium:

  • Processor speed: 2.5 GHz, 3.3 GHz, 4.0 GHz, or 5.5 GHz
  • Memory: 128 MB, 256 MB, 512 MB, or 1024 MB
  • Drive Size: 60 GB, 80 GB, or 120 GB
  • Monitor size: 15-inch, 17-inch, 19-inch, or 21-inch
  • CD-ROM: 24x, 32x, 48x, 64x, or 72x
  • DVD player: yes/no
  • CD burner: yes/no
  • DVD burner: yes/no
  • LAN card: yes/no
  • Internal 56k modem: yes/no

The design of the Web page is up to you. Make sure the credit card information does not display on the screen. Insert a check box allowing the customer to choose to be placed on the Millennium Computers mailing list. Place 3 buttons on the form: a Submit button to send the order, a Reset button to reset the page, and a second Submit button to request that a Millennium Computers representative call the customer. Use the values, "Send", "Cancel", and "Call Me" for the 3 buttons. Set up the form to use the CGI script located at http://www.mill_computers.com/cgimailer.cgi. Note that this is a fictional URL.

(p.345)

Counter