Learning Adobe DreamWeaver CS4 - Introduction

Guided Computer Tutorials
Learning
Adobe
DreamWeaver
CS4
By Greg Bowden
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.
Learning Adobe DreamWeaver CS4
Module 1 Contents
Chapter 1: Introduction to DreamWeaver CS4
Design Considerations.................................................................................... 1-1
Types of Graphics............................................................................................. 1-2
Backgrounds and Text..................................................................................... 1-2
Planning the Navigation.................................................................................. 1-2
The DreamWeaver Screen.............................................................................. 1-3
The Screen Views................................................................................... 1-4
The Insert Panel...................................................................................... 1-5
The Document Window........................................................................ 1-7
The Document Toolbar ........................................................................ 1-7
The Properties Inspector...................................................................... 1-9
The Status Bar....................................................................................... 1-11
The Panel Group................................................................................... 1-13
Creating a Site................................................................................................. 1-16
Creating a Root Folder........................................................................ 1-16
Entering the Site Settings.................................................................... 1-16
Adding a Page to the Site.................................................................... 1-20
Page Titles.............................................................................................. 1-21
DreamWeaver Assignment 1............................................................. 1-22
Chapter 2: Entering Text and Graphics

Setting up the Home Page.............................................................................. 2-1
Entering the Text.............................................................................................. 2-2
Spell Checking the Text................................................................................... 2-3
Formatting the Text......................................................................................... 2-4
The Main Heading.................................................................................. 2-4
The Body Text......................................................................................... 2-7
Inserting an Image........................................................................................... 2-9
Selecting the Image................................................................................ 2-9
Creating an Images Folder.................................................................. 2-10
Adjusting the Size of an Image.................................................................... 2-13
© Guided Computer Tutorials, 2009 C-1

Wrapping Text Around Images................................................................... 2-15

Adding a Background.................................................................................... 2-17
Adding a Background Colour. ...........................................................2-17
Using an Image as a Background...................................................... 2-18
Adding a Horizontal Rule............................................................................. 2-20
Viewing the Page in a Browser..................................................................... 2-20
Live Preview.................................................................................................... 2-21
Chapter 3: Using Tables

Creating a Packages Page................................................................................ 3-1
Formatting the Text......................................................................................... 3-2
Adding a Horizontal Rule............................................................................... 3-4
Inserting the Table........................................................................................... 3-5
Adjusting the Table.......................................................................................... 3-7
Naming and Centring the Table.......................................................... 3-7
Adjusting the Row Height.................................................................... 3-8
Using Rulers and Grids.......................................................................... 3-9
Adjusting the Column Width............................................................ 3-11
Inserting Graphics into the Table............................................................... 3-12
Inserting an Image About Europe..................................................... 3-12
Inserting an Image About the USA.................................................. 3-14
Inserting an Image About South America...................................... 3-15
Inserting Text into the Table........................................................................ 3-16
Entering the Prices......................................................................................... 3-21
Adjusting the Text in the Table.................................................................... 3-22
Adding a Page Background.......................................................................... 3-24
Adding a Table Background......................................................................... 3-25
Further Table Adjustments........................................................................... 3-26
C-2 © Guided Computer Tutorials, 2009

Contents
Chapter 4: Creating Links

Linking Text....................................................................................................... 4-1
Creating the Link Table......................................................................... 4-1
Formatting the Table.............................................................................. 4-3
Creating the Hyperlinks........................................................................ 4-3
Testing the Links.................................................................................... 4-5
Adjusting the Hyperlink Text Colour................................................. 4-6
Linking Images.................................................................................................. 4-7
Inserting the Images.............................................................................. 4-7
Linking the Images............................................................................... 4-10
Providing Links in the Packages Page.............................................. 4-11
Chapter 5: Anchor Points and Hotspots

Links Within a Page......................................................................................... 5-1
Loading the Prepared Page................................................................... 5-1
Setting the Anchor Points..................................................................... 5-2
Setting the Anchor Links...................................................................... 5-4
Testing the Anchor Links..................................................................... 5-5
Updating the Button Links............................................................................. 5-6
Hotspots............................................................................................................. 5-9
Loading the Map Files........................................................................... 5-9
Setting the Hotspot Links................................................................... 5-10
Testing the Links.................................................................................. 5-13
Updating the Button Links........................................................................... 5-14
Adding the Buttons to the Tours Page....................................................... 5-15
© Guided Computer Tutorials 2009 C-3

Chapter 6: Site Assets and Library Items

The Assets Panel............................................................................................... 6-1
Using the Assets Panel.................................................................................... 6-2
Loading the Prepared Page................................................................... 6-2
Applying Assets...................................................................................... 6-3
Adding a Background Image................................................................ 6-5
Inserting the World Image................................................................... 6-6
Using Library Items......................................................................................... 6-8
Creating an Update Message .............................................................. 6-8
Using the Library Item ....................................................................... 6-11
Editing the Library Item . ................................................................... 6-12
Creating a Navigation Library Item . ......................................................... 6-14
Placing the Links Table in the Library Items ................................ 6-14
Inserting the Library Item in Other Pages...................................... 6-16
Adding the Links Table to the Airlines Page................................... 6-18
Updating the Navigation Bar............................................................. 6-19
Looking at the Library Items........................................................................ 6-21
Chapter 7: Absolute Position Elements

Creating the Specials Page.............................................................................. 7-1
Creating a Title Element................................................................................. 7-1
Creating Some Image Tags............................................................................. 7-6
The First Image Tag................................................................................ 7-6
The Second Image Tag........................................................................... 7-8
The Third Image Tag.............................................................................. 7-9
Moving AP Element Tags............................................................................. 7-10
Placing a Table in an AP Element Tag........................................................ 7-11
Adding a Background to the Page............................................................... 7-15
Adjusting the AP Element Stacking Order............................................... 7-16
Converting AP Elements to Tables............................................................. 7-18

Contents
Chapter 8: Using Templates

Creating the Template..................................................................................... 8-1
Creating the Table.................................................................................. 8-2
Merging Cells.......................................................................................... 8-2
Saving the Page as a Template....................................................................... 8-4
Completing the Template............................................................................... 8-5
Adding a Logo......................................................................................... 8-5
Adding Navigation Buttons.................................................................. 8-7
Adjusting the Cell Heights.................................................................... 8-8
Setting Editable Regions in the Template.......................................... 8-9
Using the Template........................................................................................ 8-11
Applying the Template........................................................................ 8-11
Inserting the Content.......................................................................... 8-12
Adding E-Mail Links............................................................................ 8-13
Creating the Packages Page................................................................ 8-15
Creating the Airlines Page.................................................................. 8-16
Linking the Buttons....................................................................................... 8-18
Checking the Template Pages...................................................................... 8-20
Advantages of Templates.............................................................................. 8-20
Setting the Background....................................................................... 8-20
Adjusting the Content Region........................................................... 8-21
Chapter 9: Creating Forms

Starting the Page............................................................................................... 9-1
Inserting the Form Tag.................................................................................... 9-2
Entering the Text of the Form........................................................................ 9-2
Adding the Sub-Heading...................................................................... 9-2
Entering a Message................................................................................ 9-4
Adding a Horizontal Rule..................................................................... 9-6
Entering the Customer Details...................................................................... 9-6
Inserting the Table................................................................................. 9-6
Entering the Sub-headings................................................................... 9-7
Inserting Text Fields............................................................................. 9-10
Inserting a Pop-Up Menu Field......................................................... 9-13
Shading the Sub-Heading................................................................... 9-15
Previewing the Form............................................................................ 9-16

Entering the Travel Packages....................................................................... 9-17

Inserting the Table............................................................................... 9-17
Entering the Sub-Headings................................................................ 9-18
Inserting the Destination Fields........................................................ 9-19
Entering the From Fields..................................................................... 9-20
The Inserting the Duration Fields..................................................... 9-21
Splitting Cells........................................................................................ 9-23
Adjusting the Field Headings............................................................. 9-24
The Reply Section........................................................................................... 9-25
Inserting Check Box Fields................................................................. 9-26
The Submit and Reset Buttons.......................................................... 9-29
Formatting the Replay Heading......................................................... 9-30
Naming the Form........................................................................................... 9-32
Adding the Orders Page to the Template.................................................. 9-33
Chapter 10: Navigation Bars

Setting the Navigation Bar Files.................................................................. 10-1
Adjusting the Template....................................................................... 10-1
Adjusting the Index Page.................................................................... 10-2
Creating the Sydney Page................................................................... 10-4
Creating the London Page.................................................................. 10-5
Creating the Cape Town Page............................................................ 10-6
Inserting the Navigation Bar........................................................................ 10-7
Inserting the New York Buttons........................................................ 10-8
Setting the Navigation Bar Direction.............................................10-10
Inserting the Sydney Buttons...........................................................10-11
Inserting the London Buttons..........................................................10-12
Inserting the Cape Town Buttons...................................................10-13
Updating the Template......................................................................10-13
Adjusting the Navigation Bar..................................................................... 10-14
Editing Navigation Bar Elements.............................................................. 10-15
DreamWeaver Assignment 10......................................................... 10-17

Contents
Chapter 11: Checking and Uploading Web Files

Browser Checks.............................................................................................. 11-1
Other Reports................................................................................................. 11-3
The Link Checker........................................................................................... 11-5
Cloaking........................................................................................................... 11-6
Cloaking the Library Folder............................................................... 11-6
Cloaking File Types.............................................................................. 11-7
Uploading Files............................................................................................... 11-8
Adjusting the Site Settings.................................................................. 11-8
Uploading the Site Files.....................................................................11-11
Changing Some Files.........................................................................11-13
Synchronising Files............................................................................11-14
DreamWeaver Project 1
Harrison Autos ............................................................................................P1-2
About Harrison Autos.........................................................................P1-2
Small Cars..............................................................................................P1-2
Family Cars............................................................................................P1-3
Sports Cars............................................................................................P1-3
Test Drive Booking Form....................................................................P1-3

Module 2 Contents
Chapter 12: Cascading Style Sheets
Cascading Style Sheets.................................................................................. 12-1
Internal Custom Styles.................................................................................. 12-1
Starting a Blank Page........................................................................... 12-1
Creating the Main Heading Style...................................................... 12-2
Creating the Body Text Style.............................................................. 12-4
Looking at the Code............................................................................. 12-5
The CSS Styles Panel............................................................................ 12-6
Editing Styles......................................................................................... 12-7
Looking at the Styles...................................................................................... 12-8
External CSS Styles........................................................................................ 12-8
Loading the Sample Page.................................................................... 12-8
Creating a CSS Style Sheet................................................................. 12-9
Creating a Second Style.....................................................................12-11
Applying the Styles.............................................................................12-12
Adding a New Style............................................................................12-13
Adjusting the Styles............................................................................12-15
Saving the CSS File.............................................................................12-16
Looking at the Travel Tips Code.....................................................12-16
Attaching Styles to Other Pages......................................................12-17
Placing Styles in Templates........................................................................ 12-18
Opening the Template.......................................................................12-19
Attaching the Styles.css File to the Template................................12-19
Opening a New Page..........................................................................12-20

Contents
Chapter 13: Laying out a CSS Based Page

Starting a New Site......................................................................................... 13-1
Saving the Pages.............................................................................................. 13-4
Attaching the CSS File to the Index Page.................................................. 13-5
Setting the DIV Tags...................................................................................... 13-6
Looking at the Code............................................................................. 13-7
Inserting the Banner DIV Tag............................................................ 13-7
The Navigation DIV Tag..................................................................... 13-9
The Columns DIV Tag.......................................................................13-10
Inserting the Nav2 Nested DIV Tag...............................................13-11
Inserting the Content Nested DIV Tag..........................................13-12
Setting the Nav2 and Content Styles........................................................ 13-13
The Nav2 Style.....................................................................................13-13
Setting the Content Style..................................................................13-16
Chapter 14: Adding Content to CSS Pages

Inserting the Company Logo....................................................................... 14-1
Opening the Page................................................................................. 14-1
Inserting the Image.............................................................................. 14-1
Checking the Image Dimensions...................................................... 14-4
Inserting the Navigation Content............................................................... 14-5
Inserting the Home Button................................................................ 14-5
Inserting the Packages Button........................................................... 14-6
Inserting the Other Buttons............................................................... 14-7
Inserting the Nav2 Content.......................................................................... 14-9
Entering the Text.................................................................................. 14-9
Adding Some Dummy Links............................................................14-10
Inserting the Content Text......................................................................... 14-11
Copying the Text................................................................................14-11
Pasting the Text..................................................................................14-11

Chapter 15: Formatting CSS Pages

Setting Tag Styles............................................................................................ 15-1
The Body Tag......................................................................................... 15-1
Changing Some Text............................................................................ 15-3
Creating the H1 Style........................................................................... 15-4
Defining Class Styles...................................................................................... 15-5
Defining ID CSS Styles.................................................................................. 15-6
The Banner DIV Tag............................................................................ 15-7
The Navigation DIV Tag..................................................................... 15-8
The Columns DIV Tag......................................................................... 15-9
Formatting Link Text.........................................................................15-10
Editing Styles................................................................................................. 15-13
The Nav2 Region.................................................................................15-13
The Link Text.......................................................................................15-14
The Content Style...............................................................................15-15
Changing a Style Property................................................................15-15
Saving the Page as a Template................................................................... 15-16
Saving as a Template..........................................................................15-16
Setting the Editable Region..............................................................15-18
Using the Template............................................................................15-19
Editing the Template.................................................................................... 15-21
Understanding the CSS files....................................................................... 15-22
Chapter 16: Using Behaviours

The Behaviours Panel.................................................................................... 16-1
Popup Messages.............................................................................................. 16-2
Setting up a Page.................................................................................. 16-2
Popup Dialogue Boxes......................................................................... 16-4
Status Bar Messages............................................................................. 16-5
Deleting a Behaviour..................................................................................... 16-8
Displaying an Enlarged Image..................................................................... 16-8
Creating a New Page............................................................................ 16-8
Adding the Behaviour.......................................................................... 16-9

Contents
Validating Forms........................................................................................... 16-11

Creating the Orders Page..................................................................16-11
Setting the Validation Behaviour....................................................16-13
Setting Required Fields.....................................................................16-13
Setting an eMail Field........................................................................16-15
Validating Numbers...........................................................................16-17
Effect Behaviours.......................................................................................... 16-19
Browser Versions.......................................................................................... 16-21
Chapter 17: Editing and Importing Tools

Starting the Page............................................................................................. 17-1
Editing Images................................................................................................. 17-2
Cropping an Image............................................................................... 17-3
The Resample Tool............................................................................... 17-4
Brightness and Contrast...................................................................... 17-5
The Sharpen Tool................................................................................. 17-6
Importing Microsoft Word Documents.................................................... 17-6
Opening the Prepared Word Document......................................... 17-7
Copying the Microsoft Word Text.................................................... 17-7
Pasting the Text into DreamWeaver................................................. 17-7
Moving the Image................................................................................ 17-9
Adding a Word Table to the Page................................................................ 17-9
Copying the Table................................................................................. 17-9
Pasting the Table into DreamWeaver.............................................17-10
Adjusting the Table............................................................................17-11

Chapter 18: Inserting Media

Creating a Page............................................................................................... 18-1
Inserting Smart Photoshop Objects........................................................... 18-2
Inserting the Object............................................................................. 18-2
Adjusting the Image............................................................................. 18-4
Editing Images....................................................................................... 18-7
Flash Animations............................................................................................ 18-9
Inserting the Animation...................................................................... 18-9
Playing the Animation.......................................................................18-10
Resizing the Animation.....................................................................18-11
Flash Video.................................................................................................... 18-12
Importing the Video..........................................................................18-12
Setting the Skin...................................................................................18-13
The Final Settings...............................................................................18-14
Previewing the Video.........................................................................18-14
Chapter 19: Creating Menus and Tabbed Panels

Popup Menus.................................................................................................. 19-1
Saving the Prepared Pages.................................................................. 19-1
Adjusting the Template....................................................................... 19-2
Inserting the Popup Menu.................................................................. 19-3
Adjusting the Menu Buttons.............................................................. 19-3
Adjusting the Popup Menu................................................................ 19-5
Adjusting the Third Tier Menu.......................................................... 19-6
Saving the Template............................................................................. 19-6
Previewing the Page............................................................................. 19-7
Formatting the Menu........................................................................... 19-8
Tabbed Panels............................................................................................... 19-10
Inserting the Tabbed Panel...............................................................19-10
The London Tab..................................................................................19-10
The Paris Tab.......................................................................................19-12
Previewing the Page...........................................................................19-13
Adjusting the Tabbed Panels............................................................19-14

Contents
Chapter 20: Commands and Snippets

Creating Commands...................................................................................... 20-1
Creating a Table Command......................................................................... 20-1
Formatting the Table............................................................................ 20-2
Saving the Table Command............................................................... 20-4
Using the Table Command................................................................. 20-5
Clearing the History Panel........................................................................... 20-7
Formatting Image Sizes................................................................................. 20-7
Setting the Image Size......................................................................... 20-7
Creating the Image Size Command.................................................. 20-8
Applying the Command...................................................................... 20-9
Managing Commands................................................................................. 20-10
Using Snippets.............................................................................................. 20-10
Preset Snippets....................................................................................20-10
Creating Your Own Snippets...........................................................20-12
Using the Snippet...............................................................................20-15
Adding Images to Snippets...............................................................20-15
DreamWeaver Project 2
Stewarts Real Estate . ..................................................................................P2-2
About Stewarts Real Estate................................................................P2-2
Current Property List..........................................................................P2-3
New Releases.........................................................................................P2-3
Inspection Form...................................................................................P2-4


Chapter
1
Introduction to DreamWeaver CS4
The internet (or world wide web) is basically a series of server computers connected by a
backbone of cables or satellite links. When you create a web site you post the site to one
of the server computers so that others connected to the internet can access it.
Many popular programs have web page creation facilities built into them. For example,
you can produce web pages using Microsoft Word, Adobe InDesign, Quark Express,
FileMaker Pro, Microsoft PowerPoint, etc. However, when professional web pages are
required a program specifically developed for web page creation provides better results.
Some specific web page authoring programs are Adobe DreamWeaver and Microsoft
Expression.
Adobe DreamWeaver CS4 is a program that allows internet sites to be created. It is
basically a word processor with specific tools to make sites easier to develop and
maintain.
Design Considerations
When creating an internet site there are some design considerations that should be kept
in the back of your mind. These include:
• Modems can be slow so the opening of an internet site may not be immediate on
some people’s computers. You should always be thinking about the affect any page
item will have on how fast that page will open on the internet.
• Home pages (or Title Pages - the first page that is opened) should not have too
many graphics which slow down the opening of the page or distract the user.
• There are 216 colours that are shared by the Windows and Macintosh operating
systems so you should try to stick to just those colours.
• Don’t use uncommon fonts as the viewer of your site may not have those fonts
installed in their system. The most common fonts are TIMES, TIMES NEW ROMAN,
ARIAL and HELVETICA.
• Try to break the site up into separate linked pages rather than one page that scrolls.
© Guided Computer Tutorials 2009 1-1

Types of Graphics
There are two main types of graphics used in web pages:
• GIF (Graphic Interchange Format) which is limited to 216 colours. It is mainly used
for clipart.
• JPEG (Joint Photographic Enhancement Group) which is mainly used for
photographs. It is a higher resolution format, but the graphic information is
compressed.
Backgrounds and Text

Always try to ensure that text in your web page is easy to read. If you use a dark
background set the text to a light colour. If you use a light background set the text to a
dark colour.
Planning the Navigation

When creating an internet site it is important to plan the site carefully. In particular,
you should plan how the viewer will navigate from page to page. Some things that you
should do are:
• Work out how the home page can load quickly.
• Work out where you want the user to be able to go from the home page. Draw a
STRUCTURE DIAGRAM, for example:
About Us
Search
Home Page Products Catalogue
Ordering
News & Reviews
• Decide how the navigation links will be provided. Will both text and graphics be
provided to allow the user to move from page to page?

1-2 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1
The DreamWeaver Screen

1 Load DREAMWEAVER cs4 and you will receive the following WELCOME screen. Its
sections have been labelled:
Open Documents Create new files Training videos
Help files Training Tips
2 Click on HTML under the CREATE

NEW column to start a blank page.
3 The DREAMWEAVER work page will open. Look at the labelled sections of the
diagram at the top of the next page and refer to the diagram until you are fully
familiar with the different screen sections.

Document Toolbar Menu Bar Application Bar
Document Window Panel Group

or Work Page
Status Bar Properties Inspector
NOTE: There may be other panels on your screen depending on who

has used the program before you.
A The Screen Views

DreamWeaver provides a range of different screen views to suit the type of project you
are doing. The default setting is DESIGNER view.
1 Click on the arrow next to the VIEW

box in the APPLICATIONS BAR and
select CLASSIC.

2 The screen adjusts to the previous version of DreamWeaver (CS3), which may suit
people who are used to using that version of DreamWeaver.

box in the APPLICATIONS BAR again
and select DESIGNER to return to the
DEFAULT DreamWeaver screen.
NOTE: If you make changes to your screen, you can always quickly
return to the default DreamWeaver screen by selecting the
DESIGNER option in the APPLICATION BAR.
B The Insert Panel

The INSERT panel is part of the PANEL GROUP at the right of the screen. It has all the
common DreamWeaver tools in a variety of categories.
1 Click on the arrow next to COMMON

in the INSERT panel and the
categories are displayed. Select the
LAYOUT category.

2 The LAYOUT tools are displayed.

You can scroll down the panel to see
more of them.
3 Look at some of the other categories

if you wish then return the INSERT
panel to the COMMON category.
4 Double click on the INSERT tab

and the INSERT panel is collapsed
providing more room for the other
panels in the PANEL GROUP.
5 Double click on the INSERT tab again

and the INSERT panel is expanded.

C The Document Window
The DOCUMENT WINDOW or WORK PAGE is the large white area of the screen. It is
where you insert your text and images.
Type in two sentences so that the
text is on two lines. Don’t press the
<enter> or <return> key at any stage.
NOTE: The DOCUMENT WINDOW acts as a word processor with text

wrapping to the next line if it won’t fit on the first line.
D The Document Toolbar

The DOCUMENT TOOLBAR is just above the DOCUMENT WINDOW. The buttons in
that tool bar allow you to view the HTML (HyperText Markup Language) code that the
program generates as you develop a page, add a title to the page, view the page in a
browser, use the view options, etc.

1 Move the pointer over the tools in

the DOCUMENT TOOLBAR and their
labels should be displayed.

2 Click on the SPLIT button and the

DOCUMENT WINDOW should be
Code View divided into two sections.
Design View
NOTE: i The top section, called CODE VIEW, shows the HTML code for
the sentences that you entered. The lower section, called
DESIGN VIEW, is the normal view which displays text and
objects as you enter them.
ii On the Windows system the HTML commands are displayed
within <>. On the Macintosh system the HTML commands
are displayed in dark blue.
iii Before programs like DreamWeaver were developed
internet sites had to be completely developed by entering
HTML commands.
3 In the CODE VIEW section click at

the end of the second sentence you
entered. It is the black text.
4 Enter another sentence.

5 If the text isn’t displayed in the

DESIGN VIEW pane, click in the pane
and the sentence will be updated in
that section.
NOTE: i If you want your screen to be entirely in CODE VIEW click on

the SHOW CODE VIEW button in the DOCUMENT TOOLBAR.
ii It is good practice to regularly look at the code being
generated by DreamWeaver so that you develop an
understanding of HTML.
6 Click on the DESIGN button in the

DOCUMENT TOOLBAR to return the
screen to its normal setting.
E The Properties Inspector

The PROPERTIES INSPECTOR is the panel at the bottom of the screen. It allows you to
format text and objects that you add to the DOCUMENT WINDOW. It adjusts to show the
formats of which ever object you have selected.

1 At the moment the PROPERTIES
INSPECTOR should be showing the
formats for text. You can change
fonts, font sizes, alignments, text
colour, etc.

2 Position the cursor at the end of the

last sentence.
3 Click on the HORIZONTAL RULE

button in the COMMON tools of the
INSERT panel.
4 A horizontal line should be added

below the last sentence, click on it.
5 The PROPERTIES INSPECTOR changes

to show the formats for the line. For
example, you can change the line’s
alignment, width and height or turn
its shading off.

F The Status Bar
The STATUS BAR is at the base of the DOCUMENT WINDOW just above the PROPERTIES
INSPECTOR. As you add objects to the DOCUMENT WINDOW the STATUS BAR displays
information about the objects and the size of the page. The following diagram labels the
sections of the STATUS BAR.

Selection and Set Window Size
Tag Selector Magnification tools menu
Document Size and

Estimated Download Time
1 The TAG SELECTOR shows a

hierarchy of tags (commands)
surrounding the current selection.
So any HTML commands used
near the horizontal rule (<hr>) will
be displayed. In this case just the
<body> tag is displayed.
2 Click on the <body> tag and the

whole contents of the DOCUMENT
WINDOW will be selected. It is a
quick way of selecting the entire
contents of a page.

3 Click on the <hr> tag (for

HORIZONTAL RULE) and just the
horizontal line should be selected.
4 Click on the SET MAGNIFICATION

box and the different zoom settings
are displayed.
NOTE: i The WINDOW SIZE POPUP MENU (next to magnification)

allows you to adjust the size of the DOCUMENT WINDOW.
ii The DOCUMENT SIZE AND ESTIMATED DOWNLOAD TIME gives
you an idea of how large your page is. As a general rule always
keep pages under 8 seconds download time.

G The Panel Group
At the right of the screen is the PANEL GROUP. It contains individual panels that can
be expanded, collapsed, added to, or removed from, the panel group. The panels are
‘docked’ into position so that the screen does not become too congested.
1 Double click on the CSS STYLES

panel tab and the panel should be
expanded.
2 Further options within a panel are displayed in a menu which is accessed from a
button at the top right of the panel.
3 Click on the CSS STYLES’ OPTIONS

MENU button and options (or
shortcuts) for that panel will be
displayed.
4 Double click on the CSS STYLES panel tab again to collapse the panel.

5 Click on the double arrows at the

top right of the PANEL GROUP and
the whole panel group is collapsed
to icons.
NOTE: Collapsing the PANEL GROUP can provide a larger document

window to work on your page design.
6 Drag the CSS STYLES panel onto

the document window to remove it
from the panel group.
7 The CSS STYLES panel becomes a

floating panel.
NOTE: You could click on the CSS STYLES panel’s CLOSE BOX (x) if you
wanted to the remove the panel from the screen.

8 To dock the panel back into the

PANEL GROUP simply drag it by its
label back to just under the INSERT
panel.
NOTE: i You will use a number of panels from the PANEL GROUP as
you progress through these chapters. For example, there is a
panel that manages all the assets of a web site, another that
stores all the steps you do, etc.
ii Panels that are not in the PANEL GROUP can be added to the
screen from the WINDOW menu.

box in the APPLICATION BAR and
select DESIGNER to return the screen
to the default setting.

Creating a Site
One of the main attributes of DreamWeaver is its ability to manage all the resources
that you use within your web site. This includes all the graphics, links, tables, layers, etc.
In order for the program to keep track of everything you use, a SITE must be created.
Basically, this tells DreamWeaver the location of the root (or parent) folder and the
location of all the files that are stored within that root folder.
Over the next few chapters you will develop a web site for a company called TravelWise
which is an online travel agency. In order to do this, a root folder needs to be created in
your STORAGE folder and DreamWeaver told how to navigate to that folder.
A Creating a Root Folder
1 Click in the CLOSE BOX (x) of the

UNTITLED page tab and select NO to
the SAVE CHANGES warning.
2 Open your STORAGE folder outside DreamWeaver and create a NEW FOLDER called
TRAVELWISE.
3 You could create other folders within this root folder now, however, we will add
them as we need them.
B Entering the Site Settings

DreamWeaver will guide you through the settings it requires to set up a site for the
TravelWise company.
1 Expand or reload DreamWeaver.
2 Create a NEW HTML document.

3 Display the SITE menu and select NEW SITE.
4 Click on the BASIC tab at the top of

the SITE DEFINITION dialogue box.
NOTE: Internet service provider settings will not be entered at this

stage, just the basic site information will be established.
5 Name the site TravelWise followed

by your initials. For example:
TravelWise ab
6 Enter a URL for the site if you wish,

for example:
www.travelwise.com.au
and click on the NEXT button
NOTE: By adding your initials to the site name you will be able to
identify your site from other students that may be using the
same computer at a different time.

7 Select NO at this stage to the

question about working with the
server technologies, then click on
the NEXT button.
8 For how you will be working with

files, the most common way is
to adjust files on your computer
then upload them to the service
provider’s server (hard drive) when
ready, so select the first option.
9 You need to tell the program where

your root folder is located. Click on
the FOLDER ICON and navigate to
your TRAVELWISE folder.
10 On the Windows system open the folder and click on SELECT. On the Macintosh
system click once on the folder and select CHOOSE.
11 The path to the folder should be

added to the settings. Click on
NEXT.

12 You will be asked how to connect to your remote server. This is where you would
enter your internet service provider settings.
13 Set the drop down box to NONE

at this stage and click on the NEXT
button.
14 You will be provided with a

summary of the settings that
you entered. Click on the DONE
button.
NOTE: You can always go back and update the settings at a later date
by selecting MANAGE SITES from the SITE menu and then
selecting EDIT.

15 The site and folder should be

displayed in the FILES panel within
the PANEL GROUP.
C Adding a Page to the Site

You are now ready to start building the site. The first thing you should do when starting
a page is save it in the root folder of the site. In this case that folder is your TravelWise
folder. You can add folders within the root folder if you prefer to have a separate folder
for pages. To see how to add pages to the site a CONTACT US page will be saved.
1 If you don’t have a blank page on the screen, create a new HTML document.
2 Display the FILE menu and select SAVE AS.
3 The program should automatically access your TRAVELWISE folder. If it doesn’t,
navigate to your folder.
4 Enter the FILE NAME for the page:
Contact (on Windows systems)
Contact.html (on Macintosh systems)
NOTE: i It is good practice with HTML to not use spaces in file names.
If you want to use more than one word in a file name, link the
words with _. For example: Contact_us.
ii Avoid using mathematical symbols in file names.

5 Click on SAVE to save the page and it

should be added to your FILES panel.
D Page Titles
Pages should always be given a title which is then displayed in the browser when users
open the page.
1 Highlight the text in the TITLE box of

the DOCUMENT TOOLBAR and enter:
Contact TravelWise

2 Click in the DOCUMENT WINDOW
and add the text message:
This page is under construction.
3 Notice that there is an asterisk next

to the page name in the PAGE TAB.
This tells you that the page is not
fully saved.
4 Save the page by pressing CTRL+S or COMMAND+S and the asterisk disappears.
NOTE: You can use the top left box of the FILES panel to swap the
screen to a different site. This allows you to be develop two or
more sites at the same time.

DreamWeaver Assignment 1
You have two options at this stage. Either do the Assignments at the end of each chapter
to build your own web site, or leave the Assignments and do your own Projects at the
end of Chapters 11 and 20. Check with your teacher as to which approach you need to
take.
If you are developing a site at the end of each chapter you need to choose a topic for
your web site. It could be for a sports or social club you are a member of, about a famous
person or group, or an information page about a topic you are interested in.
The way these instructions will operate is that each chapter will introduce new concepts
for the TRAVELWISE site and the Assignment at the end of the chapter will ask you to use
the skills you have learned to create similar pages in your own site.
1 In your STORAGE folder create a folder for your site.

2 Load DreamWeaver and use NEW SITE from the SITE menu to insert the settings for
the site.
3 Start a new BASIC HTML PAGE.
4 Give the page a title then save the page.
5 Add an Under Construction message.
6 Ask your teacher to check your completed page and site.


Learning Adobe DreamWeaver CS4 - Introduction

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Learning Adobe DreamWeaver CS4 - Introduction

Uploaded by

Copyright:

Available Formats

Guided Computer Tutorials

GUIDED COMPUTER TUTORIALS

This product is available in Single or Multi User versions.

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

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

First published 2009

ISBN: 1 921217 74 X Module 1

Chapter 2: Entering Text and Graphics

© Guided Computer Tutorials, 2009 C-1

Wrapping Text Around Images................................................................... 2-15

Chapter 3: Using Tables

C-2 © Guided Computer Tutorials, 2009

Chapter 4: Creating Links

Chapter 5: Anchor Points and Hotspots

© Guided Computer Tutorials 2009 C-3

Chapter 6: Site Assets and Library Items

Chapter 7: Absolute Position Elements

C-4 © Guided Computer Tutorials, 2009

Chapter 8: Using Templates

Chapter 9: Creating Forms

© Guided Computer Tutorials 2009 C-5

Entering the Travel Packages....................................................................... 9-17

Chapter 10: Navigation Bars

C-6 © Guided Computer Tutorials, 2009

Chapter 11: Checking and Uploading Web Files

© Guided Computer Tutorials 2009 C-7

C-8 © Guided Computer Tutorials, 2009

Chapter 13: Laying out a CSS Based Page

Chapter 14: Adding Content to CSS Pages

© Guided Computer Tutorials 2009 C-9

Chapter 15: Formatting CSS Pages

Chapter 16: Using Behaviours

C-10 © Guided Computer Tutorials, 2009

Validating Forms........................................................................................... 16-11

Chapter 17: Editing and Importing Tools

© Guided Computer Tutorials 2009 C-11

Chapter 18: Inserting Media

Chapter 19: Creating Menus and Tabbed Panels

C-12 © Guided Computer Tutorials, 2009

Chapter 20: Commands and Snippets

© Guided Computer Tutorials 2009 C-13

C-14 © Guided Computer Tutorials, 2009

© Guided Computer Tutorials 2009 1-1

Backgrounds and Text

Planning the Navigation

Home Page Products Catalogue

The DreamWeaver Screen

Open Documents Create new files Training videos

Help files Training Tips

2 Click on HTML under the CREATE

© Guided Computer Tutorials 2009 1-3

Document Toolbar Menu Bar Application Bar

Document Window Panel Group

Status Bar Properties Inspector

NOTE: There may be other panels on your screen depending on who

A The Screen Views

1 Click on the arrow next to the VIEW

3 Click on the arrow next to the VIEW

B The Insert Panel

1 Click on the arrow next to COMMON

© Guided Computer Tutorials 2009 1-5

2 The LAYOUT tools are displayed.

3 Look at some of the other categories

4 Double click on the INSERT tab