New Media
Gateway Templates
Template B
When you download Template A and unzip the folder you will see:
Folders
- The images folder contains seventeen images (img)
Files
|
|
First-Level Elements
- University Identifier or Header: The university identifier is a "page include" ( indexheader.shtml ). It contains the name of Indiana University (the University Identifier), the search field, a link to the IU Gateway homepage and the IU seal. The University Identifier or header is located at the top of every page. By default, the search field will search all IU Web sites (All Campuses). You may customize it to search only your site. Instructions for customizing the search can be found on at the IU Webmaster's site.
Please note: It is very important that you use the indexheader.shtml file for the index.shtml page, and _header.shtml for all other pages. The index page layout is a fixed width (i.e.: it will not resize with different browser sizes) whereas the second-level pages have a fluid layout (i.e.: they will resize with different browser sizes). - Footer: The footer (indexfooter.shtml) contains contact information for the University. The comments e-mail address needs to 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.
Please note: It is very important that you use the indexfooter.shtml file for the index.shtml page, and _footer.shtml for all other pages. The index page layout is a fixed width (i.e.: it will not resize with different browser sizes) whereas the second-level pages have a fluid layout (i.e.: they will resize with different browser sizes).
Second-Level Elements
- University Identifier or Header: The university identifier is a "page include" (_header.shtml). It contains the name of Indiana University (the University Identifier), the search field, a link to the IU Gateway homepage and the IU seal. The University Identifier or header is located at the top of every page. By default, the search field will search all IU Web sites (all campuses). You may customize it to search only your site. Instructions for customizing the search can be found on at the IU Webmaster's site.
Please note: It is very important that you use the indexheader.shtml file for the index.shtml page, and _header.shtml for all other pages. The index page layout is a fixed width (i.e.: it will not resize with different browser sizes) whereas the second-level pages have a fluid layout (i.e.: they will resize with different browser sizes). - Footer: The footer (_footer.shtml) contains contact information for the University. The comments e-mail address needs to 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.
Please note: It is very important that you use the indexfooter.shtml file for the index.shtml page, and _footer.shtml for all other pages. The index page layout is a fixed width (i.e.: it will not resize with different browser sizes) whereas the second-level pages have a liquid layout (i.e.: they will resize with different browser sizes). - Page Header: Every second level page should be titled with a page header using the pageheader class. The page header describes the contents of the page.
Example: <div class="pageheader">Page 1</div>
Department-Wide Elements
- Department Name: The department name is a “page include” (_depname.shtml). It contains text that should be customized to reflect your department's name and a red horizontal line. The department name should be included on every page. The department name can be changed in the _depname.shtml file using the deptname class.
Example: <span class="deptname">Department Name</span> - 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 lnavheader class for link headers, and lnavlink class for links. Use the iured.gif image to separate one set of links from the next. Each page should include a link back to the Indiana University home page (www.indiana.edu).
Departmental navigation code examples:
<div class="leftnav">
<div><img src="img/iured.gif" alt=" " height="1" width="100%" vspace="5"></div>
</div>
<div class="lnavheader">Optional header</div>
<div class="lnavlink"><a href="#">Page 1</a></div>
<div class="lnavlink"><a href="#">Page 2</a></div>
<div><img src="img/iured.gif" alt=" " height="1" width="100%" vspace="5"></div>
<div class="lnavheader">Optional header 2</div>
<div class="lnavlink"><a href="#">Page 3</a></div>
<div class="lnavlink"><a href="#">Page 4</a></div>
<div><img src="img/iured.gif" alt="" height="1" width="100%" vspace="5"></div>
<div class="lnavlink"><a href="index.shtml">Department Home</a></div>
<div class="lnavlink"><a href="http://www.indiana.edu/">IU Home</a></div> - Optional Right Navigation: The navigation file, _rightnav.shtml, is optional and should be utilized for supplementary page specific links or information. The classes used for the links and link headers are identical to those in the departmental navigation. Use lnavheader class for link headers, and lnavlink class for links. Use the iured.gif image to separate one set of links from the next. The right navigation code is identical to the departmental navigation code except no link back to your department's or IU's homepage is necessary.
Right navigation code examples:
<div class="leftnav">
<div><img src="img/iured.gif" alt=" " height="1" width="100%" vspace="5"></div>
</div>
<div class="lnavheader">Optional header</div>
<div class="lnavlink"><a href="#">Page 1</a></div>
<div class="lnavlink"><a href="#">Page 2</a></div>
<div><img src="img/iured.gif" alt=" " height="1" width="100%" vspace="5"></div>
<div class="lnavheader">Optional header 2</div>
<div class="lnavlink"><a href="#">Page 3</a></div>
<div class="lnavlink"><a href="#">Page 4</a></div> - 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, 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 templates to iuweb [at] indiana [dot] edu (iuweb@indiana.edu).
