FAQ: How do I include the required, standard Portland State header and footer on my website?

As a part of Portland State's integrated visual identity, all academic and administrative websites using a PDX.EDU domain are required to meet University identity standards. The minimum visual identity standard for websites is to include a standard university header above and university footer below local website content.

Portland State websites for individuals (eg, your own personal website hosted at Portland State) and websites for official student groups may use the standard Portland State header and footer, but are not required to do so. If any website—individual, student group, or external—includes a graphic reference to the University, it must be in the form of the Portland State logo, following University identity standards.

Header Options

Image Option

The preferred Portland State header is the image option, which includes a randomly-rotating image from a regularly-refreshed, central repository of campus images.

Portland State Green Option

For sites where the image option header is not appropriate, use the PSU green option.

How do I include the header/footer?

The easiest way to meet these minimum standards is to request and use the Adobe Dreamweaver template we make available. This template already includes the standard Portland State header and footer using the PHP method described below. The template works best in Adobe Dreamweaver, which you can buy at a discount through OIT User Support Services or the Portland State Bookstore. Experienced web designers could use this same template with tools other than Adobe Dreamweaver.

The best solution is to include the files directly from their central location using a server-side scripting language. This way if the standard files are updated, you will not need to do anything to your site to include the updated files. If you are not able to include the header and footer in this way, please contact Web Communications to consider alternatives.

If your site is hosted on a standard OIT server, you can use the PHP server-side scripting language that is enabled on all such sites to include the standard Portland State header and footer files. Note that for the server to process any PHP code in your page, you must name the page with a ".php" file extension—and this will also give you the power of PHP on every page to do other things as well. There is a way to enable pages ending in an ".html" or other file extension to use PHP if it is not practical to change your pages to end with .php file extension.

Example

Following is an example of how to include the standard Portland State header and footer files using PHP in a typical webpage (note that this is a simplified webpage with only the minimum necessary to make a basic PHP/HTML page—an effective webpage would be more extensive). You can copy this example and save it as a page with a ".php" file extension on your website (eg, test.php).

<html>
<head>
<title>Your Page Title</title>
</head>
<body>

<?php
include_once("/home/webdev/public_html/includes/header_psu.inc");
?>

<p>Put your page content here.</p>

<?php
include_once("/home/webdev/public_html/includes/header_psu.inc");
?>

</body>
</html>

If you do not want the included header and footer to extend completely across your webpage, put the PHP include code above into HTML containers that control width (eg, a <div>, <table>, or other HTML container).

Depending on your server environment, you may also be able to use other scripting languages—such as Cold Fusion, Active Server Pages, etc—to include the standard Portland State header and footer files. However, we can not provide specific guidance on using other scripting languages.

How do I change the look of the header/footer?

The Portland State header and footer are designed to maintain a consistent University identity and to give all our online visitors standard, global navigation to campus-wide resources. Changing colors, design or navigation in the header and footer would defeat this purpose and accordingly, no changes to these required elements are allowed.

You may supply custom pictures for the background of the image option Portland State header, as long as they are professionally prepared and convey an appropriate image for your site and the University. Note that only certain images will work well behind the required Portland State logo and other required navigational elements in the header, so some experimentation with appropriate images will be neccessary.

Prepare the background images using the Photoshop template from University Communications, save them in an optimized web image format (eg, JPG) named with sequential numbers (eg, 1.jpg, 2.jpg, 3.jpg, etc), and put them in a folder on your website.

Then modify the <head> section of your website HTML documents to include a snippet of javascript as in the example below to override the default header background image directory location and number of header background images based on your settings:

<script type="text/javascript" language="JavaScript">
<!--
var ImageDir = 'replace with your site's header images folder location';
var Images = 'replace with number of images in your site's images folder';
//-->
</script>

I'd like to use the standard Portland State header and footer on my website, but they don't work with my site's design

Contact Web Communications to consider alternatives.