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.

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

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