Dreamweaver Basics En

8/12/2019 Dreamweaver Basics En

1/33


2/33

i

(

r

I

SPH

o open Drcon. Yourhould find

here are tn your cosecure filep exactlyame locat

efore youile. Site Fil

emotely, aerver. You

ll UM studtilize this sttp://wwwll of yourttp://www-pace. If yo

f you needefinition.

o create a

he Managp:

eb Servic

amweaverome or offdobe Dre

o parts toputer usinransfer prohe same a

ion relativ

an uploades contain

d how theshould do

nts, facultpace in todpersonal.ebsite filesersonal.udo not ha

to work on

new Site Fi

Sites dial

es

in the Traice computmweaver i

our websitDreamwetocol). It iss the filesto each o

local files tinformation

will be tranhis before

and staff hys workshmich.edu/will be storich.edu/~pe an html f

web page

le, click the

gue windo

Open

ing Roomr may notyour Start

D

your locver, and uvery impoon your reher.

a web serabout whe

sferred baou create

ave free wop. The Uyouruniq

ed in the Pattyb/websolder, plea

on the SP

Manage S

will come

ng Drea

2615 Crosave a DreMenu ->

efining

al files, anload themtant that t

mote web

er, you me your files

k and forthour first w

bsite spacL of your pename/.blic/html face.htmlfe contact I

web serv

iteslink in

up. Click N

ream

mweave

roads), domweaver irograms.

Site

your remoto your ree files onerver. Th

st createare stored

between yb page.

e availableersonal we

lder of your instructioCS.

r, I will hel

our Files

ew. The Si

eaver

ble-click ton. If that i

te files. Yoote web spyour localt is, that t

hat Dreamlocally, wh

ur comput

to them frosite space

IFS spacens on chec

you set u

anel.

te Defini ti

MLi

asics

e Dreamws the case,

create locace via SFcomputerey are all

eaver callre they ar

r and the

ITCS. Wis

. Please seing your w

your site f

nwizard w

nage Sitesk

011

Page 2

averyou

al filesP

are setin the

a Sitestored

eb

will

eb

ile

ill come


3/33


4/33

SPH

Click Se

Click th

This neweb ser

S

S

eb Servic

rversin th

plus sign

t set of queer:

erver nam

onnect usi

FTP addre

sername is

assword is

oot directo

es

left-hand

(+)to add

stions refer

: does not

g SFTP

s of your

your UM

your Kerb

: Public/ht

olumn.

new serv

to the rem

atter

eb server i

niqname

ros pass

ml/

r.

te web ser

sftp.itd.u

ord

ream

ver you ar

mich.edu

eaver

using. Thi

asics

will be the

011

Page 4

ITS


5/33

SPH

Clicka m

eb Servic

the Test bssage sayi

es

utton. If youg that you

have entehave conn

ed all of thcted succe

ream

informatissfully. Cli

eaver

n in succek OKand t

asics

sfully, youhen Next.

011

Page 5

ill see


6/33

SPH

Do yqueschecNext

eb Servic

ou want totion if youking out m.

es

enable chill not be tkes it so th

ecking in ae only perat only one

nd checkion updatinperson can

ream

g out filesthis websiedit a sing

eaver

?Only sayite. Enablinle file at th

asics

yes to thischeckingsame tim

011

Page 6

in and. Click


7/33

SPH

ou will see

ou can mohis will brian also ha

eb Servic

a summar

dify your Sig up the Sie as many

es

of your Si

te Files defte Definitiodifferent Si

e Files defi

inition at andialoguete Files as

nition. If ev

y time by gox, where

needed.

ream

rything lo

oing to Maou can m

eaver

ks good, cli

age Siteske the desi

asics

ck Done.

in the Filesred change

011

Page 7

Panel.s. You


8/33

SPH

ocument

he Docum

reamweaview, the deesign viewhows a co

eb Servic

indow

ent Windo

er has thesign view,shows onlbination o

es

is your wo

ption to dind the codthe designthe two.

he Dre

rk area wh

play the De and desi, or the vis

mweave

re you cre

cument Win view. Thal layout o

ream

r Work

te and edit

ndow in thre code vieyour page

eaver

rea

your web

ee differentshows H

. The code

asics

age.

ways: theML only.and desig

011

Page 8

odeheview


9/33

SPH

o toggle besign. Y

ropertieshe Propertill change

eb Servic

tween theu can also

Panelies Panel pdepending

es

different viuse the sh

I

File

Thestruopewill

rovides deton the obje

Code

ws, go to Vrtcut icons

nsert Panehe Insertages, suchcommon liommon gr

Panel

Files Paneture of all t, move, co

alk more a

ils of the pt or text th

Co

iew andlocated at t

lanel allowas imagessted here)oup has ev

lis more thhe files anpy, renameout your S

roperties ot is select

de and Design

ream

select Codhe upper le

you to ins, forms andontains a

erything yo

an a file brdirectorieand deleteite Files lat

a selectedd.

Des

eaver

e, Design,ft of your s

rt web objmedia. Earoup of spwill need

wser. It allin your wefiles from tr in the wo

object. Th

gn

asics

or Code areen.

cts into yoh Group (cific objectoday.

ows you tobsite. Youhe Files Prkshop.

e Propertie

011

Page 9

d

r webuch ass. The

see theannel . We

Panel


10/33

t

SPH

ag Selecthe Tag Seorrespondhe Tag Sel

ocumenthe Toolbahortcut ico

ther PaneTherCodinforHTMdurin

orking wi

Occ

windthechoo

eb Servic

rlector is locto the areactor it will

oolbarallows yous that allo

ls

e are sever, Applicatiation abo

L tags, CSg this work

th Panelssionally, a

ow. This caage. To re-se Reset:

Change Views

es

ated in thewhere yourelect the c

to toggle byou to upl

al additionan, and Tagt Web Devsyntax, J

shop.

panel will b

n be annoyattach a pa

bottom leftcursor is prrespondi

etween vieoad and do

l panels onInspector.elopment.vascript sy

come det

ing becausnel, click th

D

corner of thlaced in thg area in t

s, and shwnload yo

the left sidhese panor exampl

ntax, and

ached fro

the panele Designer

cument Title

ream

e screen. IDocumente Docume

ws the titler file, and

of the wols are desi, the Codeuch more.

the works

is always obutton at t

Upl

eaver

t shows theWindow.t Window.

of the docreview the

k area, inclgned to proPanel alloWe will not

pace and b

n top, bloche top of th

Example of thecursor is placedinside of a table

Preview

ad/Download

asics

HTML Tagelecting a

ment. It alpage in a b

uding Desivide additios you to lo

cover thes

ecome a fl

ing your vie window,

Tag Selector won a linked ima.

/Debug in Bro

011

Page 10

s thattag in

so hasrowser.

n,nalok up

panels

oating

w ofnd

en thee that is

ser


11/33

t

i

f

t

SPH

hen you

anel (or g

n the leftne isAppackgroundifferent fon

he entire p

ont Famili

ou will notihis is beca

nstalled on

ont, for exaerif, fantashe user haelvetica, dhatever s

eb Servic

odify the

ing to Mod

ide of thearance (Ccolor, bacts and cologe.

es

ce that whuse the fontheirmachi

mple, "Aria, script anArial insta

isplay my tns-serif fon

es

age Proper

ify Pag

age PropeS).Here y

ground ims in differe

n you clickt you choone. You m

l, Helvetica,monospalled, displaxt in Helvet they have

Modifyi

ties by clic

Propertie

ties windoou can choge and all ft parts of y

the carrot fe will onlyy also noti

sans-serif.e. By choomy text inica. If theychosen as

ng Page

ing the Pa

), you ma

are severse the def

our marginour web pa

or page fonisplay in the that each

" Sans serising "Arial,Arial. If thedon't havetheir defau

ream

Properti

e Properti

e global se

l categoriult font-fafor your d

ge. This ju

t, there aree user's britem in the

is what isHelvetica,don't hav

Arial or Hellt.

eaver

es

es Button

ttings to yo

s of page pily, font si

ocument. Yt sets the

not many fwser if the

list contain

nown as aans-serif,"Arial, butvetica, disp

asics

in the Prop

ur docume

roperties.e, font coloou can stillefault setti

onts on theuser has ts more tha

font family,you are sahey havelay my text

011

Page 11

erties

t.

he firstr,usegs for

list.at fontone

as areing "If

in


12/33

I

i

I

t

SPH

ont Sizes

t is importaize of textisabilitiesis not treaf 10 pixels.

olors

t is importadark back

ext, you sh

ll computeolors aref a Browse

vailable Br

ou can cli

ackgroun

lease notever in rowround 100

eb Servic

nt to choosn your pagho need thed as such

nt to use higround, chuld select

r monitorsefined byr Safe hex

owser Safe

k the color

d Images

that backgand columpixels by 1

es

a measure, or a relae text to beby Internet

hly-contraose a lighthese, as g

an displayhex (six-code is 33

Colors by

wheel at th

round imagns. If you u0 pixels) a

ment of foionalfont sbigger in oExplorer.

ting foregrtext color.ay is the d

216 colorsaracter) coCFF. Dre

sing the c

top of the

es tile on ase a backgnd will blen

t size thatize. This isrder to reary using 1

und and bAlso, even

fault back

called thede containimweaver a

lor picker:

color picke

web page.ound imagd well whe

ream

allows useespeciallyit. While p

em instead

ckgroundif you wantround colo

rowser Sang 00, 33,llows you t

r to find ad

That mean, make sutiled.

eaver

s to increarue for useixels is desiof 12 pixel

olors. Fora white bar for the Ne

fe Colors.6, 99, CC,choose fr

itional col

that theye that it is

asics

e or decres with visiogned to rel, or .8em i

xample, ifkground ascape bro

Browser Sor FF. Anm the 216

rs.

isplay ovesmall (usu

011

Page 12

se thentional,stead

you used blackser.

fexample

andally


13/33

SPH

inks (CSS

he next thi

ere you c

Link

Visit

Roll

ActivYou canusers eduring

It is perflinks an

What isis a visu

eb Servic

)

ng you will

n change t

d color: th

d links: th

ver links: t

e links: the

also selectpect, but youse rollov

ctly acceppurple un

most imporal clue to u

es

define is th

e font face

color of lin

color of lin

e color of li

color of lin

an Underliu can chaer, or are u

able to leaerlined tex

ant is thaters that th

Links cat

, size and

ked text

ks to page

nks while t

s while the

e style. Thge it so thnderlined e

e these allfor visited

our visitedy have alr

gory.

olor of the

that the us

e user is r

are being

e default ist links arecept durin

on their delinks) but f

link color iady visited

ream

our link st

er has alre

lling their

clicked on

that links aever undemouse ro

aults (whicel free to p

different fra page.

eaver

tes:

ady visited

ouse over

re always ulined, are ollover.

h is blue unlay around

om your re

asics

them

nderlined,nly underli

derlined teith these

ular link c

011

Page 13

hiched

t forettings.

lor. This


14/33

It

SPH

eadings

he final ca

eadings atructure yo

eading 6ages.

n the imaghe font sizize so that

nce yourccept the

eb Servic

egory of P

e used forur web pag

eing the s

above I hs for headiusers can i

elections hhanges.

es

ge Propert

age titles,e. HTML of

allest. I rar

ve set thegs one thr

ncrease an

ave been

ies that you

section titleers six lev

ely use mo

eading fonugh three.decrease

ade, press

should set

s, sub-sectls of headi

e than thre

t, specifiedNote that Ithe size of

Applyto a

ream

are Headi

ion titles, ags, with H

e levels of

that all heagain usedthe text.

pply the se

eaver

gs (CSS).

d so on. Tading 1 be

eadings to

dings shouthe em m

tings to the

asics

ey are useing the larg

structure

ld be bold,asurement

page and

011

Page 14

d toest and

eb

and setof font

K to


15/33

t

SPH

age Titles

he last glolue space

nter the te

hatever yitles.

eb Servic

for the Tit

bal page prt the very

t that you

u enter th

es

le Bar

operty thatop of every

ant to app

re will app

ou will setbrowser w

ear in the ti

ar in the w

is the pageindow, as c

tle bar in th

b browser'

ream

title for thircled in th

e Dreamw

s title bar.

eaver

title bar. Tbelow ima

aver title b

se short b

asics

e title bar ige:

x:

t descripti

011

Page 15

s the

e page


16/33

i

SPH

ou can moould like t

n the Prop

- Crea- Cha- Cha- Crea- Adju- Inde- Crea

ormatting

he first thiindow andropertiesnd Preforhoose He

eb Servic

dify individchange arties Panel

te headingge the facge the colte bold, or it alignment text

te bulleted

Headings

g you wantype in theanel. Hereatted. Sincding 1in t

Font Type

Format

es

al sectionsd then ma

. Using the

and paragand size or of the textalic textt to right, c

or numbere

and Parag

to put on ypage title.you see yoe the levele Format

Font Size

Fo

of text bye the neceavailable t

raphsf the font

nter, or left

d lists

aphs

our web paext click t

ur choices:heading i

rop-down l

Color

rmattin

sing the Psary chanols, you c

ge is the pe drop-doparagraphthe highe

ist:

Bold/Italic

Bulleted/Nu

ream

Text

operties Pes by usinn:

ge title. Pun for the Fformat, anyt level, it s

Indent

bered List

eft, Center, Rig

eaver

nel. Firstthe option

t your cursormatpropof the six lould be us

t

asics

elect the tes available

r in the doerty in thevels of hed for page

011

Page 16

xt youto you

ument

dings,titles.


17/33

i

t

t

l

i

SPH

o go to theutton on y

n the Propnow that y

ou might any time yoecause inlock-levelf a paragr

ou can selake them

he alignmeanel.

ists

here are to create atart a newn umorder

ype your fihen you a

urn it off (o

ested List

et's say yoist. Type inour sub-lis

n the Propested list trdered list,our ordere

eb Servic

next line,ur keyboarrties Panelu wouldn't

lso notice tu hit the En

TML (thebjects onph break,

ect any woboldor italnt of headi

o types oflist, put yoparagraph.d list, click

rst list item,re finishedjust hit En

s

u want anyour orderto start. Hirties Panelan unordhit Enter (list. Here

es

ut your curd. Type innow sayswant two l

at there ister (or Retuanguage wpage, sucold down t

ds in youric by changgs or para

lists on wer cursor jusFor an ordthe Unord

and then hwith your lier twice).

nordered (d list, thent the Enter. Next, clickred list. Tyr Return) ais an exam

sor at the eour first paaragraph.vel-1 headi

a blank linrn) buttoneb pages aas headine Shift ke

aragraphing those praphs by cl

pages: Ort above whred list, clired Listic

it Enter (ort, hit Enter

ulleted) lisput your cuor Return)the Unorde in your u

nd click thele:

nd of yourragraph. NThis is becngs in a ro

between yn your keyre written igs and parwhile hitti

nd changeroperties inicking any

dered(or nere you wak the Ordeon in the P

Return) toand click th

nested insrsor at thebutton on yered Listinordered liOrdered L

ream

age title atice that th

ause Drea.

our page tiboard, you) there is agraphs. Ifg Enter (o

their font-fthe Propef the align

umbered)nt the list tored Listicroperties P

o the nexte Ordered

ide an ordnd of the li

our keyboaon in the Pt. When yis ticon in t

eaver

d click thee value of tweaver is

le and youwill skip dolways a blayou want aReturn).

ace, font-sties Panel.ment icon

nd Unordbe and hitn in the Prnel.

line. Your lior Unorder

red (numbne just abord, then cliroperties Pu want to rhe Properti

asics

Enter (or Re Format

smart enou

first paragn a line. T

nk space bline break

ize, color,You can chin the Pro

red (or bullEnter (or Rperties Pa

st will contid List icon

red) list asve where yk the Indenel to chaturn to you

es panel to

011

Page 17

eturn)propertygh to

aph.his istweeninstead

andangeperties

eted).eturn) tonel. For

nue.again to

a sub-u wantt Iconge therresume


18/33

SPH

We fUnfoquad

pastsuchTextDrea

1

eb Servic

requently nrtunately, druple the fil

d along wias curly qu

should nevmweaver g

. Import a

If you wayour curmenuan

es

U

eed to copyoing so caue size, and

h the text.otes and e

er be copieives us two

Word Doc

nt to placeor where yd choose I

ing Tex

text fromses manycan only b

he worst odashes.

from Woralternative

ument

he entire cu want theport -> W

from M

icrosoft Wroblems. Hdisplayed

ffenders ar

and direc:

ntents oftext to go

ord Docu

ream

icrosoft

rd and pauge amouby Internet

e auto cor

ly pasted i

Word file in the pageent . You

eaver

ord

te it into Dts of junk cExplorer, g

ect while y

to Dream

nto your wand click till be prom

asics

eamweaveode that caet copied a

u type ch

eaver. For

b page, ple File droted to navi

011

Page 18

r.nnd

racters

tunately,

ase-down

gate to


19/33


20/33

Dreamweaver Basics 2011

SPH Web Services Page 20

Saving Pages

To save the web page you are working on, click the Filedrop-down menu and choose Save.Please note the following file naming conventionsfor the World Wide Web:

1. All web page files must end with the extension .htm or .html.2. Your default homepage must be named index.htm or index.html.3. Use all lower-case letters and numbers in your file and folder names.4. Do not use spaces.5. Do not use special characters like &, %, etc. Underscores (_), dashes(-) and

periods(.) are OK.

If you are saving your work to your personal space on the UM web server, you may notice that youalready have a file in your file list called index.html. It is fine to over-write this file. You cannot havetwo index files in your html folder, one named index.htm and the other named index.html. Youshould have only one default home page file.

Once you have your page properties and formatting set, an easy way to create secondary pages isto click the Filedrop-down menu and choose Save AsGive the page a new file name and editits content appropriately.


21/33

SPH

The text t

the f

theyou

Textbe cl

You

eb Servic

yperlink dhat you wa

ll URL of t

arget fieldo not want

that descriickable)

may leave

es

To addwant thPanel.

ialogue boxnt to be clic

e webpag

allows youthe link to

es the link

he Tab Ind

a link to anlink to ap

will open.kable in th

you want

to have thpen in a n

into the Titl

exandAc

dding L

ther web pear. Next,

ere you wiText f ield

o link to in

link open iw window,

e field(thi

ess Keyfi

ream

inks

age, first pllick the Lin

ill need to t

the Link fi

n a new wileave the

can be th

lds blank.

eaver

ace your ck icon on C

pe in the

ld

dow by charget field

same as t

asics

rsor whereommon In

osing _blblank.

he text you

011

Page 21

yousert

nk. If

want to


22/33

t

I

i

SPH

ut what ifhe text youttp://www.

f you need t

avigate to tn the Files

eb Servic

ou want towould likeph.umich.

o link to an

at file. Yoanel.

es

make text tctivated a

du) in the L

ther page i

can also cli

hat you haa link. Onink fielda

your site,

ck the Poin

e already tce the textd the title i

ou can clict to File ico

ream

ped link tois selected,nto the Titl

the folder

nand drag i

eaver

another wtype in the

Fieldin t

iconnext to

t to the pag

asics

bpage? Fifull URL (ee Properti

the link fie

you want t

011

Page 22

st select.g.s Panel.

d and

o link to


23/33

SPH

he Email Lail addres

ote: Emailpammers.

eb Servic

ink dialogus, and click

links are o

es

Emailaddr

instalclienthave

To adappe

box will oOK.

ten harvest

AnchorsCreatingyou wanhave to

Creating

To creatthe locati

Anchori

Add

Links aresses on yo

ed on theirwill open aspecified.

d an emailr. Next, cli

en. Type i

ed by robot

A

are links than Anchorthe link toreate a lin

a Named

a Namedon you wocon.

ng Ema

pecial linkur webpag

computer,new mess

link, first plk the Emai

the text th

s that sear

ding An

at jump tois a two-stump to in tto that loc

nchor

Anchor, plald like you

ream

l Links

that you cclickable.

hen theyge addres

ce your cuil Link icon

at you wan

h the web,

chors

specified lp process.he page (ntion (link t

ce the curslink to jum

eaver

n use to mIf your user

lick an emed to the e

rsor whereon Commo

t to be click

collecting

ocation witFirst, youme the anthe name

or in the Dp to. Then

asics

ake e-mailhas an em

il link, theimail addre

you want tn Insert P

able, and t

mail addre

in the samust indica

hor). Theanchor).

cument Wiclick on the

011

Page 23

ail client

emails you

e link tonel .

e e-

sses for

e page.e whereyou

ndow inNamed


24/33

I

t

SPH

fter clickinshort one-an now lin

inking ton the Docuroperties

he Link fiel

eb Servic

on the Naword nameto the anc

Named Aent windo

anel, typeif you na

es

med Anchfor the anchor.

nchorw, select thhe numbered your an

ricon, anhor in this.

e text yousign (#) folchor top).

Insert NamPress OK.

ould like alowed by th

ream

ed AnchoThe anch

ctivated ase name of

eaver

dialog boxr has been

a link. In tour ancho

asics

will appeanamed an

e Link Fiel(e.g. type

011

Page 24

. Typeyou

of thetop in


25/33

t

t

SPH

isplayed o

lways makon't insert

lways supsers with vse short, d

ormatting

nce insert

he image (l

ou may nore two way

he other is

eb Servic

your pag

e your imathem and t

ly alternatision disabiescriptive

Images

d, you can

eft, center,

tice that ims to makewith alignm

es

To inswindothe Ins

dialoglocateinsert tImportIt is agweb p

Alwayin file s

. I try to ke

es the sizeen resize t

text for yolities who cords for yo

use the to

right), mak

ages you inther conte

ent, as sho

In

rt images iin the locert Imagei

e box that. Browse the image i

ant Things

ainst U.S. cge and dis

make surize. The sp my imag

you want them.

ur imagesn't see yo

ur alternati

ls availabl

the image

sert into yot like texn in the fo

erting I

to your wetion you wcon in Co

ill allow yo the desirto the Doc

to Reme

opyright lalay them o

that your ialler the fil

es under 1

hem to dis

sing theAlr imagesue text.

to you in t

into a link,

ur page ar wrap arllowing ima

ream

ages

b page, pluld like thmon Inse

u search fd image filment Win

ber about

to take imn your own

ages aree, the faste0k.

lay before

tfield in thnderstand

he Properti

or place a

containedund your ige:

eaver

ce the cursimage inst Panel. T

r the file wand pressow.

Using Ima

ages frompages with

small botr it will dow

inserting th

propertieshat your i

es Panel to

order arou

in their owages. One

asics

or in the Drted. Next,is will ope

ere the imSelect. T

ges

omeone elout permis

in dimensload and b

m into you

panel. Thiages are

resize and

nd your im

paragraphis with tabl

011

Page 25

cument, click on

a

ge isis will

se'sion.

ions ande

r page.

helpsbout.

align

ge.

. Therees, and


26/33

t

SPH

hanging thimilarly, ch

he left.

eb Servic

e value ofanging the

es

heAl ignfivalue of th

ld to LeftAl ignfiel

ill make teto Right w

ream

t wrap aroill make tex

eaver

nd your imt wrap arou

asics

age on thend your im

011

Page 26

right.ge on


27/33

SPH

he Insertnd columnorder is, hcells cont

eb Servic

able dialogs it has, how much s

ent and the

es

To iWinthe I

ue windowwide it is,

ace there iedge of th

In

sert a tablow the loc

nsert Tabl

allows youwhether orbetweencell (cellp

erting

into yourtion you wicon in Co

to control anot it hasells (cellspdding), he

ream

ables

eb page,ould like thmmon Ins

ll aspects oborder, ancing), howder rows a

eaver

lace the cutable inse

ert Panel.

f your tabled if it does,much spand/or colu

The InserTable Di

Window

asics

rsor in Docrted. Next,

: how manhow thick te there isns, and m

tlogue

011

Page 27

mentclick on

rowshatetweenre. Text


28/33

i

t

t

SPH

nside headour table b

nce the dill now beour cursor

nce you inable and umount of c

ables bord

eb Servic

r rows andy entering

sired forminserted intin each cell

sert your ting the Proell paddinger.

es

columns isCaption.

t has beenyour Web

to add text

ble, you caperties Panand cell sp

automatic

specified ipage in thor images.

n make adel to makecing, the a

lly bolded

the InsertDocumen

itional chachange thelignment a

ream

nd center

Table dialoWindow.

ges to thenumber ofd width of

eaver

d. Have te

gue box, prou will the

tables forrows and cour table,

asics

t appear a

ess OK. Tn be able t

at by selecolumns, thnd the siz

011

Page 28

ove

e tableplace

ting the

of the


29/33

t

t

t

SPH

sing Drea

reamweav

o File -> N

ou can usext with yo

sing a Co

nce you hemplate fond choos

age. Chaell.

eb Servic

mweaver's

er comes

wyou will

any of ther own text,

nsistent P

ave gottenr other pagSave As

ge the con

es

Sample L

ith built in

see a list of

se sampleand add i

ge Design

your firstes in your

and save

tent appro

Lay

youts

ample pag

these sam

esigns toages.

for Multip

age formaeb site. A

it with a n

riately. Re

ing Out

e designs t

ple page la

reate your

le Pages

ted the water savingw file na

member to

ream

a Page

at you can

outs:

own web p

y you like ithe file, clie. Now yo

save the

eaver

use to set

ages. Just

t, you cank the Filehave a n

age title fo

asics

up your pa

eplace the

se it as adrop-downw file and

r the title b

011

Page 29

es. Go

sample

menua new

ar as


30/33

Iti

I

elect PreviBrowser

SPH

t is importahe contentn mind that

o previewcon in Bro

ew

eb Servic

nt to previewill be displinks will n

our docuser icon in

es

your siteayed apprt be active

ent, you mthe File To

Prev

in several bpriately. Yuntil the sit

st first selolbar and c

ewing Y

rowsers beu can pre

e is previe

ct a browshoose to E

ream

our Site

fore you poiew your ded or post

r. To do sit Browser

Previe

eaver

st your sitecument atd to a serv

o, click theList.

/Debug in Bro

asics

in order toany time, ber.

Preview/D

ser Icon

011

Page 30

ensureut keep

bug


31/33

t

t

SPH

fter the brreview/Deisplay the

nce youro a server

our Filesoth your loiles Panel

licking theolderand

ocal Foldhe Local Ftored on y

emote Sit

he Remothe server.

eb Servic

wser hasbug Icon iurrent doc

ite has beeo others m

anelis alcal and re.

Expand/Cone for the

rolder appeur comput

e

SiteappeUntil you c

es

een selectthe File Tment in th

n defined,ay have ac

ays visibleote files at

llapse buttRemote Si

rs on the rir or networ

rs on the lnnect to th

d or changolbar. Youprimary b

U

ou can puess to you

on the leftany time b

n will opente.

ght-hand sik.

ft-hand side server, th

ed, you cacan also powser.

loading

lish your sir web site t

ide of theclicking th

a Site Win

de of the w

e of the wine Remote

ream

preview thess the F1

Files

te. This mrough the

reamweave Expand/

dowwith t

indow and

dow and site side of

The Expan

eaver

e site by clikey on yo

ans you cInternet.

er work areollapse but

o panes,

ontains a l

ows a listhe window

/Collapse butto

asics

cking theur keyboar

n transfer

a. You caton at the t

ne for the

ist of the fil

f the fileswill remain

n

011

Page 31

to

our files

seep of the

ocal

s

tored onblank.


32/33

t

I

(

Re

SPH

o connectoolbar.

nce you hite and vicsing the G

hen you tncluding D

images, ex

eep in minopy over t

ote Site

eb Servic

to the serv

ve connece versa. Yt File(s)a

ansfer filespendent Fi

ernal style

d that whee most rec

Connect Butt

es

r and view

ted to the su can do td Put File(

to the servles means

sheets) will

you transfnt version,

on

the Remot

erver, youis by draggs)buttons

er, you willhat all the

also be tra

r files, youor the edit

Get File

Site, click

an transfering selectein the toolb

be asked ifiles depen

nsferred to

overwrite twill be los

(s) Put File(s)

ream

the Conne

files from td files fromr.

you want tent on the

the server.

he existingt.

eaver

ct button in

he Local Fone pane t

Include Dfile you are

file. Make

asics

the Site Fil

lder to theo the other,

ependenttransferrin

sure you d

011

Page 32

es

Remoteor by

iles.

not

Local Folder


33/33

Dreamweaver Basics 2011

Viewing Your Published Site

To view your published site, open a web browser and go tohttp://www-personal.umich.edu/~youruniquename/filename.html.

Documents

Dreamweaver Basics En