Graphic Identity Program

Web Templates

• Home
• Program Overview
• Identity Elements
• Editorial Style
• Print
• Web
  • Template Designer
  • Guidelines
  • Downloads & Add-ons
  • Examples
  • Support
  • Glossary
• Presentations
• Merchandise
• Downloads
• Contacts

• Photos Online
• Marketing Communications

Designing the primary resource for information about WSU

Because the Web is where most go to learn about Washington State University, the design and content goal is to:

• Present the University’s identity clearly, consistently, and with distinction.
• Provide a consistent user interface to facilitate navigation across all University sites.

The templates are foundations for customized content that expresses each unit’s qualities. Utilizing the required elements and specifications to create a consistent identity and user interface, talented designers and writers can make each page a facet of the University’s unique brand and personality.

Carefully review the Web guidelines before beginning your site. Official WSU Web pages must closely adhere to these guidelines.

Using the WSU Web templates

1.	Download Download the required core HTML files that will be the basis for your page template. Download the optional template files if they will be helpful with your site development.
2.	Design Use the Template designer online tool to design your page look and generate your design key. Follow the steps to make design decisions for your page.
3.	Apply Follow these steps to apply your design to your site pages:

1. Copy your design key from the Template Designer. The key describes attributes of your page design, and is automatically created by the Template Designer from your design selections.
2. Paste the design key into the HTML code of the core HTML file you downloaded in step one.
3. Customize your template design (optional).
1. Use Dreamweaver or other Web development tool to set up your own CSS style for each template component in the central CSS styles you wish to override. (If using Dreamweaver, version 8 is recommended. Previous versions will not display the layout in WYSIWYG mode from the central CSS, but requires browser previewing.)
2. Create and insert your own graphics, if desired: e.g., for the site ID region, navigation region, or content region.
3. Any customizations must adhere to the WSU Web identity guidelines.
4. Use Dreamweaver or other Web development tool to set up editable template regions and non-editable regions in your core HTML file to support management of your template components.
5. Type or paste in any content that you want pages across your site to have in common: e.g., site ID, navigation, and footer content.
6. Duplicate the resulting template file for each new Web page that will use the same page design.
7. Type or paste additional content into each page’s content regions. Your content will assume the specifications of the WSU template and your design selections.

 

Revising your design

Follow these steps if you wish to revise a design currently in use:

1. Copy the design key from your Web page HTML code.
2. Paste the design key into the box “Paste existing key here,” located in the sidebar area of the Template Designer. The default page design displayed in the Template Designer will change to reflect your current design.
3. Select new design choices in the Template Designer for the components you wish to revise. The design key is automatically updated after each new selection.
4. Copy your new design key from the Template Designer.
5. Paste the design key into the HTML code of each of your Web pages. Utilize the “search and replace” feature in your Web development tool to facilitate this process. Your pages will now reflect your revised design.

 

 

Template Goals

Who should use the templates?

How do I create a home page?

How do I change the global links and footer to a regional campus?

What is a design key?

What is a core HTML file?

Marketing Communications, PO Box 641227, Washington State University, Pullman WA 99164-1227, 509-335-7622, Contact Us