You work for a company that designs web sites, this includes
designing the public interface and also the server side of the site.
Your company is bidding for a lucrative contract to design a web site
(front end and back end) for a mail order company that sells -
Succulent Plants. Succulent plants include the cacti that are
commonly found in arid regions of the world. The company also sells
related products required by the keen succulent grower.
You are to design the public side (HTML pages, Images, Forms pages)
and server side (CGI scripts, Image Maps etc.) of your company's bid for
the contract. The basic design criteria you are to employ are the
following
- There should be an entrance page to the site. This should be
simple but entice the potential buyer to look further into the site.
- From the entrance or welcome page there should be links to four
major areas of the site.
- A section containing the product catalogue.
- A section describing the company.
- A section for submitting orders.
- A section to help the client in all aspects of the site.
This first assignment is to set up the basic structure of the
company's site, construct the welcoming page and the description of the
company.
Tasks
- In the directory
~/CSC2406/html/ass1 create four
directories that will contain the documents and images etc. for the
four main sections of the site:
- catalogue
- This directory will contain the catalogue with all its images
that clients will be ordering from.
- order
- This directory will contain the ordering forms, CGI scripts and
client orders
- info
- This directory will contain information on the company and its
products.
- help
- This directory will be used by you to document your solutions to
the assignments.
- Your site should contain the following elements
- Images
- Your site must contain at least one example of the following-
- An image that has a transparent background.
- Navigation buttons for the site. Javascript mouse events
should modify the buttons' images.
- A Client Side or Server Side image map.
- An Animated GIF.
- Javascript
- Limit the Javascript to the navigation buttons of the site. That
is, implement a script to modify images when a mouse event occurs
over the image.
The site must be navigable with Javascript turned off.
- Cascading Style Sheets
- All font changes, all text colors, background colors, H1 to H6
elements etc. should be modified using only style sheets.
The site should be readable and navigable with style sheets
turned off.
- Tables
- Use tables as layout engines for each page of the site. It is
expected that all visible elements of the page would appear with a
table.
- Style Guide
- When designing the site and individual pages follow the
suggestions outlined in the style guide module in the study book.
- Create a welcoming page for the site (in the top level assignment
directory). This welcoming page should be simple but eye catching.
With basic information about the purpose of the company.
- Create a catalogue page. This should list all the items the client
can purchase via the web. This part of the site will be tackled more
fully in Assignment 2. For assignment 1 all that is required is that
examples of what will be available soon for online purchase
be given. In Assignment two this page will have to be re-written using
Forms - so do not spend too much time on it. But remember this will be
part of the company's site and viewable by the public - so more than
just "Under Construction" is required.
- Create a Company Information page in the directory
info.
This page should contain images and information about the company.
Information that should sell the company to prospective clients. As
this is not a main entry point to the site this can be a flashy
section - but remember to bear in mind the recommendations in the
Style Guide Module.
- Create a Help page which will contain the following
- Describe, with examples from your site, all the Required
images and Image maps.
- Explain how you made your images.
- Display All the component images of the animated gif. Describe
how you created the component images, and how you created the final
animated image.
- Include All code included in the site - Javascipt, Image Maps
etc.
- Describe the rationale for your page design - That is, using the
Style Guide - explain your design.
The help directory is to be used to document you solution to the
assignments.
Notes:
|