DepartmentName: Home

Design Guidelines | Gallery | Expandable Menu | Slideshow

This is your Web site's homepage.

To successfully use this Dreamweaver template, set up your Dreamweaver site with these instructions: http://west.wwu.edu/atus/web/dwsite.shtml

When you wish to create a new page for your site, please select File, New Page From Template, and then one of these listed:

  • full-content which does not have a right sidebar
    • sub-item here
  • two-column which does not have a right sidebar but provides two equal columns in the main content area
  • three-column which has three content columns
  • sidebar which has the right sidebar
  • slideshow which has the automated slideshow functions
  • and gallery which has a photo gallery demo which you can use to put your own photos in.

For more information about the wwu template system, you may wish to visit the online in-depth tutorial.

File Structure

The template as provided is made up of these folders, the bold-named ones are available for your site files:

  • docs - pdfs and word docs
  • gallery - images for the photo gallery (optional)
  • images - images and graphics for your site
  • includes - RESERVED! only for include files that are part of the template
  • resources - RESERVED! only for resources that are part of the template
    • filetypeicons - RESERVED! these are images used to display file types
    • rsv- RESERVED! your css and layout images are here - do not change or add
    • source - RESERVED! the photoshop source file for your banner is here
    • custom.css - modify this to add your own css
    • banner940x89.jpg - this is the banner image shown at the top of your site, modify by starting with resources/source/banner940x89.psd and then save as a .jpg file.
  • slideshow - images for the slideshow (optional)
  • Templates - RESERVED! Dreamweaver templates (layouts)

If you have any other questions, please contact Web Help.

Design guidelines

The structures below can be used by highlighting the area you wish to style and then selecting from the Properties dialog at the bottom of Dreamweaver. (Toggle Cntrl-F3 if you don't see the Properties dialog.) To comply with university standards for simple, elegant presentations, please do not create custom font styles, sizes or colors. Bolded and italicized styles are acceptable and can be selected with the B and I selections in the Properties dialog. If your information is simply expressed and well-structured your users will be able to find it without recourse to dramatic fonts and colors.

Use of Section Markers

Do use Section Markers liberally to visually divide up your content. Section Markers are used like an outline to indicate the structure of your page. They are heavily used by those using screen readers so they also help make your page accessible to visually-challenged readers.

Heading 1

Heading 1 provides the largest font size available on this template. It can only be used once at the top of your content area to indicate the title of the page.

Heading 2

Heading 2 is great for pages with multiple sections, as it can be used to better categorize content

Use the other headings to divide your content into further subsections.

Heading 3

Heading 4

Heading 5
Heading 6

List Items

List items make it easy for your reader to see important information. Use them whenever you have three or more items. The two styles are unordered (bulleted) and ordered (numbered).

Unordered list:

  • List item 1
    • Sublist item 1
    • Sublist item 2
  • List item 2
  • List item 3

Ordered list:

  1. List item 1
    1. Sublist item 1
    2. Sublist item 2
  2. List item 2

New Capabilities

Dynamic Functionality with jQuery

Gallery, Slideshow, rounded corners and expandable navigation are all provided with jquery for the Western Template

Automatic File Type Icons

When you include links to non-html pages or email addresses, small icons are automatically placed next to the file name warning the user that a helper app is needed to read the file. For example:

However, if you wish to have an icon for esign forms, you will need to add the class .esign to the item like this:

Using the gallery

You can see a sample gallery in gallery.shtml. You can easily modify it for your own purposes by adding and removing pictures from the gallery subfolder and updating the unordered-list in photos.html accordingly.

You can have multiple galleries if you so choose, but each one must follow the format found in gallery.shtml: images inside of <li> tags (i.e. list items) inside of a <ul> (i.e. unordered list) tag with a class of "gallery" inside of a <div> tag with a class of "gallery-center".

The title attribute of the <img> tags provides the text which will be displayed underneath the image.

Should a visitor attempt to view the gallery with javascript disabled, they will simply be presented with all of the pictures at full-size listed vertically down the screen.

Using the navigation menu

The navigation menu is found in /includes/nav.html . Note that this tag in your unordered lists:

<ul title="navigation">

causes your menu to expand and collapse on those items that have another unordered list inside them. If you do not wish the menu to expand and contract, remove the title part of the ul tag so it looks like this:

<ul>

Creating a Slideshow

To create the slideshow:

  1. Resize the images in photoshop. For best results the images should be 200 px in height - the width doesn't matter except that anything more than 700px won't fit in the template.
  2. Store the resized images in the slideshow folder provided in the template (or create one yourself)
  3. Create the page: select File, New, Page From Template, and then select the slideshow template.
  4. Find the first image which is shown with a dot next to it in Dreamweaver (it will not show this way on the web). Delete the image and drag one of the images from the slideshow folder into the space next to the dot. Repeat this for all the images you wish to cycle through. If you need more images, simply place your cursor next to one of the images, press enter, and drag an image to the new dot.

Rounded Corners and Shaded Boxes

Four styles of shaded boxed areas are available in the Western Template:

  • class="box-left-quote"
  • class="box-right-quote"
  • class="box-left-details"
  • class="box-right-details"

See them here

Note that by adding the class "rounded" to any of these the shading will be rounded. The result would be

class="box-left-quote rounded"

Accordions

Accordions are sections that can be opened and closed by the viewer. They're very useful for FAQ pages or pages with lots of sections and text. To make these work you need a section header like this:

<h3 class="slider">Section 1</h3>

and then surrounding the "body" of the message that will be hidden when the accordion is closed a div like this:

<div class="drawer"><p>Body of Section 1 here</p></div>

Note that the accordion starts with all drawers closed and then clicking on a drawer opens that one and closes any that are open. Look at code for the example below:

Section 1

Contents of section 1 drawer

Section 2

Contents of section 2 drawer

Section 3

Contents of section 3 drawer
Page Updated 08.28.2013