The Biology Project > About us

About us
The Biology Project Style Manual

About the BP

Project History

Kudos for Site

Project Team

Credits

Copyright

Linking to Site

Style Manual

Instructional Design

Table of Contents

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.

Buttons in The Biology Project (are being discontinued) were 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.

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 (not a browser safe color)

 

The Biology Project Greens


HEX=006600

 

 

Biochemistry

R=173 G=0 B=0
HEX=AD 00 00

browser-safe version
R=153 G=0 B=0
HEX=990000

 

Cell Biology

R=37 G=122 B=36
HEX=25 7A 24

browser-safe version
R=0 G=102 B=0
HEX=006600

 

Chemicals & Human Health

browser-safe version
R=51 G=153 B=153
HEX=339999
 
 

Developmental Biology

browser-safe version
R=0 G=102 B=153
HEX=006699

 

Human Biology

R=115 G=26 B=84
HEX=73 1A 54

browser-safe version
R=153 G=00 B=102
HEX=990066

 

Mendelian Genetics

R=234 G=98 B=4
HEX=EA 62 04

browser-safe version
R=255 G=102 B=00
HEX=FF6600

 

Molecular Biology

R=115 G=123 B=214
HEX=73 7B D6

browser-safe version
R=102 G=102 B=204
HEX=6666CC

 

Fonts for graphics & illustrations

The font that was chosen for web graphics is Arial. Although images will differ, it is best to use Arial Regular for text within a graphic and Arial bold 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. When possible, transparencies should be used to avoid a "blocky" look. Even if they are not rectangular, illustrations should still have a title.
  2. Illustrations should be no wider than 600 pixels, and preferably no taller than one screen scroll.
  3. Use GIFs for computer graphics and JPEG for photographic images.
  4. Lines for labelling should be horizontal, vertical, or at 45 deg angles.
  5. Text in multiple labels should be aligned in some manner. Consistency within an image is more important than between images.
  6. Images should be cropped as closely as possible.

 

Previous | Next

The Biology Project > About us


The Biology Project
University of Arizona
Revised: July 2004
Contact the Development Team

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