Alyssa Woodruff and Gloria Sanchez
April 21, 2016

Design Changes:
Academic Decathlon Website

Link to Our Website

Homepage

Changes We've Made

Changes to general layout:

• Font in header and footer images were changed, and the color of the text was changed from black to white
• Footer was changed from a div with text to an image

Changes to styling.css:

• Links were changed from #96050C to #2e344d.
• Background color was changed to white
• Font was changed from Century to Raleway

Changes to navigation bar:

• Text color was changed from white to black
• Instead of having a background that was #2e344d, each link had a border below it with that color. Both this and the text color change made the links easier to read.
• We decided not to have a drop down tab for the Current Year link because Gloria did not know how to add a link so that it would take the user to that part of the page. She did not have the opportunity to ask.
• When the mouse hovers over the link, it is highlighted in the "gainsboro" color.

Changes to image carousel:

• Instead of each image having a height of 480px, each image has a width of 480px
• Instead of displaying random images each time the page is loaded, the carousel was formatted to be a slideshow where the user could click through the pictures. This was done so that the user could look at all of the pictures without having to reload the page

Changes to image gallery:

• Instead of having the larger picture appear below the gallery when clicked, it appears in a lightbox gallery
• We decided not to caption the images in the gallery because of lack of information.

Changes to specific pages:

• Current year page: Added four images of the team instead of individual images and biographies of current members because our contact could not provide us with this information in time.
• Support page: Added four images that appear before scrolling to the donate page.

Minimum Requirements

Gloria Sanchez was in charge of:

1. Creating a JavaScript function for a roll over menu as part of the navigation bar
2. Creating a JavaScript function for an image gallery

Alyssa Woodruff was in charge of:

1. Creating a JavaScript function that allows the viewer to fill out a form to donate to the Academic Decathlon team. The form sends the information filled out by the viewer in an e-mail to one of the Academic Decathlon staff members.
2. Creating a JavaScript function that creates an image carousel

Modularity: The header image, footer and navigation bar are all repeated elements in the website. The code is found in homepage.html and we used JavaScript to load the elements on other pages without retyping the entire code.

Updated Organizational Scheme

We stored all of the following files within a folder called beta which we created in the coding phase of the project.
List of Files and Folders

• homepage.html
• about.html
• past_members.html
• current_year.html
• support_us.html
• sample_quizzes.html
• about_staff.html
• contact_us.html
• images/
  • header.png
  • footer.png
  • carousel0.jpg
  • ...
  • carousel5.jpg
  • gallery1-big.jpg
  • ...
  • gallery15-big.jpg
  • gallery1-thumb.jpg
  • ...
  • gallery15-thumb.jpg
  • currentmembers1.jpg
  • ...
  • currentmembers4.jpg
  • donate1.jpg
  • ...
  • donate4.jpg
• samplequiz/
  • ArtSampleQuiz.pdf
  • ...
• styling.css
• scripts/
  • imagecarousel.js
  • imagegallery.js
  • rollovermenu.js
  • donationform.js

Final Work Division