Getting to Know Dreamweaver

Dreamweaver is a graphical web page editing program that enables a web author to work
with text, images, and other web page elements. It is a WYSIWYG (What You See Is
What You Get editor. You will be able to create and edit web pages in much the same
wa! that desktop publishing programs enable !ou to create page designs "or print
publication. #sing Dreamweaver, !ou can design web pages without directl!
manipulating the $%&' code. Dreamweaver includes power"ul "eatures to help manage
all the related "iles "or a site, post those "iles to a remote web server, and keep the local
"iles the "iles on the remote server s!nchroni(ed.
User Interface- %he #ser Inter"ace is uni)ue Dreamweaver. You can choose among
three di""ered workspaces. You have a choice o" a *loating +anel, an Integrated
workspace, or the ,oder-St!le workspace. %he three workspaces don.t change the
capabilities or "eatures o" the Dreamweaver &/ program, but the! do change the wa! the
user controls are arranged on the computer screen. We are going to work with the
*loating +anel workspace. You can experiment with the other views.
Study the Diagram Below
%he Dreamweaver toolbar is relativel! straight"orward. %he buttons on the toolbar
provide shortcuts to several "re)uentl! used commands and options. Stud! the "ollowing0
Show Code View -- switches the Document window into ,ode view so !ou can
work with the raw text and $%&' tags o" the document "ile.
Show Code and Design View-- Switches the Document window into the split-
screen ,ode and Design view.
Show Design View--Switches the Document window into the WYSIWYG
Design view, which approximates the wa! the page will appear in a browser.
Page itle--1 convenient editable displa! o" the current document title.
!ile "anagement--1 drop-down list o" "ile-management commands.
Preview#De$ug in Browser--1 drop-down list o" available browsers "or
previewing and debugging pages.
%efresh--2e"reshes the Design view displa! a"ter !ou make changes to the
$%&' code in one o" Dreamweaver.s code windows.
%eference-- Displa!s context-sensitive re"erence in"ormation about the currentl!
selected ob3ect in the 2e"erence panel.
Code &avigation--1 drop-down list o" code-navigation commands.
View '(tions--1 drop-down list o" view options.
he Dreamweaver Document )indow %he Dreamweaver Document window is where
!ou design and edit web page documents, so this is where !ou.ll spend most o" !our
time. %he Dreamweaver window can displa! a web page using one o" three di""erent
views0
Design View--1pproximates the wa! a page will displa! in a browser
Code View--Displa!s the $%&' code "or the page
Code and Design View--+resents a split screen with the Design view in one
portion and ,ode view in the other
We will work with the ,ode and Design 4iew while in class. Get accustomed to noting
the code created "or di""erent "eatures !ou add to !our site. 5ote that the view onl!
approximates the page as it will appear in a web browser. Sometimes the view is
signi"icantl! di""erent. 6eep this in mind and view !our page in browsers o"ten. You
must be pa! attention to which pane o" the ,ode and Design view !ou enter text. You
can make changes in either pane. Work with $%&' in the top pane, and the editing tools
in the lower pane.
Document )indow Status Bar %his status bar is located at the bottom o" the document
window. %he status bar in the Dreamweaver Document window is more than a simple
in"ormational displa!7 it.s an interactive toolbox packed with the use"ul "eatures. 5ote
the "ollowing0
ag Selector--8nables !ou to identi"! (and select ob3ects in Design view b! the
$%&' tags enclosing them.
)indow Si*e Selector--Shows the current window si(e and enables !ou to set the
Document window to one o" several preset si(es.
Download S(eed Indicator--Shows an estimate o" how long it will take to
download and displa! the current web page.
+auncher--+resents a row o" icons representing Dreamweaver.s various panels.
#se the 'auncher to open panels and keep track o" which panels are active.