Learning Adobe DreamWeaver CS4 - Templates

8/14/2019 Learning Adobe DreamWeaver CS4 - Templates

1/10

Learning Adobe DreamWeaver CS4By Greg Bowden

Guided Computer Tutorials

www.gct.com.au

Chapter 8


2/10

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 les on the school network,

intranet and staff laptops. A certicate of authentication is providedwith 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.


3/10

Guided Computer Tutorials 2009 8-1

Chapter

8Using Templates

When you want to create more detailed web sites that have more design elements to

them using TEMPLATES is one o the most eective methods to use. Templates are page

setups that can be applied to other pages. They are basically master pages. To illustrate

the use o templates, the TravelWise web site will be adjusted.

Creating the Template

The template will be created rom a blank page, however an existing page can be

converted into a template i necessary.

1 Load DreamWeaver, or close the current pages and start a new HTML PAGE. The

screen should be set to DESIGNER view.

4 A template or the site will be created then applied to a series o other pages. The

design o the template will have the ollowing structure.

2 Ensure that the FILES panel is set to

your TRAVELWISE site.

3 Set the TITLE box to:TravelWise Travel Services

Logo

Navigation Buttons

Image Content


4/10

Guided Computer Tutorials 20098-2

Learning Adobe DreamWeaver CS4

NOTE: The small cell above the image cell will be blank. It will serve

to separate the image rom the navigation buttons. It is called

a SPACER cell.

A Creating the Table

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

B Merging Cells

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

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

1 In the COMMON tools o the INSERT

panel click on the TABLE icon

2 Set the table to have 4 ROWS, 2

COLUMNS, a TABLE WIDTH o 740

pixels, a BORDER THICKNESS o 0,

a CELL PADDING o 0 and a CELL

SPACING o 0, then select OK

1 Highlight just the top two cells by

dragging the cursor across them.


5/10


8Using Templates



3 The two cells are combined into one

cell.

4 Highlight just the two cells in the

second row.

6 Highlight the bottom two cells in

COLUMN B.

8 Move the pointer over the bottom

border o the table until it changes

to parallel lines with arrows and drag

the border down to the base o thedocument window.


6/10



NOTE: i By using a table, a series o 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) rom an

image which will be placed in the let 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 otherpages 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_Templateand click on SAVE.

3 DreamWeaver saves the page in a

older called TEMPLATES within your

sites older. Expand the older to see

the template fle.


7/10


8Using Templates

Completing the Template

The parts o 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.

2 Access the DWcs4 SUPPORT FILES, open the CHAPTER 8 older and click on the

LOGO.GIF fle.

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 older within your TRAVELWISE older.

1 Click in the top cell then click on

the IMAGES-IMAGE button in the

COMMON tools o the INSERT panel.

6 The logo should be inserted into the

top cell.

5 Set the ALTERNATE TEXT to:

Logo image

and select OK.


8/10



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

instead o an image.

ii Layout cells expand in length to ft the content that you

insert in them.

7 Click in the lower let cell (let 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

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 o the cell.


9/10


8Using Templates

B Adding Navigation Buttons

We could set a Navigation Bar with rollover buttons, but to simpliy the process we will

just insert images as buttons. The buttons will have links added later.

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

1 Click in the second row just below

the logo cell.

9 Drag the right border o the BIG BEN

cell to the let so that the cell widthis close to the width o the image.

3 Drag the HOME.GIF button into cell.

4 Set the ALTERNATE TEXT to:

Home button

and click on OK.


10/10



NOTE: More buttons will be added to the template later to fll the top

row.

C Adjusting the Cell Heights

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

6 Repeat steps 3 to 5 to drag the

PACKAGES.GIF, MAPS.GIF, TIPS.GIFand AIRLINES.GIF buttons into cell

and set ALTERNATE TEXT and ID or

each one.

5 With the button selected, set its ID in

the PROPERTIES INSPECTOR to:

Home

1 Drag the bottom border o the top

cell down about 0.5 cm to increase

the space between the logo and the

buttons.

Documents

Learning Adobe DreamWeaver CS4 - Templates