Webmaster Help : IUPUI

Using the IUPUI Web Template on Webserve

These instructions are to incorporate the IUPUI web template into a site hosted on the IU central web servers, Webserve, which replaced Champion and Veritas in spring 2008.

In a Nutshell

What you will be doing is making a virtual folder on your web space that refers back to the files used for the main IUPUI website. These files include the header and footer. These files are automatically updated as the IUPUI webmaster upgrades the main site. These files are called "includes" because one line of code includes them from the central server. Click the image below to see a very basic HTML page in the IUPUI template.

By using the template, the only parts of the page you will need to change are the navigation and the section in blue—the "main div." You will create the navigation include for your site, but then you will only need to use one line of code to refer it on each page in your site. We'll get to that in a bit. First, let's install Sitetools, so we can access all those fancy includes.

Installing Sitetools

Sitetools allows you to access central resources for IUPUI sites. This folder will contain symbolic links to the header and footer files used in the IUPUI template. You will never have to update these files, as they are maintained in one place by Communications and Marketing.

Using SSH (What is SSH?), log into Webserve (What is Webserve?) with your username and password.

Note: If you don't have an SSH client installed, you can download one through IUWare. See At IU, what SSH clients are supported and where can I get them?.

Keep in mind you will also need to have the ability to transfer files (FTP). Most SSH clients either include or offer an FTP or SFTP (secure FTP), so download that as well. For more on FTP, see What is FTP, and how do I use it to transfer files?
Using the command-line interface of SSH, navigate to the WWW folder. Once there, enter the following:
```
ln -s /ip/iuihome/sitetools sitetools
```

Once entered, you will see a mirror of the Sitetools folder within your account. You will not be able to modify these files, but it will ensure that you always have the most current version of these shared includes. The important files you will want to link include head.inc and foot.inc. These resources can be used from any tilde account hosted on the IU systems central servers (http://www.iupui.edu/~accountname/) by simply linking to the root-relative /sitetools/filename.extension.

Changing the .htaccess file to allow usage of includes

Your browser won't automatically know what to do with an include file, so we modify the .htaccess file to tell it how to read includes. To do this follow the directions below:

The .htaccess file is not easily recognized by programs such as Dreamweaver. However, you can easily use Wordpad on a PC to create this file.

If you are on a PC, open Wordpad by clicking Start, then Run, and then type Wordpad in the command.

In Wordpad, paste the following text exactly as it is below:

Options -Indexes

Options +Includes
AddHandler server-parsed .html
AddHandler server-parsed .htm
AddHandler server-parsed .inc

Click Save As, save the file name as .htaccess and make sure the format is Text Only.

Upload the .htaccess file to your server, and place it in the www directory.

Creating the navigation include 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.

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.

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.
Upload the navigation include file to your server.

Creating a base HTML page

Now comes the fun part! 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.

Open a new file in Dreamweaver or whatever HTML editor you are using. Paste the following:


<!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/head.inc"-->

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


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

<h2>Title</h2>

<p>Text</p>

    
</div>

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

Save the file as template.html or something—this is the HTML page you can build all your pages off of.
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>.