Organization of the site

Headings

File Naming

File Hierarchy

Graphics

Banners & Buttons
Colors
Fonts
General rules for illustrations

Organization of the Site

Headings

Title

The title that appears in the title bar should be the same text as that of the First Heading in the document body. As in the First Heading, mixed capitalization is used.

<TITLE>Monohybrid Cross Problem Set</TITLE>

First Heading

The First Heading is an <H2> heading, with the attribute ALIGN=CENTER. The font is the subject color. Mixed capitalization is used.

Example:

Monohybrid Cross Problem Set

<FONT COLOR="#EA 62 04">
<H2 ALIGN=CENTER>Monohybrid Cross Problem Set</H2>
</FONT>

Second Heading

The Second Heading is an <H3> heading, with the attribute ALIGN=CENTER. The font is the subject color. Mixed capitalization is used.

Example:

Predicting the Results of a Monohybrid Cross

<FONT COLOR="#EA 62 04">
<H3 ALIGN=CENTER>Predicting the Results of a Monohybrid Cross</H3>
</FONT>

Third Heading

The third heading is bold <B> text, aligned left. The font is the subject color. Only the first letter is capitalized. Depending on the context, this heading may require a <P> tag just preceding it to separate the heading from the text above.

Example:

Setting up a punnett square

<FONT COLOR="#EA 62 04">
<B>Setting up a punnett square</B>
</FONT>

File hierarchy

The file hierarchies are generally designed to parallel the links on the web site, but also to maximize the effiency of editing and creating HTML documents.

File naming

File nomenclature should be consistent, with minimal use of abbreviations. For URLs that will be distributed (such as the link to the biology 181 home page) use default.html in a unique directory. Otherwise, avoid default.html as a filename. (Having multiples files with the same name increases the chance of accidental overwriting.) Try to name files in all lowercase, and use underscores when necessary.

Graphics

Banners & buttons

Each major section of the web site has its own banner and color scheme. Each section's banner has a small patch of the subject color and "The Biology Project" and "Subject Name" text in link blue. These banners are also image maps that link back to the BP page and subject main page.

• BIOCHEMISTRY
• CELL BIOLOGY
• DEVELOPMENTAL BIOLOGY
• MENDELIAN GENETICS
• HUMAN BIOLOGY
• MOLECULAR BIOLOGY
• VOCABULARY

Buttons in The Biology Project are made with a Photoshop Template (downloadable here as button_maker.psd.) that contains guidelines for text on 1 and 2 lines, as well as samples of all The Biology Project subject colors.

The font for buttons is 10 pt Formata Regular, anti-aliasing turned on, no bold.

From RGB mode in Photoshop, buttons are changed to 5-bit indexed color, adaptive palette, no dithering. The indexed color image is exported as a transparent gif, with the beige background being transparent.

Colors and their RGB, HEX, and HSB values

Background color

R=253 G=245 B=230
H=39 S=85.16 B=94.71

HEX=FD F5 E6

The Biology Project Blue

R=41 G=16 B=148

HEX=29 10 94

Biochemistry R=173 G=0 B=0 HEX=AD 00 00 browser-safe version R=153 G=0 B=0 HEX=99 00 00

Cell Biology R=37 G=122 B=36 HEX=25 7A 24 browser-safe version R=0 G=102 B=0 HEX=00 66 00

Chemicals & Human Health browser-safe version R=51 G=153 B=153 HEX=33 99 99

Developmental Biology browser-safe version R=0 G=102 B=153 HEX=00 66 99

Evolutionary Biology browser-safe version R=153 G=51 B=0 HEX=99 33 00

Human Biology R=115 G=26 B=84 HEX=73 1A 54 browser-safe version R=153 G=00 B=102 HEX=99 00 66

Mendelian Genetics R=234 G=98 B=4 HEX=EA 62 04 browser-safe version R=255 G=102 B=00 HEX=FF 66 00

Molecular Biology R=115 G=123 B=214 HEX=73 7B D6 browser-safe version R=102 G=102 B=204 HEX=66 66 CC

Fonts for graphics & illustrations

The font that was chosen for web graphics is Formata. Formata comes in several flavors, the primary ones being Formata Light, Formata Regular, Formata Medium, and Formata Bold. Although images will differ, it is best to use Formata Regular for text within a graphic and Formata Medium for titles. 12 pt. font size seems to work well, and anti-aliasing should always be used.

A note on anti-aliasing:

Anti-aliasing averages the jagged edges of a bit-mapped font with the background color, creating smoother letters and a slight blurriness. Because this "smoothing out" process incorporates the background color into the text, it is important that text be placed on a background color compatible with the beige TBP background color. A perfect match or slightly darker than RGB 253,245,230 is best.

General rules for illustrations

1. All rectangular illustrations should have a 1-pixel black border and a title.
   
2. When possible, transparencies should be used to avoid a "blocky" look. Even if they are not rectangular, illustrations should still have a title.
   
3. Illustrations should be no wider than 500 pixels, and preferably no taller than one screen scroll.
   
4. Use GIFs for computer graphics and JPEG for photographic images.
   
5. Lines for labelling should be horizontal, vertical, or at 45 deg angles.
   
6. Text in multiple labels should be aligned in some manner. Consistency within an image is more important than between images.
   
7. Images should be cropped as closely as possible.

---

The Biology Project
The University of Arizona
January 31, 2000
Contact the Development Team

http://www.biology.arizona.edu
All contents copyright © 1996-2000. All rights reserved.