Oberlin Online Design Guidelines: OC Standards   Page Layout Notice the grid underlying this page. It not only provides a good "container" for your office/departmental page, but it sustains a visual identity for Oberlin Online. Visitors to your page are likely to go elsewhere on the College¹s web site. It is reassuring for them to know that they are still on Oberlin¹s site, and useful for them to be able to get elsewhere easily. "Macro Table" is constrained to 590 pixels width width of columns: 160, 10, 420 respectively cell spacing: 2, cell padding: 1, border: 0 all cells aligned top (valign=top) header is in its own little table in the first row (colspan=3). This makes it easier to cut and paste - especially since the images use absolute URLS and once cached, can decrease download time. there is at least one row (height=12) between the header and the begining of the info. You can use the non-breaking space &nsbp or a special invisible image located at: http://www.oberlin.edu/nav/imagesnavW/space4.gif to make sure the cells show properly. footer is supposed to be aligned in the bottom-right cell (width 420) and line up with the header. Consistency issues now exist. The footer on this page is the model for institutional-level footers, starting with late summer/fall 1999.Note that the copyright image now links to a copyright information page.See below for more on footers there should be one row after the info and before the footer Navigation Second tier pages should have a link back to Oberlin Online in the header. All tiers lower should have a link back to an upper directory instead. ALL pages must have a link back to Oberlin Online in the footer. Footer The standard "top-level" footer is demo'd on this page. There is also a departmental footer, and a modified footer for non-departmental pages. Fonts and Colors The Oberlin Red For Photoshop: HSB: H: 340, S: 100, B: 60 RGB: R: 153, G: 0, B: 51 PMS color #201 for HTML: hexadecimal: #990033 Fonts, Etc... Header image: Adobe AGaramond, semibold italic there is a space between each letter and 3 spaces (total) between each word. Gil Sans is used a lot for smaller text (e.g. footer and nav bar), as a gif Body/text is usually "Arial, Helvetica, sans serif". "Times New Roman, Times, serif" is sometimes used for contrast.