UVic Templates

The Template Layout

Banner

The banner area is the white band at the top of the page. This should contain a standard compliant logo in the same format as the logo on this page. If you need a logo created for your department, email the UVic Web Coordinator. The banner photo is set as a background. It can be changed by adding an inline style. See the source code of the Dynamic page to learn how to do this. If you require banner photos please contact the UVic Web Coordinator.

Titlebar (the blue bar with the search)

The Title bar is where you place the title of the area of your web site that the user is currently in. Keep the titles short (1-2 words). The links in your titlebar should be to general useful information. The first link must be to the UVic.ca web site Usually these links lead to other web sites. If you do not know what to put in this area, use a link to the UVic home page, A link to the directory, and maybe a link to maps or your division homepage. Depending on how you set up the search it should search your department or the entire UVic site. The words on the button should correspond appropriately. See web.uvic.ca/webcoor/resources/google.html for instructions.

Audience Bar (the yellow bar)

The audience bar allows you to move your different audiences through your site. By providing audience specific links on separate pages, you can "divide and conquer" your viewers. If you do not have many or any audiences, or this does not apply, then you may want to put general divisions of your web site here.

The UVic.ca version of this template contains drop down menus here. If you feel that you need drop down menus please contact the UVic Web Coordinator.

Left Navigation (<- that navigation over there ;)

The left navigation is the way that most people will get around your web site. This navigation should not change through your site. If you think that you need to change this information, please consult with the Web Coordinator. There are some very cool and creative ways to reveal data that will not confuse viewers.

The link headers are used to group the links for easy navigation. There should be no more than 5 links under each header. If there are more, users will not read them, and links will be frequently passed up.

If you are having trouble fitting your sites structure within the rules that we have set out, please contact the UVic Web Coordinator for assistance. We can help you organize your data in a logical and easily navigatable manner.

Breadcrumb (the area that contains a link to the UVic home page and "»")

The Breadcrumb is used to show users where on the web site they are. It should contain a link back you your home page, and as the sub pages are added it should indicate where the user is on that page. For an example see www.uvic.ca/test.

Content Area

We have developed 3 layouts of the content area.

1. Fixed width.
2. Fixed width w/ boxed side content
3. Dynamic width w/ side content

Fixed width should be used on pages where there is large amounts of text. Text that spans the entire screen is difficult for people with larger screens to read. If you have some news, related links or content that you want to display in side boxes you can use the either the fixed or dynamic width formats that contain the sidebars.

It is important that your web site be no wider than 740px. This width will allow most site viewers to see the site without scrolling. The following dimensions should be followed:

The spacer and left navigation are already in the templates. The most important thing is to make sure that you do not have anything wider than 380px on the page with the sidebar and 565px on the pages without sidebars.

In the content area you do not need to use any fancy code. The HTML in the content area should not need inline styles or special classes. As in this page, only XHTML comparable standard tags should be used. If you are displaying an email anywhere on the page you should use the address() java script function (see source code for example or web.uvic.ca/webcoor/resources/email-hide.html). This will help stop email harvesters from getting your email into their spam lists.

Mail To Links

To combat spam there is a javascript function that allows you to hide your email address from spam spiders. To create a mailto link you will need to put the following code into the html:

<script language="JavaScript" type="text/javascript"> address('uvic.ca','yourdepartment')</script> <noscript>yourdepartment at uvic dot ca</noscript>

The "address" function takes a split email address and returns it as a mailto link. The example makes the email address yourdepartment@uvic.ca. The noscript tags are used by browsers that do not support javascript. It is up to you what you would like to put in the noscripts tag. A common solution is to break apart your email address and put it in the noscript tag as "yourdepartment at uvic dot ca".

Footer (bottom blue bar)

The footer should contain information about the author, a link to the legal notices, and the date that the page was last updated on. See this page and www.uvic.ca for examples.

Adapting the Templates

There are several templates included in this package. The main.dwt template is a dreamweaver template that allows you to make changes to all the pages in your site (if you are using dreamweaver). If you are not using dreamweaver you may want to create your page from index_no_temp.html.

The first step is to rename the css files and script files to a unique name. Change the "yourdepartment" component of the file names to your departments four letter code, or to an acromyn for your department. In the page code replace all instances of "yourdepartment" with the same four letter code acronym.

Replace all instances of "/templates/blue_tab/" with the root directory of your web site. (ie: "web.uvic.ca/usec" would have the root of "/usec/").

Change the navigation to the navigation that fits your web site. Make sure to follow the format of the existing navigation HTML.

Contact Rogier Gruys for new logos, photos, or graphics. If you want to change the colors then contact Rogier with the colors and we will provide you with the appropriate graphics.

Now save and start creating pages based off the templates.

Contact the UVic Web Coordinator if you would like assistance.