Getting Started on Your Project

In this Lab, we will look at how to code a sample website. This should give you some insight into how to efficiently start developing a medium-size team project.

Navigational and File Structure

The website that we will create in this lab, will have the following navigational structure (red denotes partner responsibility, and blue denotes a JavaScript application):

The files will be organized in the following way (all images files will reside in the Images directory):

To do

• To start, create a new folder on your desktop, and name it Sample.
• Inside Sample, create sub-folders named Documents, Events, People, and Images to reflect the given file structure.
• One of the first things to do is develop an external style sheet to implement the style of your website. You need to give this some thought, before you are able to start implementing it. In particular, here are some of the points you will need to make decisions about:
  • What is the size of the screen you are designing for?
  • What are the main page elements -like page title and sub-title graphics, nav bar, etc- that appear in most of the pages? What about their sizes, in pixels?
  • How exactly these main elements will be placed on the page? You probably want to position those in your external css.
  Each of the pages with common appearance will then link to this style sheet. For your use today, here is a very simple external css document, available for downloading. Put the sample_style.css file in the Sample folder.
• Start Dreamweaver or TextWrangler, and create the file home.html. This file will serve as the template for the other main pages (intro, events, people, and contacts).
• In our Sample/Images folder, you can use any of these images:
  • for subtitles: contact.gif, events.gif, home.gif, intro.gif, people.gif
  • for original buttons: contact1.gif, events1.gif, intro1.gif, people1.gif
  • for rollover buttons: contact2.gif, events2.gif, intro2.gif, people2.gif
  • for a logo: logo.gif

  Here is how your home.html looks at this stage.

• Save this file several times under the appropriate names (intro.html, events.html, people.html, and contact.html), and put the files in the correct folders (as shown above).

• The Nav Bar should be developed so the buttons become links to the appropriate files.
• etc.