Professional Documents
Culture Documents
Learning
Adobe
DreamWeaver
CS4
By Greg Bowden
PUBLISHED BY
www.gct.com.au
© Greg Bowden
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
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
DreamWeaver Assignment 12......................................................... 12-21
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
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.
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.
About Us
Search
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
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.
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.
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.
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.
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.
1-8 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1
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
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.
2 Further options within a panel are displayed in a menu which is accessed from a
button at the top right of the panel.
4 Double click on the CSS STYLES panel tab again to collapse the 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
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.
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.
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.
1-16 © Guided Computer Tutorials 2009
Introduction to DreamWeaver CS4 1
3 Display the SITE menu and select NEW SITE.
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.
10 On the Windows system open the folder and click on SELECT. On the Macintosh
system click once on the folder and select CHOOSE.
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.
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.
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
D Page Titles
Pages should always be given a title which is then displayed in the browser when users
open the page.
2 Click in the DOCUMENT WINDOW
and add the text message:
This page is under construction.
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-22 © Guided Computer Tutorials 2009