Curs: Adobe Dreamweaver CS5.

5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
La nceput va ve[ famarza cu spa[u de ucru, ar daca a[ ma ucrat
ntr-un at program Adobe CS, precum Photoshop CS5, atunc
cunoastet prncpu de ucru a panouror precum medu de ucru
(Workspace), nsa exsta mc dferen[e.

Welcome screen
Cnd pornnt DW, va aparea ecranu de bun vent ( Wecome screen )
prezentat n fgura de ma |os.


Wecome screen (ecranu de bun vent)

Wecome screen apare pe suprafa[a de ucru cu ocaza n[azar
programuu. Acesta este actvat automat, aadar va f afat cu ocaza
fecare pornr a u Dreamweaver. Daca nu dorm acest ucru, avem
posbtatea sa dezactvam n co[u dn stnga |os a ecranuu,
Copyright Link group 1 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
bfnd op[unea Don't show agan.
n partea stnga, Wecome screen afeaza, n forma de sta,
documentee a care am ucrat (Open a Recent Item), precum
op[unea pentru deschderea unu at fer (Open...), apo n m|oc
afeaza op[une pentru crearea fereor no (Create New) pentru
crearea unu ste nou precum ate op[un supmentare, n tmp ce n
partea dreapta, |os, apar nk-ure spre tutoraee vdeo pregatte de
Adobe, nk-ure spre materaee auxare (hep), atee.
Daca aegem crearea unu document nou sau deschderea
documentuu exstent, Wecome screen va dsparea medat, dar va
aparea dn nou daca nchde[ toate documentee (cu cond[a de a nu
f dezactvat). Toate op[une care sunt n e se pot gas n menure
drop-down, despre care vom dscuta n tmpu cursuu.

Spa?iul de lucru
n fgura de ma |os este ustrat spa[u de ucru DW cu un document
htm nou creat n Spt Vew. spa[u dvs. de ucru ar trebu sa arate
a fe, sau macar smar, ceu de ma |os, n func[e de rezou[a
ecranuu. Daca a[ schmbat medu de ucru, efectua[ urmator pa:
dn menu drop-down seecta[ op[unea Wndow > Workspace Layout
> Desgner. Astfe ve[ ntoarce setare standard, deoarece medu de
ucru poate arata func[ona compet dfert.

Copyright Link group 2 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
Spa[u de ucru

n spa[u de ucru se pot deoseb cteva unta[: Menu bar,
Application bar, Workspace menu, Document title bar,
Document toolbar, Browser navigation toolbar, Coding toolbar,
Property lnspector ceeate panour toobars, precum
afarea documentuu n ma mute modur (Desgn Vew, Code Vew
Spt, care este momentan afat care repreznta combnarea ceor
doua -Desgn Code Vew).
Code View - dupa cum spune numee, acesta afeaza codu
documentuu.
Design View - afeaza aspectu aproxmatv a pagn n
browser.
Copyright Link group 3 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
Split - afeaza smutan documentu n doua modur, mpar[nd
ecranu n doua par[.

La nceput este mportant sa men[onam ca Desgn Vew este destu de exact, dar nu poate afa ncodata att de rea pagna ca browseree. Aadar, DW adauga dferte eemente vzuae n cadru Desgn Vew ca a|utor n dezvotare, ar aceste deta
perturba, n mod nevtab, afarea. Dec, cnd dorm sa testam o pagna, aceasta trebue pornta testata n browser sau n Lve Vew nu trebue sa va baza[ doar pe Desgn Vew dn cadru Dreamweaver. n tmpu cursuu vom verfca vom
prezenta exempe ae acestor deta.
Menu bar ?i Application bar
n vrfu ferestre se gasete na de comanda (menu bar), char
daca sunte[ ncepator n ucru cu cacuatoaree, ve[ observa ca Menu
Bar este smar dn punct de vedere conceptua cu toate ceeate
programe care au op[une pentru deschderea, savarea, corectarea
fereor.
Imedat n dreapta Menu bar-uu se gasete Appcaton bar care
con[ne tre con[e cu menur drop-down. Cu aceste op[un va ve[
famarza ma trzu n tmpu cursuu.

Menu bar Appcaton bar

Menu bar con[ne menur drop-down, ar prn cc pe numee or se
deschd submenure cu ceeate op[un. Daca dam cc stnga pe o
comanda, rezutatu va vara n func[e de comanda seectata.
Daca comanda seectata nu are smbour dupa numee sau, DW o va executa medat.
Daca comanda are tre puncte dupa numee sau (...), se va deschde daog box setare supmentare.
Daca comanda are un trungh nga nume care ndca spre dreapta, va aparea un submenu, ar apo putem seecta una dntre comenze oferte dn submenu.
Copyright Link group 4 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a

n partea dreapta, ma|ortatea comenzor con[n o scurtatura de pe
tastatura. Prn urmare, comanda se poate apea foarte uor, prn
apasarea tasteor corespunzatoare de pe tastatura.

Dw Fe Menu

Fgura de ma sus preznta menu fe (fe menu) n care pute[
observa opera[e standard pentru ucru cu documentee, precum
New, Open, Save atee. Despre op[une dn acest menu, dar dn
atee vom dscuta n tmpu cursuu.
Copyright Link group 5 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a

Lucru cu panouri
Char daca putem accesa ma|ortatea comenzor prn ntermedu
menuror drop-down men[onate, DW ofera acces fac ma|orta[
comenzor prn ntermedu panouu. Panoure se pot afa, ascunde,
muta, aran|a conform propror dorn[e nevo.

Wndow Menu cteva panour

Menu drop-down Wndow afeaza sta tuturor panouror dsponbe.
De asemenea, sunt bfate panoure momentan actve. Ca a
ceeate comenz, panoure pot f apeate, respectv
actvate/dezactvate cu a|utoru scurtaturor enumerate de pe
tastatura. De exempu, panou lnsert se poate actva/dezactva cu
a|utoru scurtatur de pe tastatura Ctrl+F2.
n fgura de ma |os este afat un grup de panour. Putem observa ca
n acest grup se gasesc tre panour (Fes, Assets Snppets), dntre
Copyright Link group 6 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
care unu este actv afat (Assets). Panoure sunt reprezentate cu
a|utoru tab-uror panouu n care este scrs numee or. Unee panour
se actveaza dnd cc pe tab-ure or automat toate ceeate
panour dn acea grup devn nactve.

Grupu de panour - Panou Assets este actv n tmp ce
Fes Snppets sunt momentan nactve

Deasupra grupuu de panou se gasete Tte Bar. Daca prnde[ bara
de ttu (tte bar) cu tasta stnga a mouse-uu, ve[ muta ntregu grup
de panour (fgura de ma |os).

Copyright Link group 7 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
Mutarea grupuu de panour

Daca prnde[ tab-u unu anumt panou cu tasta stnga a mouse-uu,
pute[ muta panou dn grup (fgura de ma |os).

Copyright Link group 8 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
Separarea unu panou dn grup

Panoure putem sa e unm n grupur. Cnd prnde[ tab-u unu
panou cu tasta stnga a mouse-uu, putem adauga n grupu dort.
Este sufcent sa aduce[ panou n vrfu grupuu de panour, [nnd
Copyright Link group 9 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
apasata tasta stnga a mouse-uu, pna ce apare o rama deculoare
albastr n jurul grupului (fgura de ma |os). Dupa ce ebera[ tasta
mouse-uu, panou va f adaugat grupuu.
Daca dorm, putem schmba ordnea panouu ntr-un grup, prnznd
pur smpu tab-u panouu mutnd n stnga/dreapta.
Copyright Link group 10 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
Adaugarea unu panou n grupu de panour

Spre deosebre de stua[a precedent aratata cnd am returnat panou
n grup, panou se ma poate pune deasupra/dedesubt/nga grup
sau n panou ndvdua. Aadar, n exempu precedent a aparut o
rama de cuoare abastra n |uru ntreguu grup cu ocaza trager.
Daca mutam panou aducem, de exempu, pna a margnea de |os
a grupuu, va aparea cuoarea abastra nsa doar n partea de jos,
ca ne. Daca ebera[ tasta mouse-uu, panou se va ocaza sub grup
(fgura de ma |os).
De asemenea, un panou ([nnd tab-u) sau un grup de panour ([nnd
Tte Bar-u grupuu), se poate ataa (dock) pe margnea de |os a
ferestre DW, sau a unu at grup. DW ofera un spectru arg de
posbta[ n ceea ce prvete ordnea aspectu programuu.

Copyright Link group 11 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
Adaugarea panouu sub grup

n afara de mutare, panoure se pot mcora (mnmza). Daca dam
dubu cc pe tab-u panouu, vom mcora panou (sau grupu) a fe ca
n fgura de ma |os. Daca repetam dubu cc, vom returna panou a
dmensunea n[aa.

Copyright Link group 12 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
Mcorarea/marrea panouu (grupuu)

Daca dam cc stnga pe butonu Coapse n Tte Bar, vom mcora
grupu sau panou n con[e. Dnd cc pe con[a, deschdem/nchdem
panou (fgura de ma |os). Smar, dnd cc pe Expand, panoure
revn a starea deschsa.

Transformarea panouu (sau a grupuu) n con[a(e)

Butonu X dn co[u dreapta sus, nchde grupu de panour sau panou,
Copyright Link group 13 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
care se pot afa dn menu drop-down Wndows.
Pe nga toate setare men[onate, ma|ortatea panouror pot
schmba dmensunea. Este sufcent sa mergem a margnea
panouu cursoru mouse-uu se va schmba ntr-un smbo
corespunzator, a fe ca n fgura de ma |os.

Modfcarea dmensun panouu

Selectarea spa?iilor de lucru
Fecare dntre spa[e de ucru predefnte de ma |os este creat pentru
a a|uta anumte sarcn. Se pot seecta opt med predefnte, anume:
App Developer - seectnd acest spa[u de ucru, n partea
stnga apar ase panour: CSS Styes, AP Eements, Databases,
Bndngs, Behavors, Fes, Assets Snppets. Fereastra
documentuu se afa n m|oc, fara Property Inspector. Acest
spa[u de ucru se utzeaza pentru dezvotarea apca[or web.
Copyright Link group 14 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
App developer Plus - acest spa[u de ucru ofera un set de
panour smare n partea stnga precum App Deveoper
Layout. Fereastra documentuu se gasete n m|oc cu Code Spt
Vew cu Property Inspector sub cod. n partea dreapta sunt
afate unee panour n forma de con[e.
Classic - acest Layout este ce ma smar spa[uu de ucru
Desgner dn versune ma vech. n vrf este afat, pe
orzontaa, panou Insert n forma de grupur con[e, n tmp ce
restu este smar nouu medu Desgner.
Coder - acest spa[u de ucru are n centru sau Code Vew a
documentuu, ar n stnga se gasesc panoure CSS Styes, AP
Eements, Fes, Assets Snppets. Acesta este un medu
mnmast este ment codar.
Coder plus - acest spa[u de ucru este smar spa[uu de ucru
Coder, ar sngura dferen[a sunt panoure Insert, CSS Styes AP
Eements, care sunt n forma de con[e n partea dreapta.
Designer - n centru acestu spa[u de ucru se afa fereastra
documentuu n Spt Code Vew, ar sub aceasta se afa
Propertes Inspector. n partea dreapta se afa panoure Insert,
CSS Styes panoure Ap Eements, Fes Assets. Daca ve[
ucra cu edtoru WYSIWYG cu edtoru Code, seecta[ acest
Layout.
Designer Compact - este smar cu Layout Desgner, ar sngura
dferen[a consta n faptu ca panoure dn dreapta sunt afate n
forma de con[e.
Copyright Link group 15 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
Dual Screen - acest Layout se utzeaza atunc cnd avem doua
montoare, unu nga atu. In[a, panoure se afeaza pe
ecranu dn stnga, ar fereastra documentuu Code Inspector
se afeaza pe ecranu dn dreapta.

Aegerea medor de ucru predefnte - workspace menu

n afara de aceste panour, daca sunt actvate servce Lve pe care
e ofera Adobe, poate ca vom observa ate panour n mede
predefnte men[onate.
Aegerea meduu de ucru (Workspace) se efectueaza astfe nct dn
menure drop-down seectam: Wndow > Workspace Layout >
Desgner, respectv medu pe care dorm. De asemenea, putem
utza Workspace Menu (afat n fgura de ma sus), pentru un acces
ma rapd.
Pe de ata parte, daca nu dorm sa utzam spa[e de ucru predefnte
dorm sa edtam DW conform propror dorn[e nevo, putem
foarte uor sa aran|am panoure sa modfcam dmensune or, ar
Copyright Link group 16 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
apo sa savam aceasta aran|are ca un nou spa[u de ucru. n aces
scop, vom observa utmee tre op[un care se gasesc n menu
Wndow > Workspace Layout, precum n menu spa[uu de ucru
men[onat ma devreme.

Crearea unu nou spa[u de ucru

Aadar, daca dorm sa savam toate setare spa[uu de ucru, vom
seta to[ parametr/poz[e ve[ seecta New Workspace, ar apo
vom ntroduce numee dort vom confrma. Nou spa[u de ucru va
aparea prntre ceeate spa[ de ucru. Ma trzu, cu a|utoru op[un
Manage Workspaces, putem schmba numee unu spa[u de ucru
sau putem terge, men[onnd ca nu putem nfuen[a spa[e de
ucru predefnte.
Daca am modfcat un anumt spa[u de ucru exstent, fe ca este
vorba de unu predefnt sau de propru spa[u de ucru, prn
modfcarea panouror dmensunor or, ntotdeauna putem sa
revenm a starea savata seectnd Reset "Designer" (respectv, un
at medu de ucru momentan seectat).
Copyright Link group 17 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a

Lucrul cu Toolbars
Pe nga panoure men[onate ma devreme, DW poseda cteva
Toobar-ur foarte mportante. Acestea e putem afa sau ascunde
utznd menu drop-down Vew > Toobars > (Toobar-u dort).
Document toolbar - afeaza tastee cu a|utoru carora putem
seecta modu de afare a documentuu, dferte op[un de
vzuazare, testare n browser etc..

A - afeaza doar codu documentuu (Code Vew).
B - afeaza codu documentu vzua (Spt Vew).
C - afeaza doar documentu vzua (Desgn Vew).
D - afeaza codu n modu n care a|unge a browser (nu
este posba modfcarea coduu n acest Vew).
E - efectueaza verfcarea compatbta[ CSS cu dferte
browsere.
F - afeaza pagna precum un browser (nu sunt posbe
modfcar).
G - ncude CSS Inspect Mode care func[oneaza cu Lve Vew
care permte dentfcarea eementeor htm a sturor
Copyright Link group 18 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
CSS.
H - vzuazarea pagn sau a debug-uu n browser.
l - actvarea/dezactvarea nstrumenteor auxare vzuae.
] - refresh-u prevzuazar vzuae (Desgn Vew) dupa
efectuarea modfcaror n cod.
K - ttu documentuu care apare n Tte Bar-u browseruu
se poate ntroduce prn codu htm. Daca este de|a
ntrodus, va aparea ac.
L - fe management.
Browser navigation - dupa actvarea Lve Vew, acest TooBar
devne actv. Atunc apare adresa pagn momentan afate
acum DW se comporta practc ca un browser web.

A - controaee vzuazar nterne ae browseruu web.
B - adresa curenta.
C - op[une pentru Lve Vew.
Copyright Link group 19 / 20
Curs: Adobe Dreamweaver CS5.5
Modul: lntroducere, no]iuni de baz ale designului web i interfa]a
Dreamweawer
Unitate: lnterfa]a
Coding (dsponb doar n Code Vew). - Con[ne nstrumentee
pentru ucru cu codu. Codng-u nu se poate muta nc nu se
poate modfca dmensunea. Este pus pe o poz[e fxa se poate
doar actva/dezactva.
Standard toolbar (n setarea generaa a spa[uu de ucu nu
este afat). - Con[ne comenze de baza pentru ucru cu
feree, ma exact pentru ucru cu documenu ncarcat.
Comenze sae sunt: New, Open, Browse n Brdge (Adobe Brdge
se utzeaza pentru revzurea fereor), Save, Save A, Prnt
Code, Cut, Copy, Paste, Undo Redo.
Style rendering toolbar (n setarea generaa a spa[uu de
ucru nu este afat). - Con[ne op[une care permte smuarea
afar pagn, respectv a stzar CSS a pagn pe dferte tpur
de prevzuazar. De asemenea, permte afarea sturor CSS n
anumte stua[, precum actvarea/dezactvarea totaa a
sturor CSS.
Copyright Link group 20 / 20