Instructions for creating and placing graphics in the WPS Biology Style
All PSD templates mentioned in this document are located on master CD.
There are several areas where graphics need to be located in order to show up correctly once the Biology Style is applied to your volume. All of these need to be located in the main volume medialib:
MODULE NAMES
A directory needs to be created called .navigation
NOTE: there is a period before the word "navigation". This is important to keep in the naming structure of this folder.
In this directory you will be placing all of the "on" and "off" graphics for your module titles. All filenames should follow this naming convention:
activities_off.gif
activities_on.gif
No space, no special characters. Include the "on" and "off" in the filename so that you can keep track of which gifs are which.
MODULE .XML DOCUMENT
An xml document also needs to be placed in the .navigation folder which will map the graphic to the correct module in WPS. The text below is a template only. The names here should be changed to reflect the actual gif filenames and the actual WPS module names. This document should be titled "navigation.xml" and should be formatted with no extra spaces or returns at the end of this block of text:
<?xml version="1.0" ?<!DOCTYPE wps>
<wps version="1.0" xmlns="
xml:base=" xml:lang="en-US">
<navigation-map>
<item file="summary_on.gif">Summary_on</item>
<item file="summary_off.gif">Summary_off</item>
<item file="summ_rev_on.gif">Summary Review_on</item>
<item file="summ_rev_off.gif">Summary Review_off</item>
<item file="cont_rev_on.gif">Content Review_on</item>
<item file="cont_rev_off.gif">Content Review_off</item>
<item file="concept_rev_on.gif">Conceptual Review_on</item>
<item file="concept_rev_off.gif">Conceptual Review_off</item>
<item file="applying_on.gif">Applying Ideas_on</item>
<item file="applying_off.gif">Applying Ideas_off</item>
<item file="fig_rev_on.gif">Figure Review_on</item>
<item file="fig_rev_off.gif">Figure Review_off</item>
<item file="activities_on.gif">Activities_on</item>
<item file="activities_off.gif">Activities_off</item>
<item file="research_on.gif">Research Links_on</item>
<item file="research_off.gif">Research Links_off</item>
<item file="res_citations_on.gif">Research Citations_on</item>
<item file="res_citations_off.gif">Research Citations_off</item>
<item file="web_search_on.gif">Web Search_on</item>
<item file="web_search_off.gif">Web Search_off</item>
<item file="bullboard_on.gif">Bulletin Board_on</item>
<item file="bullboard_off.gif">Bulletin Board_off</item>
<item file="science_on.gif">Science Skills_on</item>
<item file="science_off.gif">Science Skills_off</item>
<item file="challenge_on.gif">Challenge Activities_on</item>
<item file="challenge_off.gif">Challenge Activities_off</item>
<item file="fig_cap_on.gif">Figure Captions Answers_on</item>
<item file="fig_cap_off.gif">Figure Captions Answers_off</item>
<item file="genetics_on.gif">Genetics Problems_on</item>
<item file="genetics_off.gif">Genetics Problems_off</item>
</navigation-map>
</wps>
LEFT NAVBAR CHAPTER GRAPHIC
A directory needs to be created called _wps_stylereplaceable
NOTE: there is an underscore before and after the word "wps". This is important to keep in the naming structure of this folder.
In this directory you will be placing all of the chapter number graphics that appear in the leftnavbar, above the chapter module names. All filenames should follow this naming convention:
ch1.gif
ch10.gif
This folder should also contain a small image of the bookcover. It should be titled:
cover_smallest.gif
(the graphic that I used for Freeman Biological Science was 79x93 pixels which is a little on the small side, you can use a bigger cover but note that it may overlap text in some browsers)
There is also a thin dividing line which separates the chapter items from the global items (like the “Home” button). This dividing line graphic should go in the _wps_stylereplaceable directory also and is called:
divbar.gif
TOP NUMBER NAVIGATION GRAPHICS
The color of the on and off chapter number graphics in the top navbar can be swapped out for what is currently in the Freeman default style. If new numbers are desired for this area, they should be placed in the directory in the main volume medialib titled _wps_stylereplaceable.
All filenames should follow this naming convention:
1_on.gif
1_off.gif
10_on.gif
10_off.gif
Two number graphics need to be created for each number in order for the rollover color to change correctly.
NEW NOTE: The thin colored line which divides the module content names in the left navbar can also be replaced (the default color is the purple for Freeman). Just replace the “chapnav_divider.gif” in the main medialib. Make sure you keep some blank space (with your background color) below the line so it lines up properly.
TOP GRAPHICS
There are images located in the top navbar that need to be located in the main volume medialib titled _wps_stylereplaceable. Try to keep the same size graphics as the ones in the Freeman site – making them larger can cause items to overlap.
For the links in the top navbar:
profile_on.gif
profile_off.gif
search_on.gif
search_off.gif
syllabus_on.gif
syllabus_off.gif
feedback_on.gif
feedback_off.gif
help_top_on.gif
help_top_off.gif
For the image in corner on the interior pages:
keyicon.gif
For the image in corner on the spash page:
keyiconvol.gif
and banner:
coursetitle.gif
BACKGROUND COLOR
The color of the background of the left navbar and the top navbar are controlled by an image that needs to be placed into the _wps_stylereplaceable folder. A sample of this gif is on the master CD for the Biology style artwork. The images should be titled:
navbar_bkgd.gif
(this controls the leftnavbar color)
Dimensions for this must be exact: 171 width x 51 height pixels
toolbar_bkgd.gif
(this controls the topnavbar color)
Dimensions for this must be exact: 64 width x 124 height pixels
CONTROLLING THE MODULE TITLE COLOR/FONT IN THE MAIN CONTENT FRAME
The font type and color that appears in the Biology style module titles as they show up in the main content frame is matched to the other colors present in the overall design. There is a way to alter these font colors and types using style sheets.
A stylesheet needs to be created which should be titled: esm_bot.css and should be loaded up into the main medialib.
This stylesheet will control the class.header and .subheader and should contain the following code complete at all times:
<STYLE TYPE="text/css">
BODY{font-size: 9pt;
font-family: Verdana, Arial, sans-serif;
text-align: left;
color: #000000;}
P{font-size: 9pt;
font-family: Verdana, Arial, sans-serif;
text-align: left;
color: #000000;}
H2{font-family: "Verdana, Arial, sans-serif"}
H3{font-family: "Verdana, Arial, sans-serif"}
H4{font-family: "Verdana, Arial, sans-serif"}
H5{font-family: "Verdana, Arial, sans-serif"}
H6{font-family: "Verdana, Arial, sans-serif"}
TABLE{font-family: Verdana, Arial, sans-serif}
TR{font-family: Verdana, Arial, sans-serif}
TD{font-size: 9pt;
font-family: Verdana, Arial, sans-serif;
text-align: left;
color: #000000;}
UL{font-size: 9pt;
font-family: Verdana, Arial, sans-serif;
text-align: left;
color: #000000;}
OL{font-size: 9pt;
font-family: Verdana, Arial, sans-serif;
text-align: left;
color: #000000;}
DL{font-size: 9pt;
font-family: Verdana, Arial, sans-serif;
text-align: left;
color: #000000;}
.header{font-size: 18pt;
line-height: 18pt;
font-family: Arial, sans-serif;
font-weight: bold;
text-align: left;
color: #5F469D;}
.subheader{font-size: 14pt;
line-height: 16pt;
font-family: Verdana;
font-weight: bold;
text-align: left;
color: #4175B6;}
.profheader{font-size: 14pt;
font-family: Arial, sans-serif;
font-weight: bold;
text-align: left;
color: #5F469D;}
.profsubheader{font-size: 11pt;
font-family: Verdana;
font-weight: bold;
text-align: left;
color: #4175B6;}
.small{font-size: 8pt;
font-family: Verdana, Arial, sans-serif;
text-align: left;
color: #000000;}
.textinput { font-size: 10pt;
font-family: Courier, monospace; }
.searchterms{font-size: 9pt;
line-height: 12pt;
font-family: Verdana, Arial, sans-serif;
text-align: left;
background-color: #FAF1D0;}
.breadcrumbs {font-size: 7pt;
font-family: Verdana, Arial, sans-serif;
text-align: left;
color: #000000;}
.copyright{font-size: 8pt;
font-family: Arial, Helvetica;
font-weight: bold;
text-align: left;
color: #4175B6;}
a.crlink { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #4175B6 }
a.crlink:active { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #4175B6 }
a.crlink:visited { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #4175B6 }
a.crlink:visited:hover { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #4175B6 }
</STYLE>
The areas of this stylesheet that control font color and type are the following areas:
.header{font-size: 18pt;
line-height: 18pt;
font-family: Arial, sans-serif;
font-weight: bold;
text-align: left;
color: #5F469D;}
.subheader{font-size: 14pt;
line-height: 16pt;
font-family: Verdana;
font-weight: bold;
text-align: left;
color: #4175B6;}
so this area of the stylesheet can be changed to reflect any desired color or font size/family. Just make sure that the entire content of the stylesheet is present – the stylesheet will not work with just the .header and .subheader content alone.
REPLACE COPYRIGHT
By default this style uses 2003 as the copyright year. In July 2004, the style was updated so that that year can be replaced. To replace the copyright year, create a directory in your volume media library called _esm_biology_text. Then, create a text file called copyright.txt. Type just the year that you would like to use into the file and save the file. Be sure to save the file as plain text with a .txt extension. Upload the file into the _esm_biology_text folder.