Skip to Content

Network is experiencing difficulties.

Instructions for using the official template

Information providers are essentially free to choose any template or look and feel that suits them. However, it is strongly encouraged that all websites conform to University identity guidelines. In addition, all new sites as of Fall 2008 must be accessible.

To assist information providers, Web Services and Public Affairs have created a basic, ready-to-go template complete with images, flyout menus, and accessibility features. Using this template will provide a solid base for accessibility and identity, while retaining flexibility in design.

  • Template Basics
  • Change the title and footer of every page
  • How to make flyout menus
  • Putting a menu at the top
  • Changing the banner
  • Where to get the Sac State logo with a department name on it
  • Working with column layouts
  • Adding Callout boxes and right navigation
  • Enabling search
  • Headers in the menu
  • Make a page table of contents

Template Basics

There are two Dreamweaver template files included in the zip file:

  • template.dwt - this template is used for creating all of your pages.

These templates files contain a number of editable regions. The 1column.dwt file contains the following editable regions:

  • MainContent

The page title is also editable as well as a region in the <head> where CSS and Javascript can be included.

Addtional editable regions are not necessary. Content that is the same accross your entire site should not be editable (e.g. verical left navigation and banner image).

To use a template file in Dreamweaver make sure that the file is in the "templates" folder. It is recommended that you leave the folder structure contained in the template zip file intact (at minimum you should have a /templates, /css, /images, and /js folder). To create a page from a template: File > New > Page from Template.

For more information on Dreamweaver use see ATCS.

Change the title of every page

The first thing you should do when you make a copy of the template is change the title to reflect the topic of the new page. Next, go to the footer and of the template and replace the contact information with your organization's contact info, as well as the webmaster email address to match whomever is the webmaster for the site.

How to make flyout menus

In general, menus should be consistent across pages within a site. To make sure this is the case, consider the menu structure that the site should have, and stick to it.

Once the menus are set, it's time to put them in the left hand navigation bar. The easies thing to do is edit the default menu that ships with the template. Looking at Code View, it should be clear that menus are structured as unordered lists. This means that authors can edit menus in Design View just like they'd make a list: hit enter to add an item, tab to indent it (and make it a submenu).

If in Code View, authors should be sure to add two classes to any unordered lists they want to act as flyouts: sf-menu and sf-vertical. If things don't look right, the first place to look is private.js to ensure that it is able to load the superfish.css file.

Why is superfish.css not loaded by the template?

In order to maintain an attractive look when Javascript is off, the sacstate.1.0.css file presents a "base" look and feel, and if Javascript is on, then private.js loads the capability for flyout menus. This is called progressive enhancement, and is a best practice for accessibility.

Putting a menu at the top

A menu to related sites is allowed underneath the "Global" green menu. The location for such a menu is labled as "HorizontalMenu", and will accept an unordered list with a class of "horiz_menu". This list may not have any submenus (second level items) and the last item in the list should have a class of "last".

Changing the banner

The banner space, which appears between the global menu (or horizontal menu, if present) and the page content/left menu, is optional and completely configurable. It can be deleted, or it can be expanded to any height. If the banner is present, then it must span the entire width of the page (950 pixels).

Where to get the Sac State logo with a department name

Web Banner Generator

Working with column layouts

The template comes defaulted with a two columns layout. Any changes to the number of columns should be made inside the "MainContent" region of the template and/or the individual pages.

In template.dwt code (the default two columns layout):
<div class="grid_9 alpha"/></div>
<div class="grid_3 sidebar omega "></div>
*sidebar adds a border style to the left of a column and may be omitted.

The number of columns can differ from page to page, and be changed at any time; on the template and/or on each of the individual pages.

*To help maintain a consistent look and feel across your pages within a site, you should set a standard on the number of columns in the template beforehand.

For a one column layout

Replace the two columns layout code above in your template and/or webpages with the following:

<div class="grid_12 alpha omega"></div>

For a two columns layout

Comes defaulted with the template.

For a three columns layout

Replace the two columns layout code above in your template and/or webpages with the following:

<div class="grid_4 alpha"></div>
<div class="grid_4 "></div>
<div class="grid_4 omega"></div>

Or with left border styling on the 2nd and 3rd columns:

<div class="grid_4 alpha"></div>
<div class="grid_4 sidebar"></div>
<div class="grid_4 sidebar omega"></div>

Adding Callout boxes and right navigation

Callout boxes should - in general - be coded as <div class="calloutbox"><h3>Callout title</h3>...</div>. That is, anything can go inside the div after the heading - a paragraph, a list, etc. But each calloutbox should have a heading to identify its function.

Callout boxes can be colored as well. Refer to the sacstate.1.0.css file for more information.

Callout box <div>s should generally be inserted into the Editable Region called "Sidebar". Importantly, this region appears before the Heading 1 that is the beginning of the page content. Be sure to put the callout boxes in this editable region.

Enabling search

If your site has its own domain name (something other than www.csus.edu), contact Web Services to learn how to restrict searches to just your site.

Make a page table of contents

Making a table of contents for a page is a multi-step process.

  1. First, create the list that will be the table of contents. It should be an unordered list.
  2. Give that class a class of "toc".
  3. Create a Heading 2 for each list item with the same text in the list item as in the Heading 2.
  4. Add a "named anchor" inside each Heading 2, but before the actual Heading 2 text. If in design view, this means placing the cursor at the beginning of the text and choosing Insert/Named Anchor. Give each anchor a unique name with no spaces.
  5. Highlight the list item in the table of contents that you want to link. In the Link box on the properties pane, put the "#" sign followed by the unique name you created for the corresponding link. For instance, #flyouts or #help.