Prototype Web Site for the Computer Superstores, Computer Networking


Create a prototype web site for the "Computer Superstores" company. Your site should use effective navigation features and demonstrate good structure for  accessibility.

All the *.htm files (*.shtml) you create must be valid XHTML 1.0 Strict.   Partial marks will be given for Transitional XHTML or Transitional HTML.

Folder Structure and File Names

All file names and the folder structure are strictly specified as follows.

Items provided to you by the client

Victoria.jpg image (you need to convert this to a suitable image format)


+ Various product images (thumbnail and full size versions)

358_Prototype Web Site for the Computer Superstores.png

Global Page Structure [#header, #navigation, #footer]

Each of the following sections will be included into all HTML pages using server side include commands. These commands need to be processed by a web server, so your pages will not work unless they are placed on a web server and requested via http with a web browser.


The header section [header.ssi] includes:

  • the company logo,
  • a major heading - something like "Computer SuperStore"
  • a motto like "We drive the Computer nation!" (or whatever - be creative!).

The Navigation section [menu.ssi]

  • Menu links to the different pages (positioned as you wish)

A.    Home (index.shtml)

B.     Our Range (index.shtml#categories)

C.     Newsletter (index.shtml#signup)

D.    Contact Us (contactus.shtml#details)

E.     Store Locations (contactus.shtml#stores)

F.      Feedback (contactus.shtml#feedback)


The Footer section [footer.ssi]

  • Your "developer" information:

a)      your name, student id number, a link to your Swinburne email address (not hotmail or gmail etc).

  • You can add other images ("valid XHTML" etc) if you wish.

Specific Page/Section Details

Home page [index.shtml]

Show the required header, navigation and footer sections etc. as required for all ...

Display a welcome message like "Welcome to the web site ..." or similar.

Show the following two content sections:

Our Range [index.shtml#categories]

  • Display the 5 categories as boxes with the category title and a representative image from the stock.
  • This is a menu to each of the different catalogue pages.

a.       We only create one actual catalogue page for this prototype website.

  • The 5 categories for cars are: Hard disks, Memory, Monitors, Processors, Peripherals
  • Use CSS or JavaScript to create a dynamic "rollover" effect for each of the category boxes.
  • Ideally, use div elements and CSS positioning.
  • Make all of the categories link to the "calalogue.htm" prototype page.

Newsletter Signup [index.shtml#signup]

  • Show the text "Why not sign up for our newsletter and receive the latest computer bargains!" (or similar).
  • Show a simple form with an "email address" text field (name="email"),
  • Show a checkbox for "Please send me the monthly newsletter" (default as checked) and a "Signup" submit button.
  • Using JavaScript, check that the checkbox is "checked" and that the email address is valid before allowing submission.
  • Check for a blank or incorrect input field value
  • Test for the presence of a "." plus a simple "@" test is okay
  • Show an alert box with a message if there is a problem.
  • Return true if the value is okay or false if the value is not okay.
  • Set the method to GET and the action to
  • Repeat: Use JavaScript to stop the form being sent if the required fields are not valid.

Contact Details [contactus.shtml#details]

  • Show the business contact details (see below):

a)      A "" email address (you can make up any domain name),

b)      A toll free telephone number: 1 800 699 669 (make up your own number if you want) that is directed to the appropriate store.

  • Show a message and a link to encourage visitors to check out the "product range" or to "send comments" using the online feedback form [contactus.shtml#feedback]

Feedback Form [contactus.shtml#feedback]

a)      Show a "feedback form" with the following fields for visitors:

b)      First Name, Surname, Phone Number, Email, Subject, Message, Send button.

c)      Set the form action to

d)     Set the form method to POST

e)      Use JavaScript to ensure that all the fields are filled in and that the email is valid.

f)       Reuse your email validation from the simple signup form.

g)      Use JavaScript to ensure the name contains only letters from [a-zA-Z]

Ensure only [a-z,A-Z] characters as in the First Name and Last Name Textbox

Ensure only [0-9] numbers are in the Phone Textbox

Catalogue [catalog.shtml]

This is a single "prototype" catalogue page that contains a table (or tables) of all the product items from one of the categories on offer.

a)      For each Computer Peripheral  show the thumbnail image and basic details: Peripheral Name and cost.

b)      The file details.txt has all the details available. The details are separated by commas.

c)      Hint: It may be worth "importing" and then "exporting" the text file with Excel, but make sure you clean up the resulting HTML!

d)     There are many products available, but you only need to show the products for your chosen category.

e)      If the visitor clicks on an image we would want to show them more details,

f)       This is just a prototype site and we don't have all the images and details yet.

g)      Make all of the items (the text and/or images) as link to the "details.shtml" prototype page. i.e. no matter which category the user selects the same products will show. 

h)      You can use a table to present the catalogue data (+CSS), but you must use (heading) elements for heading cells, and provide a suitable caption and summary for the table

Product Details [details.shtml]

For the one category that you have chosen to show the "full" details of, for each item show the:

a)      item name

b)      item type

c)      item price

d)     specification

e)      stock status ie. "In stock: Yes", (make this up)

f)       large image of the item.

g)      Offer a link to the order.shtml page as "Buy this item now!" (or similar)

h)      This page does not need to show the normal full menu if you wish

i)        You can use a table to present the details if you wish (+CSS),

j)        Remember to use the most suitable structural elements for the information.

k)      Order Form [order.shtml]

Remember, we are not creating a fully functioning web application, but our prototype site can still give an idea of what to expect.

a)      Display the item details of the item you presented in the details.shtml page

b)      Item name, small picture, colour etc. This is so the user still knows what they are buying!

c)      We need the following additional information to be collected from the customer:

d)     The quantity of items being ordered.

e)      Use the quantity to display an "order total" (calculate the total using JavaScript).

f)       Customer Details: Name (First Name and Surname), Address, Suburb, State, Postcode.

g)      Payment Details: Card Type, Card Number, Expiry Date,

h)      Show an "Order" submit button.

i)        Use JavaScript to validate the form information

j)        Do not allow the form to be sent if the values are not complete.

k)      Send the form data (action), using the POST method

JavaScript Code [scripts.js]

a)      Place all the functions you create and use in the common "scripts.js" file.

b)      Note: Only use scripts embedded in your HTML files to call the functions you have stored in the external file.

Using Images:

Some images are provided on the subject Blackboard site for you to use. However, you can go to Google Images and use them as long as you provide a reference to the source of your photos.

Make sure the images you use are saved as a suitable format for the web (jpeg, gif or png) and are resized to a suitable size (height and width) for your specific use.

There are specific images for the Computer Store Components and a map of Victoria, also provided on the subject website, which you will need to integrate into your website. You are allowed to alter and reprocess the images to suit your web site design if you want. (For example, change the background colour if you want.)

Coding Standards:

  • Use the Swinburne HTML Coding Standards. The standards can be downloaded from the subject Blackboard site. Importantly, all HTML pages must have:

a)      an appropriate title in the head element.

b)      the required HTML header comments,

c)      meta elements for the author, the page description and keywords about the page content.

  • Layout and Presentation:

a)      Use CSS and logical markup.

b)      Do not use physical markup elements or physical attributes.

c)     Use only the external file style.css for your CSS information.

d)      Do not use inline or embedded style.

  • HTML Validation: All your *.shtml files (after being processed by the web server to include the .ssi files) must be Valid XHTML 1.0 Strict. Partial marks will be given for Transitional XHTML or Transitional HTML.

a)      Update the comments of your HTML pages with the date your page was last validated.

b)      Use the W3C HTML.

Posted Date: 2/25/2013 12:20:49 AM | Location : United States

Related Discussions:- Prototype Web Site for the Computer Superstores, Assignment Help, Ask Question on Prototype Web Site for the Computer Superstores, Get Answer, Expert's Help, Prototype Web Site for the Computer Superstores Discussions

Write discussion on Prototype Web Site for the Computer Superstores
Your posts are moderated
Related Questions
What is Applets Little programs that can make the Web pages more aesthetically beautiful by means of animations, text, and graphics moving across the screen.

10Base5 - Thicknet A rigid coaxial cable (RG-8) approx 0.4 in' thick used in the original Ethernet networks Bus topology LAN utilize base signalling with a maximum se

Simple Mail Transfer Protocoland Secure Sockets Layer SMTP: Simple Mail Transfer Protocol is a server-to-server protocol for delivering electronic mail. SSL: Secure Sockets

What is the Gateway A Gateway is a device like a mini or microcomputer capable of operating on a standalone basis but which also gives connection for communication with the oth

As there will be more devices there will be more traffic of information. We can include capacity to WAN by adding more links and packet switches. Packet switches use not have compu

Calculate data bandwidth requirements from and to each site.

different framing methods

VLAN ( Virtual Local Area Network) is a concept of creating distinct broadcast domains. It is a network which aims at partitioning the physical network. VLAN comprises all the attr

In formation  sharing at  regular intervals For example  every 30 seconds each router sends its information  about the  whole  network  to its  neighbours. This sharing  occurs