Learning Adobe DreamWeaver CS4

By Greg Bowden

Chapter 8

Using Templates

Guided Computer Tutorials

www.gct.com.au
PUBLISHED BY

GUIDED COMPUTER TUTORIALS

PO Box 311
Belmont, Victoria, 3216, Australia

www.gct.com.au

© Greg Bowden

This product is available in Single or Multi User versions.

Single-user versions are for single student or teacher use at any

particular time, just as a single text book would be used. If you intend
to use the notes with multiple students the single user version should
be upgraded to the multi-user version.

Multi-user versions allow the school or institution to print as many

copies as required, or to place the PDF files on the school network,
intranet and staff laptops. A certificate of authentication is provided
with multi-user versions. Bookmarks provide links to all headings and
sub-headings, and individual chapters are provided.

First published 2009

ISBN: 1 921217 74 X Module 1

1 921217 75 8 Module 2
PDF document on CD-ROM

Every effort has been made to ensure that images used in this
publication are free of copyright, but there may be instances where
this has not been possible. Guided Computer Tutorials would
welcome any information that would redress this situation.
 Chapter

8
Using Templates
When you want to create more detailed web sites that have more design elements to
them using TEMPLATES is one of the most effective methods to use. Templates are page
setups that can be applied to other pages. They are basically master pages. To illustrate
the use of templates, the TravelWise web site will be adjusted.

Creating the Template

The template will be created from a blank page, however an existing page can be
converted into a template if necessary.

1 Load DreamWeaver, or close the current pages and start a new HTML PAGE. The
screen should be set to DESIGNER view.

2 Ensure that the FILES panel is set to

your TRAVELWISE site.

3 Set the TITLE box to:

TravelWise Travel Services

4 A template for the site will be created then applied to a series of other pages. The
design of the template will have the following structure.

Logo
Navigation Buttons

Image Content

© Guided Computer Tutorials 2009 8-1

Learning Adobe DreamWeaver CS4

NOTE: The small cell above the image cell will be blank. It will serve
to separate the image from the navigation buttons. It is called
a SPACER cell.

A Creating the Table

A 4 x 2 table will be drawn then modified to create the required layout.

1 In the COMMON tools of the INSERT
panel click on the TABLE icon

2 Set the table to have 4 ROWS, 2

COLUMNS, a TABLE WIDTH of 740
pixels, a BORDER THICKNESS of 0,
a CELL PADDING of 0 and a CELL
SPACING of 0, then select OK

B Merging Cells
Cells can be merged to create the layout shown in the diagram on the previous page.

1 Highlight just the top two cells by

dragging the cursor across them.

2 Display the MODIFY menu, highlight TABLE and select MERGE CELLS.

8-2 © Guided Computer Tutorials 2009
 Using Templates 8
3 The two cells are combined into one
cell.

4 Highlight just the two cells in the

second row.

5 Display the MODIFY menu, highlight TABLE and select MERGE CELLS.

6 Highlight the bottom two cells in

COLUMN B.

7 Display the MODIFY menu, highlight TABLE and select MERGE CELLS.

8 Move the pointer over the bottom

border of the table until it changes
to parallel lines with arrows and drag
the border down to the base of the
document window.

© Guided Computer Tutorials 2009 8-3

Learning Adobe DreamWeaver CS4

NOTE: i By using a table, a series of regions have been created on the

page.
ii The small cell in the third row is called a SPACER cell, Its
purpose is to separate the navigation buttons (row 2) from an
image which will be placed in the left cell in row 4. It will not
have any content.

Saving the Page as a Template

The page can now be saved as a template rather than as a normal page. This allows other
pages to be given its design.
1 Display the FILE menu and select SAVE AS TEMPLATE.

2 In the SAVE AS TEMPLATE dialogue

box set the SAVE AS box to
TW_Template
and click on SAVE.

3 DreamWeaver saves the page in a

folder called TEMPLATES within your
site’s folder. Expand the folder to see
the template file.

8-4 © Guided Computer Tutorials 2009
 Using Templates 8

Completing the Template

The parts of the template that will be displayed on all pages can now be entered.

A Adding a Logo
A logo will be placed in the top cell.

1 Click in the top cell then click on

the IMAGES-IMAGE button in the
COMMON tools of the INSERT panel.

2 Access the DWcs4 SUPPORT FILES, open the CHAPTER 8 folder and click on the
LOGO.GIF file.

3 Select OK or CHOOSE to insert the image.

4 Select YES to the ROOT FOLDER warning dialogue box and save the image in the
IMAGES folder within your TRAVELWISE folder.

5 Set the ALTERNATE TEXT to:

Logo image
and select OK.

6 The logo should be inserted into the

top cell.

© Guided Computer Tutorials 2009 8-5

Learning Adobe DreamWeaver CS4

7 Click in the lower left cell (left cell

in row 4) and repeat steps 1 to 6
to insert then save the BIGBEN.GIF
image. Set the ALTERNATE TEXT to:
Big Ben Image

NOTE: i We could have inserted a series of advertisements in this cell

instead of an image.
ii Layout cells expand in length to fit the content that you
insert in them.

8 Click next to the BIG BEN image to

set the cursor in the cell and, in the
PROPERTIES INSPECTOR, set the
VERT box to TOP so that the image is
displayed at the top of the cell.

8-6 © Guided Computer Tutorials 2009
 Using Templates 8

9 Drag the right border of the BIG BEN

cell to the left so that the cell width
is close to the width of the image.

B Adding Navigation Buttons

We could set a Navigation Bar with rollover buttons, but to simplify the process we will
just insert images as buttons. The buttons will have links added later.

1 Click in the second row just below

the logo cell.

2 In the FILES panel expand the BUTTONS folder within the IMAGES folder.

3 Drag the HOME.GIF button into cell.

4 Set the ALTERNATE TEXT to:

Home button
and click on OK.

© Guided Computer Tutorials 2009 8-7

Learning Adobe DreamWeaver CS4

5 With the button selected, set its ID in

the PROPERTIES INSPECTOR to:
Home

6 Repeat steps 3 to 5 to drag the

PACKAGES.GIF, MAPS.GIF, TIPS.GIF
and AIRLINES.GIF buttons into cell
and set ALTERNATE TEXT and ID for
each one.

NOTE: More buttons will be added to the template later to fill the top
row.

C Adjusting the Cell Heights

The heights of the rows can be adjusted so that the logo and buttons are not to close to
one another.

1 Drag the bottom border of the top

cell down about 0.5 cm to increase
the space between the logo and the
buttons.

8-8 © Guided Computer Tutorials 2009