INFO10110:  Web Page Design
Assignment 2 — 40 marks

Create the following web site for the Acme Storm Cloud Company (fictional). The site will use layers and positioning page elements along with an HTML in-line frame. Most of the pages are complete for this site. You will need to create the following files:

The Cascading Style Sheet file which will provide ALL of the font styles, borders, layout and background/colour options for every HTML file in this assignment. Do not use any "style-like" options in any HTML tags in this assignment. You must provide all "style" options through the CSS file. You will find a sub-directory named ACME on your student assignment file which contains the files for this web site. Include an HTML comment tag that contains your name and student number in every file you create/edit.

The basic HTML code is already done for the files: STORM.HTML, USES.HTML and CATALOG.HTML. These files are in the "Acme" folder of your student assignment file. You will need to add your HTML comment tags to these files — as well as the link to your "CSS" file.

Here is what needs to be done:

Save these files in a folder on your local computer and follow the instructions at the bottom of this page for uploading to a web account for grading. (Your in-class instructor may also require a printout of all files for this assignment. Please check with your instructor. Distance education students do not supply printouts.)

  1. General instructions for both HTML files:      [2 marks]
  2. Create the following page and save the file as ACMEFORM.HTML.    [14 marks total]
    1. The page consists of a main fluid layout table (borderless) which has one row. The first column contains an image named "ACMEFORM.GIF" (found on your student disk), and the second column contains the FORM.
      HINT: You need a second borderless table for the first three fields to align correctly. The table borders which are visible in the example (below) should help you.    [2 marks]
    2. Submit the form output to using the POST method.    [1 mark]
    3. The form inputs are as follows (include all appropriate input tag names):
    4. Although the table border is visible (below — in cyan) to help you create the tables, there should be no visible border in your final version of the file.

      acmeform.html file with visible table borders

      Once your code is finished, remove all table borders.
      (The colours in the sample below will come from your CSS file, which you will create later in this assignment.)

      acmeform.html file with no table borders

  3. Cascading Style Sheets: Create the file ACME.CSS.     [10 marks total]

    This file needs to incorporate the following "style" items for all of the pages included in this assignment. Once you have prepared the file, link it to every HTML file so that the style rules will be applied to every HTML file (default.html/index.html, storm.html, uses.html, acmeform.html and catalog.html) in this assignment.    [1 mark]

  4. Once you have linked this CSS file to all HTML files, the files STORM.HTML USES.HTML and CATALOG.HTML should look something like the following 3 images (although your border style may be different depending on your choice in the CSS file). These pages will appear as a part of your web site in the in-line frame once you have completed the entire assignment.

    storm.html file with CSS settings applied

    uses.html file with CSS settings applied

    catalog.html file with CSS settings applied

  5. The main file, named either DEFAULT.HTML or INDEX.HTML, makes use of positioning page elements with HTML layers and area definitions. You will create these using both HTML to define and populate the areas and the CSS file for all related settings. TIP: Some of these areas use absolute positioning, others use either static or relative positioning. The page areas are laid out like this:    [12 marks total]

  6. Fill each area in this file with the following items (as in image below):

    Although the area positioning borders are visible (below — in red) to help you create, position and size these areas, there should be no visible borders in your final version of the file. The in-line frame has a visible cyan border in this image.
    main HTML file with visible area position and in-line frame borders

    Once your code is finished, remove all borders for positioning areas and the in-line frame.
    main HTML file with no area position and in-line frame borders

  7. Upload all of the files (HTML and image files) for this assignment to your account on "nexus" (assigned to your by your course instructor).   In your "nexus" account, make a folder called "acme" and upload all files into this folder.   [2 marks]

Return to main page