© Ms. Masihi

The Dreamweaver Welcome
Screen first opens when you
start Dreamweaver.

This screen gives you quick
access to previously opened
files, the ability to create new
files and templates, and
other information.

If you do not want this screen
to show, check the “Don’t
Show Again” box at the
bottom of the screen.
© Ms. Masihi
© Ms. Masihi

To create a new HTML
Document, click HTML
under Create New.

This opens
Dreamweaver in the
Design View (default)
with panels on the right,
menu bar and tabs on
top, and property
inspector on the
bottom of the
workspace if you are in
CLASSIC layout.

For all class lessons, we
will be using the
CLASSIC layout.
In the CLASSIC Layout the Insert Bar is located on the
top of the Dreamweaver Workspace and contains
several Tabs: Common, Layout, Forms, Data, Spry, Text
and Favorites.
 Each Tab contains different icons (representing
elements you can add to your web page) shown on
the line below the tabs.

© Ms. Masihi

The Common Tab contains some of the most
frequently used icons to insert links, table, email
link, named anchors, dates, and images.
© Ms. Masihi

You may customize the Insert Bar using the
Favorites Tab by adding the most commonly
used icons to the Favorites Tab.

Right click an icon and the Customize Favorite
Objects Dialog Box opens.
© Ms. Masihi



Select an item and Click >> to add an item to the
favorites tab.
Use the up and down arrows to move an icon up or
down.
Click Add Separator to add a separating line
between icons.
© Ms. Masihi
The Properties Inspector is a context-sensitive panel
located at the bottom of the workspace.
 The contents change depending on the item
selected on the page and whether you select HTML
or CSS setting.

© Ms. Masihi

The Properties Inspector is will create HTML inline
styles when you select HTML properties.

Inline styles should only be used for short
formatting specific to one area of your document.
© Ms. Masihi

Inline styles are stored in the body of your
document surrounding the affected page element.

If you want to change the format you must find
each area in your document and modify each
element.
© Ms. Masihi

Formatting using CSS will create
a CSS Rule which will create a
Rule in an Internal Style Sheet.

Using CSS Rules to format page
elements is the preferred way to
format page elements.

Internal Styles can be saved in
an External Styles File and
applied to multiple pages.
© Ms. Masihi

Across the top of the document workspace is the
Document Toolbar.

You may change how you view the page, title the
document, preview the page in a Web Browser, and
more.
© Ms. Masihi

You may view your web page in 3 ways – Design
View, Code View, or Split View.

Click the appropriate tab above the workspace.
© Ms. Masihi

© Ms. Masihi
Design View lets you
see the text, images,
and other objects
on the web page.

© Ms. Masihi
Code View shows
you the HTML code
which is used by the
Web Browser to
display your page
elements.

© Ms. Masihi
Split View divides
the screen in half –
showing you the
code in the top half
and the design
(visual layout) in the
bottom half.

You can type in a title for the
web page in the Title
textbox. Every page you
create should have its own
title.

This page title shows across
the top of the Browser
window and is used when
someone bookmarks the
page. (This is NOT the name
of the stored file on your
hard drive.)
© Ms. Masihi

The up and down arrows are used to upload and
download files to and from a web server.

The globe is used to preview the document in a
Web Browser.

The circular arrow in a circle is used to refresh a
page in Design View if you have made changes in
HTML code that have not appeared in the layout.
© Ms. Masihi
© Ms. Masihi

The Document
Window is where
you will be working
with images, text,
and other items in
your Web Page.

The Insert Bar and
the Menu Bar are
above the
Document
Window.
At the top of the Document Window is
the name of the file stored on disk.
This is the name you give the file when
you save it.
 The file name shows in the Path: and
must end in .html.
 The file name may be different from
the Page Title.

© Ms. Masihi
At the bottom of the Document Window is the Tag
Selector (also known as the HTML Markup Tree).
 This listing will change depending on the currently
selected item in the Document window.

© Ms. Masihi

Click on one of the tags to select a specific area of your web page.
© Ms. Masihi



On the right side are additional icons. Click the
Arrow to click and select an item on the page.
Click the Hand Tool to drag web page contents
around on the work area.
Click the Magnifying Glass to select the Zoom tool.
Click on an area of the web page to zoom in on
that area. Hold Alt and click to zoom out. Enter the
% of magnification or click the down arrow and
select preset zoom levels.
© Ms. Masihi

Panel Groups are on the
right side of the work area.

Each group has one or
more panels, indicated by
each Tab. Click the Tab to
bring that panel to the front.
© Ms. Masihi

Double Click the Tab to open
and close a panel group.
© Ms. Masihi

Click the double
arrows on the top right
side of all the panels
to collapse the panel
groups.

Click the arrow again
to expand the panel
groups.
© Ms. Masihi

To open a Panel
that is not already
open, click Window
and select the
panel to open.
© Ms. Masihi
You may rearrange panels,
panel groups, etc and save this
customized workspace.
 Click Window > Workspace
Layout > New workspace….
 In the Dialog Box that opens,
give the workspace a name
and then click OK to save the
setting.

© Ms. Masihi
© Ms. Masihi

You may change the
Dreamweaver
Workspace,
opening/closing, moving
panels, etc.

To return to default
Classic workspace, click
Window > Workspace
Layout > Classic.

The Menu Bar contains common Tool Menus –
File, Edit View, etc to access all of
Dreamweaver’s Tools.
© Ms. Masihi

The Application Bar
(immediately after the DW
logo) contains several quick
access functions – Layout,
Dreamweaver Extensions, and
Manage Sites. Click the black
triangle to quickly accomplish
the desired task or change
document layouts.
© Ms. Masihi

The Layout menu allows you to view both Code and
Design View by splitting the Document window
Vertically, Horizontally, place the Design on the left and
code on the right and view 2 parts of HTML code in
separate windows.
© Ms. Masihi
The Insert Bar contains several tabs, each of which
contain the most commonly used web page
elements.
 The Common Tab contains the most used page
elements - such as insert links, images, and tables.

© Ms. Masihi

Each Tab contains a different set of
Icons relating to that specific tab.
© Ms. Masihi
Below the workspace is the Properties Inspector which
contains context sensitive formatting options.
 For example, options available in the Properties
Inspector for Text (above) are different from options for
Images (below).

© Ms. Masihi

The Document Window
is the large workspace
in the middle of the
screen where you add
web page elements.
© Ms. Masihi

Above the
Document Window is
the Document
Toolbar.
© Ms. Masihi

The first area lets you
view your page in
Code View (HTML
Code), Design View
(WYSIWYG), or Split
View (half code,
half design).
© Ms. Masihi

The next area is
where you can add
a Title to your Page.

The Page Title is what
appears on the Blue
Bar at the top of a
Web Page when
viewed in a Browser.
© Ms. Masihi

Click the globe to
Preview the
document in a
Browser.

After making changes
to the HTML code, you
may click the Refresh
Button to refresh the
Design View.
© Ms. Masihi

Clicking the Visual
Aids Icon gives you
options for viewing
page elements that
you want to show or
hide.
© Ms. Masihi

If an asterisk (*) appears at the end of a file
name, changes have been made to the
document since the last save.

A file name without an ending asterisk has
had all page elements saved.
© Ms. Masihi

HTML Tags are
displayed in the Tag
Selector at the
bottom of the
Document
Workspace in the
Status Bar.

This Tag Selector is
also knows as the
HTML Mark Up Tree.

Clicking a Tag in this
line is an easy way
to select a page
element.
© Ms. Masihi

On the right part of
the Tag Selector are
the Select Tool
(arrow) which is
selected by default,
the Hand that allows
you to move your
page around without
using the scroll bar,
and a Zoom Tool.
© Ms. Masihi

You can increase or decrease
page magnification by typing
in different percentages or
clicking the down arrow and
selecting a preset percent.
© Ms. Masihi

Click the down arrow
by the width and
height dimensions will
allow you to resize
the window to see
how a page looks in
different sized
Browser windows.
© Ms. Masihi

The final section shows the approximate file size
and how long it would take the file to download
based on a 56K connection.
© Ms. Masihi


To change the download speed, click Edit >
Preferences > Status Bar.
You may also change the viewing Window
Size in this Dialog Box.
© Ms. Masihi
© Ms. Masihi

On the right side of the
workspace are Panels.

Single click a tab to bring it
to the front.

To Open and Close each
panel group, double-click in
the gray area on the right of
the tabs.

Within each group are
individual Panels,
identified by Tabs with
the Panel Name on the
tab.

Click a tab to bring that
panel to the front.
© Ms. Masihi
© Ms. Masihi

Each Panel has a
Panel Options Icon on
the top right corner (3
lines and 3 dots).

Click the Panel Option
Icon for an Options
Menu listing available
options for the current
panel.

Panel Options are
different for each
Panel.
© Ms. Masihi

Panels may be
collapsed by clicking
the double arrow at the
top of the panel groups.

Click the double arrow
again to expand the
panel groups.
© Ms. Masihi

After a web page has
been created, it
needs to be tested
using different
Browsers.

Each Browser
interprets the HTML
code slightly
differently, so it is
always a good idea
to view your web
page in several
different Browsers.

Click the Preview in Browser Icon above the
workspace.

Select the Browser, and view the web page as
interpreted by the selected Browser.
© Ms. Masihi

The Multiscreen
Preview button
allows viewing the
web page on
various handheld
devices.
© Ms. Masihi

You may add Browsers to
Dreamweaver’s Preview in
Browser.

Click Edit > Preferences >
Preview in Browser.
© Ms. Masihi

Dreamweaver will list the
currently installed
Browsers in the text box.
© Ms. Masihi

In the Preferences Dialog
Box, click the + to add a
Browser.

You may also designate a
Primary and Secondary
Browser.

By checking Preview using
temporary file, you can
preview the web page
without first saving the file.
© Ms. Masihi
© Ms. Masihi