Fermilab at Work


Fermilab Web Site Style Guide
style guide home  |  general site information  |  guidelines and conventions
resources  |  Fermilab site graphics and code  |  step-by-step tutorial  |  help
Fermilab Site Graphics and Code

Header Graphic/Navigation Bar
The Fermilab web site utilizes server side includes for ease of maintenance and page production. The headers and footers that you see on each page are created by referencing an include file. Whenever the include file is updated, all pages that reference that file will then display the new changes. These includes can be referenced from any page on the main Fermilab site (www.fnal.gov). You can use the links in the bulleted list below to get the necessary code to use the includes on your pages. If your page(s) will not reside on the main www.fnal.gov server then you will need to create your own "fnalincludes" directory and put the necessary files in that directory. You will also need to make sure that parsing is allowed to be turned on for that particular server. Then you can turn it on by adding commands to an .htaccess file in the directory tree you want to affect.

You can download a zip file that contains the necessary include files and a stylesheet that belong in the fnalincludes directory on your server. As long as you name the directory fnalincludes then you will be able to use the code from the links below. If you name the directory anything other than that you will need to modify the path to the include with the appropriate directory name.

Please choose the appropriate header graphic for your pages from the list of sections below. For guidance on header selection view our site map.

Mini Header
The mini header can be used on pages where you want to provide a link back to the Fermilab home page but don't want to use the standard section header and all of the buttons. To use the mini header (view example) you will need two items:

  • The background image that creates the blue bar at the top of the page.
  • The Fermi logo image.

    You can reference the background image as:*
    http://www.fnal.gov/fnalincludes/bg1.gif

    You can reference the Fermi logo image as:*
    http://www.fnal.gov/fnalincludes/logotop.gif

    Put the background image reference within your body tag and reference the Fermi logo image at the very top of your HTML document within a <center> tag. You will also need to set your top page margin to zero. Do this by inserting the following code within your body tag: topmargin="0" marginheight="0"

    View a template to use for creating pages with the mini header.*

    *You don't need the full path if your pages are on the main server - just use: /fnalincludes/bg1.gif

    Custom Header and Buttons
    If your pages are part of a section that is not represented by any of the hubs, then you can create your own custom header graphic. You will just need to insert the section title and an image. The image will need to be 85 x 85 pixels. The font to use for the header title and button text is Verdana. If you need to use different navigational buttons be sure to always leave a Fermilab home button in the upper left hand corner, in order to maintain consistency throughout the Fermilab sites. Please allow 1 pixel of space between each button, and each button row should be 602 pixels wide. This width can be maintained by adding or taking away the extra blue space on either side of the link name. If there is too much extra space to reasonably accomplish this, then just fill in the empty space with a blue bar.

    Below is a list of templates to use for making buttons and headers. Each is in two different formats - Photoshop and GIF. If you choose to work with the GIF image, be sure to change the color mode from index to RGB before adding any text or images. When you resave as a GIF file it will switch back to index color mode. Regardless of the template you use, all headers and buttons will need to be saved as GIF files when you are done adding new images and text. (PC users - right click the link and choose "save link as" or "save target as". Mac users - click link and then click and hold on image and choose "save source as" or "download image to disk")

    Page Footer
    Each page of the Fermilab web site should contain the same footer imagery consisting of a blue horizontal bar, logo, and Legal Notices link as well as unique code for specifying the date for the page, and a contact email link. Please use the provided footer template to easily include this data on your pages.


    Style Sheet
    In order to keep font styles consistent throughout the site, we recommend the use of a style sheet. Simply paste the following code within the head of your HTML document to automatically include the Fermi web style sheet in your page. You may override this with normal HTML font tags if required.

    <link rel="stylesheet" type="text/css" href="/fnalincludes/style.css">

    Font size is not called out in the style sheet and will be left up to the browser whenever possible. This method will allow users to adjust the font size to accommodate their needs. When a change is required, it is recommended that the tags <font size="+1"> or <font size="-1"> be used. (values other than "1" can be substituted for greater change) This causes the value of the font size to be incremented larger or smaller in relation to the standard font size that is rendered by the browser.

    Page Templates (incorporates style sheet, header, and footer)
    If you would like a page template to start with just select your web site section from the list below. The HTML will load into a new window. Just copy and paste the code into a blank document. The only HTML you will need to modify from the page will be the page title, last modified date, and the email contact link. Just place your content within the HTML document and change the two aforementioned variables. For guidance on template selection view our site map.

    • last modified 4/25/2002   email Fermilab