The steps below outline one way to implement the above version of the Cornell University Library web banner on your page. These directions presume that you have created a file structure in which you have your index.html file at the top level of your site, with a folder called "styles" and a folder called "images" at the next level. If you have created a different file structure for your site, you will need to be sure that you change the file urls in the code to match your structure.

This screenshot shows the assumed file structure:

The Four Step Process

(Use control-A to select all of the code in the following boxes.)

1. Paste the following code into your webpage at the point where the banner should appear. In most cases, this will be immediately after your body tag:
<!-- The following div contains the Cornell University logo with unit signature --> <div id="cu-identity"> <div id="cu-logo"> <a id="insignia-link" href="http://www.cornell.edu/"><img src="images/unit_signature_unstyled.gif" alt="Cornell University" width="283" height="76" border="0" /></a> <div id="unit-signature-links"> <a id="unit-link" href="http://www.library.cornell.edu">Cornell University Library</a> </div> </div> <!-- The search-navigation div contains links that allow the user to search either the unit website or all of cornell.edu. These links will be displayed in the unit signature banner and will be aligned with the right edge of the page. --> <div id="search-navigation"> <ul> <!-- insert the link to your site search here. If your site doesn't have a search, eliminate it --> <li><a href="#">Search Unit Name</a></li> <!-- this links to the cornell.edu search page. do not edit this link --> <li><a href="http://www.cornell.edu/search/">Search Cornell</a></li> </ul> </div> </div>

2. If you already have a stylesheet for your site, paste these rules into it: /* Import styles ------------------------------*/ @import url("main.css"); /* Import IE5/Mac hacks Uses the IE5/Mac Band Pass Filter: http://stopdesign.com/examples/ie5mac-bpf/ ----------------------------------------------- */ /*\*//*/ @import "ie5mac.css"; /**/ /* Import IE5/Win hacks Uses the Mid Pass Filter: http://tantek.com/CSS/Examples/midpass.html ----------------------------------------------- */ @media tty { i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";} }/* */

3. Download the following stylesheets and save them to your styles folder:
main.css
ie5mac.css
ie5win.css

If you did not have your own style sheet to start with, you will also need to download and save the following file to your styles folder:
screen.css

If you did not have your own style sheet, you will need to link your pages to screen.css using this code inside your head tags:

<link rel="stylesheet" type="text/css" media="screen" href="styles/screen.css" >

4. Finally you will need to save these image files to your images folder: