Formatting the template

See the master files

HTML:

Home page
Inside pages

CSS:

Master
Master print

Linking to master files

To avoid different style sheets and to help other team members work on the course files, we encourage web editors to link to the master style sheet at:

http://www.athabascau.ca/courses/template/master_v2.css

To customize your template you can make any changes in a local CSS file, which will over-write the master. See Changing the CSS for more instruction on this task.

You will have to download the "print.css" file and link to it locally with a relative link for Internet Explorer 5 to access it properly. The other style sheets can be linked with absolute links. See below for more information on linking.

The code for linking to the master files

Here is what we recommend for your page <head> tag. This will hide the style sheets from old browsers that do not properly render it.

<style type="text/css">
<!--
@import url("http://www.athabascau.ca/courses/
template/master_v2.css");
@import url("http://www.athabascau.ca/template/
style/04/navglobal01.css");
@import url("[course name and number i.e. engl401].css");
-->
</style>
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

Changing the CSS

There is flexiblity in how the template can be used. You can download a CSS, file which should help you to customize the template.

Place this changed file in your course root folder and below the link to the master style sheet. It will over-write the master styles.

The naming standard is “[course short name and number, i.e. engl401].css”.

Text styles

See the sample headings page the previous link opens in a new window for examples on how to code your html for different formatting needs.

"Hoveroff" and "you-are-here" indicators

To help visitors know where they are in the website, there are some new classes built into the default template. Insert these classes into the <a> tag of the vertical menu items.

By inserting class="hoveroff" you will stop the link background from changing with the mouse roll-over. Use this when you want a menu item that does not link to anything, such as a title that groups some links together. See the "Services:" link on the EMD website for an example. You must still link your text to the "#" symbol for the vertical menu item to display properly in browsers.

When class="current" is inserted, the link text will appear in bold and there will be a grey bar to the left of the item. This is an indicator for the current page you are on in the website. Visual designers can change the colour of the bar if they feel the grey does not suit their colour scheme.

A helpful checklist

Our Digital Media Technologists (DMTs) use this checklist when they are developing a course site. One DMT makes the page and another checks it. They log questions in a Word document and stay in communication with the other members of the course team—posting a draft to a test area on the server when they have gone as far as possible with development. The course team members communicate through email and all sign off before the website is posted to the live server where students can access it.

Accessibility reminders

Screen readers will interpret the EMD course template quite well because the visual display is separate from the code mark-up. Here are a couple of things to remember when making your page.

  1. It is very important to put "alt" descriptions on all of your images, especially images that are links.
  2. Use a "go" button for all your drop down menus rather than a list that activates when the mouse releases.
  3. Please validate all of your pages with the w3c.org.
  4. When you link text, make it understandable for screen readers. For example, use "visit the EMD website" rather than "to visit the EMD website click here". If need be, you can insert a title tag into the <a> tag explaining where the link goes.
 
Top