Template Guide — Elements
This page provides an overview of the various customizable elements of the template packages. This information addresses the basic visual look and layout of the page. Detailed information on how to update the HTML of the template elements will follow later in this guide.
A common element that connects all of the templates is the header. It is sized at 709 ×112 pixels and is designed to be plug-and-play with the name of your college, division, organization, or any other group. In order to customize this, you will need Photoshop and the Lucida Sans (or similar) font.
Once you have customized the text, it is time to export the image. The following directions are for Photoshop CS3:
- Go to File -> Save for Web Devices (or, if you prefer keyboard shortcuts, Ctrl+Alt+Shift+S)
- Using the Preset dropdown, select PNG-24
- Save the image as wordmark in the templates images folder
The main differences between the three template packages are the various options for the top navigation layout. Different web sites vary in structure, and therefore require different navigation schemes. We have worked to provide a great deal of flexibility and meet a wide range of needs by offering the following three template packages:
- One-Level Horizontal Navigation
- Two-Level Horizontal Navigation
- No Horizontal Navigation
Additionally, within each template option you have the ability to use vertical menus in the content area of the page to meet navigation needs if necessary.
While the header and navigation are important, the content area is where you truly communicate your organization's messages. From a design standpoint, you are provided a blank canvas in this area. Because these templates utilize the "960 Grid System", your content area can be customized to be as varied as you desire. If the basic layout options provided in the template packages meet your needs, feel free to start creating pages and adding content. Otherwise, you may learn how the 960 Grid works and begin crafting your own content layout.
For the most part, the footer is an administration link area and should not require much custom design. If you do choose to customize the visual look of the footer, simply replace the "footer-bg" image with your own. However, please keep in mind our Design Standards and Recommendations on School Colors.