Anda di halaman 1dari 38

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


Learning Adobe DreamWeaver CS4

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
DreamWeaver Assignment 2............................................................. 2-23

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
DreamWeaver Assignment 3............................................................. 3-28

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
DreamWeaver Assignment 4............................................................. 4-13

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
DreamWeaver Assignment 5............................................................. 5-16

© Guided Computer Tutorials 2009 C-3


Learning Adobe DreamWeaver CS4

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
DreamWeaver Assignment 6............................................................. 6-22

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
DreamWeaver Assignment 7............................................................. 7-21

C-4 © Guided Computer Tutorials, 2009


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
DreamWeaver Assignment 8............................................................. 8-23

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

© Guided Computer Tutorials 2009 C-5


Learning Adobe DreamWeaver CS4

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 the Table............................................................................... 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
DreamWeaver Assignment 9............................................................. 9-35

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

C-6 © Guided Computer Tutorials, 2009


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 Assignment 11......................................................... 11-16

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

© Guided Computer Tutorials 2009 C-7


Learning Adobe DreamWeaver CS4

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
DreamWeaver Assignment 12......................................................... 12-21

C-8 © Guided Computer Tutorials, 2009


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
DreamWeaver Assignment 13......................................................... 13-18

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
DreamWeaver Assignment 14......................................................... 14-14

© Guided Computer Tutorials 2009 C-9


Learning Adobe DreamWeaver CS4

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
DreamWeaver Assignment 15......................................................... 15-24

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

C-10 © Guided Computer Tutorials, 2009


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
DreamWeaver Assignment 16......................................................... 16-23

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
DreamWeaver Assignment 17......................................................... 17-12

© Guided Computer Tutorials 2009 C-11


Learning Adobe DreamWeaver CS4

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
DreamWeaver Assignment 18......................................................... 18-16

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
DreamWeaver Assignment 19......................................................... 19-15

C-12 © Guided Computer Tutorials, 2009


Contents

Chapter 20: Commands and Snippets


Creating Commands...................................................................................... 20-1
Creating a Table Command......................................................................... 20-1
Inserting the Table............................................................................... 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 Assignment 20......................................................... 20-18

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

© Guided Computer Tutorials 2009 C-13


Learning Adobe DreamWeaver CS4

C-14 © Guided Computer Tutorials, 2009


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


Learning Adobe DreamWeaver CS4

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.

© Guided Computer Tutorials 2009 1-3


Learning Adobe DreamWeaver CS4

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.


1-4 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1
2 The screen adjusts to the previous version of DreamWeaver (CS3), which may suit
people who are used to using that version of DreamWeaver.

3 Click on the arrow next to the VIEW


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.

© Guided Computer Tutorials 2009 1-5


Learning Adobe DreamWeaver CS4

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.


1-6 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1
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.

© Guided Computer Tutorials 2009 1-7


Learning Adobe DreamWeaver CS4

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.


1-8 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1

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.

© Guided Computer Tutorials 2009 1-9


Learning Adobe DreamWeaver CS4

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.


1-10 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1
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.

© Guided Computer Tutorials 2009 1-11


Learning Adobe DreamWeaver CS4

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.


1-12 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1
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.

© Guided Computer Tutorials 2009 1-13


Learning Adobe DreamWeaver CS4

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.


1-14 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1

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.

9 Click on the arrow next to the VIEW


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

© Guided Computer Tutorials 2009 1-15


Learning Adobe DreamWeaver CS4

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.


1-16 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1
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.

© Guided Computer Tutorials 2009 1-17


Learning Adobe DreamWeaver CS4

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.


1-18 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1
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.

© Guided Computer Tutorials 2009 1-19


Learning Adobe DreamWeaver CS4

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.


1-20 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1

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.

© Guided Computer Tutorials 2009 1-21


Learning Adobe DreamWeaver CS4

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.


1-22 © Guided Computer Tutorials 2009