Hands-on web training

Using Dreamweaver

Template-based pages

What's a "template"? | Non-Dreamweaver templates | Dreamweaver Guides templates

Note: New guides should be built using our CSS templates. The most recent templates (summer 2007) include code to activate Google Analytics web statistics gathering.

- Obtain the CSS files

- Obtain the templates

- Making new template-based files

- Applying the current template to an old CSS guide

- Reformatting an old non-CSS guide using a new template

- Tip: How to edit CSS code

Obtain the CSS Files

Create a folder named "css" in your www directory.
Within that, create another folder named "guides."
Browse to http://libraries.mit.edu/css/guides/ or FTP to /afs/athena.mit.edu/dept/libraries/www/css/guides
Download the four "templates" css files:

template-gold.css
template-gray.css
template-green.css
template-teal.css

to your \css\guides\ folder. DO NOT EDIT THEM!!!

Obtain the Templates

1: Use your FTP program to go to

/afs/athena.mit.edu/dept/libraries/www/templates/

2: Download any templates that you're likely to use - for example:

cheatsheets-gold-css.dwt
courses-gray-css.dwt
groups-teal-css.dwt
subjects-green-css.dwt
types-teal-css.dwt

3: Install them in the templates folder in your www directory.

Making new template-based files

1) Basics:

You may choose any of the four available colors you like (gold, gray, green, teal).
-- Note: You can change the color after making the page, if you change your mind
Be sure to use the template for the type of page you’re making (subject, course, cheatsheet, type, or group)
The new CSS-based templates do not require you to add style coding (e.g., font tags), but you do need to be aware of CSS styles - see How to edit CSS code
Save your page with
- an all-lower-case name
- the extension ".html", NOT ".htm" (Tip: How to change Dreamweaver's default file extension from .htm to html)

Tip: Shall I use "Save" or "Save-as"?

2) Creating a new file that looks like an old file, by using "save-as":

Download a document with the style you want to the "mirror" folder on your HD where it belongs.
Open it in Dreamweaver.
Choose "File > Save As," and save it directly into the folder where you want it. (Choose "update links" to be sure standard links will still work.)

WARNING! Do not choose "File > Save as Template..." ! Doing that will send you into an endless loop!

3) Creating a new file directly from a Dreamweaver template

Choose "File > New..."
choose the Templates tab
choose your site
choose the style you want from among the templates you downloaded (nb: current styles are named "cheatsheets-gold-css" etc)
choose "update page when template changes"
finally, choose "create."

new from template

Warning! Do not simply click open the template and "save-as" the page you want. Doing so will save it as a template --- not at all what you want!

VITAL: Save the new page into an appropriate /guides/ folder on your HD before making any edits.
Enter content, using the Guides sampler page as a guide to help you apply the appropriate styles. DO NOT EDIT THE STYLES! Tip: How to create a local, page-specific CSS style.
Upload the resulting guide into the guides-test folder and look at it on more than one computer, with more than one browser, before declaring yourself finished!

Applying the current template to an old CSS guide

Download the current template (how to)
Open the old guide in Dreamweaver
Choose Modify > Templates > Apply Template to Page
Choose the appropriate template

Reformatting a pre-CSS page using a new template

Note: New guides should be built using our CSS templates. The most recent templates (summer 2007) include code to activate Google Analytics web statistics gathering.

Method 1 | Method 2 | Transitional CSS pages

Method 1 (simple and fast, because copying from a browser leaves no formatting to remove):

Create a new page from template, as above.
Open your old page in a browser.
Copy the text from the browser window and paste it as appropriate into the new page, being sure to apply the right styles. DO NOT EDIT THE STYLES! Tip: How to create a local, page-specific CSS style.
Add links as appropriate.
Upload the resulting guide into the guides-test folder and look at it on more than one computer, with more than one browser, before declaring yourself finished.

Method 2 (easier if your original page contains many links, or if the folder contains many pages):

• Download and open the old html page.

• "Save-as" with a new name, such as "index-old.html."

• Create a new page from the template, as above

• Paste a section of text from your old page into the appropriate editable region of your new page.

• Remove all the font formatting in that region:

•• In "Design" view -

Place cursor in that region and choose Edit > Select All

In the Properties window, choose Font=Default Font, Size=None, neither B nor I, Default Color, and Bg=Default Color

• Repeat for each editable region.

• Apply appropriate Formats or Styles.

• For a multi-page guide, save your index page, and then save-as another page in the directory - and follow the same procedure for the new page.

• Upload the resulting guide into the guides-test folder and look at it on more than one computer, in more than one browser, before declaring yourself finished.

Transitional CSS pages

Creating our CSS-based templates was a multi-step process. Some pages were built using templates and CSS files that have been superceded.

Luckily, it's easy to upgrade to the new, improved CSS-based templates:

Make sure you have downloaded the current CSS files to your www\css\guides folder
Make sure you have downloaded the current templates to your www\templates folder
Choose Modify > Templates > Apply Template to Page...
Look through to make sure appropriate styles are applied. There are new styles in the new CSS - for instance, "table", to be applied only to cells in tables in the body of your page.
Upload the resulting guide into the guides-test folder and look at it on more than one computer, in more than one browser, before declaring yourself finished.