Skip to the content

Kansas State University

Web Templates

Template overview

These templates have been created to enable K-State units to build websites in the style. The step-by-step instructions are written so that web authors with a basic understanding of HTML and Cascading Style Sheets can quickly and easily deploy ready-made pages that conform to the K-State style and integrate seamlessly with K-State's online presence.

The templates are coded using valid, semantic XHTML 1.0 Transitional for structure and valid CSS for presentation. The look and feel of each template is controlled by the stylesheets.

The templates use a set of K-State standard "include files" to pull in K-State's header and footer code, stylesheets, and optionally, the left navigation sidebar file. This reduces the amount of code that you see in your template and provides the ability to update the stylesheet and code globally and remotely in cases such as the release of a new browser.

Template options

To get started with templates, use the Template Selector to create your unit templates. The Template Selector allows you to select the page layout and navigation options you prefer. Then, you can preview your selections and copy the template to your unit directory. You can create as many templates as you need.

The templates include advanced options, such as changing colors, adding photos and feature text, and including an additional stylesheet for site-specific style. For details, see Advanced features.

Page layout

There are three page layouts to select from. The two-column template is the most commonly used template with consistent navigation and unit contact information. Most sites will start with this template and use the three-column when additional page-specific information is required.

  • One Column. This template provides a header, content area, and footer. This layout is only recommended for wide-format information, such as table, charts, and large images, or secondary pages that contain a document or other content that doesn't require navigation. (Example: K-State's campus map)
  • Two Column. Along with the header, content area, and footer, this template adds a left-hand column for essential navigation and unit contact information. This is the recommended layout for most sites because it provides consistent navigation. (Example: Vice Provost for Academic Services and Technology)
  • Three Column. Along with the header, content area, footer, and left-hand column, this template adds a third column on the right side for content-specific information. This layout complements the two-column layout. (Example: Information Technology)
Left sidebar navigation

The two- and three-column templates have a left-hand column designed for your site navigation. Using this navigation is strongly recommended in order to provide consistent navigation throughout your website.

You have the option to store the left navigation in a separate file. This allows your navigation to be stored in one place and show up exactly the same on each webpage in your site. It also allows you to make navigation changes in one file and have the changes show up on all your webpages.

If you select the "separate left navigation file" in the Template Selector, the program will create an "includes" directory that contains a sidebar.html file with the navigation code, and will copy those to your web space. The template you receive will have code to automatically pull in the sidebar.html file when you view it on the Web.

If you select "leave left navigation in template" in the Template Selector, the template you receive will contain all the code in one file. This will require adding and editing navigation links on each webpage you create.

Tab navigation

Optional tabs can be added at the top of the main content as navigation categories for your site. However, tabs are only recommended for sites with specific navigation criteria. Sites with seven or fewer navigation links that use short titles, one- to two-word phrases, might consider using tab navigation.

Otherwise, the left column in the two-column template provides a more flexible navigation structure than tabs. Links can be longer, the width of the browser window does not limit the number of navigation links, and sub links can easily be added and accessed.

When using tab navigation, don't duplicate the tab categories in the left column. Use the left navigation column for tab-specific links, those links directly related to the tab that is selected.

If you select "Add tab navigation" in the Template Selector, the program will create an "includes" directory that contains a tabs.html file with the navigation code, and will copy those to your web space. The template you receive will automatically have code to pull in the tabs.html file when you view it on the web. Edit the tabs.html file to add your tab navigation content.

Example: Tab navigation template

Unit/department name

Provide the unit or department name that you want to see in the header of your page as well as in the HTML title tag.

Tip: Don't use "K-State" or "Kansas State University" unless it's an official part of your unit's name. You can often also leave out "Office of" or "Department of" in order to present a clearer, shorter title.

You can change both the header title and the HTML title tag anytime in your template or webpages.

Unit/department directory

Your unit's web directory is the space or location on the central web server. In your web address, it is most often the part after (Example:

If your unit doesn't have a directory, use the registration form to request one.