Style Guide
This guide will include a set of rules and standards for the design of the website as a whole. It serves as a reference to help maintain continuity amongst all the various pages. This will create for a more unified and usable webpage.
Page Dimensions/Orientation
The webpage will be designed using a fixed template that is 760px wide so as to fit within the smaller resolution screens, and to be around the optimum width for comfortable viewing on most any resolution. Its height will be based on the content of the page. The template will also be centered in the page.
Browser Requirements
All pages should be viewable in the major browsers: Internet Explorer, Mozilla Firefox, Opera, and Google Chrome w/ minor if any differences.
Frames
Frames are not to be used!
Graphics
Images included should be one of the common suportable images types, such as jpeg, png, and gif. They should be appropriately sized, and geared towards optimum loading speed.
Typography
Body Text- Font Family defined as "Arial, Helvetica, Verdana, Sans-serif"
- Font size: 12px
- Line height: 18px
- Font Color: #666666
- Font Family defined as "Tahoma, Arial, Helvetica, Sans-serif"
- Font size: 10px
- Color: #c9c9c9
- Hover Color: #C00000
Colors
The color scheme is simple, the color red and a mix of grayscale colors. The color red found in the favicon, navigation bar, etc is #C00000. A standard white backgorund will be used in the content section of the page, and the background will like colors, mostly black, white and gray colors.
Navigation
The main navigation will be located just below the header, and arrowws will point at the links when the mouse hovers over them. They will be created using images so that I can be more free w/ my font choice and rollover effect. The blue "image link" border should be taken out using css, and margins will need to be adapted so that images can sit right next to each other.
Links within the content of the page will be the same color as normal test, but will be underlined to show that they are links. They will change to the hex color code #C00000 when the mouse hovers over them. There is also navigation located in the footer, and it is set to align with the right edge of the page. It also employs the rollover color-changing effect.
Overall, navigation should be simple and intuitive. Links should be clearly labeled.
Content
The content of the page overall should be sensible and useful. Don't be overly wordy or confusing. Content should be arranged in an aesthetically pleasing way, and tend lean towards a very simple and clean appearance. Extra divs may be created within the content div, but divs outside the main container are not to be created.
Logo
The logos filename is cflogo.gif. It is a simple red box with a white lowercase cf aligned to the right. It should be seen on everypage and used in a professional way.
