Graphic Identity Program

Web Template: Pre-2014

Washington State University's brand site is now at brand.wsu.edu with new brand elements and standards.

A new University web framework is in development for a June 2014 release. A preview is available on the new brand site.

In the interim, the standards outlined on these pages remain in effect and the Template Designer can be used to assist in maintaining existing sites

Using the old WSU Web templates

  1. Download
    Download the required core HTML file 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.

 

 

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