Sunteți pe pagina 1din 67

INSTITUTUL MULTIMEDIA ROMANO -ELVETIAN

SUPORT DE CURS DREAMWEAVER MX

REALIZATOR CURS: SEBASTIAN MEZEI

-DEVA-2006-

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Lectia 1
1. INTERFATA DREAMWEAVER 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 Prezentarea aplicatiei Macromedia Dreamweaver MX Instalare, cerinte hardware si software Examinarea ferestrei de lucru Prezentare fereastra document Bara de inserari Prezentare pictograme Bara de instrumente Bara de stare. Panouri si ferestre de inspectare Meniuri derulante. Meniuri contextuale. Obiecte invizibile

2. CREAREA UNEI PAGINI WEB 2.1 Stabilirea proprietatilor de pagina: text, titlu, culori 2.2 Preluarea unui text dintr-un fisier 2.3 Taguri 2.4 Formatare text 2.5 Separatoare de pagina 2.6 Salvarea paginii si previzualizare 2.7 Definire browsere 3. PLANIFICAREA UNUI PROIECT WEB 3.1 Definirea unui site Web 3.2 Utilizarea programului Wizard 3.3 Utilizarea panoului si ferestrei Site 3.4 Editarea unui site 3.5 Organizarea site-ului

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

1 I NTERF AT A D R EAM WE AVE R 1.1 Prezentarea aplicatiei Mac romedia Dreamweaver MX


D re am w ea v er est e un edit or H T M L ( H y pert ex t Ma r k up La ng ua ge) , un i nst r u m e nt d e cr e a t ie, de dez v olt a r e a p a g inilo r W eb di na m ic e s i ins t r um e nt d e g est ion ar e a un ui s it e W eb. D re am w ea v er e st e un e dit or d e pa gin i W e b de t i p W Y SI W Y G ( w hat y ou s ee is w hat y ou g et c e ea c e v ez i est e ce ea ce obt i i), f o ar t e p ut e rn ic si u sor de u t iliz at . D re am w ea v er est e un in st r um ent d e cr e at ie . C u a j ut or u l lui se pot i m p lem en t a gr up ur i de pa g ini car e sa i nc luda a n ima t ie s i ev enim e nt e. P ot f i cr eat e p a g ini W eb din am ic e pr in ut ili za r ea d e s cr ipt ur i de s er v er . 1 .2 C eri n t e h a rd wa re si s o ft w a re P ro ce sor I nt el P I I sa u ec hi va len t, 1 66 + MH z W ind ows 98 S E, 20 0 0, M e , N T, XP 12 8 MB R AM , m in im m inim 30 0 MB s pa t iu p e H D D Mon it or c u r ez ol ut ia 8 00 x 60 0, m ilio a ne de cu lor i Int er n et E x pl or er 4 .0 sa u m a i ma r e O p er a , N e t sca p e et c. 1 .3 Exa mi n a re a fe re s tr ei d e l u c ru L a d esch ide r ea Dr ea m we av er se obs er v a o s upra fat a a lba , goa la , d enu m it a f er ea st r a D oc um ent , car e v a a f isa pa gina W eb a sa cum v a a pa r ea ea i n br ow se r. In par t ea dr ea pt a s e ga se sc pa nour ile, car e v a pe rm it s a or ga niz at i s i sa v a m o dif ic at i e lem e nt ele pa gin ii W eb. 1 .4 Fe re a st r a Do c u me n t c o nt ine : B ar a d e t it lu B ar a d e m en iur i B ar a d e in ser ar i B ar a d e in st r um e nt e

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Bara de inserari

Bara de instrumente

Fereastra document

Bara de stare

Fereastra de inspectare a proprietatilor

Grupul de panouri

B ar a d e t it lu c ont i ne nu m e le a plica t i ei, nu m e le f is ier u lui s i t it lul pa gin ii W e b l a car e l ucra t i. A c es t t it lu v a a par ea in ba ra de t it lu a br ow s er ul ui W eb. 1 .5 B a ra d e i n s e r a ri e st e s it ua t a su b b ar a de m en iur i si c on t i ne but oa n e p ent r u ins er a r ea ele m e nt el or de pa gina W eb ( im a g ini , t a be le, f or m u lar e et c .). B ut oa ne le p ot f i u t i liz at e p r in t r a g er e p ent r u ins er a r e in pa g ina W e b, sa u pr in c lic k. In ba ra de ins er a r i e x i st a 12 s ect iun i de ins er a r i: 1 . C om m o n - c om un 2 . L a y out - m a c het a 3 . T ex t - t e xt 4 . T a b les - t a be le 5 . F r am es - ca dr e 6 . F or m s - f orm ul ar e 7 . T em pl at es - sa blo a n e 8 . C ha ra ct er s - car ac t er e 9 . M e dia 1 0. H ea d - ca p 1 1. S cr ip t c od 1 2. A pp lica t ion

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

In bar a de in ser ar i ex ist a o s ect iun e La y o ut , ca r e v a pe r mit e sa v iz ua liz at i p a g ina in S t a nda r d wie w s a u L a y o ut v iew . St a n da r es t e viz ua liz ar ea c u ca re s e l ucr eaz a d e o bic ei. V iz ua li za r ea L a y ou t va p er m it e sa t r a sa t i elem e nt e d e t a bel dir ect in f er ea st r a D oc um ent . 1 .6 B ar a d e i n s t ru m en t e est e cr e at a p en tr u a va o f er i pos ib ilit a t ea a c ce su lui r a pid la c om en z il e m a i im por t a nt e . D a ca a c ea st a n u es t e v iz ibi la , se lec t at i c om a n da T ool bar din m en iul V i ew si a po i s ele ct a t i D oc um en t. P r im ele t r ei bu t oa n e d in st a nga s unt de st i nat e c om ut a r i i int r e v iz u a liz a re a c o d ( C od e V iew ) , v iz ua liz ar e d es ign (D e si gn V iew) si o v i z ua liz ar e co m u na , a t at co d ca t s i d es ign . D a ca e f ect ua t i m o dif i ca r i in co d, p r i n a pa s ar e a b ut on ulu i R e fr es h D e si gn, p ut e t i v e dea in f er ea st r a D ocu m e nt m od if icar ile ef e ct ua t e in co d.

Vizualizarea codului

Vizualizare cod si design

Titlul documentului

Preview in Browser

Butonul Reference

Code Navigation

Vizualizarea designului

Vizualizare in timp real

Meniul File management

Reimprospatare

Meniul View Options

L a n ga but o a ne le d e v iz u a liz a re se af la o ca set a de t ex t u nde pu t et i int r o duc e t i t l ul pa gi nii W eb . M e niu l F ile Ma na ge m e nt v a p er m it e sa e f ect ua t i c om enz i l ega t e d e g est ion ar ea f is ier e lor , v er if icar ea lor d e p e s er v er si d in e xt er ior ul sa u. M e niu l Pr ev ie w/ D e bu g in B r ow s er va aj u ta sa v iz ua liz at i pa g ina W eb in br ows er el e c onf i gur a t e. B ut on ul R ef er e nc e s e ut il iz eaz a p ent r u a af la inf orm a t i i ce t i n de C SS ( C a s ca din g St y le S h eet s) , H T ML s i Ja va Scr i pt . B ut on ul C ode N a v iga t ion est e a ct iv dor ca n d in ser a t i c od . 1 .7 B ar a d e st a re E st e sit uat a in p ar t ea d e j o s a f er e st r e i D oc um ent s i co nt in e un s ele ct or d e t a gur i . T a g ul e st e un t e xt in cl us int r e p ar a nt ez e u ng h iula r e < > s i m a r gin es c o bie ct e le pe o pa gin a W eb. T a g ur ile pot f i p er ech e s a u s in gula r e s i se t er m ina int ot d ea una cu o di a go na la l a dr e a pt a / . P an o u ri s i fe r e st r e d e i n sp e ct a re P r in a c est e a se st a bile sc pr opr iet a t i , s e cr ea za a nim at ii s i se a d a ug a di f er it e f u nct iona lit a t i pa gin ii W eb. P a n our i le din Dr ea m w ea v er s unt st r uc tur at e in g r upur i p e s ect iun i a la t ur i d e f er ea st r a D oc um ent . P a n our i le pot f i ex t ins e sa u c om pr im at e pr in a ct ion ar ea sa get ii d e ex t ind er e s it u at a in st a ng a t it lu lui d e pa no u.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

P a n our i le pot f i sco as e din p a c het pr in a ct i ona r ea b ut on ul u i d e pr in der e d in st a n ga sa get i lor de ex t ind er e s i t r a g er ea lui din gr up ul de p a no ur i. F e r e as t ra d e i n s p e c t ar e P ro p e rt y A cea st a f er ea st r a af i seaz a t oa t e pr o pr ie t at ile unu i ob iect se lect at la un m o m e nt dat . I n m om e nt ul s ele ct a r i i un ui t ext a pa r pr o pr ie ta t ile t ex t ulu i, ia r la s e lect ar ea un ei im a g ini , ce le a le im a g ini i. F er ea st r a P r op er t y poa t e f i e xt in sa pr in ut iliz ar ea pic t ogr a m e i d e ex t ind er e ( E x pa nd er ) , ast f el a v et i a c ces la t oa t e p ro pr iet at ile . 1 .8 M en i u ri d eru l a n t e M en i u l Fi l e co nt ine c om enz i d e de sc hi d er e , sa lv a r e, im por t s i e x p or t f isi er e. M en i u l E d i t c ont ine c om enz il e C ut , C op y si P ast e ( T a ier e, C op ier e , L ipir e) . Ma i ex ist a si co me n z ile F ind si R epl ac e ( G as ir e s i I nlo cu ir e) si com a nda Pr ef er en ce s ( P r ef er in t e) . M en i u l V i e w est e ut il iza t p entr u a ct iv ar ea si deza ct iv ar ea v iz ua liz ar ii c o nt inut ulu i s ect iun ii de a n t et , a e le m e nt elor in v iz ib ile, a st r a t ur ilor , t a b ele l or si l im it e lor ca dr elor ; a ba r e i de sta r e s i a har t ilor d e i ma gin e. D in a ce st m e niu se poa t e a ct iva gr il a s i r ig la , s e pot a f isa i ma gin ile d e t r a sa r e. M en i u l In s e rt cu pr in de c om e nz ile e x ist ent e in ba r a de ins er ar i. M en i u l M o d i fy e st e ut ili za t pen t r u m odi f ica r ea pr opr i et at i lor un ui o bie ct s e lect at la un m om ent da t. M en i u l Te xt es t e ut il iza t la ef ect ua r ea d e set ar i a s upr a t e xt u lui in tr o dus in p a g ina W e b. A cest me niu co nt in e m ult e pr opr iet a t i ex i st e nt e i n f er ea st r a Pr o per t y . M en i u l C o mm an d s of er a com e nz i ut ile cu m ar f i C le a n u p H TML si C l ea n up W or d H T M L . A c es t ea c ur a ta co dul H T M L si c uv int el e din c od ul H T M L la im por t a re a u ne i pa gin i sa lva t e d in W or d. D in ac est m en iu se p oa t e c on f igu r a o s c hema d e c ul or i sa u se p oat e la nsa Ma cr om e dia F ir ew or ks pe nt r u o pt im iz ar ea un ei im a g ini. M en i u l S i t e c ont i ne c o m e nz ile c or e sp un z at oar e sit e- u lui i n t ot a nsa m blu l lui . M en i u l Wi n d o ws est e ut iliz at p en t r u la ns ar ea p a no ur ilo r s i f er e str e lor d e i ns pect ar e Dr ea m w e v er . M en i u ri co n t e xt u al e a pa r at un ci ca nd s e ef ect ue az a c lic- dr ea pt a pe un o bie ct d in f er ea st r a Doc um ent . C o nt in ut ul m en iulu i de pin d e d e ob iect ul pe ca r e at i d at c lic . O b i ect e i n vi zi b i l e U nel e ob iect e car e s unt ins er at e in pa gin a W eb s un t pr oie ct a t e pe nt r u a nu f i v az ut e a t unci ca nd v iz ua l iza t i o p a g ina W e b.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

P r in se lect ar e a c om e nz ii I nv is ible E lem en t s din m eni ul V iew a c es t ea po t f i v iz ua liza t e. 2. CREAREA UNEI PAGINI WEB

P ent r u a cr e a o p a g ina W e b nou a se lect at i din m eni ul F ile c om a nda N ew . V a a par ea o c as et a d e dia log N ew D oc um ent , d e un de p ut et i s el ect a t ipu l d e d oc um en t ca r e dor it i sa - l cr eat i. S e s ele ct eaz a ca t e gor ia B a sic P a ge si a po i t ip ul HT ML s i cl i c p e b ut on ul C r eat e .

In t ro du ce t i u n t ex t p ent r u c om e nz ilor d in f er ea str a Pr o per t y . p ent r u f or m at ar ea t e xt ulu i. F ie ca re d oc um en t no u cr ea t p ent r u a f i ga s it de ca t r e m ot oa r ele

a nt et , ca r e po at e f i c onf i gur a t c u aj ut or ul M en iul t ex t co nt in e t oat e co m enz ile nec esar e t r eb uie sa a iba st a bi lit u n t it lu car e est e ut il de ca ut ar e.

2 .1 S t ab i l i re a t i t l u l u i se poa t e f ac e in m a i m ult e m od ur i. D at i c lic- d r ea pt a p e o por t iun e li ber a di n f er ea st r a D o cum e nt s i s e lect at i P a g e P r oper t ies . D upa a c east a, v a a p ar e a o ca s et a d e d ia lo g Pa ge Pr op er t ies , int r o duc et i u n t it lu s ug est iv i n ca s et a T it le .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

A pa sa t i but o nul A ppl y sa u O K . T it lul pa gin ii v a f i a f isat in Dr e am w ea v er doa r a t unci ca n d d oc um ent u l no u cre at v a f i sa l va t . T ex t ul d e pe pa g ina e st e im plic it n egr u , cu loa r ea pu t a nd f i m od if ic at a in a c eea s i ca se t a de di a log P a g e P r o pert i es. S e pot se lect a d e as em en ea cu lor i pr o pr ii p ent r u hip er le ga t ur i. A l eg e re a cu l o ri l o r s e fa ce ut il iz a nd se lect or ul de cu loa r e in m a i m u lt e m o dur i, d in c ele ci nc i pa nour i dis po nib il e:

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

- C olor cu bes c ulor i c ubic e ; - C ont i nuo us t one t o nur i con t inu e; - W in dows O S pa n ou a c ce pt a t d e W ind ows; - Ma c O S pa no u a cc ept at de Ma c int osh ; - G ra y sc a le ga ma de gr iur i P ent r u a f i s igur a c a a t i a le s o cu loa r e v iz ib ila c or ect in or ic e br ow ser t r e bu ie sa se lec t at i n ea par a t S na p t o W eb Sa f e . C ulor i le m a i p ot f i int r od us e di re ct in ca set a de t ext pr i n v a lor i hex a z e cim a l e pr ec ed at e d e s em nu l # . V a lor ile s unt se lect at e RG B , pr im e l e do ua c ifr e r e pr ez in t a R r os u, ur m a t oa r e le d ou a, r epr ez int a G v er de s i u lt im e le d ou a r epr ez int a B a lba st r u. In a ce la s i f e l est e st a b ilit a c ulo ar ea d e fu nd a l, ca r e a r e va l oa re a im p lic it a #F FF F F F , a lb a . T r ebu ie v er ifi ca t ca p a gi na sa f ie us or d e c it it , d a ca a pli ca t i o c ul oa r e de sc hisa d e f u nda l, est e r e com a nd a bi l sa set at i c ulo r i inc hi se pe nt r u t ex t . Ma r gin ile pa gin ii s unt se t at e in Pa ge Pr o pe rt ie s si ex ist a pat r u co nf ig ur ar i p ent r u m ar gin i. P e nt r u a put ea sa f i e v iz ua liz at a pa g ina W e b s im ila r in I E si N et sca pe t r ebu ie int r od usa a c ee as i v a loar e pe nt r u m ar g inea d e s us s i ina lt ime a m a r g inii . V a loar ea im plic it a p entr u m a r g inil e de pa g ina est e de 10 p ix e li f at a d e la t ur a d e s us s i 10 p ix e li p ent r u la t ur a din st a nga . 2 .2 In se r a r e a u n u i t e xt d i n t r- u n fi s i e r Et a p ele c op ier ii si in sera r ii unu i t e xt d int r - un pr o ce sor de t e xt sa u d in a lt pr ogr a m s un t :

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

1 . D es ch ide t i un d oc um en t 2 . S ele ct a t i ma i m u lt e p ar a gr a f e p ent r u v er if ica r ea m ent i ner ii f or m a t ar ii t e xt u lui 3 . C op iat i t e xt ul ( C T R L + C ) 4 . S ele ct a t i in Dr e am w ea v er l oc ul u nde do rit i sa int r od uc et i t e xt ul . 5 . S ele ct a t i co m a nd a P as t e di n m eni ul Ed it sa u ut iliz at i com a n da ra pid a C TRL +V . 2 .3 Tag u l Pa r ag ra p h si B re a k T a g ul P ar a gr a ph < p> in clu de i nt r e e le u n blo c d e t e xt , pu nan d d oua ca r ac t er e d e r a nd n ou dup a b l oc. C r ear ea u nui n ou pa r a gr af s e fa ce a p a sa n d t ast a E nt er sa u Ret ur n. T ag u l B r a k < br > est e u n t a g sin g u lar , fat a de ce l pa ra gr a f car e est e p er e ch e. Ta gu l br ea k i ns er ea za un sin g ur c ar a ct er r a nd n ou in t ex t . 2 .4 Fo rm at a r e a t e xtu l u i F or m at a r e a t ext u lui in H T M L se f a ce ut il iza nd m e niu l d er ula nt F or m at d in f er ea st r a d e in sp ect ar e Pr op er t y . S u nt pa t r u op t iun i de ba z a in f orm at a r ea t e xt u lui: 1 . N one a nul eaz a or ic e st il de f or m a t ar e a pl ica t se ct i unii do r it e . 2 . P ar a gr a p h a plic a s ect i uni i t a gur ile < p> </ p> , a c est a v a a da ug a do ua r a nd ur i no i du pa s ect iu ne. 3 . H ea d ing s 1- 6 a pli ca s ec t iun ii t a g ur i de a nt et . H 1 e st e ce l ma i m ar e a nt et ca dim ensiu ne , i ar H 6 e st e ce l m a i m ic . 4 . P r ef orm a tt e d a f iseaz a t ex t u l in f o nt c u dim ensiu ne f ix a in f u nct i e d e s eta r ile sist em ulu i. In g ener a l f o nt ul e s te C o ur ier d e 10 pu nct e . C re a r e a l i s t e l o r. In d en t a r e In t r- o p a g ina W eb put et i sa cr ea t i list e ne or do na t e si n um er ot a t e sa u or do na t e. In f er ea st r a de i ns pect ar e Pr op er t y s e g as es c b ut oa ne le U n or de r ed L ist si O r d er ed L i st , r es pe ct iv list a n eor d on at a s i list a or dona t a . P ent r u cr ear ea un ei li st e neor dona t e pr oc eda t i in felu l ur m at or: a . I nt r od uc et i t r ei ele m e nt e a pa sa nd t a st a Ent er dup a f ie ca r e e lem ent b . S e lect at i c ele t r ei e lem ent e c. A p a sat i b ut on ul U n or der ed L ist din f er ea str a Pr op er t y . P ut et i cr e a m a i d ep a r t e o lista im br icat a, a st f e l: d . P la s at i c ur sor ul d upa ult im ul ele m e nt e . A pa sa t i En t er pe nt r u a t r ec e la o lin ie n oua f. I n t ro du ce t i t r e i e l em en t e g . S e lect at i a ce st e t re i el em en te s i a p as at i b ut on ul I nd en t d in f er ea st r a d e in sp ect ar e Pr op e r t y. A st f e l at i r ea liz at o list a s ub or do na t a ult im ulu i ele m e nt di n pr im a lis t a . Da ca d or it i sa a l inia t i a ce as t a l ist a la n iv e l c u pr im a l ist a a pa sa t i O ut d ent din f er ea st r a d e i ns pect ar e Pr op er t y .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

2 .5 S ep ar at o r d e p a g i n a P ut et i a d a ug a in pa gina W eb o lini e or i zo nt a la , cu r olu l de se pa r a t or , da ca s e lect at i o bie ct u l lin i e or iz ont a la din t a b u l C o mm on ( c om un) a l b ar ei d e i nser ar e . S a u put et i folo si co ma nda H or iz ont a l R ule din m e niul In ser t . D a ca int r o du cet i o v a loar e p r oc ent u a la , ac ea st a se v a r e dim en si ona pr in m o dif ic ar ea f er e st r e i de br ow s er . D a ca lin ia or izo nt a la a r e o v a loar e a bs ol ut a in pix eli , a c ea st a nu s e v a r e dim en si ona , ia r v iz i ta t or ul v a v ed ea ba r e or iz onta le da ca f er eas t r a br ow s er u lui e st e m a i m ica . 2 .6 Pre vi zu al i z a r e a p ag i n i i i n b ro ws er Ma cr om e dia poat e d ef in i pa na la 20 d e br o wser e. P e nt r u a put e a f i f o los it e d e cat r e D re am w ea v er tr e bui e s a f ie inst a la t e a ce st e br ow s er e in ca l c ula t or . P ut et i de scar ca c at e va br ow s er e d e la a c es t e a dr es e de w e b: N ET S C AP E ht t p : // ww w. net sca p e. c om IN T ERN ET E XP L O R E R htt p : // ww w. m i cr o so ft . c om/ w ind ow s / ie/ MO Z I L L A - ht t p: / /w ww .m oz ill a . or g/ d ow nl oa d. ht m l O P ER A htt p : // w w w. op er a. c om P ent r u a in st a la br ows er ul d or it in Dr ea m w ea v er t r e bu ie s a e f ec t ua t i ur m a t or ii p as i: S ele ct a t i com a nda P r e v iew in B r ow ser , din m e niu l F i le S ele ct a t i com a nda Ed it B r ow ser S e d es ch ide ca set a P re f er e nc es din Dr ea m w ea v er la cat e g or ia Pr ev ie w in B r o wser D at i c lic pe b ut o nul + p ent r u a a da u ga un b r ow s er S e r ep et a pr oc ed u r a p a na a d a u ga t i t o at e br ow s er e le d or it e.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

3. PLANIFICAREA UNUI SITE WEB O r ic e sit e W e b a r e un dir ect or r a da c ina , c ar e e st e dir ect or u l in c ar e su nt sa lv at e t oa t e f isi er ele s it e- ulu i. C an d inc e pet i l ucr u l la un s it e t r e bui e s a- l d e fi n i ti .

In pa n ou l S it e e x ist a o leg at ur a , D ef in e a S it e, da t i cl ic p e ea si s e d es c hide ca s et a d e d ia lo g S it e de f ini t ion . S ele ct a t i N ew S it e, se ct iu nea B as ic, c ar e co nt in e pr ogra mu l w iz a r d d e def i nir e a u nu i sit e . P ent r u a d ef in i si t e- ul t r eb uie pa r cur s e c el e t r ei e t a p e a le p ro gr a m ul ui Wi z a rd : E dit in g f il es st a bil it i dir e ct or u l pr in ci pa l in c ar e v et i l ucr a la s it e T est ing F il es est e ut iliz at a doa r da ca sit e- u l f ol os es t e t eh no log ii de ser v er S ha r i ng F ile s st a b ilit i c um s e t r a nsf e r a f is ier e le c at r e un s er v er s a u a lt a l ocat ie pe nt r u a f i par t a j at e. P ent r u cr ear ea un or f is ier e noi sa u dir e ct oar e i n s it e f o los it i c om a n da N e w F i le s i N e w F o lder d in pa n oul S i t e . A ce st ea v or f i cr eat e in d ir ect or ul r a da cin a a l si te- ulu i de f init .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

P ent r u o f lu en t a m a i m ar e in lucr ul la un s it e W e b a c es t a t r e bu ie or ga niz a t . N u e x i st a u n a num it m o de l de or ga niz ar e , d up a c e c a pa t at i e x per ien t a in l ucr u l la s it eur i v a v et i st a bili un s is t em pr opr iu de or g a niza r e . S ect iun ile s it e- u lui t r eb uie or ga niz a t e log ic p ent r u a put ea f i us or de co nt r ola t si d e m o dif ic at . Da ca t o a t e f i sier ele su nt scr ise la gr a ma da in di r e ct or ul r a d ac ina , a t un ci ca nd s it e- ul se va d ez v o lt a , v a f i f oar t e gr e u sa - l c ontr o lat i s i s a ef e c tu at i m o dif ic ar i in si t e.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

CURS II
HIPERLEGATURI, URL, ANCORE, LEGATURI LA E-MAIL Prezentare hiperlegaturi Cale absoluta si cale relativa Adaugarea de hiperlegaturi in pagina Utilizarea de ancore in pagini lungi Adaugarea de legaturi la un e-mail

CODUL HTML VIZUALIZARE. MODIFICARE Vizualizarea codului HTML Examinarea antetului si a corpului Editarea tagurilor cu Quick Tag Editor Stabilirea preferintelor de cod Curatarea codului HTML creat cu Microsoft Word

AFISAREA IMAGINILOR IN PAGINA WEB Adaugarea unei imagini intr-o pagina Web Examinarea tipurilor de imagini Imagini de fundal Crearea efectului de rollover Alinierea unei imagini la text. Adaugarea de text alternativ Crearea de imagini legate

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

H iper l ega t ur ile p er m it ut iliz at or ilor sa tr ea ca la a lt e s ect iuni d in pa gin a W e b c ur e nt a sa u la a lt e p a g ini W eb . S it e- ul W eb e st e crea t dint r - un gr up d e ma i mu lt e p a g ini W eb ca r e s un t l ega t e in t r e el e pr i n hip er le gat ur i. C al e a ab s o l u t a s i re l a t i v a L a cr ear ea u ne i h iper l ega t ur i tr e bu ie int r od us a ca lea in pa gin a W e b. A ce st l ucr u se po at e r e a liz a pr in d ou a ca i: a b so lut a si re la t iv a . L ega t ura r ea li za ta ca t r e u n f isi er din a lt s it e est e o le ga t ur a a bs o lut a , car e pr in a cc es ar e d uc e dir e ct la pa gin a dor it a . D eo ar ec e n u a v et i u n co nt r ol a l ce lui la lt s it e , tr e bu ie u rm ar it da ca le ga t ur a r a m a ne v a li da. D enum ir e a une i a dr es e W e b s e num e st e UR L ( U ni f or m Re sur c e L o ca t or ) l oca liz a t or u nif or m de r e sur se. D oar a n um it e f is ier e p ot f i af isa t e int r - u n br ow s er. D a ca r e a liz at i o l eg at ur a la un f isi er z ip, de ex em plu , br o wser u l v a s o lici t a sa s pu net i da ca dor it i sa sa lva t i f is ier ul pe har d- d isc . O a dr e sa UR L poa t e sa con t ina pa na la ci nc i sect i uni: 1 . P r im a par t e est e pr ot oc olu l, car e p oat e f i ht t p , pe nt r u pa gin ile W e b sa u ft p , pe nt r u le ga t ur a la un f i sier de p e u n s er v er ft p 2 . A do ua p ar t e est e dom e niu l, ca r e e st e se par a t de pr ot ocol p r in : / / 3 . A t r e ia par t e est e por t ul, c ar e e st e opt iona l s i im plic it e st e 80 4 . A pat r a p ar t e est e ca lea s i nu m e le d e f is ier . A c est a incl ud e dir ect oa r ele si n um ele f is ier u lui 5 . A cin ce a p ar t e p oat e f i un s ir de int er o ga r e, ca r e t r im it e d a t ele pen t r u a f i pr oc esat e de u n s cr ipt . E x ist a UR L- ur i c ar e nu a u t r im it er e la u n n um e de fis ier , ca r e d uc e la un n um e d e pa gin a i m pl icit , r e cu nos c ut de ca t r e s er v er ul W eb . A ces ta po at e f i: i nde x . ht m , in de x . ht m l, de fa u lt . ht m , def a ult . h t m l. D a ca nu ex i st a o pa gin a im plic it a , v iz it at or ii p ot v e dea c ont i nut u l dir ect or u lui W eb , in l oc de o pa gin a W eb . D a ca cr e at i o lega t ur a a bs olu t a la un f is ier ex ist e nt pe h ar d- di sc a ce st a v a a r at a a st f e l: File:///c/mywebsite/paginamea.html D a ca pr ev iz ua li za t i a ce ast a pa gina i n br ows er a c ea st a f u n ct io ne az a pe rf e ct , d ar la inc ar c ar ea ei pe un s er v er W eb , a ce st a n u v a m a i fun ct io na . Mot iv ul est e p ent r u ca v iz it a t or ii nu a u a cce s la f is ier e le d e p e ha r d- dis c -u l Dv s . O ca le ra la t iv a la u n f is ier nu n ec es it a int r o duc er e a un ei a dr es e com p le t e si s e ut iliz ea za doar la hiper leg at ur i ca tr e f is ier e d in s it e- u l pr opr iu. D a ca d or it i sa a cc esa t i un f is ier din a ce la s i dir e ct or , t r e bu ie int r od us d oa r n um ele f is ier u lui, iar da ca s e af la in a lt d ir ect or t r eb ui e in tr o dus a ca lea cat r e d ir ect or ul r e s pect iv , ur ma t a de nu m e le f i sier ulu i. 1 . F is ier in a c ela si dir e ct or : o f er t a .ht m l 2 . F is ier in a lt d ir ect or i ma gin i/ fot o1 .j pg A d au g a re a u n e i h i p e rl e g at u ri i n p ag i n a P ent r u a p ut ea cr ea o hip er le gat ur a t r e bui e sa av et i in dir e ct or u l s it e- u lui W eb c el put in dou a pa gin i, sa u put et i rea liz a o hi per le g a t ur a la un f is ier de t ip i ma gin e. C r eat i o pa gin a noua f olo sin d com a nda N e w d in m e niu l F ile . I nt r od uc et i in p a g ina nou cr eat a un t e xt pr o pr iu s i a le g et i o z o na u nd e v e t i intr o duc e o im a g ine . S ele ct a t i zo na u nde dor it i sa int r o duc et i im a g ine a dor it a, a pa sat i pi ct o gr am a B r ow s e, de la n ga ca set a L i nk . A leg et i im a g ine a d or it a d e pe ha r d- dis c s i da t i c lic p e b ut o nul S ele ct .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

D re am w ea v er v a i nt r odu ce o h iper leg at ur a r e la t iv a i n c as et a L in k.

U t i l i z a re a d e A n c o re i n p ag i n i l u n g i A t unc i ca n d u n s it e W eb ar e m a i m ult e s ect iuni est e ut ila r ea liz a r ea d e h iper leg at ur i c u a j ut or u l A n cor e lor c u n um e. P ent r u in ce pu t intr o duc et i o a n cor a c u nu m e la lo cu l in pa gi na un de v a f i d ep la sat v iz it at or u l. C r eat i o hip er le ga t u r a car e est e le gat a la a nc or a c u n um e. Et a p ele de re a liz a r e s unt ur m at o ar el e: S ele ct a t i coma nd a N am ed A nc hor d in s ubm en iul I n v is ibl e Ta gs , d in m en iul In ser t ; In t ro du ce t i u n nu m e in ca set a de d ia lo g I nser t N am ed A n ch or si d at i cl ic p e b ut on ul O K ; In loc ul u nde at i ins era t a nc or a cu n um e, v a a par ea un e lem en t inv iz ib il c u o a nc or a pe e l. P ent r u a r ea l iza o leg at ura la no ua a nc or a t r eb uie s a s ele ct a t i t ext u l la car e v et i fa ce leg at ur a , iar in ca set a L i nk i nt r od uc et i num e le a nc or ei pr ec ed at de se mn ul #.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

L eg a tu ri l a u n e- m a i l C u a j ut or u l Dr e am w ea v er put et i sa i ns er at i in p a g ina o leg at ur a cca r e sa p er m it a v iz it at or u lui s a t r a n sm it a un e- ma il. S ing ur a p r obl em a est e, ca a ce as t a le ga t ur a v a f u ncti ona do ar da ca ut iliz a t or ul a r e c onf igu ra t a o a pl ica t ie d e t ip e- m a il. S ele ct a t i t e xt u l ca r e ur m eaz a a f i le ga t la un e-m ail , dat i c lic p e ob iect ul Em a il L i nk s i v a a par ea ca s et a In ser t E- ma il L ink . In t ro du ce t i a dr e sa de e- m a il d or it a si a pa sa t i O K .

COD HTML.VIZUALIZARE. MODIFICARE.


In Dr e am w ea v er ex ist a m a i m ult e m od a lita t i de v iz ualiz ar e a c od ulu i H TM L . C u aj ut or ul lu i Dr ea mw ea v er put et i cur a t a a ut om at cod ul pr o dus pr in s a l var ea un ui d oc um en t W or d ca H TM L .

Vizualizarea c odului HTML


F er ea st r a Do c um ent din Dr ea m wea v er poa t e f i s et a t a as t f el inc at sa p ut et i v iz ua liza pa gin aW eb in m od D es ign , C od e s a u i n am be le v iz ua liz ar i. C od e V ie w v iz ua li z ar ea co dul ui, se r ea l iz eaz a da c a da t i c lic pe b ut o nul C od v iew . In pr im a lin ie de co d Dr ea m wea v er a da u ga a ut om a t u n va lid at or , car e i nf or m ea za de spr e v er siu nea d e H T ML f ol os it a de pa gin a.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

P a g ina e st e inca dr a t a in int r e gim e d e t a gur ile < ht m l> . I n ca dr ul u ne i pa g ini W eb ex ist a do ua se ct iu ni d e ba z a : a nt et ul ( he a d) si c or p ul ( bo dy ) . A ce st ea s unt i nc a dr a t e de t a gur ile < h ea d> , r es pe ct iv < bod y> . P ar t ea cea m a i i ns em na ta i nt r - o pa g ina W eb se r ega s est e in cor pul pa gi ni i. I n a nt et s e r eg a s es c t i t l ul pa gin ii < t it le> , set ul d e ca r a ct er e car e t r eb uie ut iliz a t e d e br ow s er <m et a> , c o dul i n J a v a S cr ipt s i a lt e c odur i. P ent r u a v iz ua li za c ont in ut ul a nt et ul ui se lect at i com a nd a H ea d C ont e nt d in m e niul V iew . Da c a dor it i sa v iz ua l iza t i a t at pa gin a W e b ca t s i c odu l pa g ini i, a ce st

l ucr u se r ea liz eaz a se lect a n d bu t onu l C o d a n d D esig n v iew s . A t unc i ca n d s un t et i i n m od ul C od , Dr ea mw e av er v a per m it e sa m od if icat i m o dul d e a f is ar e a co dul ui. O pt iun ile dis po ni bi le in m e niu l V ie w O pt io ns: W or d wr a p gr u pe az a lini ile de c od a st f e l i nca t sa nu m a i fie ne c esar a d er u lar ea pe or iz ont a la; L i n e num b er s a f i seaz a num ar ul d e lin i e; H igh li ght i nv ali d H T ML ev ide nt ia za co du l ca r e n u es t e v a li d; S y nt a x C ol or i ng e lem ent ele de c od s unt c olor a t e pe nt r u o m a i u so ar a ur m a r ir e; A ut o I n de nt r ea liz ea z a ind ent a r ea a ut om a t a a co dul ui. A t unc i ca n dr ea liz a t i m o dif ica r i in c od, a c est ea n u se v or v ed ea im ed iat in f er ea st r a D o cum e nt ; p entr u a p ut ea v ed ea m od if ic ar ile t r e bui e sa a pa sa t i b ut on ul R efr es h.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

D a ca a t i int r o dus un c od nev a li d, Dr ea m w eav er v a evid ent ia a ce l c od in c ul oa r e a ga lbe na s i pu t et i sa a v e t i inf or m at ii pr ivin d m ot i v u l pen t r u ca r e t a g u l nu e st e v a lid si u ne le i n dic at ii pent r u r ez olv ar e . E d i t a re a t ag u ri l o r c u Q u i c k T ag Ed i t o r D a ca do r it i s a ca ut at i si s a e dit a t i r a pid u n t a g, a ce st luc r u s e po at e r e a liz a c u a j ut or u l Q ui ck Ta g Ed it or ( ed it or r a p id de t a g ur i) . P ict ogr a ma a cest e i com e nz i o g a s it i in f er ea st r a d e ins pe ct a r e Pr op er t y s a u d in m eni ul M od if y. La s el ect ar ea p ict o gr a m e i, t a gul a pa r e l a nga pic t og r am a Q uic k T a g Edi t or si a v et i la dis po z it ie t r ei m od ur i: In ser t ins er a r ea u nu i co d H T ML in t a g; E di t T a g ed it ar ea c ont in ut ul ui e x ist en t in t a g ; W r a p Ta g e dit a r ea u nui a lt t a g in j ur ul t a gulu i s lec t at . S ta b i l i re a p re fe ri n te l o r d e c o d E x ist a t r e i ca t eg or ii d e pr e f er int e c ar e s e a plic a la c od H TM L : 1 . C od e C ol or s c ulor i le cod ulu i 2 . C od e For ma t for m at a r ea c od ulu i 3 . C od e R ewri t i ng r es cr ier ea c o dulu i T a g ur ile d in v iz ua li z ar e a C o de C o l or s a f is ea z a c ul oar ea st a bilit a pr in v a lor i le s eta t e in pr e f er int e le Dr ea m wea v er . P e nt r u a put e a c odu l co lor a t t r eb uie sa a v et i a ct i v a ta co lor a r ea si nt ax e i ( Sy nt a x C ol or ing ) din m e niul V iew O p t ions. D re am w ea v er va perm it e sa s elect a t i inc lu siv o cu loa r e de f un da l pe nt r u v iz ua liza r ea c od ulu i . P ut et i f o los i cu lor il e im p lic it e di n dr ea mw e av er sa u v a p ut et i e dit a pr opr iile cu lor i in f un ct ie de pr ef er i nt e. S ele ct a t i t ipu l de doc um ent H TM L din l ist a si dat i c lic pe Edi t C olor ing S ch em e ( e dit a r ea s c hem ei de c ul oa r e) . In ca t egor ia C o de F orm a t p ut et i st a b ili i n ce m o d v a cr ea D r ea m w ea v er c od ul. P ent r u a put ea f i cit it m a i usor un c od Dr ea mw e av er il ind ent e az a ; de a ici p ut et i s eta d im ens iu nea i nde nt a r ii . D a ca s el e cta t i A ut om a ti c W r a ppi ng, Dr ea m w ea v er v a i m par t i lin ia in f un ct ie de la t im ea co loa ne i int r o dus a i n ca m pul A ft er C o lum ns. P ut et i st a b ili da c a t a gur ile v or lucr a cu l it er e m ar i s a u m ic i, d ar sta nd ar de le W 3C r e c om a nda ut i l iz ar ea lit er e lor m ic i pe nt r u t a g ur i. Ma i put et i st a bili d a ca Dr ea mw e a v er va ut iliz a t a gur i <c en t er > sa u < div > c u a t r ibut u l a li gn c ent er . T a gu l < ce nt er > e st e a c ce pt a t s i de v er s iun ile m a i v ec hi d e br ows er e, dar s t a nd ar de le inc lina spr e u ti liz ar ea t a gu lui < d iv> . C od e R ewr i t i ng ( r es cr ier ea co du lui) da po si bili t a t ea Dr eam w ea v er de a r ez olv a a nu m it e pr o ble m e a le co du lui a t un ci ca nd d es ch idet i pa gin a w e b. Da ca ac est e o pt iu ni s un t dez a ct iv at e Dr e am w ea v er v a c ont inu a sa a f i sez e co d n ev a lid . C u rat a r e a c o d u l u i HT ML c r e at c u M i c ro s o ft Wo rd D a ca a v et i do cu m e nt e cr ea t e in W or d s i dor it i sa le int r od uc et i int r - o pa gi na W eb , pu t et i sa lv a d oc um ent u l cr eat in W or d in f or m at H T M L . D oc um ent u l sa lva t in W or d v a ar a t a a p rox i ma t iv la fe l c u c el in it ia l, s ing ur a pr ob lem a f iin d f a pt u l ca W or d cr ea za f oar t e m ult co d su pl im e nt ar pe nt r u a cr ea o p a g ina W e b. P ent r u a c ur a t a a c est c od s upl im e nt a r , de sc hid et i pa gin a cr eat a cu w or d si d at i c om a n da C le a n u p W or d H T ML , d in m en iul C om ma nds . A cea st a co ma nd a l ans e az a ca set a d e dia log C l ea n u p W o rd H T M L , ca r e ar e d ou a s ect iun i: B a s ic si D et a il ed. S ect iun ea B as ic ar e ur m a t oar e le p os ibil i t at i d e s et ar e:

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

1 . R em ov e Al l W or d S p ec ifi c M ar k u p i nla t ur a t ot c od ul X ML di n t a g ul < ht m l> , t a g ur ile m et a s i t a gur ile de le ga t ur a din s ect iun ea a nt et , p ar a gr a f e le g oa le s i m ar gin ile ; 2 . C lea n U p C SS inl at ur a st ilur ile C SS su plim ent ar e di n d oc um ent , s t ilur i C SS d in r a n du r i le s i c elu lele de t a be le s i st ilur i n ef o los it e; 3 . C lea n U p <f ont > T a g s i nla t ur a t a g ur il e < f ont >; 4 . F ix In va l i dl y N e st e d Ta gs r ez o lva t a gu r ile n eim br icat e cor ect , ma i a le s p e c e le d e m ar car e a f ont u lui; 5 . S et B a ck gr ou nd C ol or v a per m it e s pe ci f ica r ea c ul or ii de f u nda l a pa gi nii W eb . C ul oa r e a im pl i cit a est e a lb, # f ff f ff ; 6 . A pp l y S o ur ce F or m a tt i n g a plic a o pt iun ile d e f orm at a r e a c odu lui p e car e l e- at i st a b ilit in ca t egor ia C ode F or ma t ; 7 . S ho w L og O n C o m p let io n af is e az a o ca set a de d ia lo g cu u n r ez um at a l

m o dif ic ar ilor f ac ut e.

A FIS A REA I MA G IN IL O R IN PA G IN I W EB T oa t e im a gi nile d int r - o pa gin a W e b su nt f isi er e s ep ar at e s i nu f a c pa rt e d in p a g ina . Dr ea mw e av er v a perm it e sa v iz ua liz a t i im a g ini le i nt r od us e i n p a gi na , in f er ea st r a D oc um ent . P ent r u a in ser a o im a gin e in pa gina W eb t r e buie sa ef e ct u at i urm a tor ii pa si: 1 . A leg et i lo cu l un de dor it i sa ins er at i i ma gin ea

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

2 . D in ba r a I ns er t , s el e ct a t i com a nda I ns er t I m a ge 3 . D at i c lic p e p ict o gr am a B r ow s e din f er ea str a de in sp ect ar e Pr op er t y si a le get i im a g ine a do r it a. P ut et i pr e v iz ua liz a im a gi nea da ca s el ect at i ca s et a d e v a li dar e Pr ev iew Im a g es 4 . A pa sa t i but o nu l S el ect . D upa in ser ar e pu t et i ef ect ua m od if ic ar i a s upr a im a ginii in c eea c e pr iv est e d im ens iu nea l or . P r in m ic sor ar ea ima gi n ii in Dr eam w ea v er , di m e ns iun ea f is ier u lui n u s e r e duc e, i ar v iz it a t or ii v or de scar c a u n f is ier d e a c e ea s i d im e ns iun e. In f er ea st r a de in sp ect ar e Pr o per t y s e ga se st e u n me niu der ula nt A lign , c u a j ut or u l c ar uia a li ni a t i ob iec t ele de la n ga i ma gin i. O pt iun ile dis po ni bi le s un t: 1 . B r ow s er de fa u lt a li nier e la linia de ba za , dep ind e d e br o w ser 2 . B as eli ne s e a lin i az a pa r t ea d e j os a im a g ini i l a pa r t ea d e j os a e le m e nt ulu i 3 . T op a lini er ea im a g ini i la e le m e nt ul c el m a i de s us, lin iil e d e t ex t s unt gr upa t e s ub ima gin e 4 . Mi ddl e s e a lini az a e lem ent ul in m ij l oc ul im a g ini i, t ext u l s ub im a gine 5 . B ot t om s e a lin ia z a e lem ent ul in pa rt ea d e j os a im a gin ii 6 . T ex t T op a li nie r e a im a gi nii c u t e xt u l c el m a i de s us , a lte lini i d e t ext gr upa t e s ub ima gin e 7 . A bs ol u t e B ott o m e lem e nt ul c el m a i d e su s se a linia z a la p ar t ea d e j os a i ma gin ii 8 . L ef t im a gi nea a li nia ta la st a n ga a lt or e lem e nt e 9 . R i ght im a g ine a a l i nia t a la dr ea pt a a lt or e lem ent e P ent r u int r od uc er ea u nu i t e xt a lt er nat i v la im a g ine t r eb uie sa f o los it i ca set a A lt t ex t din f er ea st r a d e ins pe ct a r e Pr op er t y . Da ca n u do rit i s a u n u est e ne c esar a i nt r od uc er ea unu i t ex t a lt er nat iv , se le ct a t i < em pt y> d in m en iul d er ul a nt . P ut et i sa r ea l iz a t i un hip er lin k la o im a g ine ast f el: In t ro du ce t i UR L - u l dor it in c a s et a L ink a f er est r ei d e in sp ect ar e P r op er t y U t iliz at i p ict o gr a m a B row se s i se lec t at i f i sier ul la ca r e d or it i s a e x ec ut a t i lin k - ul S ele ct a t i o le ga t ur a d ej a ut iliz at a , in m en iul d er ul a nt L ink U t iliz at i p oint- t o- f il e, pi ct o gr a m a d e le ga t ur a la un f i sier E xa m i n a r e a ti p u ri l o r d e i mag i n i E x ist a d oua f or m at e st a n da r d de im a gin e a cc ep t at e de br ow ser e: G IF s i J P EG . In u lt im a per i oa d a se im p un e din c e in c e ma i m u lt s i f or m at ul P N G , ca r e e st e si f or ma t ul a cc ep t at s i ut ili za t d e c at r e Ma cr om e dia Fir ew or k s. G IF f or m at d e i m a g ine ut ila pe nt r u im a g ini c ar e au z on e d e c ulo ar e c o nt inu e; J P EG f or m a t de im a gin e ut i liz at a p en tr u im a gin ile f ot ogr a f ic e; P N G in loc uie st e t r ept a t G IF , f oa rt e ut i l pe nt r u lucr u c u tr a ns pa r e nt a in i ma gin e. E x ist a ma i m ult e p ro gr a m e car e va aj ut a s a opt im iz at i im a g inile p ent r u o d es car ca r e m a i b un a. P ut et i sa s et at i in pa gin a W e b o im a gi ne de f u nda l. Ac est ea s unt a seza t e in m oz a ic p e t oa t a s upr a f at a p a gi nii, d e ac ee a e st e f oar t e i m p or t a nta a le ger ea i ma gin ii a st fel inc at s a f ie in con cor da n t a c u de s ignu l pa gin ii. C re a r e a e fe ct u l u i d e Ro l l o v er D re am w ea v er v a aj ut a sa r ea liz at i ef e ct e d e im a g ine la t r e cere a m ous e- u lui p est e o im a gin e. A c est ef ect se num est e R o llo v er s i es t e d e f a pt o ima gin e c a r e se s upr a p une pe st e o a lt a im a g ine ca nd c ur s or ul m o us e- ulu i s e af l a de a s upr a im a g inii . O im a gin e r ol lov er se obt ine a st f el:

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

1 . S ele ct a t i loc ul und e d or it i sa a par a im a gin ea r ollo v er 2 . D in ba r a I ns er t s ele cta t i ob iec t ul R ollo v er Im a g e 3 . A pa r e c as et a d e dia log I ns er t R ollo v e r Im a ge . Da t i u n num e im a gi nii in ca set a de su s 4 . S ele ct a t i f isi er ele cu i ma gin ile, c ea in i t ia la si c ea cu e f ec t ul r ol lov er , pr in c lic pe bu t oa n ele B r ow s e 5 . V a li dat i ca s et a Pr e loa d R ollo v er Im a ge , a st f e l im a g ini le se pr e inc ar c a in ca ch e- ul br o wser ulu i 6 . A da uga t i o le ga t ur a la im a gi nea r ollo v er 7 . D at i c lic pe b ut o nul O K .

Alinierea unei imagini la text. Adaugarea de text alternativ A lini er ea se r ef er a la m o du l in ca r e ob iect ele a p ar i n pr e aj m a un ei im a g ini. P ent r u a a lini a o i m a gine t r ebu ie sa ut iliz at i u na din c om e nz ile d e a linie r e a t e xt u lui d in s ub m e niu l A li gn a l m eni ului T ex t . O pt iun ile de a lini er e s un t : B ro w s er De f au l t a linia z a la lini a de b a za in f u nct i e de br ow ser B a se l i n e a lin iaz a p ar t ea de j os a im a g inii la par t ea de j os a el em ent u lui T o p a lin iaz a i ma g ine a l a el em ent u l de su s, l inii l e de t ex t v or f i s ub im a gi ne M i d d l e a lini az a e lem en t u l in m ij l oc ul im a g inii , linii le d e t ex t su b im a g ine B o t to m a lin iaz a e lem ent ul in pa rt e a d e j os ca s i B a se line T e xt To p a linia z a im a g ine a c u t ex t ul c el m a i de su s A b so l u te B o t t o m a lin iaz a pa rt e a de j os a e lem ent ulu i c el ma i d e su s la p ar t ea de j os a im a g ini i L e ft a linia za im a g ine a la st a nga a lt or ele m e nt e R i g h t a l inia z a im a gi nea la dr ea pt a a lt or e lem ent e C r est er ea d ist a nt ei di nt r e ima gin e si a lt e ele m e nt e din p a g ina s e f ac e pr in st a b ilir ea v a lor i lor dor it e p ent r u V S pa ce s i H S pa ce .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

In t ro du cer ea u nui t e xt a lt er na t i v s e fa c e d in c a st ea A l t t e xt , din f er ea str a d e i ns pect ar e Pr op er t y . Crearea de imagini legate In m om e nt ul in c ar e s e lect at i o ima gin e sa u un t e xt a par e pr opr i et at ea L ink in f er ea st r a d e in sp ect ar e Pr op er t y . I nt r o duc et i U RL - u l do rit de la t as t at ura sa u s e lect at i f is ier u l dor it cu aj ut or ul p ict o gr am ei poi nt - t o- f ile . D a ca dor it i ca im a gin ea sa a pa r a int r - un c hen ar a t unci va t r eb ui sa dat i o v a l oar e pe nt r u B or der .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

CURS III

BARA DE NAVIGARE. HARTI DE IMAGINI Adaugarea de legaturi la grafica folosind hartile de imagine Crearea unei harti de imagine Crearea si alinierea zonelor feirbinti Bare de navigare cu imagini rollover Bare de navigare cu legaturi

ADAUGAREA FISIERELOR MULTIMEDIA Prezentare multimedia, latime de banda, programe de redare Adaugarea fisierelor Flash Adaugarea de legaturi la un fisier PDF Adaugarea de legaturi la un fisier de sunet Inserarea unui applet Java

GESTIONAREA COMPONENTELOR CU PANOUL ASSETS Prezentare componente Administrarea si examinarea componentelor in panoul Assets Adaugarea componentelor la o pagina Web Crearea de noi componente Copierea componentelor Assets

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

BARE DE NAVIGARE. HARTI DE IMAGINI Adaugare a de legaturi la grafica folosind ha rtile de imagine
H ar t ile d e im a g ine su nt z one dif er it e a l e un ei im a g ini , d en um it e z on e f ier b int i sa u z one ht os po t s. A ce st e z on e s unt de f init e ca h ipe r l ega t ur i pe a num it e p or t iun i d int r - o i ma gin e. H ar t ile de im a gine su nt foa rt e ut ile a t unci ca n d d or it i s a r ea liz at i m en iur i gr af ic e, c ar e su nt f oa r t e ut il e s i de ef e ct . C re a r e a u n ei h a rt i d e i m ag i n e 1 . In ser at i o ima gin e in pa g ina W eb , la s el ect ar ea e i v or a pa r ea in f er e ast r a d e i ns pect ar e Pr op er t y p at r u i ns tr um e nt e p ent r u ha rt il e de im a g ine ; 2 . In t ro du ce t i un n um e p entr u har t a de i m a gin e in ca set a de t ex t Ma p N a m e; 3 . S ele ct a t i un inst r um e nt d e de se na r e pe nt r u a t r a sa o z ona f i er bin t e; 4 . D upa c e at i s ele ct a t z ona dor it a , i nt r odu cet i UR L- u l d or it pent r u ac ea z ona d e i ma gin e. P ut e t i d e as em en ea , sa l ega t i u n hot s pot la o a nc or a cu n um e d a c a i nt r od uc et i # s i nu me le a nc or ei ; 5 . In t ro du ce t i un t e xt a lt er na t iv i n c a s et a d e t e xt A lt T ex t; 6 . S ele ct a t i f er e as t ra de dest ina t ie din m e niul der u lant Tar g et ( t int a ) . A l i n i ere a zo n e l o r fi e rb i n t i D a ca a v et i d ef in it e m a i m ult e z o ne f i er bin t i a la t ura t e, va t r e bui c a a ces t ea sa f i e a linia t e p ent r u un a sp ect uni f or m i n pa gin a W eb . P ent r u a s e lect a t oa t e z o nel e f ier bi nt i dintr - o pa gin a put et i f olo si S h ift + cl ic p e z on ele f ier b int i p ent r u a le a da uga la se lect ie . D upa se le ct a re a l or , put et i s a ef ect ua t i op er at iu ni d e a lini er e l a s t a n ga, dr ea pt a , s us sa u j os, pr in u t i liz ar ea su b m en iulu i A lig n d in m eni ul M od if y . D e as em en ea put et i sa set a t i a ce ea si in a lt im e sa u la t i m e cu a j ut or u l c om enz ii Ma k e Sam e H eig ht , r es pe ct iv Ma k e Sa m e W i dt h. B a re d e n avi g a re c u i m ag i n i Ro l l o v er si c u l eg a tu ri P ent r u r e a liza r e a un ei ba r e de na v igar e c u im a gi ni r ollo v er t r eb uie s a a v et i pr eg at it e in pr ea la b i l m en iul d or it si ca t e t r ei b ut oa ne im a g ine pen t r u f iec ar e lin k d in m en iu. B ut oa ne le im a g ine t re bu ie sa f ie r ea liz a te la a ce ea si d im ens iun e s i t r ebu ie sa r e pr ez in t e poz it i a in it ia la a b ut on ulu i ( u p) , sta r ea de a pa sa t (d ow n) s i st ar ea ( o v er ) ca nd m ou se- ul t r ec e d ea su pr a b ut on ulu i. Et a p el e r eal iz a r ii ba r ei d e na vi gar e su nt : 1 . S ele ct a t i ob iect ul N a v i gat io n B a r din pa nou l O bj e ct 2 . In t ro du ce t i num e le pr i m u lui b ut on 3 . A leg et i im a g ine a d or it a pent r u b ut o nul n ea pa sa t , p ent r u st a re a o v er s i pe nt r u b ut o nul a pa sa t 4 . In t ro du ce t i link - ul d or it in c a set a W h en C lick e d, G o T o U R L

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

5 . S ele ct a t i ca s et a P r e loa d Im a g es, p ent r u o pr ei nc ar ca r e a i ma gin ilor . B if at i ca set a d e v a li dar e Sh ow D ow n Ima ge I nit ia lly , pe nt r u a ar a t a im a gine a i nit ia la d e b ut on a pa s at . 6 . In t ro du ce t i a lt e but oa n e cu a j ut or u l bu t o nul ui plu s si p r i n r e pet ar ea p a s ilor a nt er i or i. 7 . In p ar t ea de j o s a ca s et e i de d ia lo g I ns er t N a v iga t ion B a r a ve t i po sib ilit a t ea s e lect ar ii m od ulu i d e int r od uc er e i n pa gin a: or iz ont a l sa u v er t i ca l 8 . D at i c lic pe O K .

ADAUGAREA FISIERELOR MULTIMEDIA P re zen t a re mu l t i m e d i a . L at i m e d e b a n d a. In u lt im a per ioa da p a g inile W e b s-a u dez v olt a t f oart e m ul t , ia r a da uga r ea d e f i sier e m ult im ed ia i n pa gin ile W e b est e t ot m a i ut iliz a t a . E x ist a ma i m ult e t ipur i de f is ier e m u lt im edi a car e pot f i int r o du se int r - o p a g ina W e b, elem ent u l com u n est e ca in ge ner a l a c es t e f is ier e nec esit a o la t i me d e b a n da m a r e. P ent r u a p ut ea f i r ula t e, f is ier e le m ult im ed ia n ec es it a u n pr o gr am car e l ucr eaz a im pr e una c u br o w ser ul. Dr ea mw ea v er va p er m it e sa int r od uc et i in pa gin a W eb a num it e f un ct ii car e sa v er if ic e dac a v i z it a t or ul ar e un a n um it pr o gr a m d e

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

r e da re . P ut et i de a sem e ne a sa per m it a br ows er ulu i sa inc a r c e a ut om at un pr ogr a m d e r e dar e ( p la y er ) . A d au g a re a fi si e re l o r Fl as h P ent r u int r odu cer ea un ui f ilm F la s h se le ct a t i di n b ar a de i ns er ar e c om a nda In ser t F la s h. I n ca set a de v a l ida r e din fer e as t r a Pr op er t y p ut et i s a st a bili t i m od ul d e r u lar e a f ilm ulu i: L o op ( r el uar e) si A ut op la y ( aut or e da r e) . T a g ur ile < obj ect > si < em be d> s unt f o los it e pe nt r u in ser ar ea un ui o bie ct F la sh. P r i m u l e st e r e cu no sc ut de c at r e br o wser ul I nt er ne t E x p lor er, ia r ult im u l d e ca tr e N et s ca pe. D re am w ea v er le in t r o duc e a u t om at p e am a n dou a , a st f el inca t br ow s er u l sa p oa t a t r at a opt im f is ier u l F la sh . D ac a d or it i s a pre v iz ua liz a t i f il m u l F la sh , t r e bu ie s a s e lect at i f il m u l si sa a pa sa t i but onu l P la y d in f er ea st r a d e in sp ect ar e P r op er t y . D re am w ea v er v a pe r mi t e sa r ea l iza t i f il m e F l a s h c u t ex t i n mo d di r ec t, fa r a a m a i a p ela la a lt e a p lic at ii . Et a p el e r eal iz a r ii un ui o bi e ct F l as h c u t e xt : 1 . D in s ect iun ea M e dia a bar ei In ser t , se le ct at i o bie ct u l F la sh 2 . In ca s eta de dia lo g I ns er t F la sh T ex t , s ele ct a t i f o nt u l, st il u l, d im ens iu nea si a lin ier ea t ex t ulu i 3 . In t ro du ce t i t ex t u l d or it in c a s et a T e xt 4 . In ca set a d e t ex t L i n k in t r odu cet i UR L- ul dor it 5 . S t a bi lit i de st i nat ia hip er le ga t ur ii in ca se t a de t ex t T ar g et 6 . S ele ct a t i cu loa r ea de f u nd a l d or it a d in l i st a der u la nt a B g C olor 7 . In t ro du ce t i num e le f ilm u lui F la s h cr ea t , i n c as et a Sa v e A s 8 . D at i c lic pe O K .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

1. 2. 3. 4. 5. 6. 7. 8.

P ent r u i nt r o duc er ea un ui b ut on Fl as h t r eb uie ex ec utat e ur m a t oa r el e co m e nz i: S ele ct a t i din sect i unea M e dia a ba r ei I ns ert o bie ct u l I ns er t F la s h B utt o n A pa r e ca s et a d e d ia lo g I ns er t F las h B ut t on S ele ct a t i un st il d e b ut on din lis t a St y le A da uga t i un t ext b ut on ulu i in ca m pu l B ut t o n T ex t S t a bi lit i t ip ul de f on t dor it s i di m e ns iun ea lui In t ro du ce t i un U R L, d ac a e st e ca z u l in c a set e le L in k s i Ta r get A da uga t i o c ulo ar e de f u nda l d in lis t a d er ul a nt a B g C olor D at i c lic pe O K .

A d au g a re a d e l eg a t u ri l a u n fi si e r PD F F is ier e le PD F ( por t a ble d igit a l f or m at ) p er m it unu i v iz it a t o r sa v a da un f is ier e xa ct c um s- a dor it , in dif er ent d ac a v iz i t at or u l ar e f o nt ur il e sa u n u; st i lul d e pa gin a s i gra f ica a par e xa ct c um a u f ost cr ea t e. C a sa intr o duc et i u n f is ier P D F t r eb uie sa cr ea t i o hi per le ga t ur a la ac el f is ier . D a ca ex ist a i ns ta la t mo dul ul p lug - in Acr oba t , a t u nc i f is ier u l se v a d esch id e in p a g ina . D a ca n u es te i nst a la t , f is ier u l s e v a d es ch ide in A cr o bat R ea der in a f ar a br ows er ul ui. P ent r u a p ut ea v iz ua li za f is ier e P DF t r ebu ie de sc arc at pr ogr a m ul de r edar e A do be Acr oba t R e a d er , car e est e gr at u it s i s e ga se st e la a dr esa W e b : ht t p: / / ww w. a dob e. c om . A d au g a re a u n u i fis i e r d e s u n e t

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

D a ca dor it i sa ins er at i u n f is ier d e su n et i n pa gin a W e b ef ect ua t i ur ma t oar e le o per a t iun i: 1 . A leg et i lo cu l un de dor it i sa ins er at i f i sie r ul d e s une t 2 . S ele ct a t i ob iect ul P lug - i n di n s ect i une a M e dia a ba r ei I n sert 3 . In ca set a de d ia l og S ele ct F i le in tr o cd uc et i ca le a ca t r e f is ier u l de s un et . Dat i c lic pe bu t onu l S e lect 4 . S a lv at i m od if ic ar ile si pr ev iz ua li za t i.

In s e r a re a u n u i ap p l et J a v a J a v a e st e u n lim ba j d e pr o gr a m ar e ut il iz at la cr ear ea de p r ogra m e den um it e a pp let - ur i s i car e r u lea za in c a dr ul u nei f er est r e de br ow ser . In ser ar ea un ui a p pl et J a va se fa c e a st f e l: 1 . S ele ct a t i ob iec t ul A pp let d in se ct iu ne a M e dia a bar ei I ns er t . S e de sc hid e ca set a de dia log S el ect F ile . 2 . N av i ga t i in d ir e ct or ul car e co nt ine a p plet ul J av a s i s ele ct a t i f is ier ul dor it . 3 . In t ro du ce t i p ar am et r ii cer ut i de do cu m e nt at ia a pp let - ul ui s e lect a n d b ut on ul P ar a m et er s 4 . S a lv at i p a g ina si pr ev iz ua liz a t i- o in b ro wser . G E S TIO N A R EA C O M PO N EN TE L O R C U PA N O U L A S S ETS P re zen t a re . A d mi n i s t ra re co m p o n en t e. T ot ce ea c e est e in cl us int r - o pa gin a W eb : im a g ini, f il m e, c ul or i, U R L - ur i, s un et e , su nt ele m ent e de num it e a sse t s ( com pon en t e) .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

O r ga n iza r ea a c es t or el em ent e se fa c e cu aj ut or ul p ano ulu i A sset s, . C ar e a f is ea z a o list a c u t oat e c om p one nt e le d in s it e. C at eg or iil e p a no ulu i A sse t s s unt : Im a g ini C ulor i F ilm e F la s h F ilm e S hock wa r e U RL - ur i F ilm e S cr ip t ur i Ma ch et e B ibli ot ec a C om po nent ele pot f i pr e v iz ua liz a t e si se po at e na v ig a pr in c at e gor i ile d e c om p one nt e. C om po ne nt el e p ot f i a d a u ga t e int r - o pa gin a We b f oar t e si m p lu, d e a s em ene a p ot f i c op iat e com p one nt e din a lt s it e W eb de fi nit in Dr ea m w ea v er . L a d es c hider ea pa n ou lui A ss et s , Dr ea m w ea v er fa c e o sc a nar e a co pie i ca c he si ca t a log he az a a ut om at t oa t e c om po nent ele inc lus e in sit e- ul W eb . V iz u a li za r ea e le m e nt el or s e f a ce p e ca t e gor i i, s ele ct a nd but o nu l af e r ent f iec ar e i ca t eg or ii in p ar t e. A t unc i ca nd s el ect a t i un e lem en t d int r - o a num i t a cat egor i e, in j u ma t at ea d e s us a pa n ou lui A s s et s a p ar e o pr ev iz ua l iz a r e a com p one nt e i r es pect iv e. P ent r u e lem ent ele din cat eg or ia F i lm ex ist a un bu t on pe nt r u P lay / St op in p ar t ea dr ea pt a su s a ecr a n ului de pr ev izu a liza r e din pa nou l A sse t s.

Categorii

A d au g a re a d e co m p o n e n t e l a o p ag i o n a We b Et a p ele a da ugar ii u ne i com p on ent e su nt :

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

1 . A leg et i o ca t egor ie 2 . S ele ct a t i co m p on ent a dor it a di n c a dr u l ca t eg or iei ale se 3 . P la sa t i pun ct u l de i ns er ar e i n pa gin a W eb, u nde dorit i sa i ns er at i c om po ne nt a a lea sa 4 . S ele ct a t i but onu l I ns er t . P ut et i s c him ba c ul oar e a un ui t ex t d in pa gin a web ut iliz a n d cu lor ile ex i st e nt e i n pa n oul A s set s. T r eb uie sa s ele cta t i t ex t ul dor i t, m er get i la ca t eg or ia C olor s, s e lect at i cu loa r ea dor it a s i a pa sa t i but onu l A ppl y . T ex t ul s e lect at v a f i s et a t in c ul oa r e a a lea sa . C re a r e a s i co p i er e a c o mp o n en te l o r A s s e t s . P a n ou l As s et s va a f is ea za c om pon en t ele dej a ex ist e nt e in s it e- ul W e b, dar p ut e t i cr e a c om pon ent e no i c ar e p ot f i u t iliz at e u lt er ior . C om po nent ele no i v or f i dis po nib ile c hia r da ca nu a u f ost in ca ut ili za t e in s it eu l W eb. P ent r u a cr ea o c om po nent a no ua t r e bu ie s a s el ect at i bu t on ul r a d i o F av or it e s d in pa r t e a d e su s a pa n ou lui As s et s, s el ect at i cat eg or ia d or it a s i da t i cl ic dr ea pt a p entr u la nsa re a m en iul ui c ont e xt ua l. P a n ou l A ss et s v a per m i t e sa c op iat i el em en t e din s it e- ul c ur ent , u n gr up d e e le m e nt e s a u un gr up d e f a vor it e in a lt s it e d ef in it in Dr ea m w ea v er . D a ca dor it i sa c opi a t i o s in gur a co m p one nt a , se lect at i c om po ne nt a d or it a, dat i c lic- dr ea pt a si se le ct at i C op y t o S it e si se lect a t i sit e- u l u nde dor it i s a c op iat i c om p one nt a . In ca z u l in car e dor it i sa co pia t i un gr u p de co m p one nt e , t r e buie sa se lect at i c om p one nt el e c u S hift +c lic pe n um ele e le m e nt elor s i efe ct ua t i a ce lea si c om en zi ca s i la co pie r ea unu i s ingu r ele m e nt .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

CURS IV AFISAREA DATELOR IN TABELE Crearea unui tabel pentru date Adaugarea unui titlu de tabel Importul datelor in tabel Exportul datelor din tabel Utilizarea unui format predefinit de tabel in Dreamweaver PROIECTAREA MACHETELOR DE PAGINA Prezentare machetelor de pagina Utilizarea vizualizarii Layout Editarea unui tabel in vizualizare Standard Imbricarea unui tabel Transformarea tabelelor in straturi CONSTRUIREA CADRELOR SI A SETURILOR DE CADRE Prezentare cadrelor Crearea unui set de cadre Utilizarea panoului Frames Imbricarea cadrelor Stabilirea atributelor pentru cadre Utilizarea obiectelor de tip cadru

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

AFISAREA DATELOR IN TABELE Crearea unui tabel pentru date In t ro du cer ea t eb ele lor i n s it e v a per m it e sa af is at i da t e le in m o d log ic in c o loa ne si r a n dur i si in a c el a s i t im p va per m it e sa co nt r ola t i l oc ul i n ca r e a par o bie ct e le in pa gin a. In ser ar ea un ui t a b el s e p oa t e r ea liz a a st f e l: 1 . P la sa t i pun ct u l de in s er a r e in p a g ina W e b un de dor it i sa ins er at i t a be lul 2 . S ele ct a t i pict og r am a Ta ble din ba ra Ins er t sa u c om an da Ta b le d in m e niul In ser t 3 . In t ro du ce t i v a lor ile d or it e la R ow s ( r a n dur i) si C o lum ns ( c o loa ne) . Ma i p ut e t i se lect a la t im ea t a be lulu i s i gr os im ea ch ena r ulu i. 4 . D a ca t a b elu l co nt ine un H e a d er ( ca p de t a be l) , s ele cta t i poz it ia in c ar e d or it i sa f i e a f isa t a c es t a di n cam pul H ea der . 5 . Ma i p ut et i set a s pa t iul din t r e c elu le C e ll s pa c ing si sp at iu l d int r e c o nt inut ul c elu lei si m ar g inile c elu lei C ell pa d din g. 6 . In ca m p ul C a pt io n int r o du cet i un num e p ent r u t a be l. 7 . L oc ul in ca r e se a f is ea z a d en um ir ea t a b elu lui s e po at e s et a din m en iul d er u la nt A lign ca pt io n. 8 . D at i c lic k pe O K .

S ele ct a r ea ta be lulu i cr e at s e p oa t e fa c e i n m a i m ult e m o dur i :

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

p oz it io nat i cur s or u l pe un a d int r e m ar g inil e ex t er ioar e ale t a b elu lui p a na ca nd a c est a s e t r a ns f or m a in cur s or cr uc e. Dat i cl ick pe a cest c ur s or s i s e va s ele ct a t a be lul s e lect ar ea t a be lul ui cu aj ut or ul s ele ct o ru lui d e t a g ur i din bar a d e st ar e D re am w ea v er. D a t i cl ick int r - o c elu la s i se v a a f isa intr ea g a iera r hie d e t a gur i . A pa sa t i t a gu l t a b le s i s e v a s ele ct a t ot t ab elu l.

S ele ct a r ea un ei ce lule s e f a c e pr in cl ick in int er ior u l e i. P ent r u s ele ct a r ea u nu i r a nd s e p oz it io nea za cur sor u l in st an ga r a n du lui p a na ce a c est a s e t r a ns f or m a i nt r -o sa ge at a nea g r a gr oa sa ; d at i c lic k s i s e v a s ele ct a t ot r a n dul . P ent r u se lect ar ea un ei c oloa ne ut iliz a t i a ce ea si pr oc ed ur a da r d ea su pr a c o loa nei . P ut et i se lec t a gr u pur i d e ce llu le pr in a pa s ar ea S H IF T + cli ck sa u put et i se lect a c e llule se pa r at e p r in C T R L + clic k pe c el ule le d or it e. C r ear ea un ui c a p d e t a b le s e fa ce pr in s ele ct a r ea pr im u lui r an d a t a bel ulu i s i b ifa r e a ca s et e i de v a l ida r e ( H ea der ) , di n f er ea st r a Pr o per t ie s, t a gur il e pe nt r u c elu lu t a be l <t d> s e t r a nsf or m a in t a g ur i p ent r u ce lule ca p d e t a b el < t h> . In t ro du cer ea dat e lor in t a be l se fa c e pr in cl ick in c elu la d or it a s i int r o du cer ea d at e lor de la ta sta t ur a . S o rta re a d at e l o r d i n t r- u n t a b el : 1 . s e lect at i t a bel ul 2 . s e lect at i c om a nda Sor t Ta ble din m en iul C om m a nd s. A pa re ca s et a S ort T a b le car e co nt in e m a i m ult e m e niu r i der u la nt e pe ntr u s or t a re a t a be lulu i. 3 . i n m eni ul S or t B y, s ele cta t i c olo a na du pa ca r e se fa c e s or t a rea . 4 . i n m eni ul O r der a le get i sor ta r ea co loa n ei in or d ine a lfa be t ica sa u n um er ica 5 . a le get i s or t a r ea in or din e cr esc a t oar e sa u de scr es ca t oa r e din m en iul dr ept l a O r der . 6 . s e p oa t e r ea liz a u n a lt s et de o pt iun i de s or t ar e p en t r u o a lt a c olo a na in or din ea se lect iei dor it e . 7 . d ac a e x ist a u n ca p de t a ble la sa t i neb if at S or t I nc lude s F ir s t R ow. 8 . K ee p TR W it h S or t e d r ow p ast r e az a a t r i but e le d e t a ble dup a s or t ar e . 9 . a pa sa t i O K .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Adaugarea unui titlu de tabel U n t it l u de t a b el nu po at e f i int r o dus d ec at da ca e st e a ct iv at a v iz ua li za r e a p a g inii in C o de V iew. A d au g a re a u n u i ti t l u d e t ab e l s e f a c e a st f el : 1 . s e lect at i C o de V ie w sa u v iz ua liz ar ea du b la a c od ulu i si a de si gnu lui . 2 . p la sa t i curs or u l im edi at du pa t a gu l de de sc hid er e a t a b elu lu i < t a ble > 3 . s e lect at i s ect iun ea Ta b le d in b ar a In ser t 4 . s e lect at i c om a nda T a ble C a pt io n, s e v or a da ug a a ut om at t a gur ile <c a pt ion >. 5 . i nt r od uc et i t it lu l dor it i nt r e t a gur ile < ca pt io n> . 6 . p la sa t i c ur s or ul i m e dia t i na i nt e d e t a g u l de inc hid er e < ca p t ion > s i a pa sa t i b ar a d e sp at iu. V a a pa r ea m e niu l d er u la nt c u at r ibu t e. S ele ct a t i a lig n si a le get i l oc ul u nde dor it i sa f ie a f is at t it lul de ta be l. Importul datelor in tabel D re am w ea v er v a p er m it e s a im por t a t i da t e e x ist ent e int r - o f oa ie de ca lcu l sa u d int r - o b az a d e da t e. C om a n da ut iliz a t a p entr u r ea liz ar ea a cest e i o per a t iun i e st e Im p or t T a bu lar D at a s i s e p oat e ut iliz a at un ci ca nd da t el e a u fost ex port a t e c a s i f is ier t e xt . P ent r u a s e put ea r ea liz a a c ea st a oper at iu ne tr e bui e c un os cut ce f el d e ca ra ct er est e ut iliz at ca s i de lim it at or , t ipu l de car a ct er car e s epa r a ca m p ur ile d e d at e. D elim it at or ii ut iliz a t i d e ob ice i su nt : T a b, s pa t iul, p unc t ul s i v ir gu la s i dou a p un ct e .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

L a ex p or t ar ea f is ier ul ui de da te va tr e b ui sa a le get i u n de lim it at or c ar e sa v a a pa r a in dat e. Imp o r tu l d at el o r i n Dre a m w e av e r s e fa c e i n m o d u l u rm at o r : 1 . p la sa t i curs or u l in l oc ul un de dor it i sa im p or t at i dat e le 2 . s e lect at i T a bular D at a d in se ct iu ne a C om m on a b ar ei I ns er t sa u c om a nd a T a b ula r Da t a d in s ub m e niu l Ta ble a l m en iulu i I ns er t. 3 . s e lect at i B r ow se si na v iga t i la f i sier ul d e dat e d or it . 4 . s e lect at i d elim it a t or ul d e c am pur i. Da ca nu ex i st a in list a s el ect a t i O t her si i nt r od uc et i de lim it at or ul m a n ua l . 5 . s e lect at i F it t o Da t a pe nt r u ca nou l t a be l sa a ib a lat im ea co nf orm da t e lor d in f i sier ul d e da t e. 6 . s e lect at i F or m at To p R o w da ca f isi er ul d e d at e a r e u n ca p d e t a bel . 7 . s e lect at i O K p ent r u im por t a r ea d at el or .

Exportul datelor din tabel D a ca dor it i sa ex p or t at i da t ele d in t r - un t a be l va tr eb ui sa ef ec t uat i ur m a t oa r e le o per a t ii : 1 . s e lect at i t a bel ul dor it sa u d at i c lic k int r - o ce lula din t a b el 2 . s e lect at i s ub m e niu l Ex por t di n m eni ul F ile s i a po i co ma nd a Ex port T a b le

3 . s e lect at i d elim it a t or ul d e da t e d in m en iul d er ul a nt D e lim it er 4 . s e lect at i s t ilul d or it pe nt r u lin ie no ua L in e B r ea k s in f un ct ie de s ist em ul d e o pera r e c e v a r ula ca nd se v or im p or t a d at e le. 5 . d at i c lic k p e ex p or t si sa lva t i f isi er ul. P RO IEC TA REA M A C H ET ELO R DE P A G IN A Prezentarea machetelor de pagina Ma ch et a d e pa gina s e r ef er a la m od ul in c ar e v a a rat a pa gin a a t u nc i ca nd v a f i v iz ua liz at a i n br o wser . T a b ele le v a aj ut a sa int r od uc et i el em ent e le d in si t e int r - un a num it lo c de p e e cra n. In v iz ua liz a r ea L a y o ut , Dr eam w ea v er va p er m it e s a t r a sat i elem e nt el e d e t a be l dir e ct in f er ea str a D oc um ent , i nt r - un m od m u lt ma i us or .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

T r ec er e a la v iz ua li z a re a L a y out s e fa c e pr in s ele cta r e a b ut on ulu i La y out V iew d in s ub m e niu l Ta ble M od e a l m e niu lui V i ew, sa u pr in a pa sa r ea t a st e lor C T RL +F 6. In m om ent ul i n c a r e v a af la t i in v iz ua li za r e L a y out de v in a ct iv e inc a dou a b ut o a ne pe nt r u m ac het a din ba r a I ns er t , un ul pe nt r u t r as a r ea u nui t a be l ma ch et a si a lt ul pent r u t r a sar ea un ei c elu le m ac he t a ( o c e lula de t a be l) .

Utilizarea vizualizarii Layout P ent r u cr ear ea un ei m a c het e d e pa gin a : 1. s el ect at i L ay out M od e din s ub m e niu l T a bl e Mo de a l m en iulu i V iew , sa u a p a sat i C T RL +F 6. 2. m a i p ut et i de a s em en ea ut iliz a b ut on ul L a y out d in bar a C om m o n. 3. s el ect at i bu t onu l Dr aw L ay out C ell d in b ar a In ser t 4. t r as a t i ce lul e i n f e rea st r a D oc um ent , se cr eaz a a ut om a t un t a b el m a c het a car e v a c ont ine ce lule le ma ch et a. 5. d ac a pu net i cur s or u l pe m ar g inile une i ce lul e c ont ur u l se sc him b a in li nie pl ina r os ie. P e nt r u s e lect ar e da t i c lic k p e ce lula , a st f e l a pa r r e per e le d e m od if ica r e a dim en si unii ce l ule i. 6. m ut a r ea u ne i ce lulu se fa c e p r in s ele ct a r e s i t r a ger e in loc ul dor it . In m odu l L a y out ex ist a o f un ct ie s upl im e nt a r a A u t ost r e c h ( a ut oe xt ind er e ), ca r e fa ce ca o c oloa na sa se ex t ind a p entr u a um ple t ot s p at iul dis po nib i l d in f er ea st r a br ow s er ulu i. E d i t a re a u n u i t ab e l i n vi zu al i z a re a s t a n d a rd D upa pr o ie ct a r e a t a be lul ui in mo du l d e v iz ua liz ar e L a y o ut r ev e nit i la v iz ua liza r ea st a nda r d pe nt r u a da uga r ea co nt inut ulu i. In v iz ua liz ar ea S t a nda r d pu t et i a lin ia c ont inut u l c elu lel or , uni ce lule s a u d iv iz a ce lul ele in f un ct i e de m o du l de a f isar e in b ro w ser pe c a r e- l dor it i . P ut et i de a s em en ea sa a da ug at i c ulor i la t a bel in fun ct i e de loc ul dor it : - c ul oa r e de f und a l p ent r u o c elu la s a u un gr up d e c el ule - c ul oa r e de f und a l p ent r u t ot t a b elu l

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

- c ul oa r e pe nt r u c he nar u l une i c elu le sa u gr up de ce lule - c ul oa r e de ch ena r pent r u t ot t a bel ul. S e p ot a d a u ga i ma g in i de f unda l p en tr u o c elu la s a u pe nt r u t ot t a bel ul. Imb ri c a re a u n u i t ab e l In t ro du cer ea unu i t a bel int r - o ce lula de t a b el ins ea m n a un t a be l im br ica t ( n est ed) . P la sa t i curs or u l in int er ior u l une i ce lul e s i ins er a t i u n t a b el n ou . D im e ns iun il e c e lule i de t a be l lim i t e az a la t im ea s i ina lt im ea t a be lul ui im br ica t . D a ca s unt pr ea m ul t e t a be le im br ic at e , br ow s er ul va a f isa s it e- ul m a i le nt . I n a c est ca z v a t r eb ui sa ga s it i a lt e solu t i i pe nt r u c onst r uir e a s it e- ul ui. T ra n s fo r m a re a t ab e l u l u i i n s t ra tu ri S t ra t ur ile per m it a m pla sa r ea a bs olut a a o bie ct e lor pe pa g i na , dar pe nt r u a f i a f isa t c or ect est e n ec esar a ut iliz ar ea br ows er e lor m od er ne , de la I E 4 . 0 sa u N et sca pe 4 . 0. P ent r u a t r a n sf or ma un t a be l in st r at ur i : 1 . s e lect at i t a b el ul 2 . s e lect at i c om a n da C onv ert T a b les t o L a y er s d in s ub me niu l C o nv er t a l m e niul ui M od if y . 3 . a pa r e ca set a de d ia l og C o nv er t T a b les i n L a y er s, a c ce pt a t i v a lor ile i m p lic it e s i da t i O K .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

D upa t r a nsf or ma r ea t a bel ului in p a n oul L a y er s v a a pa r ea li st a s t r at ur ilor c e a u f ost cr ea t e d int r - un t a b el. Da ca d a t i c lick pe u n lay er d in list a se v a se lect a c e lula r es pe ct i va . I n f er ea str a P r o per t i es p ut et i da n um e dif er it e la f iecar e la y er p ent r u o m a n ipu la r e m a i us oa r a . D a ca a v et i b if at a o pt iu nea Pr ev ent o v er la p s, s t ra t ur ile nu v or put ea f i s upr a p us e un ele p est e a lt ele, da ca d or it i c a un ele st r at ur i s a f i e su pr a p us e d es el ect a t i a c ea st a opt iun e. CONSTRUIREA CADRELOR SI A SETURILOR DE CADRE Prezentarea cadrelor (frames) C adr e le v a of er a po sib ilit a t ea in cl ude r ii ma i m u lt or pa gin i W e b int r - o s ing ur a f er ea st r a d e br ow se r. As t f el u n ut il iza t or poat e s ele cta o le gat ura din t r- o f er ea st r a i ar af i sa r e a p a g inii sa s e fa ca in a lt ca d ru din f er ea st r a de br ows er ex is t ent a . U t iliz ar ea ca dr e lor poat e f i o s olu t i e ex c ele nt a d e a f isa r e a i nf or m at ii lor din t r u n sit e i n f er ea st r a br ow ser- u lui, da r po at e f i si un d ez a st r u da ca nu e st e cr eat c or ect s i da ca lin k- u r ile nu su nt st a bil it e c u a t e nt ie . A ce st t ip d e r ea liz a r e a un ui s it e est e f oar t e ut il a t unc i ca nd d or it i ca int r - o p a g ina w eb s a av e t i in p er m a n ent a o t a bel a de cu pr in s ( m eni u) af is at a . D a ca o par t e d in pa g ina nu s e m od if ica n ici oda t a , at u nc i in t r o duc er ea a ce st e ia i nt r - u n ca d r u est e s ol ut ia i dea la , a st f e l ac e a pa gin a s e in ca r ca o s ing ur a dat a . C re ar e a u n u i se t d e ca d r e C adr e le s unt pa gin i w e b dif er i t e, c a t e u na pe nt r u fie ca re ca dr u, t oat e f ii nd p as t r at e d e o pa gina w eb se pa ra t a car e t ine a c est e ca dr e. A cea st a pa g ina s ep ar at a de f ine st e dim e ns iun ea si poz it i a fi ecar ui ca dr u in p a g ina . A t unc i ca nd l ucra t i cu c a dr e Dr ea m w ea v er a ct iv eaz a c om enz ile Sav e F r am es et ( sa lv ar ea set ulu i de c a dr e) si F r am es et A s ( sa lv a r ea s et u lui d e ca dr e ca ), i n m e niu l F ile ; s e poa t e ut iliz a s i co ma nda S a v e A ll ca r e sa lv eaz a t ot co nt in ut ul ca dr ulu i si a l s et u lui d e c a dr e. M et od e de cr ear e a ca dr e lor : - v iz ua liza t i c he na r ele d e ca dr e si t r a g et i- le c u m o us e- ul p ent r u a cr ea ca dr e n oi Fr a m e B or der s d in s ubm e niul V is ua l A ids a l m e niu lui V iew - ut iliz ar e a c om enz ilo r din su bm eni ul F r a m set a l m en iulu i Mod if y - ut iliz ar e a ca dr e lor p re de f init e din Dr ea m w ea v er

Cadrul top.html

Cadrul main.html

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

P ent r u a da un t it lu de p a gi na v a t r eb ui s a s ele ct a t i p a g ina W e b ca r e c ont in e s et u l d e ca dr e, nu me le c a dr e lor co nt in ut e de a ce st a nu v or f i a f isa t e in br ow s er n ic iod at a . A t unc i c a n d ex ist a c a dr e in pa gi na p ut et i a v ea a cc es la pa n ou l Fr am e s c ar e v a a j ut a s a gest io na t i m a i usor ca dr e le cr ea t e pr i n se lect ar e a ca dr el or i ndiv id ua le si st a b ilir ea a tr ib ut e lor f ie ca r u i ca dr u. A f isar ea pa nou lui Fr am es s e fa ce di n m e niu l W ind ow F r am es sa u pr in t a st a r ea SH I FT +F 2.

A t unc i ca nd d at i cl i ck p e un ca dr u d in pa no ul Fr a m e s, pr opr iet a t ile c a dr u lui r e sp ect iv v or f i d isp oni bile in fer ea st r a d e in sp ect ar e P r o pe r ti es . Est e f oa r t e bin e s a d at i o d en um ir e f ieca r u i ca dr u, a ce as t a de num ir e e st e n um ele ca dr ul ui r es pe ct iv si n u c el a l f is ier u lui c r ea t .

A st f e l v a f i m ult m a i us or sa st a bilit i c oor dona t e le d e a f isa r e a pa gin ilo r int r u n a num it ca dr u . P r in im pa r t ir e a u nui c a dr u Dr ea m w ea v er cr eaz a u n no u ca dr u s et , i ar ca dr e le e x ist ent e s unt im br ica t e in s et u l de ca dr e .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

S ta b i l i re a a t ri b u t e l o r p en t ru c a d r e F ie ca re ca dr u car e l- a t i cr ea t a r e a t r ib ut e le pr opri i de d er ula r e a f is at e in f er ea st r a de ins pe ct a r e P r o per t i es. I n m om ent ul i n car e se lect at i un ca dr u d in p a n oul Fr am es , pe nt r u m en iul S cr o ll a v et i p at r u v ar ia nt e : - Y es a ct iv ea za a f is ar e a b ar elor de der u lar e - N o d ez act iv e az a b ar ele de der u lar e , i ar da ca co nt in ut ul e st e ma i m ar e d eca t p a g ina a f is at a , v iz it at or i i nu v or p ut ea v e de a ac est cont in ut - A ut o s e a ct iv eaz a ba r ele d e der ula r e at un ci ca n d co nt in ut ul c a dr u lui e st e m a i m ar e d ec at s up ra fat a v iz ib ila in br ow s er - D ef a u lt p ent r u ce l e m a i m ult e br ow se re est e e ch iva len t ul la A ut o . In f er ea st r a d e i ns pect ar e Pr o pr ier t ie s pu t et i st a b ila da c a dor it i ca s a f ie v iz ibil e ch ena r ele c a dr elor, gr o sim ea a ces t or c he nar e s i cu loa re a dor it a . D a c a nu d or it i sa f ie a f is at e s ele cta t i N o di n m e niu l der u la nt B or de r s s i nu v a f i a f isa t d oar d ac a c a dr ele a d ia cent e a u set at e la r a n du l lor N o la b or der s. In m om ent u l in c a r e at i i nt r odu s un lin k int r - u n a num it ca dr u, i n m en iul d er u la nt T ar get a v et i la dis po z it ie p at r u de num ir i r ez er va t e pe nt r u le ga t ur i : - _t op de sc hi de p a g ina W e b in t oat a f er ea st r a br ow s er ul ui - _ se lf d es ch ide p a g ina W e b in a ce ea si f er ea st r a c u ca dr u l ca r e c ont in e l ink ul - _ pa r e nt desc hid e pa gin a W eb in c a dr ul s et - _ bla nk de sc hi de p a g ina W e b int r- o f er ea st r a nou a d e br o w ser. D a ca at i i nt r od us un n um e p en t r u f ie ca r e ca dr u cr eat , v et i av ea in m en iul d er u la nt s i n um ele ac est or c a dr e. C u a j ut or u l f u nct iei G o T o U RL put et i sa incar cat i do ua ca dr e de oda t a la a ct i ona r ea unu i lin k . P ent r u ut iliz a r ea a ce st e i f un ct ii se ef e ct u eaz a ur ma t or ii pa s i : 1 . s e lect at i o bie ct u l di n ca dr u c ar e va dev en i hip er le ga t ur a 2 . i n ca s et a L in k in tr o duc et i j a v as cr ip t :v oid ( 0) ; car e cr e ea za o le ga t ur a goa la 3 . d es c hidet i pa no ul B e ha v ior s d in m en iul W ind ow, sa u SH IFT +F 3 4 . d at i c lic k p e + si s e lect at i G o T o U RL 5 . s e lect at i ca d r u l do r it si int r od uc et i UR L- ul, a po i a p a sat i O K .

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

CURS V

LIMBAJUL DINAMIC HTML. STRATURI Ce este Dynamic HTML? Adaugarea unui strat Imbricarea straturilor Taguri pentru straturi Alinierea, modificarea straturilor

FORMATAREA PAGINILOR WEB Stilurile HTML si Cascading Style Sheets Crearea si aplicarea unui stil personal Optiunile stilurilor Pozitionarea unui strat cu stil Crearea unei foi de stil externe

FOLOSIREA FUNCTIILOR BEHAVIOR Prezentarea functiei Behavior Afisarea si ascunderea straturilor Deschiderea unei ferestre noi Afisarea unui mesaj Adaugarea unui mesaj in bara de stare

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

LIMBAJUL DINAMIC HTML. STRATURI DHTML este o extensie a lui HTML care ofera posibilitatea dezvoltatorilor de pagini Web sa aiba un control mai mare asupra machetarii si pozitionarii in pagina. Ce puteti realiza cu ajutorul DHTML : adaugarea de imagini ascunse, care vor aparea cand utilizatorul apasa un buton sau da click pe o zona fierbinte ; puteti face ca textul sau imaginile sa se miste pe ecran ; puteti crea meniuri pop-up ; puteti permite vizitatorilor sa faca operatiuni de drag-and-drop asupra obiectelor; schimbarea culorii sau dimensiunii textului in momentul in care un vizitator trece cu mouseul peste el; incarcarea unui text intr-o anumita zona a ecranului, ca raspuns la operatiunile effectuate de catre vizitator.

Adaugarea unui strat Straturile sunt zone pe care le veti folosi pentru pozitionarea unui continut pe o pagina Web. Atributele straturilor : Visibility vizibilitate va permite sa ascundeti continutul unui strat si acesta sa fie afisat in momentul in care se realizeaza o anumita operatiune Z-index prin acest atribut se controleaza ordinea de asezare a straturilor pe pagina.

Crearea unui strat in Dreamweaver se poate face astfel: din bara Common selectati Layout, apoi butonul Draw Layer selectati Layer din submeniul Layout Objects al meniului Insert

Strat

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

In momentul in care selectati un layer, apar reperele de manevrare care va permit sa mariti sau micsorati dimensiunea sau sa mutati layerul. Acest lucru poate fi realizat si din fereastra de inspectare Properties, iar unitatea de masura implicita este pixelul. Este recomandabil sa dati un nume distinct pentru fiecare layer creat, atunci cand vor fi multe layere in pagina va fi foarte dificil sa le gestionati ; numele se recomanda sa nu contina spatii sau semne de punctuatie. Stabilirea pozitiei unui strat Fiecare layer are un reper de manevrare cu ajutorul caruia puteti sa-l trageti in pozitia dorita. Daca doriti sa modificati pozitia mai multor layere, atunci puteti selecta layerele dorite cu ajutorul tastei SHIFT + click. Cu ajutorul panoului Layers (F2 sau Window Layers) puteti selecta layerele dorite si puteti stabili caracteristicile visibility si z-index.

Mai exista o caseta de validare Prevent overlaps, atunci cand este bifata straturile create pot fi suprapuse. Aceasta caracteristica se utilizeaza in special la crearea tabelelor, un tabel nu poate avea elemente suprapuse. Din fereastra de inspectare Properties puteti seta pozitia stratului relativ la toata fereastra browserului, L left, T top (sus). De asemenea puteti stabili o culoare de fundal pentru strat, sau utilizarea unei imagini de fundal pentru stratul respectiv. Imaginea se va repeta ca un mozaic in cadrul stratului in cazul in care imaginea este mai mica decat stratul si el va fi afisat peste imaginea din fundal.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

In cazul in care doriti ca straturile sa se suprapuna in pagina, va trebui sa setati valoarea zindex pentru fiecare strat, astfel stratul care are valoarea cea mai amre va fi intotdeauna deasupra. Vizibilitatea unui strat poate fi setata din fereastra de inspectare Properties sau din panoul Layers, caz in care exista o reprezentare grafica un ochi, care atunci cand este deschis, layerul are caracteristica de vizibilitate activa.

Imbricarea straturilor

Puteti crea straturi imbricate, caz in care stratul imbricat este considerat copil si mosteneste caracteristicile stratului parinte. Daca stratul parinte este vizibil, atunci si stratul copil este vizibil. In momentul in care deplasati stratul parinte, stratul copil se va deplasa odata cu el. Pentru ca un strat sa fie imbricat, selectati stratul in panoul Layers, tineti apasata tasta CTRL si trageti stratul peste stratul in care doriti sa fie imbricat. Stratul imbricat va aparea in panoul Layers indentat la stratul parinte.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Operatiunea de scoatere din imbricare se face invers celei de introducere a stratului in imbricare.

Tagurile straturilor

In preferintele pentru straturi puteti stabili tagul implicit pentru straturi, acesta poate fi <div> sau <span>. Ambele variante vor functiona fara probleme, dar conform standardului W3C, tagul <div> este solutia logica de utilizare. Tagul <span> este mai mult utilizat pentru a stabili caracteristicile unui fragment de text. FORMATAREA PAGINILOR WEB Stilurile HTML si Cascading Style Sheets Css (Cascading Style Sheets) foi de stil in cascada, va permit sa aplicati o proprietate sau un grup de proprietati unui obiect prin aplicarea unui stil acelui obiect.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Stilurile se definesc si se aplica in Dreamweaver in panoul CSS Styles si pot fi folosite si la pozitionarea obiectelor si atributele chenarelor.

Crearea si aplicarea unui stil personal Panoul CSS Styles contine lista stilurilor personale care au fost create si definite si sunt gata de a fi utilizate in pagina Web. Pentru a crea un stil personal: 1. selectati butonul New CSS Style din panoul CSS Styles 2. apare o caseta de dialog New Style, selectati butonul radio Class, se aplica oricarui tag si creeaza un stil personal 3. introduceti un nume in caseta de nume, stilurile personale incep cu un punct 4. selectati optiunea This Document Only se aplica doar acestui document, astfel stilul va fi plasat in partea de sus a paginii Web curente 5. va aparea caseta de dialog Style Definition avand selectata categoria Type. 6. selectati tipul fontului dorit, dimensiunea si culoarea dorita.

Optiunile stilurilor : 1. 2. 3. 4. 5. 6. 7. 8. Type defineste atribute de scriere si poate fi aplicat unui text sau asupra unui obiect care contine text Background defineste atribute de fundal culoarea sau imaginea si poate fi aplicat obiectelor in care puteti stabili fundal sau culoare Block defineste atributele de scriere pentru paragrafe Box defineste atributele aplicate unui obiect, cum ar fi dimensiunea marginii Border attribute aplicabile obiectelor cu chenare tabele si straturi List attribute pentru liste tipul de marcare Positioning defineste atributele unui strat vizibilitatea si z-index Extension attribute pentru dezvoltari ulterioare valabile doar pentru IE.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

- caseta de dialog Styles definition

Pozitionarea unui strat cu stil Atunci cand se lucreaza cu straturi este util sa le pozitionati pe ecran cu ajutorul stilurilor. Pentru a crea un stil pentru straturi : 1. creati si denumiti un stil personal 2. selectati categoria Positioning din caseta de dialog Style Definition 3. selectati Absolute din categoria Type 4. stability proprietatile Left, Top, Width si Height

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

5. apasati OK.

Daca doriti sa creati o hiperlegatura cu effect de rollover: 1. 2. 3. 4. 5. la selector type selectati Advanced din meniul derulant Selector alegeti a:hover bifati butonul radio This document only apasati ok, iar din CSS style definition selectati o culoare pentru text. apasati ok.

Crearea unei foi de stil externe Stilurile create pot fi realizate si extern, intr-un fisier care sa fie aplicat la toate paginile Web existente intr-un site. Foile de stil externe se termina in extensia .css. Atunci cand actualizati o foaie de stil externa, se actualizeaza automat toate setarile din paginile care depind de acel stil. Pentru a crea o foaie de stil externa : 1. creati un stil nou si selectati New Style Sheet File 2. selectati butonul OK 3. se deschide caseta de dialog Save Style Sheet File As, navigati pana la directorul unde doriti sa salvati foaia de stil 4. introduceti un nume pentru foaia de stil. Apasati OK. Dupa ce ati creat stilul il puteti edita de cate ori doriti si sa salvati stilurile noi in acelasi fisier. Pentru a aplica o foaie de stil la o pagina noua, apasati butonul Attach Style Sheet din panoul CSS Styles si selectati foaia de stil externa, selectati Link si apasati ok.

FOLOSIREA FUNCTIILOR BEHAVIOR

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Prezentarea functiei behavior Functiile behavior (comportamente) din Dreamweaver va ajuta sa adaugati dinamica si interactivitate in site. Aceste functii va permit sa lansati diferite actiuni atunci cand vizitatorul muta cursorul in site, da click cu mouse-ul sau incarca o pagina Web. O functie behavior este o actiune declansata de un eveniment: Eveniment + Actiune = Functie Behavior Evenimente: onMouseOver = se declanseaza la plasarea cursorului deasupra unui obiect onMouseDown = se declanseaza la apasarea butonului mouse-ului onMouseUp = se declanseaza la eliberarea butonului mouse-ului onClick = se declanseaza la apasarea si eliberarea butonului mouse-ului onLoad = se declanseaza cand obiectul sau pagina a incheiat incarcarea onBlur = se declanseaza cand obiectul pierde focusul onFocus = se declanseaza cand obiectul primeste focusul

Atunci cand atasati o functie behavior unor obiecte din pagina, Dreamweaver deschide casete de dialog de functii behavior, unde veti selecta evenimentul care sa declanseze functia behavior (comportamentul). Dreamweaver va include automat codul JavaScript necesar in sectiunea head a paginii Web. La tagul obiectului va fi adaugat codul care intercepteaza evenimentul si care va apela codul JavaScript. Dreamweaver nu va permite atasarea unor functii behavior unor obiecte care nu sunt adecvate functiei apelate, aceste functii nu sunt selectabile din lista.

Puteti sa atasati mai multe functii behavior diferite pentru un obiect, evenimentele vor avea loc in ordinea in care au fost listate. Ordinea poate fi modificata prin actionarea sagetilor in sus sau in jos din panoul Behaviors. La crearea unui eveniment va trebui sa selectati browserul pentru care doriti sa ruleze evenimentul. Daca ati selectat un eveniment care nu functioneaza intr-un anumit browser, vizitatorii nu vor putea vedea actiunea inclusa in pagina sau vor primi un mesaj de eroare din JavaScript.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Afisarea si ascunderea straturilor Pentru a afisa sau a ascunde un strat al paginii Web exista functia Show-Hide Layers si trebuie creat un eveniment care sa declanseze actiunea. Functia Show-Hide Layers va fi umbrita daca in pagina nu exista un Layer. Adaugarea functiei Show-Hide Layers unei hiperlegaturi se face astfel : 1. 2. 3. 4. creati un strat nou in pagina ascundeti stratul creat prin schimbarea atributului de vizibilitate adaugati o legatura goala la textul sau imaginea inserata javascript :void(0); deschideti panoul Behaviors si dati click in interiorul hiperlegaturii create. In bara de de titlu a panoului Behaviors trebuie sa apara <a> Actions 5. apasati butonul + din panoul Behaviors si selectati functia behavior Show-Hide Layers 6. in caseta de dialog Show-Hide Layers selectati stratul si dati click pe butonul Show 7. click pe OK pentru salvarea setarilor efectuate.

Deschiderea unei ferestre noi Pentru a afisa un URL intr-o fereastra noua Dreamweaver pune la dispozitie functia Open Browser Window. Puteti deschide o fereastra de browser cu o anumita domensiune si anumite atribute ale browserului. Atribute : Navigation toolbar contine butoanele de navigare back, next si altele Location toolbar afiseaza URL-ul curent Status bar bara de stare este in partea de jos a browserului Menu bar contine meniurile standard ale browserului Scrollbars permite vizitatorului sa deruleze fereastra browserului Resize handles vizitatorul poate sa redimensioneze fereastra Window Name nume optional

Pentru a deschide o fereastra noua : 1. inserati o imagine intr-o pagina Web si selectati imaginea 2. in panoul Behaviors dati click pe + si selectati functia Open Browser Window 3. in caseta de dialog Open Browser Window completati URL-ul care va fi incarcat in noua feresatra 4. stabiliti latimea si inaltimea ferestrei si marcati atributele dorite

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

5. dati click pe OK.

Afisarea unui mesaj Puteti adauga o functie noua care sa deschida o caseta de avertizare JavaScript Popup Message, astfel :

1. selectati imaginea inclusa in site 2. apasati + si selectati functia Behavior Popup Message 3. in caseta de dialog Popup Message introduceti mesajul care doriti sa apara in caseta de avertizare 4. dati click pe OK.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Adaugarea unui mesaj in bara de stare 1. selectati un obiect de pe pagina pentru a declansa functia behavior Set Text of Status Bar 2. selectati butonul + din panoul Behaviors si alegeti functia behavior Set Text of Status Bar 3. introduceti textul care doriti sa apara in bara de stare si dati click pe OK.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

CURS V

FUNCTII BEHAVIOR AVANSATE Utilizarea selectorului de taguri Restrangerea miscarii stratului Captarea pozitiei destinatiei stratului Drag Layer Eveniment atasat tagului

ANIMATII FOLOSIND CONTROALELE DE TIMP Crearea unei animatii Utilizarea panoului Timelines Inregistrarea unei animatii.Autoredare.Ciclare Utilizarea mai multor controale de timp intr-o pagina Web

CREAREA UNUI FORMULAR SI PRELUAREA DATELOR Crearea unui formular Butoane radio. Casete de validare Adaugarea unei liste sau a unui meniu Butoane si butoane cu imagini Crearea unui meniu de salt

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

FUNCTII BEHAVIOR AVANSATE Drag Layer este o functie behavior avansata care va permite sa creati straturi pe care vizitatorul le poate deplasa cu mouse-ul in fereastra browserului. Aceasta functie este utila pentru crearea suprafetelor mobile, a jocurilor puzzle, casete de dialog si alte tipuri de interactiuni. Deschideti o pagina web noua in care veti crea patru straturi care vor fi trase cu mouse-ul. Apoi veti crea un strat destinatie. Straturile pot contine orice : text, imagini sau chiar si alte straturi.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Functia Drag Layer va permite vizitatorului sa traga stratul cu mouse-ul. Inainte de a putea fi tras stratul, trebuie sa activam aceasta functie, care poate fi activata la incarcarea paginii prin interceptarea evenimentului onLoad al tagului <body>. Pentru a folosi functia Drag Layer si a crea straturile de tragere si de destinatie trebuie efectuati urmatorii pasi : 1. 2. 3. selectati tagul <body> din selectorul de etichete din Bara de stare a Dreamweaver dati click pe butonul + al panoului Behaviors si selectati Drag Layer apare caseta de dialog Drag Layer

4. 5.

selectati numele stratului care va fi tras cu mouse-ul selectati Constrained (restrans) din meniul derulant Movement.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

6. 7.

apar casetele in care trebuie sa introduceti valorile in pixeli ale coordonatei suprafetei de restrangere apasati ok.

O solutie mai simpla de introducere a datelor de restrangere a stratului, este utilizarea butonului Get Current Position, care capteaza pozitia stratului si completeaza automat coordonatele : 1. 2. verificati ca in panoul Behaviors sa nu fie bifata caseta de validare Prevent Layer Overlaps pozitionati stratul configurat cu functia Drag Layer, in pozitia finala de destinatie, pentru o fixare cat mai exacta puteti utiliza tastele sageti care deplaseaza stratul cate un pixel selectati tagul <body> di selectorul de taguri dat dublu click pe functia Drag Layer in panoul Behaviors pentru a o edita dati click pe Get Current Position, valorile pentru Left si Top se vor completa automat setati distanta pentru alipirea la grila Snap if Within dati click pe ok puneti stratul in pozitia sa initiala.

3. 4. 5. 6. 7. 8.

Puteti sa definiti o anumita suprafata din layer-ul selectat sa fie activ la tragere. Acest lucru poate fi utilizat pentru a crea un control mai strict a zonei active le tragere, astfel, daca aveti o usa care trebuie deschisa, puteti stabili ca si zona de tragere - manerul usii. In caseta de dialog Drag Layer aveti o sectiune Advanced, de unde puteti defini suprafata de tragere, coordonatele zonei de tragere fiind relative la coltul din stanga sus al stratului care va fi deplasat.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

De asemenea exista posibilitatea sa stabiliti ca stratul tras sa fie deasupra celorlalte straturi indiferent de valoarea atributului z-index, iar avloarea initiara z-index sa fie refacuta automat dupa ce stratul a fost plasat in pozidia dorita.

ANIMATII FOLOSIND CONTROALELE DE TIMP Crearea unei animatii Cu ajutorul Dreamweaver puteti realiza animatii care sa ruleze in browser, utilizand panoul Timelines care va ajuta sa modificati proprietatile in functie de timp.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

DREAMWEAVER 8

Dreamweaver 8 include o serie de noutati menite sa imbunatateasca utilizarea aplicatiei si sa ajute la crearea paginilor mult mai facil, indiferent daca utilizati modul design sau in cod. Dreamweaver 8 ofera suport pentru cele mai noi standarde, incluzand suport pentru utilizarea avansata a CSS, XML si RSS feeds.

Noutati in DREAMWEAVER 8

Transferul fisierelor

Transferul fisierelor in server se face in background, in timp ce se lucreaza la paginile web.

Zoom

Este o functie care permite inspectarea imaginilor sau lucrul cu tabele imbricate mai complexe. De asemenea permite previzualizarea unei pagini, astfel incat sa poata fi vazuta afisarea reala a paginii.

Linii de ghidaj

Afisarea unor linii de ghidaj pentru a avea o imagine precisa a dimensiunii paginii si vizualizarea ei in browsere.

Bara de unelte in cod Dreamweaver 8 afiseaza de-a lungul paginii, la afisarea in mod cod, o serie de butoane menite sa usureze inserarea unor elemente comune de comanda, fara a mai fi nevoiti sa le scriem direct in pagina.

Afisarea blocurilor de Exista posibilitatea afisarii codului dorit prin extinderea sau ascunderea cod blocului de cod.

Spatiu de lucru

Configurarea si personalizarea spatiului de lucru. Dreamweaver 8 livreaza configuratii diferite necesare lucrului in cod sau design. Exista de asemenea posibilitatea crearii unei configuratii personalizate, care poate fi salvata sub numele dorit si utilizata atunci cand doriti.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Layout

Au fost incluse layout-uri noi de desing, care permit crearea usoara a paginilor web.

Sincronizarea site-

A fost imbunatatit managementul site-urilor prin functii de sincronizare

ului. Check-in/check- avansate care verifica daca fisierul in uz este in varianta finala. De asemenea out a fost imbunatatit modulul de verificare prin functia check-in/check-out astfel incat sa se evite scrierile accidentale peste fisiere scrise de altcineva.

Fisiere comparate

Exista posibilitatea compararii a doua fisiere locale, sau a unuia local si a altuia din server, astfel incat sa se depisteze rapid diferentele dintre ele.

Lipire speciala

Cu noua optiune din Dreamweaver, poate fi retinuta sursa completa creata in Microsoft Word, sau doar lipirea textului.

Editarea in cod

A fost imbunatatit controlul la lucrul in cod prin inchiderea automata a tagurilor deschise. Acestea pot fi si setate personalizat.

CSS

Toate functionalitatile CSS au fost incluse intr-un singur panou, astfel incat lucrul cu stiluri sa fie mult mai usor si mai productiv.

Flash Video

Dreamweaver 8 permite introducerea filmelor Flash in pagina web intr-un mod foarte simplu, din cateva click-uri de mouse.

De asemenea Dreamweaver 8 ofera suport pentru noile tehnologii inclusiv

PHP 5, ColdFusion

MX 7 si Macromedia Web Publishing System.

Transferul fisierelor
In Dreamweaver 8 poate fi vizualizata starea fisierelor care se transfera: transferat cu succes, exclus de la transfer sau transfer esuat. De asemenea poate fi salvata activitatea intr-un fisier log cu evenimente.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

In timpul transferului Dreamweaver nu permite realizarea anumitor activitati Server-related, cum ar fi:

6. Put/Get/Check in/Check out. 7. Undo check-out. 8. Crearea unei conexiuni cu baza de date. 9. Bind dynamic data. 10. 11. 12. 13. 14. 15. 16. 17. 18. Previzualizarea datelor live. Inserarea unui serviciu web. Stergerea unor fisiere sau directoare din server. Previzualizarea in browser a unui server de test. Salvarea unui fisier in server. Inserarea unei imagini din server. Deschiderea unui fisier din server. Salvarea automata a fisierelor in server dupa modificare. Tragerea fisierelor in server.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

19.

Decupare, copiere sau lipire a fisierelor in server.

Zoom

Functia Zoom va permite sa mariti sau sa micsorati pagina web, astfel incat sa puteti verifica acuratetea paginii la nivel de pixel, paginile cu imagini sau text de dimensiuni reduse putand fi editate mult mai facil. Aceasta functie este disponibila doar in modul Design.

Exista mai multe moduri de utilizare a acestei functii: 13. se selecteaza lupa din partea dreapta jos a ferestrei document si se da click in pagina in zona in care se doreste afisarea detaliata, sau se selecteaza cu mouseul zona care se doreste a fi marita;

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

14. se poate selecta lista de marire a paginii (Set magnification) si se selecteaza procentul dorit; 15. din lista de marire se poate seta ca pagina sa fie incadrata automat in functie de necesitati: 16. incadrare in pagina a zonei selectate este activa doar daca a fost selectata o zona initial 17. incadrare pe latimea paginii 18. incadrare in pagina completa, astfel incat sa fie vizualizata toata pagina in fereastra document.

Linii de ghidaj

Liniile de ghidaj se obtin prin tragerea cu mouse-ul a marginilor de la ruler. Aceste linii de ghidaj sunt utile pentru alinierea obiectelor din pagina mult mai precis, la masurarea elementelor din pagina sau simularea vizualizarii in browser. Pentru a va ajuta la alinierea elementelor din pagina, Dreamweaver va pune la dispozitie o functie de alipire a elementelor la linia de ghidaj, sau de alipire a liniei de ghidaj la elemente (elementele trebuie sa fie in pozitie absoluta, pentru ca alipirea sa functioneze). De asemenea exista posibilitatea ca liniile de ghidaj sa fie blocate pentru a se preveni mutarea accidentala de catre un alt utilizator. Crearea unei linii de ghidaj orizontala sau verticala: 5. trageti cu mouse-ul de rulerul corespunzator 6. pozitionati linia de ghidaj in fereastra document si eliberati butonul de la mouse Liniile de ghidaj pot fi repozitionate prin tragerea din nou cu mouse-ul. In starea initiala, liniile de ghidaj, sunt setate in pixeli de la marginea de sus sau din stanga ferestrei document. Pentru a seta liniile de ghidaj in pixeli, trebuie apasata tasta SHIFT in momentul crearii liniilor.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Pentru a afisa sau ascunde liniile de ghidaj: Select View > Guides > Show Guides Pentru alipirea elementelor la liniile de ghidaj: Select View > Guides > Snap to Guides Pentru alipirea liniilor de ghidaj la elemente: Select View > Guides > Guides Snap to Elements Pentru a bloca sau deblca liniile de ghidaj:

Select View > Guides > Lock Guides Pentru a muta linia de ghidaj intr-o anumita pozitie:

dublu click pe linia de ghidaj introduceti noua pozitie in fereastra de dialog si apasati OK pentru a vizualiza pozitia liniei de ghidaj tineti mouse-ul deasupra liniei pentru a vizualiza distanta dintre liniile de ghidaj, pozitionati mouse-ul deasupra liniei si apasati tasta CTRL Pentru a schimba culoarea liniilor de ghidaj:

Select View > Guides > Edit Guides

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

selectati culoarea dorita din meniul pop-up si apasati OK Pentru a schimba culoarea care indica distanta dintre liniile de ghidaj:

Select View > Guides > Edit Guides selectati culoarea dorita de la setarea de distanta a liniilor de ghidaj Pentru a sterge o linie de ghidaj, trageti linia cu mouse-ul pana in ruler si astfel va disparea

linia selectata. Pentru a sterge toate liniile de ghidaj:

Select View > Guides > Clear Guides

Bara de unelte in cod Cu ajutorul barei de unelte in cod puteti adauga cateva operatiuni standard de codare, cum ar fi restrangerea sau expandarea selectiei de cod, sublinierea codului invalid, adaugarea sau stergerea comentariilor. Aceasta functie este activa doar la vizualizarea paginii in cod, bara de unelte aparand pe verticala in stanga ferestrei document. Bara de unelte in cod in cod nu poate fi mutata sau andocata la grupul de panouri, dar poate fi ascunsa daca doriti acest lucru, din meniul View Toolbars Coding, sau prin click pe butonul drept al mouse-ului si deselectare Coding.

Open Documents afiseaza documentele deschise. Prin selectare, se deschide documentul in fereastra document. Collapse Full Tag prin plasarea cursorului inaintea unui tag si apasarea butonului, se restrange continutul tagului selectat (de exp.: <table>...</table>. Collapse Selection ascunde doar tagul selectat. Expand All reafiseaza codul restrans prin comanda Collapse. Select Parent Tag selecteaza continutul tagului selectat. Daca se da click in continuare, se afiseaza tagurile parinte pana la tagul <html>. Balance Braces afiseaza codul continut intre {}, () sau []. Show Line Numbers afiseaza sau ascunde numarul liniilor de cod. Highlight Invalid Code afiseaza codul invalid. Apply Comment / Remove Comment inserare sau stergere comentarii in pagina. Wrap Tag incadreaza codul in fereastra document astfel incat sa nu mai efectuati scroll pentru afisarea liniilor de cod. Recent Snippets permite inserarea ultimelor coduri snippets utilizate.

Copyright 2006 : Institutul Multimedia Romano Elvetian

Macromedia Dreamweaver MX

Realizator curs: Sebastian Mezei

Spatiu de lucru
Dreamweaver 8 ofera posibilitatea salvarii suprafetei de lucru in mod personalizat, in functie de preferintele fiecarui utilizator. In mod implicit exista 3 variante de setari a suprafetei de lucru: Coder, Designer, Dual Screen. Aceste configuratii pot fi accesate din meniul Window submeniul Workspace Layout.

Pentru a crea un spatiu de lucru personalizat:


aranjati grupul de panouri sau panourile in modul dorit selectati Window > Workspace Layout > Save Current introduceti un nume si apasati OK. Pentru a sterge sau redenumi un spatiu de lucru personalizat, accesati Window > Workspace Layout > Manage.

Copyright 2006 : Institutul Multimedia Romano Elvetian