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.
- main page named either INDEX.HTML or DEFAULT.HTML
- file with an HTML form named ACMEFORM.HTML
- CSS file named ACME.CSS
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.)
- General instructions for both HTML files: [2 marks]
Create the following page and save the file as ACMEFORM.HTML. [14 marks total]
- Include an HTML comment tag near the top of each file with your name and
student number in the comment
- Include a TITLE definition with your name and the file name
- Use proper HTML file structure with html, head and body areas of the page with all tags properly nested.
- 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]
- Submit the form output to http://nexus.mohawkcollege.ca/courses/info10110/showit.pl using the POST method. [1 mark]
- The form inputs are as follows (include all appropriate input tag names):
- Group 2 input areas of HTML form fields: one group is for Personal Information and the other is for Product Order information. You can see these areas in the image below. The settings will come from your CSS file. [1 mark]
- Email Address: Width of 30, maximum input of 20 characters. [1 mark]
- Full Name: Width of 30, maximum input of 20 characters. [1 mark]
- Address: Width of 30, maximum input of 20 characters. [1 mark]
- Select Products to purchase: Multi-choice list box. Raincloud is default. [1 mark]
- Choose Your Province of cloud operation: Drop-down list of only the Provinces; set Ontario as default. Orgranize the provinces in groups by their location in Canada: Western Provinces, Central Provinces, Eastern Provinces and Territories. [2 marks]
- Select the option(s) you would like: Check boxes. All three selected by default. [1 mark]
- Choose your method of payment: Radio buttons. No default option. [1 mark]
- Comments and suggestions: Multi-line text box 40 columns wide, 6 rows deep. [1 mark]
- The submit button is an IMAGE button that uses the image "SUBMIT.GIF"
(with no border). [1 mark]
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.
Once your code is finished, remove all table borders.
Cascading Style Sheets: Create the file ACME.CSS. [10 marks total]
(The colours in the sample below will come from your CSS file, which you
will create later in this assignment.)
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]
- All text: white (colour). [½ marks]
- All fonts: 10pt, sans-serif. [½ marks]
- Background Images: All pages use skystrip2.gif except the main file (named either index.html or default.html ) which uses skystrip.gif as the background image. [1 mark]
- All Headings: thin white border, your choice of border type with a gray background colour. [1 mark]
- Form fieldset labels: thin white border, your choice of border type with a gray background colour. [1 mark]
- Hypertext links: Should be white colour in all states (visited or not visited). When the mouse is positioned over the link, a white underline should appear. [2 marks]
- Positioning Areas: All settings for these areas in the file index.html or default.html (created later in this assignment) should be in this CSS file. [3 marks]
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.
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]
Fill each area in this file with the following items (as in image below):
- Header Area: heading size 2. [1 mark]
- Navigation Area: a heading size 2 plus 4 hypertext links: [4.5 marks]
- Homepage link points to the main file which opens in the full browser window
- "Why Use ..." link points to the file uses.html (opens in the in-line frame)
- "Cloud Catalog" link points to the file catalog.html (opens in the in-line frame)
- "Order Clouds" link points to the file acmeform.html (opens in the in-line frame)
- Banner Area: contains a heading size 2 plus 3 image links. Each image tag must contain alternate text explaining the purpose of the image. All of these image links should be targeted to open in a new browser window. [3.5 marks]
- google.gif image should be link pointing to http://google.ca
- yahoo.gif image should be link pointing to http://yahoo.ca
HINT: This single image requires a CSS setting changing the background colour to white
- dogpile.gif image should be link pointing to http://dogpile.com
- Main Area: contains only an in-line frame, sized to fit as much of this area as possible to maximize space for the web pages which will load in this frame. The file STORM.HTML should be loaded initially in the in-line frame. [2 marks]
- Footer Area: heading size 4. [1 mark]
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.
Once your code is finished, remove all borders for positioning areas and the in-line frame.
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