A worksheet that can help you assemble the information you need to configure your template is available for download.
To configure the template for your own department or group use, you must open the downloaded template in Dreamweaver. You will immediately notice that on the Dreamweaver screen, the template bears little resemblance to the way it will appear on the web.
Some regions of the template have been marked “editable” and some have been designated “not editable”. Editable regions can be changed by the content provider using the template, while non-editable regions can’t be changed.
At the top, you will notice an area with the “broken image” symbol in it. 
However, if you select the broken image, and check the Properties for its source, you will see that this image is located at http://www.uwaterloo.ca/images/template/uwlogo.gif and its link points to the UW home page. As the location of the image suggests, this is the UW logo, and when someone creates a page based on this template, the logo will display properly. It is mandatory to have the UW logo at the top left of each page in your site, and it must have a link to the UW home page.
The next area is the search area.
It is configured with a Google search for the entire UW site, plus it allows you the ability to configure a search of your own site if you wish.
You may not wish to have readers perform a search on your site, but prefer to have them search only the entire UW web site instead. If that is the case, go into either split or code view, and carefully select the following text.
<input type="radio" name="site" value="www.yoursite.uwaterloo.ca" checked="checked"/>
your unit
and delete this text. Then you would want to add the checked option to the UW search, so it looks like this.
<input type="radio" name="site" value="www.uwaterloo.ca" checked="checked"/>
To configure a search of your own unit, you will edit the text
<input type="radio" name="site" value="www.yoursite.uwaterloo.ca" checked="checked"/>
your unit
mentioned above. Suppose that your unit is xyzdepartment and the URL of your web site is http://www.xyzdepartment.uwaterloo.ca. You would edit the above line to read:
<input type="radio" name="site" value="www.xyzdepartment.uwaterloo.ca" checked="checked"/>
xyz department
The search area on your template will now look like this.
The next box on the template is a graphics placeholder for the name of your department or unit.
This is a graphical image that must be created with a specific font. Many of you will already have this graphical department title on your current web site. You may use the same department name image. You may want to save a copy of your Department Name image in the Images folder for this site.
Select the placeholder image, and in the Properties source box, point to your image. You may wish to provide a link to your department’s home page from this image. You should also provide ALT text specifying a description of the graphic. In this case, make the ALT text your department name.
UW Graphics has a script on their web site that will create this image for you in the proper font. However, please note that the image produced in this way is not transparent. The image contains a white background, rather than a transparent one. You may think that this is not important, because your page background is white. However, some people reading your pages may set their own background colour in their browsers. Therefore you must use a tool like Fireworks or Microsoft Photo editor to make this image transparent.
The department name graphic is designated a Heading 1 in the code. This is an aid to screen reading software, and to search engine indexers.
Next is the main left-hand navigation. It is a nested 
bulleted (unordered) list. The outer bullets are your main menu items. You can have up to 7 to 9 main menu items. For some, or all, of your main items, you may have sub-menu items. You may wish to have up to 9 sub-items per menu item. When the main menu item is clicked, the page that is loaded in response will have that sub-menu expanded. You can see examples of this on this page. Not only will that menu-item be expanded when the main menu item is clicked, but it will be expanded whenever any of its sub-items are clicked. Similarly, when another of the main menu items is clicked, its sub-items would be expanded, and the sub-items of all main menu items are collapsed.
To add your menu items, simply select the “link 1 link”, “link 2 link” text and replace each one with the text of your main menu items. Replace the text of the sub-links with the text for your sub-links. If you have fewer links and/or sub-links, simply delete the ones you do not need. Be careful that you don’t delete any <ul> or </ul> tags. You may want to flip over to “Code” view to verify this. For example, if you have only 8 main links, you will want to delete all code belonging to sublink 9. Using code view, select the lines pertaining to link 9 in this way.
Make sure that all text from the beginning of the links <li> to the end of the ---> are selected. Then press the delete key.
If you want to delete some of the sublinks, carefully select from the sublinks beginning <li> to the end of its </li>, and delete.
There are only 3 sublinks built in for each link. It is likely that you will have more than 3 sublinks for most of your menu items. In that case, simply place your cursor after the last sublink, and press Enter. Type the text of this added sublink.
Now, select each link and sub-link in turn, and in the Properties box, add the link to the appropriate page that will be loaded for each menu item and sub-item.
When you are using the template in either Dreamweaver or Contribute, you will need to indicate which optional components of the template should be included in the current page. The names of some of these optional components are reasonably self explanatory: "collage" and "rightnav". However the name you must enter to indicate which left navigation item should be expanded is a number, that indicates its relative position, 1, 2, 3 etc. That is fairly straightforward. However someone using these items while creating a page may need to keep counting to see if it is perhaps "5" or "6" that they wish to expand.
It might make life easier for page creators if these names were related to the content of the link items, rather than their position from the top. This is easy enough to do. If you look at the code for the conditional sections you will see lines of code like this.
<!-- TemplateBeginIf cond="submenu=='1'" -->
Let us suppose that your main menu items are faculty, staff, students..., you could select the 1 and replace it with faculty, select the 2 and replace it with staff, etc. Then the person using the template could indicate that it was the faculty set of submenus that should be expanded, or the staff set of submenus.
If you are going to use this approach, keep the names short and relevant, because the person using the template will need to type these labels exactly as you have entered them.
Please refer to the section on Using the Template to see why meaningful names might make it easier for content providers to select the appropriate conditional sections.
The next item on the template is the right hand navigation box
.
It can be used to display links of interest, upcoming events, etc.
This area is optional, but you may want to include it on your main page at least. You will also want to give some thought as to how you will use it.
In the template, the right hand navigation is created as a non-editable region, and hence can only be changed in the template. If you will only have the right hand navigation on your main page, or if the right hand navigation will be different on every page on which it occurs, you might consider making this area editable, and then updating it directly on the appropriate page.
To make the region editable, go to Code view, to ensure that you select the exact text. Select the text of the right navigation area.
With the text selected, from the menus, issue the command Insert, Template Objects, Editable Region. You will be asked to assign a name to this region. Do so, and click OK.
You can now directly edit this region, using either Dreamweaver or Contribute, in a page based on this template.
Perhaps you want to have the right navigation on a number of pages, and you want all these pages to reflect the same navigation links. In that case, whenever you want to update the right hand navigation, you need to change the template, re-apply the template to all pages containing this element, and upload all those pages to a server. This can be a tedious task, and cannot be done by a Contribute user. What you might want to do, is to replace the text in this region with a Server Side Include. Please see the section on Server Side Includes to learn how to do this.
The next item is the Subtitle Related to Left Navigation, which contains the main title for a page. This is an editable region, and is filled in appropriately for each page that is created, so although you don’t need to change it in the template, you may want to replace it with text such as Add Your Title Here. Note that the subtitle does not occur on your main or splash page, where there is a collage.
The subtitle is designated a Heading 2 in the code. This is an aid to screen reading software, and to search engine indexers. The Topic Title is the link between your left hand navigation and your pages. On pages linked directly from a left hand navigation menu item, the Topic Title should be the same as the menu item.
The next graphic is the location for the banner picture or collage. Select this graphic, and replace its source with the location of your image. Your banner can be any interesting rectangular image of campus. It must be 755 pixels wide by 145 pixels high. Add ALT text that indicates that this picture is an image only, and not related to the content. Your main or "splash" page should have a banner, but it should not appear on any lower level pages.
The next area is an editable region that contains place holder text for the body of your web page.
Next you will see a graphic place holder that points to the Campaign Waterloo logo, and it has a link to the Campaign Waterloo site. If your Faculty has its own campaign web site, you may replace the link with a link to your campaign site.
Below that is contact information, which must contain the University’s address. You may wish to add building and room number for your department as well as a departmental extension. Below that are two links that can be used by viewers who wish to contact your department, or who wish to pass on comments about your web site.
June 29/09: UW Campaign logo updated as shown below. If your webpage does not display the updated logo, then you have modified the CLF template code that links to the central logo file. You probably downloaded a copy to your file space and are linking to that file.
January 2009: as shown in the footer of this website, please add the linked text "privacy statement" to "http://www.uwaterloo.ca/privacy/". This statement addresses Google Analytics use on campus websites and will later mention other analytic software.
Your template is now completed, and you may save it to your Templates folder. When you do, you will receive a warning message.
This warning is generated by the fact that your Topic Title is inside a <h2> tag. This is perfectly legitimate, so just click OK and ignore this warning.
If your site will be maintained only by Dreamweaver users, your template can remain only on your local site. But if Contribute users will be maintaining your site, a current copy of the template must be maintained on the actual web site.
Your site is now ready for editing by either Dreamweaver or Contribute users.
You will no doubt find it necessary to make some modifications to your template. This must be done with care, especially if Contribute users have been creating or updating pages on the web site. These pages are created or edited directly on the server, and hence will not be reflected in your local Dreamweaver site. You do not want to overwrite any changes your Contribute users have made to pages. Therefore, before you modify the template, synchronize your site in Dreamweaver, copying all newer files from the remote site to your local site.
Now update your template, and any files affected by the template will automatically be updated. Once that is completed, synchronize your site again, copying all modified files from the local site to the remote site.
The following changes are done in the current downloadable template so no need for you to do. The information is provided for archival purposes only.
In November 2006, IE 7 was released by Microsoft. Unfortunately, in our template there's a conditional comment excluding IE 7 from picking up the print CSS by specifically saying 'if IE 6'. The web page based on the template will still print but the navigation menu also prints, which is undesirable.
Solution: in your template's <head>, edit the comment and code by changing
<!-- conditional comment added for IE 6 printing, IE 5.5 will not print this page very well -->
<!--[if IE 6]>
to
<!-- conditional comment added for IE 6 and later printing, IE 5.5 will not print this page very well -->
<!--[if gte IE 6]>
Please note the "gte" (greater than, equal to) now calls IE 6 and above. Your pages should now print without the navigation menus.
***Note September 24/07: we have modified the template to reflect this change.
At the top of the template, you will find a comment. (You will need to be in Dreamweaver's Split or Code view to see this.
<!-- DELETE THIS COMMENT WHEN APPLYING YOUR TEMPLATE TO YOUR SITE
version 1p1 of UWtemplate.dwt: see http://web.uwaterloo.ca/documentation/clforgeeks/bugsandfeatures.html
DO NOT MODIFY UWx.css FILES
-->
Select the text indicated above, and delete it. It is just a comment, and it shouldn't matter, but certain aspects of the Cascading Style Sheets will not work properly in Internet Explorer 6 or 7 if this comment is left in the template.
***Note June 29/05: We have removed the comment from the template at the download site. If you downloaded an earlier copy of the template, please make sure you delete the comment as shown above.
The central CSS now centres your pages, providing that they contain the necessary container DIV tag.
Web Operations Team
University of Waterloo
200 University Avenue West
Waterloo, Ontario, Canada N2L 3G1
519 888 4567 ext. 36433
contact us | give us feedback | privacy statement | UW home