In the summer of 2006, I was given the task of redesigning the website of my old high school, Evans Christian Academy. At the time I started the project, the only real knowledge I had of HTML was a little previous experimentation and the CS 1315 course (Intro to Media Computation) I took at Georgia Tech. This project was a real learning experience, as I slowly rebuilt the site and taught myself Cascading Style Sheets (CSS).

Layout

When I started redesigning the site, I wanted to make it visually appealing and easy to navigate. I created the titlebar to show both the name of the school as well as quick contact information, and the menu was positioned on the right of every page. As both a distinguishing feature and a navigation aid, the menu was orignally powered by Deluxe Menu which allowed the menu to "hover," appearing to slide vertically on the left bar so that it was always in view. Unfortunately, this feature had to be discarded due to compatiblity problems with the JavaScript on certain computers. In the future, using my improved knowledge of CSS, I may try to reinstate this feature, using the position: fixed property. UPDATE: As of July 28, the menu now behaves as originally intended, using CSS, in all modern browsers except IE.

Graphics

Most of the site's graphics were done in Adobe Photoshop, since I had not learned Illustrator at the time. A navy and white color scheme was chosen to match the school colors, and a muted marble-like background given to the main content area. A simple drop shadow gave the layout depth by making the titlebar and menu appear to be elevated above the content section. The left bar was carefully shaded to echo the "sliding" functionality of the original menu. In order to add "life" to the website, I felt that an animation was needed. However, such an animation must not distract from the site's actual content and should be fast to view (i.e. small download size.) To achieve this, I took the school's logo, designed by Dr. Lewis Hinely, and made it into a 3D extrusion using Meshwork and Strata 3D. I then added glow and reflectivity to create the simple, elegant GIF animation displayed at the right.

Coding

The layout was done almost entirely with CSS (cascading style sheets.) I also made extensive use of server side includes (SSI.) Includes allowed me to have almost all of the layout and graphics isolated in three text files. Changes to those files would then automatically change the rest of the website at once. Not only did this accelerate the development of the new site appearance, but it also makes adding new pages much easier, as far less code is actually present in each individual .shtml page.