Lab 8: Forms and Tables/Getting Started on Your Project

This lab has two distinct parts: 1) working with forms and tables, and 2) getting started on your project. Here are a couple of relevant links:

Task 1: Forms and Tables

First, we'll create a simple form that asks the user to supply two pieces of information: 1) how much does their favorite cup of coffee cost and 2) how many cups do they consume per week. Once the user has filled out these two form fields, the form performs some calculations. Here is a screen shot of the form:
original form

The user fills in the information in the first two boxes:
original form with user input

When the user clicks on the "do coffee calculations" button, the following three calculations are completed:

The amount of money spent on coffee per week (displayed in the textbox as 63.65 below)
The amount of money spent on coffee per month(displayed in the textbox as 273.7 below -- it's ok that it does not show as 273.70). To calculate coffee costs per month given the weekly cost, there are about 4.3 weeks per month.
The amount of money spent of coffee per year is calculated and displayed in an alert box (shown as 3309.8 below). There are 12 months in a year.

Steps for you to follow:

Create a folder on your Desktop called Form and save your page, called coffee.html in this folder.
Create the form, making sure to name each part of your form
Write the JavaScript code to perform the first (cost per week) calculation and display it in the form. Test this one first, before moving on to the other calculations. When does the calculation occur? Where does the result appear in the form?
Continue with the remaining two other calculations, testing incrementally as you build your form.

Useful hints:

Name each part of your form so you can refer to it later
To round your numbers to two decimal places, you can use JavaScript's Math.round() function. The example below shows how to round pi to display two decimal places:
Math.round(3.1415927 * 100)/100 ==> 3.14
The size of the textboxes can be changed by using the size attribute of the <input> tag.

Alignment of Form Elements

Take a look at the source code for this variation of the coffee form to see how to align the elements of your form using a table

Task 2: Getting Started on Your Project

Let's look at how to code a sample website. Today's lab 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):

file structure for project

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.shtml. This file will serve as the template for the other main pages (intro, events, people, and contacts). Note that any code that is repeated on each page (such as the navigation bar) can be specified once in a separate file, and added to each page with a Server Side Include.

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.shtml looks at this stage.

Here is the actual code (notice the use of Server Side Include for the navigation bar).

<body>

  <div id="title">
  <img src="../Images/title.gif" alt="Sample CS110 Project"></div>
  
  <div id="sub-title"> 
  <img src="../Images/home.gif" alt="home"></div>

  <!--#include virtual="../navbar.part" -->
  
  <div id="introduction">
    <p>
       blah blah blah ...
    </p>
  </div>

</body>

The separate file navbar.part looks like this:

  
<div id="nav_bar"> 
  <p>
  <img src="../Images/intro1.gif" alt="intro button">
  </p>
  <p>
  <img src="../Images/events1.gif" alt="events button"> 
  </p>
  <p>
  <img src="../Images/people1.gif" alt="people button"> 
  </p>
  <p>
  <img src="../Images/contact1.gif" alt="contact button"> 
  </p>
</div>

Save the initial file several times under the appropriate names (intro.shtml, events.shtml, people.shtml, and contact.shtml), 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.