The Idea

The FIRST® Robotics team 1710’s website was completely rewritten this year from scratch. The website has been built around the idea of a simple yet clean style such as a standard blog page. However, a blog was completely out of the question due to the lack of originality and the ability to edit the page itself. After looking around on various template websites, I had finally decided on a webpage idea. It took approximately 2-3 hours of drawing and around 5 different templates to finally settle with the one you see today.

Photoshop

The site itself contains quite a bit of little Photoshop images such as behind the links page and on every news divs background. Most of the images you see were resized to fit a standard 250 x 250 max image size.

Flash

During the whole process, flash was something that constantly flowed in the design idea. Considering that we were making characters for the animation, we wanted to try to incorporate the characters into the banner. That never actually made it to the site but the aspect of a banner filled with the flash look was still a major priority. After a few scratched ideas and about an hour of blank stares, an idea started to form. How about we use the sliding image gallery that was used in the previous design and have that in the banner? After drawing out a basic design and the idea of scrolling images, our mentor suggested that we attempt to use the raven wing for the bottom of the banner to offset the box look that had been created. Off to Photoshop to design a banner that could be used as a temple for the final product. After the Photoshop design was created I again went to pen and paper to figure out how the design could be used easily in Photoshop. Everything was shaped and flash was ready to go. The comp uters being used for some reason could not handle flash and Photoshop open at the same time so they constantly decided to crash without warning. It took about 5 attempts but every time it crashed the animation was remade better. Finally after about 30-40 minutes of working in flash I was able to get the pictures in there and get them to scroll, a banner had been made.

How it was coded in Dreamweaver

The template was drawn out to scale on a piece of paper before any other work was done. Our goal was to avoid the use of html tables and make extensive use of css styles for our page layouts. Every single div tag had been pre named before any coding started so that it was easier to keep track of. After the pre planning was complete I started to move on to the actual coding. The actual site itself is made as a .cfm file instead of the standard .html you normally see on web pages. The .cfm format allows for the web page to be better organized so that the text could be separated from the actual page. The cfinclude tag used .cfm template files to an advantage allowing us to individually pack the text from the pages into their own document. The actual pages were built out of multiple div tags, they allowed for the use of a cascading style sheet to maintain a consistent look for every page.