Skip to main navigation Skip to page content
Indiana University Northwest

Web Services and Web Technical Infrastructure

Web Page Templates

All web publishing issues involve the Office of Marketing and Communications and Web Services and Web Technical Infrastructure to ensure that IU Northwest's web is following communication and vision goals. A template has been developed to assist individuals maintaining and creating IU Northwest departmental and organizational web pages. The template meets all IU Web standards including priority 1 guidelines for accessibility as established by the World Wide Web Consortium (using the "U.S. Section 508 Guidelines") and ensures the unified image that IU Northwest Bloomington wants to present on the Internet.

About the Templates

The template actually consists of five files: a header file, a footer file, a search file, a left navigation file, and a content file. Although these four files are separate, the content file contains programming that puts all of these elements together on the Web. This programming is called "Server Side Include" (SSI) statements. This method greatly simplifies maintenance. Each page of a site will share the header, footer, and navigation files so only one file has to be updated to update an entire site. For example, a 10-page site will consist of 10 content pages, yet only one header file, one footer file, and one navigation file.

Shtml files are the established naming system for html files that make use of server side includes. Changing the ".shtml" file extension to anything else could cause the includes to not work.

IU Northwest Cascading Style Sheet

The template styles are controlled by a Cascading Style Sheet which is pointing to the IU Northwest's Cascading Style Sheet on the home page account (iunhome). Its function is to control the font, font colors and sizes, margin widths, and general page layout. Therefore, formatting your site is unnecessary, the style sheet will control most elements of the page. The only formatting you will do is bold, italics, alignment, bullets or numbering, and indenting. Each department or organization's account has a virtual link to IU Northwest's Style Sheet in their styles directory pointing to the iunhome/iunstyle.css file, allowing the css files to be seen locally when editing.

Download the Template

The template folder may be downloaded to your computer. It will then require that you unzip or expand the file. The folder contains two folders and seven shtml files.

Folders

  • cal - folder containing year folders containing a template for linking or posting more information concerning a Calendar Event. Index files from cal and year folcers contain information concerning making calendar event pages.
    • 2003
    • 2004
  • faculty - folder for departments to list faculty
  • img - folder contains four image files
  • photogal - folder contains template for displaying photos
    • If additional pages are needed, use the index.shtml to list and link to the multiple photogalery pages
  • ssi - folder containing files that are not editied frequently: header.shtml, footer.shtml, search.shtml
  • staff - folder for departments to list staff
  • styles - folder contains virutal link to IU Northwest Cascading Style Sheet (see above). and a Word document with the link for cascading style sheets.

Files

  • contactus.shtml
  • index.shtml
  • links.shtml
  • page1.shtml
  • page2.shtml

PC and Mac Users: Download dept-template.zip Instructions for department template files.

Please note that PC users may use either Dreamweaver or FrontPage to edit pages. Mac Users must use Dreamweaver to edit pages.

The PC and Mac version requires software to unzip the file. If you do not have an unzipping program, WinZip for Windows and ZipIt for Macs may be downloaded and utilized.

Note regarding IIS servers: In the HTML on index, page1, page2, and other web pages, you will notice the following code: <!--#include virtual="xxx.shtml" -->

Template Elements

depicts areas of department template

  • University Identifier or Header: The university identifier is a "page include" (ssi/header.shtml). It contains the name of the university, campus: Indiana University Northwest, the IU Logo, and is located at the top of the page.
  • Search: The ssi/search.shtml file contains search code. By default, it will search all IU Northwest Web sites. You may customize it to search only your site. Instructions for customizing the search can be found on at the IU Webmaster's site.
  • Left Navigation: The navigation file, links.shtml, should be customized to hold departmental navigation. The style sheet contains two font styles for the left navigation. Use iurednavig class for link headers, navig class for links, and a horizontal line (<hr noshade width "100%">) to separate one category of links from the next. Each page should include a link back to the IU Northwest (http://www.iun.edu/) and the IU gateway (http://www.indiana.edu) home pages.

    Navigation code examples:

    <div align="left" class="iurednavig">
    Navigation Heading</div>
    <a href="http://www.iun.edu/~complete-url-of-page/" class="navig">
    Page 1</a><br>
    <hr noshade width="100%">

    • All links in this area should be the complete url of the page. This is to prevent problems with the website in the future. The links.shtml is on the root level of the departmental website. When folders are used to organize for web pages on the website, using the complete url will ensure that the links work in any level of folders.
    • When using a complete url in the links.shtml page, if the page you are linking to is named index.shtml, do not include index.shtml or index.htm in the complete url. When going to the campus map, for example, at http://www.iun.edu/~map/ the actual name of the page is http://www.iun.edu/~map/index.shtml. The actual name of that page use to be http://www.iun.edu/~map/index.htm. By removing the index.xxxx (xxxx being whatever extension associated with index, and using only http://www.iun.edu/~map/ , should the index page be redone with a different extension, the http://www.iun.edu/~map/ code will still automatically link to that page. If the index.xxxx is at the end with the code, then the page will have to be changed by hand - where the page with out the index.xxxx will still be linked.


      Links.shtml code examples with no index.xxxx page:

      <a href="http://www.iun.edu/~map/" class="navig">IUN Campus Map</a><br>
      <a href="http://www.iun.edu/" class="navig">
      IU Northwest Home</a>
  • Footer: The footer contains contact information for the University. It needs to be customized to include your department's name, stating the person to whom the mail is directed and appropriate e-mail address - Comments: Department Webmaster .

Last updated date will automatically display the last saved date of the page requested. Updates to include files will not be reflected in the last updated date. Copyright year will automatically display the year based on the save date of the page requested. For further information on SSI variables, refer to IU Webmaster SSI Documentation.

  • Department Name: Every page should include a full name of the organization. Please use blackheader class on every page.

Example: <p class="blackheader">Web Services and Web Technical Infrastructure</p>
using this page for example

  • Page Header: Every second level page should include a page header. Please use header2 class for page headers. The page title describes the contents of the page.

Example:<p class="header2">Web Page Templates</p>
using this page for example

  • Page Text: The primary content of the page should be written in a concise fashion that allows users to quickly scan the page.
    Use <h3> for Headings, <h4> for subheadings, <p> for paragraphs. Avoid using embedded styles and <font> tags the style sheet performs these functions.
  • Meta Tags: Customize title, keywords, and description for each page you create to ensure your pages will be found by the search engine.
    • title should have IU Northwest before the department name.
    • keywords should include words, separated by commas, that people might type to find the web page.
    • description should include descriptive text concerning your document.

The web should be edited locally and then ftp the site to the web. The local copy consists of a backup of the account as well as there is always a backup of any web account at IUB. For security the web server disconnects after extended connection (it doesn't have to be for that long), it would make it VERY HARD to keep connected to edit directly without having the files locally. Should an account need to be restored, It takes about 2 business days and costs $15. Contact the IU Northwest webmaster weekdays to arrange for a web account to be restored.

Next step wouth be to edit the template pages. Please see Editing Web Page Templates for information.

Send comments regarding IU Northwest templates to Michelle Searer , Director of Office of Marketing and Communications, or to Kathy Horvath , Web Services and Web Technical Infrastructure, Webmaster.