created by Daniel Dixon on Wednesday June 22nd, 2005 and last updated on Wednesday May 10th, 2006
Return to the includes directory main page
As mentioned in the third option of the "getting started" segment on the includes directory main page, the AU website templates can be divided up into header and footer files for easy mass implementation that also allows easy template updates. As an example to department webmasters and a setup guide to those using the standard AU website template, this section shows how to break up the templates into header and footer files and then implement them for HTML and PHP pages.
To explain header and footer files better, we're essentially taking all the code in the template that appears above the content area and putting it into a file called header.html or header.php, and then doing taking all the code in the template that appear below the content area and putting it into a file called footer.html or footer.php. Then, by using a simple one-line command in your HTML and PHP pages, you can then "include" these files, meaning the header and footer code is used by each page when the browser renders them. Since all your pages share the code from these two files, you can do site-wide updates to the templates very easily.
for example and for usage on the main AU website
Note: The extension (i.e. ".html" or ".php") of the header and footer should match that of the page they're being included into.
full header with sidebar & footer (HTML)
full header with sidebar & footer (PHP)
full header without sidebar & footer (HTML)
full header without sidebar & footer (PHP)
medium header without sidebar & footer (HTML)
medium header without sidebar & footer (PHP)
medium stretch header without sidebar & footer (HTML)
medium stretch header without sidebar & footer (PHP)
small header without sidebar & footer (HTML)
small header without sidebar & footer (PHP)
small stretch header without sidebar & footer (HTML)
small stertch header without sidebar & footer (PHP)
The font used for the title graphic is "Trajan Pro", which comes standard with the Adobe Creative Suite.
Both the large and medium AU global headers have a customizable title graphic that can be easily changed on a per-page basis with very little code. The example HTML code in all of the template link above already contain this code.
1) After the <head> tag and after your include call to a header file, place the following code:
For the large header (with or without sidebar):
<style type="text/css">
<!--
#topLinksBackground {
/* Use to replace the default Top Links background with your custom 565 x 110 pixel title graphic. */
background: url(http://www.auburn.edu/includes/topLinksBackground.jpg) #052C5C no-repeat top left;
}
-->
</style>
For the medium header:
<style type="text/css">
<!--
#topLinksBackgroundMedium {
/* Use to replace the default Top Links background with your custom 565 x 61 pixel title graphic. */
background: url(http://www.auburn.edu/includes/ddTopLinksBack_Small.jpg) #052C5C no-repeat top left;
}
-->
</style>
2) Change the bold text to the URL of your title graphic. For large, it should be 565x110 pixels. For medium, it should be 565x61 pixels.
This tutorial provides how to breakup any of the provided templates into header and footer files. For more information, please see the Using server-side includes tutorial on the OIT Support Site.
1) With the template open in your HTML editor, view the code.
2) Using your mouse cursor, highlight all the code from the below the <HEAD> tag to the top of the file to the <!-- BEGIN CONTENT AREA --> comment and then copy it (CTRL + C). Do not include the <title> tag in your copy because you'll want to change this on every page you create.
3) Create a new HTML file and then paste (CTRL+V) the copied code into it.
4) Save this file as 'header.html" or "header.php".
If all of your HTML and PHP pages will be using the same header, use "header.html" because PHP pages include HTML files. On the other hand, HTML pages can not include PHP pages.
If you'd like to have your header include PHP code for addition functionality, use "header.php" for including in your PHP pages only.
5) Repeat steps 2-4, but copy and paste the code below the <!-- END CONTENT AREA --> comment to the end of the file. Change the mailto link to use your office's or webmaster's email address. Name the file you create footer.html or footer.php.
6) Create your content page(s) using this format for HTML pages:
<html>
<head>
<title>Title for this page</title>
<!--#include virtual="header.html" -->
<h2>Content Title</h2>
<p>blah blah blah blah</p>
<!--#include virtual="footer.html" -->
Your closing </head> tag, <body> and </body> tages, and closing </html> will be included in the header and footer files.
If creating a PHP page, changed the bold lines to <? require ("header.html"); ?> and <? require ("footer.html"); ?>. Again, the PHP command can also include the HTML version of the your header or footer, but the HTML command can not include the PHP versions.
7) Save your content page(s) and view them in a browser. If dealing with PHP, upload them to your webspace to test them. The browser will include the code from the header and footer files in your content page. Simple!
Lots more information and tutorials can be found on the OIT Support Site for Webpages.