This document contains the style guidelines for developing web pages and scripts for the Information Technology Department Network Management Systems intranet site. The scope of the document covers aspects of page design from typography and graphics to navigation. The reach of this document is limited to pages and scripts hosted on the IT NMS web server, nms.hartfordschools.org.
General
The use of frames on this site is forbidden. The use of Java in any form is forbidden. All graphics except transparent spacers must have alt tags. Pages should be formatted to fit on a 800x600 pixel display without horizontal scrolling. Vertical scrolling on a 800x600 display is both acceptable and expected. Tables should be used for width and layout control. Graphics may employ high-color (greater than 256 colors), but should not lose their informational meaning when viewed on a 256 color display. Graphical image maps for navigation are permitted but are discouraged. Pages should be friendly to text-only browsers. This site is primarilly and intranet site; while it is desirable that all content be quickly accessible for visitors using dialup connections, this is not a requirement.
Navigation
Primary site navigation consists of navigation buttons at the top of each page, placed horizontally below the Hartford Public Schools IT Dept. banner. The site home page is something of a special case. It is organized with navigation buttons running down a left-hand column with a large main body area center-right. Additional navigation icons are presented below the navigation buttons. The font for main page (large) buttons is Arial Black at 16pt (in Photoshop); the font for small buttons (used on all other pages) is Arial at 14pt (in Photoshop).
The color scheme for navigation buttons violates the general blue-white-black scheme outlined in the Primary Color Scheme section. This is an intentional element of the site navigation design. The background color for primary navigation buttons has RGB values F2DAB8 in hexadecimal (242-218-184 decimal). The text color for primary navigation buttons is 710514 (113-5-20). The background color for secondary navigation buttons is 0D20AB (13-32-171), with white text FFFFFF (255-255-255). Small navigation buttons are 16 pixels high, and wide enough to accommodate the navigation text with a border of 4 pixels to the right and left plus a 2 pixel-wide white space at the extreme right edge of the button. Primary navigation button text is in ALL CAPS; secondary navigation button text is in mixed-case. IE: C1000 Index
Primary navigation buttons are used to link to major areas of the site, such as the document library, the NMS application, and the on-line paging system. Secondary navigation buttons are used to bring the visitor back to the index page for a subsection of the site. For example, the document library index page has primary navigational buttons for HOME, DATES, and NMS. The C1000 Switch Info page, which is a subsection under the library, has navigational buttons for HOME, DATES, NMS, and LIBRARY. The C1000 Configuration Hints page, a child page of the C1000 Switch Info subsection, has links for HOME, DATES, NMS, and LIBRARY as well as a secondary navigation button for C1000 Index. Secondary navigation buttons are added to the right of the primary navigation buttons. The HOME button should always appear on the far left.
Graphical Hallmarks
The site home page is marked with the seal of Hartford Public Schools in the top left corner, and text next to the seal identifying the site by owner (Hartford Public Schools) and function (Information Technology Dept. NMS Intranet). All other pages should display the Hartford Public Schools IT Dept. banner at the top of the page. Graphical navigation buttons are arranged horizontally below the banner.
The bottom of each page carries a thin black line separating the page body area from the page footer area. The black line is 400 pixels by 2 pixels and should be centered. The file is located at: http://nms.hartfordschools.org/images/black_line.jpg
Where practical, links to Adobe .PDF documents should be followed by a small PDF icon:
The icon is located at:
http://nms.hartfordschools.org/images/adobe_icon.gifNo other common graphical hallmarks exist that have a site-wide presence.
Page background graphics are forbidden. Background graphics may be used (sparingly) in tables to add visual interest.
Typographical Hallmarks
The primary font for the site is Times New Roman. This should be coded as: <font face="times new roman, roman, times"> The primary font should be used for all page headers and body text as well as link text on navigation pages. Body text should be size=3.
Each page should have a title line, centered, below the banner and navigation buttons. The title should be in the primary font at size=4.
The secondary font for the site is Arial. This should be coded as: <font face="arial, helvetica"> The secondary font should be used for page footers as size=1 with the following text:
Hartford Public Schools Information Technology Department | Updated MM-DD-YY
The footer should contain the date of the page's last significant update in month - day - year format. If the page is dynamically generated, the "updated" portion of the footer should be replaced with version information about the generating script. IE: CGI Code v1.5.2
The secondary font may also be used for headers or (sparingly) where needed to set off text or links from the main body text.
Primary Color Scheme
The primary color scheme is defined by the <body> tag that is common to all pages on the site:
<body bgcolor=white text=black link=blue vlink=#808080 alink=red>
Page backgrounds are white, text is black. Unvisited links are blue, visited links are 50% grey, and activated links are red. Primary navigation buttons violate this scheme. This is an intentional design choice which is explained in the Navigation section.
A light-blue background color (E0E0FF) can be used to set off page elements such as text blocks and sidebars. Sidebars should always be on the left, and should be no more than 1/4 of the page width.
Code Samples
This is the standard code block for top-of-page navigation:
|
<!-- ********************* Navigational area ************************ --> <img src=/buttons/ban-hps_it.jpg alt="HPS IT Banner"><br> <a href=/index.html><img src=/buttons/ban-bb_home.jpg border=0 alt="Home"></a> <a href=/dates/index.html><img src=/buttons/ban-bb_dates.jpg border=0 alt="Date-book"></a> <a href=/cgi-bin/scripts/nms_home.pl><img src=/buttons/ban-bb_nms.jpg border=0 alt="NMS"></a> <a href=/library/index.html><img src=/buttons/ban-bb_library.jpg border=0 alt="Library"></a><br> <!-- ********************* Navigational area ************************ --> |
Hartford Public Schools Information Technology Department | Updated 4-25-02