New Media
IU Bloomington Template
Before downloading this template, please review IU's Web Standards.
This template was created to assist individuals maintaining and creating IU Bloomington 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—but has not yet been redesigned to reflect the Integrated Image Initiative guidelines.
Until new templates become available, units can download the existing Web template. This template is primarily designed for Bloomington-only departments units. Units that serve multiple campuses and are considered to be university-wide units should use the Gateway templates.
For questions about this template, contact the ocs [at] indiana [dot] edu (IU Office of Creative Services).
About the Templates
The template consists of four files: a header file, a footer 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 online. These "Server Side Include" (SSI) statements greatly simplify Web site maintenance. Each page of a site will share the header, footer, and navigation files so only one file has to be modified 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 SSIs. Changing the ".shtml" file extension to anything else could interfere with the functioning of the includes.
The template styles are controlled by a Cascading Style Sheet that is included with the download. Its function is to control the font, font colors and sizes, margin widths, and general page layout. The style sheet will control most elements of the page, so formatting the site is uncecessary. The only formatting you will apply are bold, italics, and underlines.
Download the Template
The template folder can be downloaded to your computer and unzipped to expand the files. The folder contains two folders and seven SHTML files.
Folders
- A Cascading Style Sheet folder containing one style sheet (css)
- An images folder containing seven images (img)
Files
|
|
Click on the appropriate link for your system:
- PC and Mac Users: iubtpl02.zip
- Unix Users: iubtpl02.tar
Unix System Instructions
- Open an SSH connection to your account ( download SSH ).
- Go into your www directory ( cd www ).
- Make a test directory ( mkdir test ).
- Go into the test folder ( cd test ).
- Copy the tar archive from the identity account to your current directory
(cp /ip/identity/www/media/iub/zip/iubtpl02.tar ). - To extract the archive, type tar -xvf iubtpl02.tar in the command line; this command saves all the extracted files into the current directory.
- Customize the template using pico, or any other text editor.
- When the template is customized, copy the files from the test directory to the www folder.
Note regarding IIS servers: In the HTML on index, page1, and page2, you will notice the following code: <!--#include virtual="xxx.shtml"-->.
If your department is using a Windows-based IIS Web server instead of the Veritas central server to host its site, you will need to change that statement to: <!--#include file="xxx.shtml" --> ("file" instead of " virtual").
Template Elements
- University Identifier or Header: The university identifier is a "page include" (_header.shtml). It contains the name of the university and campus, Indiana University Bloomington, and is located at the top of the page.
The IU stone relief located in the upper left corner may be replaced with a photograph or departmental identifier of exactly the same size (140px by 128px). If your logo is a gif, use the transparent and crimson (990000) background. If it needs to be a jpg, use cream (FEFEEA) and crimson (990000). - Search: The _search.shtml file contains search code. By default, it will search all IU Bloomington Web sites. You may customize it to search only your site. Instructions for customizing the search can be found on the IU Webmaster site.
- Departmental Navigation: The navigation file, _leftnav.shtml, should be customized to hold departmental navigation. The style sheet contains two font styles for the left navigation and code for the red horizontal line. Use nav class for link headers, navsmall class for links, and leftnavhr (red horizontal line) to separate one category of links from the next. Each page should include a link back to the IU Bloomington home page (www.iub.edu).
Navigation code examples:
<div class="nav">Navigation Heading</a></div>
<div class="navsmall"><a href="#" class="navsmall">Page 1</a></div>
<div class="leftnavhr"><img src="img/iured.gif" alt="red horizontal line" width="110" height="2"></div> - Background Image: The background image creates a visual effect of a cream-colored left sidebar and white page. The left sidebar includes departmental navigation.
- Footer: The footer contains contact information for the university. The "comments" e-mail address must be customized to reflect your departmental e-mail address. Please note that your department should execute some method to prevent e-mail harvesting. More information about ways to display or encode e-mail addresses to prevent spam can be found at Knowledge Base.
"Last updated date" will display the last updated date of the page requested. Updates to include files will not be reflected in the last updated date. For further information on SSI variables, refer to IU Webmaster SSI Documentation. - Department Name: Every page should include the full name of the organization using the depname class.
Example: <div class="depname">East Asian Studies Center</div> - Page Header: Every second-level page should be titled with a page header using the pgtitle class. The page header describes the contents of the page.
Example: <div class="pgtitle">Page 1</div> - Page Text: The primary content of the page should be written concisely, allowing users to quickly scan the page.
Use <h3> for Headings, <h4> for subheadings, and <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.
Send comments regarding IU Bloomington templates to iuweb [at] indiana [dot] edu (iuweb@indiana.edu).
