Why use the templates?
Virginia Tech’s web site templates give Web developers across the university an easy way to build pages that have the look and feel of the Virginia Tech web site.
The templates also give developers a solid foundation for building web sites that are Web-standards compliant, accessible to people with disabilities, and compliant with the university’s visual identity standards.
Who can use the templates?
The templates are intended for use by administrative, academic, and research offices of Virginia Tech. The templates may not be used by individual students, student organizations (with the exception of University Student Life Programs), or independent organizations without the approval of University Relations.
Do I have to use the templates?
No! If you decide not to use the templates, please just follow the university's Web Guidelines and Procedures and Web Development Best Practices when developing your site.
Can I modify the templates?
Yes. We understand that you may need to modify the templates to accommodate the needs of your group. We just ask that you follow the university's Web Guidelines and Procedures and Web Development Best Practices (including recommendations for fonts, colors, and placement of navigation) as you make your changes. We also strongly suggest learning about standards-compliant XHTML, CSS, and Web accessibility before modifying the code. HTML Dog is a good place to start learning about XHTML and CSS, and Web AIM is a good place to start learning about Web accessibility.
Requests for template modifications or new features should be sent to Web Communications. Special template needs will be addressed by University Relations on a case by case basis.
Template Updates and Change Log
Like the Virginia Tech web site, the university’s web site templates are works in progress. Template code and images may be updated periodically to make improvements, add new features, fix bugs, and ensure compliance with Web standards, and university policies and guidelines.
We ask web developers to take responsibility for downloading these updates and incorporating them into their existing sites. We also ask developers not to “piggy-back” off of resources on the Virginia Tech web site, such as images and stylesheets. These resources may be changed or moved without notice, and using them increases the load on the Virginia Tech web site.
Notification about template updates should be sent out via the Web-L listserv. (Learn how to subscribe.) Detailed information about current and previous updates can be found in the Template Change Log.
Questions about template updates may be send to Web Communications.
Template Instructions and Downloads
Detailed instructions for downloading and using the templates are available on our Template Instructions page. if you'd like to download the templates now, just go to our Template Downloads page.
What's available?
Home Page Templates
Ideal for the home page or index page of your web site.
Gateway page with vertical navigation
<ul>
<li><a href="http://www.mm.cms.vt.edu/unirel/web/templates/content_vertical.html" target="_blank">View live example</a></li>
</ul>
Features:
- Repeatable double column layout
- Removable "Featured Content" area with repeatable sub-sections
Home page with horizontal navigation
<ul>
<li><a href="http://www.mm.cms.vt.edu/unirel/web/templates/home_horizontal.html" target="_blank">View live example</a></li>
</ul>
Features:
- Compact horizontal navigation (can also be used as a bread crumb trail)
- Repeatable double column layout
- Removable "Featured Content" area with repeatable sub-sections
Gateway Page Templates
Ideal for the gateway pages or "section fronts" of your website. Can also be used as a home page.
Gateway page with vertical navigation
<ul>
<li><a href="http://www.mm.cms.vt.edu/unirel/web/templates/gateway_vertical.html" target="_blank">View live example</a></li>
</ul>
Features:
- Repeatable double column layout
- Removable "Featured Content" area with repeatable sub-sections
Gateway page with horizontal navigation
<ul>
<li><a href="http://www.mm.cms.vt.edu/unirel/web/templates/gateway_horizontal.html" target="_blank">View live example</a></li>
</ul>
Features:
- Compact horizontal navigation (can also be used as a bread crumb trail)
- Repeatable double column layout
- Removable "Featured Content" area with repeatable sub-sections
Content Page Templates
Ideal for creating content pages, or the pages that contain the majority of the information on your website. Can also be used as home or gateway pages.
Content page with vertical navigation
<ul>
<li><a href="http://www.mm.cms.vt.edu/unirel/web/templates/content_vertical.html" target="_blank">View live example</a></li>
</ul>
- Removable "Featured Content" area with repeatable sub-sections
Content page with horizontal navigation
<ul>
<li><a href="http://www.mm.cms.vt.edu/unirel/web/templates/content_horizontal.html" target="_blank">View live example</a></li>
</ul>
- Compact horizontal navigation (can also be used as a bread crumb trail)
- Removable "Featured Content" area with repeatable sub-sections
Fluid Page Templates
All purpose templates ideal for making pages where a flexible or variable page width is desired.
"Fluid" page with vertical navigation
<ul>
<li><a href="http://www.mm.cms.vt.edu/unirel/web/templates/fluid_vertical.html" target="_blank">View live example</a></li>
</ul>
- "Fluid" or variable width page
- No Photoshop Sub Header
- Removable Search box and Page Title
"Fluid" page with horizontal navigation
<ul>
<li><a href="http://www.mm.cms.vt.edu/unirel/web/templates/fluid_horizontal.html" target="_blank">View live example</a></li>
</ul>
- "Fluid" or variable width page
- No Photoshop Sub Header
- Removable Search box and Page Title
- Compact horizontal navigation (can also be used as a bread crumb trail)
Master Template (Dreamweaver Only)
The master template is a special Dreamweaver template that is used to make other templates. It will be part of your site set up in Dreamweaver, but can otherwise be ignored. Never use this template to make a page!
Anatomy of a Template
Here is a diagram that identifies page areas common to all templates. Some templates have additional areas that can be repeated or removed as needed. For more details, please refer to the Template Instructions, Step 5.
Page areas in order from top to bottom are:
- Unit Header
- Search
- Navigation
- Sub Header
- Main Content
- Featured Content
- Sub Footer
- Footer
What templates should I use and when should I use them?
The available templates are just serving suggestions. You can use a gateway page as a home page or mix and match vertical and horizontal navigation if it works for your website. Here are some ideas to get you started...
For a Large Website
Notice that there is only one Home page, a few Gateway pages, and multiple Content pages.
For a Smaller Website or Subsite
Notice that a Gateway page is being used as the home page for the website. You can even develop a website entirely of content or fluid templates.
Other Issues
Variable or fixed width pages?
It's a question of control:
- Fixed width pages (from the Home, Gateway, and Content templates) give you more control over the layout of your pages. Narrow text columns also aid the readability of text.
- Variable width pages (from the Fluid templates) give you less control over layout, but the "page" will expand to fill a browser window of any size.
Vertical or horizontal navigation?
It's a matter of expandability:
- With vertical navigation you can add as many links as you want, so you don't have to force all the information on your site into just a few categories.
- With horizontal navigation you only have a limited number of links, but more space in the body of the page itself. This arrangement that may be more suitable for news and calendar websites. Horizontal navigation can also be used as a breadcrumb trail.