Web Style Guide
Revised March 2, 2007
- In matters of writing style, the College refers to the Associated Press Stylebook (The Journalists Bible).
- Please review pages that have been developed on the College-wide site for examples on how to design/develop your pages.
Using templates:
- Level2 is for pages that require the “More Information” panel.
- Level3 is reserved for Campus home pages (level4 is recommended for all other pages).
- Level4 is for general use (Most pages are created using this level.)
- Level5 is reserved for Artemis (unless given approval by the college-wide Webmaster).
palette |
main headers |
main navigation |
side bar |
side panel |
text styles |
tables |
photographs | miscellaneous
|
palette |
|
Light Blue: |
Light Green:
#33CC66 |
Light Gray:
#CCCCCC |
|||
|
Medium Blue: |
Medium Green:
#009933 |
Medium Gray:
#999999 |
|||
|
Dark
Blue:
#003366 |
Dark
Green:
#006633 |
Dark
Gray:
#666666 |
These are the nine colors to be used throughout the Web site. Black (#000000) and white (#FFFFFF) are also acceptable.
Graphic typefaces:
Graphic: Trebuchet MS, Future BT and Copperplate Gothic
Wave headers:
header.gif (with small boxes bar)header2.gif and header3.gif
(actual size: 760 pixels wide by 58 pixels high)
header2.gif
(actual size: 760 pixels wide by 38 pixels high)
header3.gif
(actual size: 760 pixels wide by 19 pixels high)
Wave headers:
Header.gif on the home page is 760 pixels wide
by 58 pixels high. “Florida Community College” is Copperplate
Gothic Bold, 18px, anti-aliasing: crisp, 90% (vertical scale), 36 px
(leading);
“at Jacksonville” is Futura BT Medium, 15 px, 90% (vertical
scale), -10 tracking.
Header2.gif on the second level pages is 760 pixels wide x 38 pixels high. “Florida Community College” is Copperplate Gothic Bold, 17px, crisp, 90% (vertical scale); “at Jacksonville” is Futura BT Book, 13 px, 90% (vertical scale), anti-aliasing: strong.
Header3.gif is 760 pixels wide by 19 pixels high. The text is the same as header2.gif.
Top navigation bar buttons:
(actual size: studentres.gif is 123 pixels wide
by 18 pixels high; classsch.gif is 92 pixels wide by 18 pixels high; directory.gif
is 61 pixels wide by 18 pixels high; and search.gif is 103 pixels wide
by 18 pixels high)
Top navigation bar buttons:
The top navigation bar is made up of four
gif images (the rollover image has the same file name with an added
“r” at the end): studentres.gif (studentresr.gif), classsch.gif (classschr.gif),
directory.gif (directoryr.gif) and search.gif (searchr.gif). Type used
on the navigation buttons is Trebuchet MS, bold, 11px, anti-aliasing:crisp,
90% (vertical scale), -5 (tracking).
Vertical green bars between text are 1 pixel wide by 13 pixels high. The color is #33CC66.
 |
Prospective Students |
|
Current/Returning Students |
|
Distance Learners |
|
Employers |
|
About FCCJ |
|
Job Applicants |
|
Campuses/Centers |
|
Programs of Study |
|
Library |
|
Learner Support Center |
|
FCCJ Home |
Note: This navigation should only be used in the left column of the Web page for the main navigation of that specific page. Using this navigation in other areas of your page will confuse the visitor.
If you need more navigation, you could use the “more information” blue panel (with template level2).
Remember to make the text uppercase and lowercase, and put one "nbsp;" in front of each row of the nav text.
Left navigation menu:
The menu stylesheet is .leftnav (font family: Verdana,
Arial, Helvetica, Sans Serif, normal, 10 px, line-height: 13px, color:
003366, text-decoration: none). The rollover link mode is #003366, and
the hover mode is 009933. In addition, there is a "nbsp;" in each row
before the text to add white space between the arrow and the text. In
Dreamweaver 8, look in your window > insert and use the drop down menu to select “text” and view the item on the far right of the menu bar.
Table width is 139 pixels. Arrow (navarrow.gif) is 6 pixels wide by 12 pixels high.
Bottom navigation menus:
|
The menu stylesheet for prospective student, current student etc., is .bottomnav (font family: Verdana, Arial, Helvetica, Sans Serif, bold, 10 px, line-height: 12px, color: 003366, text-decoration: none). The rollover link mode is 003366, and the hover mode is #CCCCCC.
“Other” navigation menus:
All “other” menu items in the bottom blue navigation
area are color: #FFFFFF. The stylesheet for links is .reverselinks (font
family: Verdana, Arial, Helvetica, Sans Serif, bold, 10px, line-height:
12px, color: #FFFFFF, text-decoration: none). The stylesheet for body
text is .reversebodytext (font family: Verdana, Arial, Helvetica, Sans
Serif, 10px, line-height: 12px, color: FFFFFF, text-decoration: none).
The rollover link mode is #FFFFFF, and the hover mode is #CCCCCC.
The copyright, disclaimer, Internet privacy links and revised date
must be shown on every Web page in the bottom left blue section.
Sidebar Headers:
The side bar header is stylesheet .sidebarheaders (font family: Verdana, Arial, Helvetica, Sans Serif, bold, 11px, line-height: 13px, color: #006699, text-decoration: none).
The side bar subheader is stylesheet .sidebarsubheaders (font family: Verdana, Arial, Helvetica, Sans Serif, bold, 10px, line-height: 12px, color: #006699, text-decoration: none).
The side bar links is stylesheet .sidebarlinks (font family: Verdana, Arial, Helvetica, Sans Serif, bold, 10px, line-height: 12px, color: #009933, text-decoration: none). The rollover link mode is #009933, and the hover mode is #006633.
The side bar body text is stylesheet .sidebarbodytext (font family: Verdana, Arial, Helvetica, Sans Serif, 10px, line-height: 12px, color: #000000, text-decoration: none).
 |
||
 |
||
Note: The “more information” panel should only be used with template level2.
More information panel (to
be used in Template Level2 only):
The side panel is 139 pixels wide, and the table
background color is #006699. The “more information” image (moreinfo.gif)
is 139 pixels wide by 18 pixels high.
The side panel links is stylesheet .panellinks (font family: Verdana, Arial, Helvetica, Sans Serif, normal, 10px, line-height: 12px, color: #FFFFFF, text-decoration: none). The rollover link mode is #FFFFFF, and the hover mode is #33CC66.
Sample text styles:
Body text
Body text blue
| Reverse body text |
| Reverse body text bold |
Mainheaders
Mainheaders2
Mainheaders3
Mainheaders4
Subheaders
Links
Here is an example of bullets:
- Bullets
- Bullets sublist
Do
not use mainheaders and subheaders for large “chunks” of text.
If they are overused, it defeats the purpose of having a header —
everything will run together and nothing will stand out on the page.
Never underline text unless it is a link, and the links on this Web site do not have underlines. If you need to put emphasis on a word or line of text, please use the colors in the style sheets or bold.
Do not type in ALL CAPS (even headers). Again, use the colors in style sheets to emphasize text or bold.
Very important: Never use the <font> tag for text. Use the style sheets for ALL text.
Sitewide text:
Body text is stylesheet .bodytext (font
family: Verdana, Arial, Helvetica, Sans Serif, normal, 11px, line-height:
13px, color: #000000, text-decoration: none).
Body text blue is stylesheet .bodytextblue (font family: Verdana, Arial, Helvetica, Sans Serif, normal, 11px, line-height: 13px, color: #006699, text-decoration: none). Use for emphasis before using subheaders.
Reverse body text is stylesheet .reversebodytext (font family: Verdana, Arial, Helvetica, Sans Serif, normal, 10px, line-height: 12px, color: #FFFFFF, text-decoration: none).
Reverse body text bold is stylesheet .reversebodytextbold (font family: Verdana, Arial, Helvetica, Sans Serif, bold, 10px, line-height: 12px, color: #FFFFFF, text-decoration: none).
Mainheaders is stylesheet .mainheaders (font family: Verdana, Arial, Helvetica, Sans Serif, bold, 15px, line-height: 17px, color: 003366, text-decoration: none).
Mainheaders2 is stylesheet .mainheaders2 (font family: Verdana, Arial, Helvetica, Sans Serif, bold, 13px, line-height: 15px, color: 003366, text-decoration: none).
Mainheaders3 is stylesheet .mainheaders3 (font family: Verdana, Arial, Helvetica, Sans Serif, bold, 12px, line-height: 14px, color: 003366, text-decoration: none).
Mainheaders4 is stylesheet .mainheaders4 (font family: Verdana, Arial, Helvetica, Sans Serif, bold, 11px, line-height: 13px, color: 003366, text-decoration: none).
Subheaders is stylesheet .subheaders (font family: Verdana, Arial, Helvetica, Sans Serif, normal, 11px, line-height: 13px, color: #006699, text-decoration: none).
Links is stylesheet .links (font family: Verdana, Arial, Helvetica, Sans Serif, bold, 11px, color: #009933, text-decoration: none). The rollover link mode is #009933, and the hover mode is #006633.
If you have text that requires bullets, please make unordered list, and set the type as square. ex. <ul type=“square”>
| This is a sample table. | |
| If you are using the table for | |
| formatting purposes only, | |
| set your border to “0.” | |
| Use table headers <th> |
Very important: In the main content area in template level2, the table width should not exceed approx. 445 pixels. In the main content area in template level4, the table width should not exceed approx. 600 pixels. If you exceed these recommended widths, the main content area of the page will expand too wide and will not fit properly in the 800 x 600 browser window.
Note: Do not use a percent for your table width unless the goal is to have the table stretch across the entire width of the page when the browser window is maximized. Keep in mind that it makes tabular data hard to read when it is stretched across a wide page.
(Use in a horizontal
format only. Actual size: 445 pixels wide
by 60 pixels high; individual photos in the set are 145 pixels wide by
60 pixels high)
The three photo layout
should only be used on the following pages: top level (ex.
prospective, current/returning, friends/colleagues/applicants, class
schedules,
student
resources, etc.), campuses/centers home page, campuses/centers individual
home pages, College-wide Library home page, the programs of study
home
page.
Recommended for campuses: Put a photo of the campus in the center
and photos on left and right sides should feature programs offered at
the particular campus. See example shown above — South Campus computer
training and fire academy training are the featured programs. Note:
Having photos of just your campus buildings is very boring. It is better
to show the students involved in a program on your campus.
(Use in a horizontal or square format only.
139 pixels wide by 120 pixels high) or 139 x 139.
(Use in a horizontal format only.
139 pixels wide by 60 pixels high)
(Use in a vertical format only.
90 pixels wide by 120 pixels high)
Note: All images must have alt tags.
Photographs used on the secondary
pages are 445 pixels wide by 60 pixels high with an angle on opposite
corners. The three photographs are 145 pixels wide by 60 pixels high,
and they are aligned horizontally with five pixels between the images.
Specifications: Photographs have a stroke of one pixel, color: #006699 (or #000000), location of stroke: inside, resolution: 72, file format: JPEG (progressive), quality: medium (50), blur: 0.
Photographs used on the third level pages (Template level4 — tuition/fees,
pre-college, admissions, etc.) are 139 pixels wide by 120 pixels high.
(139x120). The Photoshop settings are the same as above.
Note:
The angled edged photo should never be used
more than once on a page, and it should always be at the top right of
the page. If you use additional photos on the page, they should be rectangular
without angles.
It is recommended that photos used in addition to the 139x120 image be used without angled edges and 139 pixels wide by 60 pixels high.
If you need a larger size photo, recommended 240 x 160. Please, nothing larger than 300 x 200 unless you have a link to a larger image open in a new window.
If you need to use a vertical format for head shots (ex. board of directors, team photo, etc.), use 90 pixels wide by 120 pixels high. The Photoshop settings are the same as above.
Note: Not all pages require photographs. Be selective. Use good quality images.
logo. gif
logo2.gif
newicon.gif
Recommended: Do not use too many “new!” icons
on one page. It defeats the purpose of making an item stand out as .
go.gif
up.gif (Remember to put in an anchor named “top” at the top of the page next to the graphic header so the “up” button will function properly.
(graphic header — see example
at /campuses/north/index.html)
Recommended: This header can be used as a link back to the home page for subcategories. For example, see programs of study at http://www.fccj.edu/prospective/programs.
Horizontal rule (lightbluepixel.gif).
Recommended: Do not use horizontal rules unless there is no other alternative. Use subheaders to break up sections of text. And, please do not use headers and rules together. Use one or the other — not both.
Logo: The logo used on the home page is 139 pixels wide by 60 pixels high. The logo used in Levels 2, 3 and 4 templates is 139 pixels wide x 62 pixels high.
“New!” icon: 28 pixels wide by 11 pixels high. Use this icon to highlight items that are new.
“Go” button: 21 pixels wide by 15 pixels high.
“Back to top” arrow: To be used on long pages is 14 pixels wide by 12 pixels high. You must add an "anchor" to the left of your graphic header at the top of the page (see example on left — North Campus) so the user will be sent back to the top of the page.
Graphic header: The Photoshop settings
for these images are Futura, Bold, 18px, crisp, resolution: 72. Save for
Web as a GIF (transparent), perceptual, transparent, 16 colors (test quality).
Note: Each header should be cropped to the
pixel unless it does not have a descender (ex. p, j, y, g, etc.) If there
is not a descender, add five pixels to the bottom of the image.
Horizontal Rule: If you must use a horizontal rule to separate navigation, use the one pixel image file lightbluepixel.gif. Increase the width to required size or set at 100 percent.