MIT Libraries

Hands-on web training

Using Dreamweaver

Template-based pages

What's a "template"?

According to Dictionary.com, in normal word-processing language a template is:

A document or file having a preset format, used as a starting point for a particular application so that the format does not have to be recreated each time it is used.

Dreamweaver templates are different. This is a very specific tool, in which sections of the format and text are "locked down" so that you can't edit them.

Non-Dreamweaver templates in the MIT Libraries

We currently have two simple non-Dreamweaver CSS-based templates available for each library:

Colorbar and its attached CSS file have been placed in each library's test directory. E.g.:

http://libraries.mit.edu/dewey-test/colorbar-template.html

This can be used for local informational pages, such as Location of material in Dewey Library

To see examples of the styles you'll start with, download the Colorbar Sampler page and linked CSS file. Check the code.

Feel free to personalize this file:

  • Save-as the "colorbar-template" file with a new name
  • Save-as the attached CSS file with a new name
  • Remember to change the code so that the new colorbar file is linked to the new CSS file!
    - Change it here: <HEAD><link href=
    "colorbar.css" rel="stylesheet" type="text/css">
    </HEAD>
  • Remember to upload both your HTML file and your new CSS file to both the test and the live directories

tip: How to edit CSS code

Blue-stripe and its attached CSS file are available for download in two forms (fixed width and expandable) from the About/Templates directory.

This style is used:

To see examples of the styles, download the Bluestripe Sampler page and linked CSS file. Check the code.

Download and personalize this file for your special project:

  • Save-as the "blue-stripe" file with a new name
  • Save-as the attached CSS file with a new name
  • Remember to change the code so that the new blue-stripe file is linked to the new CSS file!
    - Change it here: <HEAD><link href=
    "blue-stripe.css" rel="stylesheet" type="text/css">
    </HEAD>
  • Remember to upload both your HTML file and your new CSS file to both the test and the live directories

tip: How to edit CSS code

 

<= Back to Creating pages

Next: Dreamweaver Guides templates and their attached CSS files =>