Implementing the IUPUI Web Template on Departmental Servers

Note: If your site is hosted on webserve (IU Central Servers), view instructions for webserve.

On this page:

• Theory and file structure
• Keeping current — synching the header and footer
• Building the navigation file
• Building the master template file

Theory and file structure

Each page on your site will be structured in this way:

1. Header - this must be regularly updated from the IUPUI website, thus contains the current JAGALERT status, and the most current styling information.
2. Navigation - this is, usually, a left navigation bar found on each page. This is hosted on your web server and is editable by your web developer
3. Content - this is hosted on your web server. This is the meat of the page — the content — and is managed by your web developer.
4. Footer - this must be regularly updated from the IUPUI website, thus contains the most current styling, news, and events.

Sample file structure

The header, navigation, and footer are three separate files which must live on your webserver. Each page on your website will include the content, and include code to automatically combine content, header, navigation, and footer for a complete webpage when served to a visitor's web browser.

You can set up the file structure however it makes the most sense in your environment. This is an example of a possible structure on an Apache server:

/www/template.html
/www/includes/head.inc
/www/includes/foot.inc
/www/includes/navigation.inc
/bin/automation.php

Keeping Current — synching the header and footer

Since the header and footer must be regularly synched, those files must be frequently copied to your webserver. This can be automated, requiring no effort on your part once the automation is set up.

Due to the sensitivity of campus JAGALERT emergency communications, it is highly recommended that these updates occur several times per hour.

In short, simply copy these files from the campus website to the appropriate location on your server:

Header: http://www.iupui.edu/sitetools/head2.inc
Footer: http://www.iupui.edu/sitetools/foot.inc

How do I do this???

Most server operating systems have scheduling functionality to allow the scheduling of a variety of server functions. In this case, you will schedule the server to copy files as mentioned above.

OCM is most familiar with UNIX servers and utilizes the cron scheduling application to accomplish this synchronization. Learn more about the UNIX cron command.

Building the navigation file

Now you have your web space, which includes a folder called sitetools and a file called .htaccess. Let's create your navigation file include. This file can be modified at any time, and will then be reflected across all pages.

1. In Dreamweaver or Wordpad or whatever you are using to create and edit HTML pages, paste the following into a brand new file:

   
   <div id="leftNav">
   <h2><a href="http://www.iupui.edu/~yoursite/">Home</a></h2>
    <ul>
   
     <li id="head2" class="subhead"><a href="http://www.iupui.edu/">Heading 1</a>
      <ul id="head2-sub">
       <li><a href="http://www.iupui.edu">Page 1</a></li>
       <li><a href="http://www.iupui.edu">Page 2</a></li>
   
       <li><a href="http://www.iupui.edu">Page 3</a></li>
      </ul>
     </li>
   		
     <li id="head3" class="subhead"><a href="http://www.iupui.edu/">Heading 2</a>
   
      <ul id="head3-sub">
       <li><a href="http://www.iupui.edu">Page 1</a></li>
   	<li><a href="http://www.iupui.edu">Page 2</a></li>
   
   	<li><a href="http://www.iupui.edu">Page 3</a></li>
      </ul>
     </li>
    </ul>
   </div>
   
   		
   

   The code above as it is would render this.

   The only edits you should make on this are the URLs and the page names. You will want to replace "Home" with your site name. You can add or subtract pages as you, as long as you use the same scheme. Do not change things like "leftNav" as these are pulled directly off the IUPUI style sheet, and refer to it. If you change the "id" or "class" you will not be consistent with the template.

2. Once you have the file, click Save As, name the file, and be sure to add the extension .inc. You can name the nav file whatever you'd like, as this include will be stored locally on your server, but it is useful to put "nav" in there somewhere.
3. Upload the navigation include file to your server.

Building your master template

Each OS and scripting environment allows your files to "include" or "import" content from the header, footer, and navigation files on your server. The exact code depends on your environment.

• HTML files on APACHE, and ASP files can both utilize SSI - server side includes. The syntax for including the header file, for instance, could look like this:
  <!--#include virtual="/includes/head.inc"-->
• PHP on Apache utilizes the include() function. The syntax for including the header file could look like this
  include("/includes/head.inc");

Building the template

We'll create a basic HTML page, which will draw from the includes, and you'll have a basic template page for your site, which you can then modify and copy to build your site.

On APACHE, the file would look like this:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page Name : Department Name : IUPUI</title>

<!--#include virtual="/sitetools/head2.inc"-->

<!--#include virtual="/nav_test.inc"-->


<div id="main" class="column wide">

<h2>Title</h2>

<p>Text</p>

    
</div>

<!--#include virtual="/sitetools/foot.inc"-->

Building out your site

• You will want to change the information in <title>Page Name : Department Name : IUPUI</title> to match your pages. You will also want to make sure you are calling the proper navigation include file—it's "nav_test.inc" in the example above.
• Add your content in between <div id="main" class="column wide"> and </div>.