Alyssa Woodruff and Gloria Sanchez
March 17, 2016

Academic Decathlon Design

Administrative Details

Our client is the Academic Decathlon team at James Monroe High School in North Hills, California.

The purpose of this website is to create awareness of the Academic Decathlon team for potential members, as well as to solicit financial support for the program. The overall goal is to inform viewers about the team so as to encourage current high school students to consider joining, expose parents who might not be familiar with this extracurricular activity, and inspire people who might be interested in helping the team by donating.

The audience of our website is potential students, parents, and donors.

Navigation Structure

The website will have a clique navigation structure so that every page can be accessed from each page of the website. The viewer can access each page using a navbar with a roll over menu at the top of each page. This structure allows the viewer to easily find the information that they are looking for.

Layout

Each page will contain:

Content

Our website will contain eight separate pages:

  1. "Home" page - homepage.html

    The first page to appear when a user vists the website will be the "Home" page. Using Javascript, the page will display an image carousel of random photographs of the team. Each image will have the height of 480px and will be centered.

  2. "About Us" page - about.html

    Using Javascrip, the page will display a gallery. When the user clicks on an image, the image will expand to include a description. This page will also contain a short message from the team so as to encourage students to join the team.

  3. "Past Members" page - past_members.html

    The "Past Members" page will provide a picture of each past member, his or her name, and a short bio of them that will inform the user of what they are currently doing.

  4. "Current Year" page - current_year.html

    This page will be divided into three sections. The first section will contain information about the theme for the year. The current members section will provide a picture of each team member, his or her name, and a short bio of them. The last section will list any awards won by the team.

  5. "Support Us" page - support_us.html

    The "Support Us" page is for people who want to donate to the Academic Decathlon team. Using JavaScript, the page will have a form for users to fill out and the results will be emailed directly to the coach.

  6. "Sample Quizzes" page - sample_quizzes.html

    This page will provide the user with sample quizzes to give them an idea of what the Academic Decathlon test is like.

  7. "About Staff" page - about_staff.html

    This page will provide information on the Academic Decathlon staff. The page will include a picture of each staff member, his or her name, and a short bio of them.

  8. "Contact Us" page - contact_us.html

    This page will provide the user with a way to contact the staff for more information on the Academic Decathlon team.

Minimum Requirements

Here are the four JavaScript applications we will be using for the website.

Gloria Sanchez will be in charge of:

  1. Creating a JavaScript function for a roll over menu as part of the navigation bar. This will allow the viewer to access all of the pages without the navigation bar being too large. The navigation bar will include the pages About Us, Home, Past Members, Current Year, Support Us, Sample Quizzes and About Staff. Under "Current Year" will be a roll over menu that will link to various places on the "Current Year" page including Theme, Current Members and Awards. Under "About Staff" will include a link to a different page, "Contact Us", that will provide the viewer with information to contact the Academic Decathlon staff.
  2. Creating a JavaScript function for an image gallery. This will be on the "About Us" page and will feature group pictures of the school's Academic Decathlon team. The image gallery will have several rows of images that will appear larger when the viewer clicks on them.

Alyssa Woodruff will be in charge of

  1. Creating a JavaScript function that will allow the viewer to fill out a form to donate to the Academic Decathlon team. This form will be found on the "Support Us" page. The form will send the information filled out by the viewer in an e-mail to the team coach.
  2. Creating a JavaScript function that will create an image carousel. The image carousel will be found on the homepage of the website. The image carousel will move through different images of the Academic Decathlon team automatically. This will give viewers who are unfamilar with the team an idea of what the team is like.

Plan

We plan to follow the organizational scheme below to create and store our files. Included below is a detailed plan that dictates who will work on what and by when.

Organizational Scheme:

We will store all of the following files within a folder called monroe which we will create in the coding phase of the project.

List of Files and Folders

Work Division and Deadlines

Gloria Alyssa Deadline
homepage.html about.html 03/25/16
current_year.html past_members.html 04/01/16
support_us.html sample_quizzes.html 04/08/16
rollovermenu.js donationform.js 04/08/16
about_staff.html contact_us.html 04/15/16
imagegallery.js imagecarousel.js 04/15/16

Alyssa and Gloria will both work on the style.css. Both of them will also be in charge of double checking each file for errors, checking the javascript and css by April 25, 2016.

Valid HTML 5

Valid CSS!