University Website Templates

This the home for University branded web page assets at UNCG.

These assets became available August 2nd, 2011. As more template choices and documentation become available, you will be able find details here. If you are looking for information about the University Web Standards, visit the Internet Oversight Committee website. There you will find the University's Web-Related Policies and the University Unit Web Site Requirements (UWSR). These templates are intended to minimize the amount of effort required to adhere to these requirements.

Instructions

Getting Started

  1. Choose the template that best meets your need.
    1. The"Basic Unit Template" is extremely basic. The assumption behind this is that you as the designer or developer will bring your own CSS rules and HTML structure to bear on the content section to suit your need.
    2. The "Horizontal Navigation Template" adds a horizontal navigation bar with the option for drop down menus and a few other style choices. You are free to use this template as is or as a base for additional customization.
  2. Download your tempate and save it to the local copy of your website.
  3. If you do not use Dreamweaver, change the exension to the file type you intend you use. Examples: .htm .php.
    1. Store a copy of the template anywhere you want within your site.
    2. You will want to copy this file or at least the contents when you create new pages.
  4. If you use Dreamweaver, move the template into a folder named Templates within the top-most folder.
  5. From within Dreamweaver, you can apply your template to existing page content.
    1. When creating a new page, use the new page dialog within Dreamweaver. Once created and opened in the editor window, you can apply your new template by clicking on Modify » Templates » Apply Template to page.
    2. While technically you can apply a template to an existing page, often it is easier to create a new page and copy your original content into the newly created page.

Remember: You can always download a new copy of the template if something happens to the one you are using.

Choosing the Include Type

The template uses three server side includes to add content when visitors request your web pages from the server. These includes are intended to make global changes easier. Each server side technology (php, html) implements a server side include differently. Below are two example server side includes. The file extension (the server side technology) you use will dictate which type. It is in your interest to learn from the vendor what their recommendations for server side includes are.

HTML Include:

<!--#include virtual="/incuncg/address.htm" -->

PHP Include:

<?PHP include_once "inc/address.htm"; ?>

The downloadable template is a html page and if you are building html pages, the only update you will need to make is to the include in the DIV with the ID footer-left. The three includes are found in the following DIVs of the page:

HEADING

<div id="header">
    <!--#include virtual="/incuncg/heading.htm" -->
</div>

ADDRESS

<div id="footer-left">
    <!--#include virtual="/incuncg/address.htm" -->
</div>

FOOTER

<div id="footer-right">
    <!--#include virtual="/incuncg/footer.htm" -->
</div>

Customizing the Address Info

In the footer of each page you will find the previously mentioned include for address information. You can opt to use the generic address linked by default in this template, but the template was designed to allow you to substitue your unit specific contact details. The UWSR contains information on the proper format of your address information. To overide the default address:

  1. Download a copy of address.htm.
  2. This file can be stored anywhere within your site. A common location is within a subfolder for smaller parts of your site: inc/address.htm.
  3. Once you've decided to where to store your your address, update your template to point to that location.
  4. This file is a HTML snippet and even though it does not have the full html page structure, you can add html text just like you would a regular web page.

Adding the Site Search

A site search that can point directly to content your deparment maintains was added to the University Search located a the top of every page. There are two primary steps needed to activate the site search for your unit.

  1. Contact 6-TECH at 336.256.8324(TECH) or by email at 6-TECH@uncg.edu and request a Google Search Appliance Collection.
    • These collections will contain an index of your primary website, but you can also include any ancillary websites that your unit maintains if they are located on a server hosted here at UNCG.
    • Each collection will also have a customizable search results page that by default will have your unit's name on it and will utilize the University's Basic Unit Template.
  2. Once your collection has been set up, you will be given a unit code to plug into your template page as a meta tag. Place it within the head of your html document. If your using Dreamweaver, we recommend that you place this outside the editable region named "head". If you add it inside the editable region, it will only apply to new pages made from the template.

<head>
   .....
   <meta name="unit" content="its-23101" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
   .....
</head>

Once your collection is setup, you will have access to a Google Search Appliance Front End where you can customize the look of the search results page and fine tune the results your users receive.

Google Analytics

The Unit Web Site Requirements dictate that everyone use the global Google Analytics tracking code created for UNCG. This applies to pages that are part of a website which meets the definition of a Unit website. The required JavaScript is already included within the provided templates.

If your site was already using an Analytics Code that you would like to continue to use, you can do so without removing the UNCG tracking code. You just need to add the necessary JavaScript to your template and any pages that leverage it. Find the Google Analytics JavaScript block in the header and modify it as demonstrated below.

Example:

<script type="text/javascript">/* Google Analytics */  
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-166926-1']);
  _gaq.push(['_setDomainName', '.uncg.edu']);
  _gaq.push(['_trackPageview']);
  
  //Add your Google Analytics account using the next two lines of code.
  _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 
    	'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s);
  })();
</script>

For more information about the JavaScript used and Google Analytics, please visit: Google Analytics Tracking Code.

More…

These are just the basics to get you started. While the template does constrain the overall look of your content, it still offers you the ability to customize your pages. For example, this page leverages HTML Markup, CSS and jQuery (JavaScript) to customize the look and user interactions. There are three regions that will be used to further customize your pages.

The doctitle region allows you to modify the page title on each of your pages.

<!-- TemplateBeginEditable name="doctitle" -->
<title>The University of North Carolina at Greensboro</title>
<!-- TemplateEndEditable -->

The head region can be use to include JavaScript, CSS or other directives that are commonly found in the head section of a HTML document. It is important to note that this is not a region to put content you want to be visible on your webpage.

<!-- TemplateBeginEditable name="head" -->

<!-- TemplateEndEditable -->

The final region is the body region. This is where you need to put content you want to expose in the body of your page.

<!-- TemplateBeginEditable name="body" -->
<h2>Information Technology Service</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed felis felis, sed ultricies quam...</p>
<!-- TemplateEndEditable -->

Tidbit: Be sure to check out the Favorite ICON for your website.