Download - 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
-
8/14/2019 Learning Adobe DreamWeaver CS4 - Templates
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.
-
8/14/2019 Learning Adobe DreamWeaver CS4 - Templates
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
-
8/14/2019 Learning Adobe DreamWeaver CS4 - Templates
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.
-
8/14/2019 Learning Adobe DreamWeaver CS4 - Templates
5/10
Guided Computer Tutorials 2009 8-3
8Using Templates
5 Display the MODIFY menu, highlight TABLE and select MERGE CELLS.
7 Display the MODIFY menu, highlight TABLE and select MERGE CELLS.
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.
-
8/14/2019 Learning Adobe DreamWeaver CS4 - Templates
6/10
Guided Computer Tutorials 20098-4
Learning Adobe DreamWeaver CS4
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.
-
8/14/2019 Learning Adobe DreamWeaver CS4 - Templates
7/10
Guided Computer Tutorials 2009 8-5
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/14/2019 Learning Adobe DreamWeaver CS4 - Templates
8/10
Guided Computer Tutorials 20098-6
Learning Adobe DreamWeaver CS4
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.
-
8/14/2019 Learning Adobe DreamWeaver CS4 - Templates
9/10
Guided Computer Tutorials 2009 8-7
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.
-
8/14/2019 Learning Adobe DreamWeaver CS4 - Templates
10/10
Guided Computer Tutorials 20098-8
Learning Adobe DreamWeaver CS4
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.