Web Page Templates

Carleton has designed some basic page elements that departments can use to make their pages consistent with other parts of the Carleton web structure. This page provides the pieces you need to make use of these common elements.

There are two styles of template -- a top level template, for the first page of your departmental area, and a lower level template, for any subsequent pages. Departments may choose to simply use the top level template for all files. However, if you are interested in using the 2 level style, note that both of the templates have some common elements:

A plain white background.
A blue bar across the top of the page, containing the Carleton nameplate and the department name under a gold bar.
A space for department-specific navigation buttons (pre-made buttons can be found here. Advanced html authors wishing to creat unique navigation buttons should follow the specifications provided here.
A site navigation bar for the bottom of the page (optional for lower level pages). There are different navbars depending on where you are -- here's the complete set.

Top Level Template

Here is a sample top-level page, from the PE department. You should substitute your own graphics and labels. If you need department name graphics or navigation buttons, contact your computing support provider or make you own following the guidelines here.

All of this html code will work if your files will ultimatly be accessed from the main www.carleton.edu server. If your files will be on either Celeste or Fabio, do not use the "#include virtual" code for the header & footers or "#echo var" code in the "Last modified" line. For pages on servers other than www.carleton.edu, simply keep the header, footer & date information within the file itself.

<HTML>
<HEAD>
<TITLE>Carleton College: Physical Education</TITLE>
</HEAD>

<BODY BACKGROUND=/graphics/background.gif BGCOLOR=#FFFFFF>
<IMG SRC=/graphics/carleton-level1.gif WIDTH=231 HEIGHT=25 ALT="Carleton College">

<IMG ALIGN=RIGHT SRC=/graphics/dept/PEAR.gif WIDTH=341 HEIGHT=15 ALT="Physical Education, Athletics, & Recreation">
<BR CLEAR=RIGHT>

<!-- ------- Department-specific navigation buttons go here -------- -->
<CENTER>
<P ALIGN=CENTER>
<IMG SRC=/graphics/space.gif HEIGHT=50 WIDTH=1 ALIGN=BASELINE>

<A HREF=/curricular/PEAR/resources/>
<IMG SRC=/graphics/academic-resources.gif ALT="Academic Resources" HEIGHT=30 WIDTH=90 BORDER=0 ALIGN=BASELINE></A>

</P>
</CENTER>

<!-- -------- End of department-specific navigation buttons --------- -->
<!-- --------- The text of your page goes below this point ---------- -->


Your page's HTML here.


<!-- ---------------- Main text of page ends here ----------------- -->
<!-- ----------- Make sure the owner's name is correct: ----------- -->

<!--#include virtual="/builders/templates/navbar-acad.i" -->

<P ALIGN=RIGHT><SMALL>
Last modified: <!--#echo var="LAST_MODIFIED" --><br>
by: <a href="mailto:username@carleton.edu">Your Name</a>
</SMALL><P>

</BODY>
</HTML>

Just fill in your HTML content and use the appropriate graphics, and you'll be set. Department name graphics for departments of instruction are in /graphics/dept/, everyone else is in /graphics/campus/. You'll want to check to make sure that the WIDTH and HEIGHT settings are correct for your graphics as well -- each department name takes up a different amount of space. You can determine the size of a graphic by entering its URL in your web browser; when the graphic comes up on the screen, its dimensions will be displayed in the window's title bar. Take this information and type it into the "WIDTH=" and "HEIGHT=" location in the code for the contents of the bluebar across the top of the page.

Lower Level Pages

Pages below the first page of your area (like this page) should use the lower level template, which includes a smaller Carleton nameplate and departmental name graphic.

For those of you who will have your files on the www.carleton.edu server (instead of on the web servers on Celeste or Fabio) we strongly recommend that you use an "include file" since the elements will be the same on all of the pages. An include file is file containing HTML that you can include in many different pages. That way, if you decide to make some change that will effect all of your pages (like adding a navigation button), you only have to change the include file, and all of the rest of your pages will automatically display the change. If you don't use an include file, or your pages are served from Celeste or Fabio, you'll have to edit every page each time you make a change to the common header material.

Creating a common header file

First, create a file that contains the HTML that you want to appear in multiple pages. For instance, here's the PE second level header, which is saved in a file called header.i in the department's main directory:

<BODY BACKGROUND=/graphics/background2.gif BGCOLOR=#FFFFFF>
<IMG SRC=/graphics/carleton-level2.gif WIDTH=199 HEIGHT=18 ALT="Carleton College:">
<IMG SRC=/graphics/dept/PEAR2.gif WIDTH=290 HEIGHT=14 ALT="Physical Education, Athletics, & Recreation">
<BR CLEAR=RIGHT>

Every file that uses this header has this general structure:

<HTML>
<HEAD>
<TITLE>Carleton College: Physical Education</TITLE>
</HEAD>

<!--#include virtual="/curricular/PEAR/header.i" -->




Your page's HTML here.


<!-- ---------------- Main text of page ends here ----------------- -->
<!-- ----------- Make sure the owner's name is correct: ----------- -->

<!--#include virtual="/builders/templates/navbar-acad.i" -->

<P ALIGN=RIGHT><SMALL>
Last modified: <!--#echo var="LAST_MODIFIED" --><br>
by: <a href="mailto:username@carleton.edu">Your Name</a>
</SMALL><P>

</BODY>
</HTML>

Just change the directory specification and you can use this sample for your own pages.

An Important Note About Include Files

Include files can save you a lot of work if your files are served from www.carleton.edu, but you need to keep a few things in mind when you use them.

When your web browser loads a page that uses include files, the HTML from the include files is displayed right along with the HTML from the rest of the page. You can't tell by looking at the source with Netscape where your page stops and the include file starts.

That means that if you save the page source with Netscape, edit the HTML, and put the page back on the server, you will break all of the links to include files, and any subsequent changes that you make to the include files won't be reflected in that page. It also messes up the automatic revision date, so it's a bad habit all around.

The solution is to never work on HTML source that you've saved through Netscape. Always copy the original from the server before working on it.

Back to the Builders Page

Last modified: Friday, 12-Nov-1999 18:00:13 CST
contact: M. Heiman