UNH Template Quick Start Guide

Please Note: Currently, your site should meet our masthead specifications. We encourage people to transition to the new look and feel as they redo their sites. While new sites should be complimentary to the new UNH.edu homepage, that specific look is reserved for that page alone. Whenever possible, the styles in the available toolkit should be utilized.

The UNH template is designed to allow departments and organizations the ability to either create new, or retrofit existing, Web sites. The files contained in this distribution incorporate the latest Web-related coding technologies and standards, as well as some proprietary Dreamweaver1 technologies designed to make ongoing site maintenance easier to manage. The following steps will help you get started using the UNH template.

Setup

  1. Create a new folder on your workstation for your site development
  2. Download the UNH template distribution file and unzip the template files into your site development folder
  3. Open Dreamweaver and create a new Dreamweaver "site" incorporating your local and remote site locations2

Creating Web Pages

  1. With your Dreamweaver site open, make sure you are in "Local view" (upper-right drop-down box in the "Files" window)
  2. Click on the "Assets" tab in the Files window, and then click on the "Templates" icon
  3. Point to either the 1-column or 2-column template, right-click on the desired template and choose "New from Template"
  4. Immediately save the file to a desired location3

Customizing Your Site

  1. Change internal page titles within the <title></title> tags
  2. Change the banner to incorporate your department/organization name (NOTE: edit the file "banner.html" located in the "includes" folder)
  3. Change the upper-right banner link(s) as necessary. (NOTE: edit the file "banner.html" located in the "includes" folder)
  4. Change the color scheme of the left-column navigation.4 (NOTE: edit the file "common-style.css" located in the "css" folder--associated areas are commented within this file)
  5. Add navigation bar links (NOTE: edit the file "navbar.html" located in the "includes" folder)
  6. Change page headings, substitute images, and add content to pages
  7. Create a "Contact Us" page and change the link in the footer (NOTE: edit the file "footer.html" located in the "includes" folder)
  8. If you'd like to have a rotating image on the homepage, rename index_rotate.html to index.html. You can add images to the images/rotate folder, and then edit the file rotate.js in the includes folder to rename your images and add captions.

Ongoing Development

  1. Keep backups of your files! When maintaining Web sites at UNH you are responsible for your own backups.
  2. Dreamweaver contains built-in tutorials and help files. Additional support is available at http://www.adobe.com/support/dreamweaver/
  3. The CIS Training Center offers Dreamweaver courses.
  4. Work in Dreamweaver "split" view to see both the code and design views. Knowing HTML is not a requirement of using Dreamweaver, but there will be occasions where HTML code will need to be entered, modified or reviewed.


Footnotes:

1 Dreamweaver is the officially supported Web editing tool at the University of New Hampshire.
2 Remote sites can be located on either the "pubpages" servers or the main campus Web server, UNHINFO.
3 It is suggested that you initially save files in the "root" folder of your site, rather than a sub-folder. It is further suggested that you keep your file names short, all lowercase, and use only alpha-numeric characters in file names.
4 See suggested UNH color schemes: http://www.unh.edu/creative/graphicid/web.html