Webszerkeszts Dreamweaver hasznlatval

Dreamweaver trtnelem 1996-ban mutatta be elszr a Macromedia szoftverhz az els WYSIWYG ( What You See Is What You Get = Amit ltsz, azt kapod) webszerkeszt programot, mely a Dreamweaver (lomszv) nevet kapta. A program segtsgvel egy grafikus tervez felleten lehet weboldalakat kszteni. A program a grafikai felleten beillesztett tartalmakat fordtja le HTML nyelvre. Az els bemutats ta kilenc verzi kerlt piacra a folyamatos fejlesztsek kvetkeztben. Taln a piacon eltlttt hossz id s tapasztalat teszi a Dreamweaver-t professzionlis webszerkeszt alkalmazss. Jelenlegi legjabb vltozata mr az Adobe szoftverhz vdjegye alatt fut, mivel az Adobe szoftverhz felvsrolta a Macromedia szoftverhzat, ezzel egytt az sszes Macromedia termket is. gy a legjabb vltozat neve: Adobe Dreamweaver CS3 (Creativ Suit 3-as verzi) Dreamweaver elnyk A Dreamweaver sok oldalan tud egytt mkdni ms olyan alkalmazsokkal, melyek szintn a webszerkeszts elengedhetetlen eszkzei. Ilyen alkalmazs pldul az Adobe Flash CS3 (rgebben ez is Macromedia termk volt), melyet webes animcik ksztsre alkalmazunk legtbbszr. Meg kell emltennk az Adobe Fireworks CS3 grafikai kpszerkeszt programot, mely egy kimondottan webszerkesztsre optimalizlt program, s a Dreamweaverben tbb helyen is megtallhat kettjk egytt mkdsnek lehetsge a weboldalba illesztett kpek terletn. A Dreamweaver egy olyan webszerkeszt alkalmazs, mely nem specializldott egyik bngsz megjelentsi kpessgeire sem. Ez azt jelenti, hogy nincs semelyik bngszre optimalizlva, hanem legjobb tudsa szerint olyan oldalakat kszt, melyek minden bngszben megfelelen mkdni fognak. (Megjegyzs: Ez egy azrt fontos tulajdonsg, mert vannak olyan webszerkeszt alkalmazsok, melyek kimondottan optimalizlva vannak egy adott bngszre. Ilyen pldul a Microsoft Front Page, ami maximlisan Microsoft Internet Explorer orientlt.)

Dreamweaver ablak felptse

Objektum paletta Segtsgvel klnbz HTML objektumokat tudunk elhelyezni az oldalon, mint pldul akpek, tblzatok, hivatkozsok stb. A knnyebb kezelhetsg kedvrt ezeket kategrikba soroltk. Kategrik kztti vltshoz kattintsunk a Common felirat mellet lthat hromszgre, majd a megjelen menbl vlasszuk ki a megfelelt. Ha ez az jszer elrendezs nem szimpatikus, vagy megszoktuk a korbbi verzik elrendezst a hromszgre kattintva a Show as Tabs parancsot vlasztva visszatrhetnk hozz. Nzet vlasztk Itt vlaszthatjuk ki, hogy milyen nzetben szeretnnk ltni az aktulis weblapunkat. Hromfle nzetet vlaszthatunk: Code, a HTML kdot ltjuk, Split, egyszerre ltszik a HTML kd s a weblap tervezi nzete. Alaprtelmezs szerint 50-50% foglaljk el a dokumentum ablaknak. Termszetesen ez fggleges irnyban megvltoztathat. A kt ablakot elvlaszt vonalra kell mozgatni az egr kurzort, amg az ketts nyll nem vltozik, ezutn a tbbi Windows alkalmazsbl ismert mdn kell eljrni. A harmadik nzet a Design nzet, tbb-kevsb azt ltjuk, ahogy az oldalunk ki fog nzni. Ezen a nzeten grafikus objektumok segtsgvel tudjuk szerkeszteni a weboldalunkat. Properties paletta Egy dinamikus konfigurcis paletta, mely mindig annak az objektumnak a tulajdonsgait mutatja, amelyik ppen ki van jellve. Ez azrt fontos, mert minden opci egy helyen rhet el, s nem kell keresgetnnk a belltsokat a mensorban.

Site Root meghatrozsa Mint azt mr emltettk, a webszerkeszt egyik legfontosabb feladata, hogy a weboldal minden tartalmi rszt egy a weboldal szempontjbl- kitntetett knyvtrban trolja, mely a weboldal SiteRoot-ja. Ezzel maximlisan tisztban van a Dreamweaver is, gy mieltt elkezdnk vele dolgozni, meg kell hatrozni, hogy melyik site az, amelyiket most szerkeszteni fogjuk. Kt lehetsgnk van. Az egyik, hogy ltrehozunk egy j site-ot, a msik, hogy egy meglv site-ot akarunk szerkeszteni. Mindekt esetben a legfontosabb az, hogy ezltal a Dreamweaver azonostja majd a siteroot-ot, s a tovbbiakban rbzhatjuk magunkat abbl a szempontbl, hogy az ltalunk mentett dokumentumok, vagy az ltalunk beszrt tartalmi elemek (pl., kpek) mr ebbe a knyvtrba fognak kerlni. Ez egy olyan biztonsgos funkci, amely figyelmeztet minket abban az esetben, ha pldul egy siteroot-on kvli knyvtrbl illesztnk be egy kpet weboldalunkba. Ilyenkor a Dreamweaver megkrdezi, hogy akarunk-e egy msolatot a kprl a siteroot-unkba. Nzzk teht a gyakorlati SiteRoot meghatrozst mindkt esetben: 1., j site ltrehozsa Site men-> New Site parancst kell vlasztanunk, ahol a kvetkez ablak fogad bennnket:

Az ablak tetejn kt Site bellts nzet kzl vlaszthatunk: Basic (alap), s Advanced (kiterjesztett) Jelen esetben a Basic nzetben fogjuk belltani site-unkat.

a., A Dreamweaver megkrdezi, hogy milyen nevet szeretnnk adni a ltrehozni kvnt site-nak. Ez a nv nem publikus nv, ezt csak a dreamweaver arra hasznlja, hogy neknk knnyebb legyen azonostani. b., A kvetkez bellts arra vonatkozik, hogy milyen webcmen lesz publiklva a weboldal. Termszetesen ennek kitltse nem ktelez, mert az is lekpzelhet, hogy mikzben szerkesztjk a weboldalt, mg nem tudjuk, hogy milyen domain-t akarunk hozz regisztrlni. Ha ezekkel a belltsokkal megvagyunk, kattintsunk a Next gombra, hogy tovbb lphessnk.

Ebben az ablakban a Dreamweaver megkrdezi, hogy a weboldal szerkesztse sorn hasznlunk-e server oldali technolgit, mint pldul php. a., Jelljk be, hogy nem hasznlunk b., Itt lehetne jellni, ha hasznlnnk ilyen technolgikat. jbl kattintsunk a Next gombra, hogy tovbb lphessnk.

Ebben az ablakban llthatjuk be, hogy a sajt szmtgpnkn szerkesztjk-e weboldalunkat, vagy kzvetlenl a tvoli serveren. a., Ez a lehetsg jelenti azt, hogy a sajt gpnkn dolgozunk. Jelljk be ezt a lehetsget. b., Ezt a lehetsget kellene vlasztanunk, ha kzvetlenl a serverre dolgoznnk. c., Az a vlaszts fggvnyben itt kell meghatroznunk, hogy melyik knyvtr lesz a weboldal SiteRoot-ja. A kis mappa ikonra kattintva tudjuk kivlasztani knyvtrunkat.

A fenti ablakban a Dreamweaver arra kvncsi, hogy milyen mdon kapcsoldunk a tvoli serverhez. A legrdl listbl vlasszuk a NONE lehetsget, mert nem kapcsoldunk tvoli serverhez. Weboldalunkat majd ksbb publikljuk FTP-n keresztl!

A fenti ablakban a Dreamweaver kir neknk egy sszefoglalst a site meghatrozsval kapcsolatos belltsainkrl. Ha mindent rendben talltunk, kattintsunk a DONE gombra! Az j site definilsval kszen is vagyunk! Kezdhetjk a munkt! Most megviszgljuk, hogy hol tudjuk leellenrizni, hogy mindent jl lltottunk-e be a siteroot-al kapcsolatban. Az ellenrzst a Files palettn tudjuk elvgezni. Ez az a paletta, amely azt mutatja, hogy ppen melyik site van nyitva, s hogy jelen pillanatban melyik mappba dolgozunk. Erre a palettra van akkor is szksgnk az elzetes vizsglathoz, ha egy meglv site-ot akarunk szerkeszteni, s szeretnnk meggyzdni arrl, hogy ppen melyik site-unk van nyitva. A Files palettt a kpreny jobbals sarkban talljuk alaprtelmezetten az egyb palettk kztt. Amennyiben egy palettt ltni vagy ppen elrejteni szeretnnk, gy a Window menben rhetjk el ezek ki- s bekapcsolst. Amelyik paletta elnevezse eltt kis pipt (9) ltunk, az a paletta jelenleg be van kapcsolva s lthat, amelyik eltt pedig nincs pipa, az jelenleg nincs bekapcsolva, azaz inaktv.

2., Mr ltez site megnyitsa, szerkesztse Site men-> Manage Sites parancst kell vlasztanunk, ahol a kvetkez ablak fogad bennnket:

A baloldalon tallhat site-ok litjbl egy kattintssal kivlasztjuk a szerkeszteni kvnt website-ot, majd a Done gombra kattintva az eddig nyitva lv site lecserldik a most kivlasztott site-ra, melynek megtrtntrl szintn a Files palettrl tjkozdhatunk. a, a New gombra kattintva pontosan ugyanaz a folyamat fogad bennnket, mint amikor j site-ot hozunk ltre a Site men -> New site parancst vlasztva. b., az Edit gombra kattintva, a baloldalon kivlasztott site belltsait vgezhetjk el. Ez a funkci vgig vezet azon a folyamaton, melyet egy j site ltrehozsakor vgigjrunk, gy az elzleg belltott konfigurcit mdosthatjuk. c., a Duplicate gombra kattintva a baloldali listban kijellt site-ot tudjuk dupliklni, azaz msolatot kszteni rla. Ez a lehetsg akkor lehet fontos, ha egy meglv site-hoz nagyon hasonl, kisebb rszletekben eltr msik site-ot szeretnnk ltrehozni. Ebben az esetben nem kell elrl kezdennk a munkt, s az eredeti site-unk is megmarad teljes egszben. d., a Remove gombra kattintva a baloldali listban kijellt site-ot tvolthatjuk el a listbl. Nagyon fontos tudnunk, hogy a siteroot nem trldik az adattrolrl, csak a Dreamweaver listjbl! e., az Export gombra kattintva a Dreamweaver ltrehoz egy .ste kiterjeszts file-t, mely site defincis file formtum, melyben eltrolja a site konfigurcis belltsait.

f., az Import gombra kattintva .ste kiterjeszts file-okat tallzhatunk ki, gy hozzadva a site listhoz az elzleg exportlt site defincis file-jainkat. j dokumentum ltrehozsa Mr elkszltnk a site definilssal, gy elkezdhetjk a munkt a Dreamweaver-el. A File men-> New parancsra kattintva megjelenik az j dokumentum meghatrozshoz szksges ablak, melyben kivlaszthajuk, hogy milyen tpus dokumentumot szeretnnk kszteni. A Dreamweaver a kvetkez dokumentum tpusokat tudja kezelni s ltrehozni: Html, xhtml, xml, xslt, css, php, javascript, action script, coldfusion, asp. NET, stb. Neknk jelen pillanatban a html-re vagy az xhtml-re van szksgnk. DTD (Document Type Definition) A webre kszlt dokumentumokat egy elre definilt, a dokumentum felhasznlhat elemeit meghatroz file-ban trolja a W3C egy publiklt URL cmen. Erre azrt van szksg, mert a bngszk szmra fontos informcikat nyjtanak ezekben a file-okban, melyekre szksge lehet a bngsznek a dokumentum helyes megjelentshez. Egy hiperszveg (weboldal) definilshoz a kvetkez dokumentum tpusok llnak rendelkezsnkre:

HTML 4.01 Strict HTML 4.01 Transitional XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.1 XHTML 1.0 Mobile XSLT 1.0

(XHTML - Extensible HyperText Markup Language)

(XSLT - Extensible Stylesheet Language Transformations) A doctype ismeretben vlasszuk az j html dokumentum opcit s az xhtml 1.0 Transitional dokumentum tpust! View men (Nzet men) lehetsgei A View men->Zoom In almenjre kattintva van lehetsgnk a dokumentum nzetnek lptkekben trtn nagytsra. A Zoom Out pedig lptkekben trtn kicsinytst tesz lehetv. Ugyanitt tallhat meg a Magnification menpont is, mely lehetsget ad arra, hogy kivlaszthassuk a Dreamweaver ltal felajnlott lehetsgek kzl, hogy hny szzalkos kicsinytsben vagy nagytsban szeretnnk ltni az adott dokumentumot. A View men->Rulers->Show Rulers parancst vlasztva tudjuk a vonalzt bekapcsolni. Ugyanezt a parancsot vlasztva tudjuk a vonalz megjelentst is megszntetni. A Rulers almenben lehetsgnk van a vonalz mrtkegysgt is meghatrozni.

Az oldal tulajdonsgainak meghatrozsa Mieltt elkezdjk a weboldal tartalmi szerkesztst, be kell lltanunk az oldal tulajdonsgait. A belltshoz vlasszuk a Modify men-> Page properties parancst! A kvetkez ablak fogad minket:

a., Tulajdonsg kategrik

Appearance megjelens Links hivatkozsok Headings cmsorok Title/Encoding Cm s kdols Tracing Image Modellkp

Az Appearance kategria belltsai: b., Itt llthat be a weboldal bettpusa. c., Megadhatjuk a a weboldal betmrett, s a mret mrtkegysgt. d., Szveg szn meghatrozsa. Vlaszthatunk a paletta szneibl, s megadhatjuk a szn hexadecimlis kdjt a beviteli mezben. e., Httrszn belltsa f., Httrkp meghatrozsa g., Httrkp elhelyezkedse, ismtlse h., Marg mreteinek belltsa A Links kategria belltsai:

a., Hivatkozsok bettpusa b., Hivatkozsok betmrete c., Hivatkozs szneinek belltsa d., Hivatkozs alhzsnak belltsai A Headings kategria belltsai: Az gynevezett Heading-ek elre generlt Cmsor stlusok, melyeket minden bngsz egysgesen kezel s ismer. A heading-eket 1-tl 6-ig rtelmezik a bngszk, ahol a Heading1 a fcm, mely a legjobban kiemelt stlusban szerepel s a Heading6 a legkisebb kiemelssel szerepl alcm. A tag-ek a kvetkez kppen plnek fel: Fcm Cm Alcm Alcm Alcm Alcm Ezeket a tag-eket minden bngsz azonosan jelenti meg. A Dreamweaver ebben a kategriban egyni megjelenst biztost minden heading-nek.

Az els beviteli mezben a heading betmrett majd a msodik beviteli mezben a sznt llthatjuk be. A Title/Encoding kategria belltsai:

a., A Title meghatrozsa b., A dokumentum tpus meghatrozsa c., A dokumentum karakterkdolsa (Megjegyzs: a magyar karakterek pontos megjelentshez az ISO 8859-2 karakterkdolsi szabvnyra van szksg, illetve bellthat az UTF-8-as karakterkdolsi szabvny is, mely tartalmazza a vilg sszes karaktert.)

A Tracing Image kategria belltsai:

Lehetsgnk van gynevezett modell kp belltsra, amely a szerkesztfelleten fog segtsget nyjtani szmunkra a weboldal szerkesztse sorn. Ezt a funkcit akkor hasznljuk ha elzleg megszerkesztettk a weboldal ltvnykpt egy kpszerkeszt alkalmazsban s ezt a ltvnykpet szeretnnk sablonknt hasznlni a design megalkotshoz. Ez a kp nem egyenl a weboldal httrkpvel, mert ez publikls sorn nem jelenik meg, csak a szerkesztfelleten. a., A modell kp kivlasztsa b., A modell kp tltszsgnak belltsa A weboldal tulajdonsgainak meghatrozsa utn elkezdhetjk a weboldal tartalmi szerkesztst. Meta tag-ek elhelyezse Insert->HTML->Head tags parnacsval rhetjk el a Keywords meta tag-et, valamint a Description meta tag-et is. Brmelyik menpontot vlasztva a Dreamweaver megjelent egy kismret ablakot, amelybe berhatjuk a krt rtkeket! (Ne felejtsk el, hogy a keywords meta kulcsszavainak felsorolsnl veszzvel kell elvlasztanunk az elemeket egymstl!)

Szveges tartalom s specilis karakterek A szveges tartalmak formzsi lehetsgeit a Properties paletta tartalmazza:

a., Format Itt llthatjuk be, hogy milyen Heading formzst szeretnnk alkalmazni. b., Font Bettpus meghatrozsa. c., Style Ha ltezik CSS-ben meghatrozott stlusunk, itt tudjuk alkalmazni az aktulis szvegre. (CSS tmakrrel a ksbbiekben foglalkozunk!) d., Size Betmret meghatrozsa. e., Betszn kivlasztsa f., Betstlus belltsa (flkvr, dlt), mellette tallhat a bekezds igaztsra szolgl ikonok is, melyek sorrendben: balra zrt, kzpre zrt, jobbra zrt, sorkizrt g., Felsorols s szmozs, behzs cskkentse ikon, s behzs nvelse ikon. h., Link a mezbe be tudjuk rni a hivatkozs cmt, vagy a beviteli mez meletti kis mappa ikonra kattintva kitallzhatjuk a siteroot-ban tallhat file-ok kzl, hogy melyikre akarunk hivatkozni. A specilis karakterek listjt az Insert men-> HTML-> Special characters menpont alatt talljuk. Az Other feliratra kattintva tovbbi lehetsgeink vannak a specilis karakterek kivlasztsra.

Hivatkozsok elhelyezse a weboldalon A kvnt objektum kijellse utn, a Properties paletta link mezjnek kitltsvel tudunk a leggyorsabban hivatkozsokat ltrehozni. Ha viszont ms hivatkozs tpusra van szksgnk, vlasszuk az Insert men-> Hyperlink prarancst az egyszer hivatkozsok beszrshoz, az Insert men-> E-mail link parancst az e-mail hivatkozsok alkalmazshoz, valamint az Insert men-> Named Anchor parancst az oldalon belli hivatkozsok ltrehozshoz! Ha egy oldalon belli hivatkozst szeretnnk ltrehozni, akkor helyezzk a kurzort a hivatkozni kvnt helyre (hivatkozsi pont), majd vlasszuk a Named Anchor utastst. A felugr ablakban hatrozzuk a meg a hivatkozsi pont nevt. ( A nv nem tartalmazhat kezeteket s specilis karaktereket!) A msodik lps, hogy ltrehozzuk a hivatkozst a hivatkozsi pontra. Helyezzk a kurzort oda, ahov majd a hivatkozst szeretnnk elhelyezni, s rjuk be a

properties paletta link mezjbe a #hivatkozsi pont_neve szveget. Pl., Ha a hivatkozsi pont neve top, akkor az arra mutat hivatkozs #top. Kpi objektumok elhelyezse a dokumentumban Weboldalakba beptett kpekre vonatkozan vannak bizonyos szablyok, melyeket minden esetben be kell tartanunk ahhoz, hogy az adott oldal megjelense megfelelen gyors legyen. Minden weboldalra elhelyezett kpet webre optimalizlva kell publiklni. A webre optimalizsls alapttele, hogy a lehet legkisebb mret mellett, a lehet legjobb minsget lltsuk el! Minl kisebb terjedelm kpet helyeznk el a weboldalon, annl gyorsabban fog letltdni, amikor az oldalt ltogatjk. Kpek beszrsa Kp beszrsa az Insert men->Image parancsval trtnik. A megjelen ablakban ki kell tallzni a kvnt kpet, majd az OK gombra kattintani! A kpek belltsait szintn a Properties palettn talljuk:

a., Ebben a mezben adhatunk nevet a kpnek. ( A nv nem tartalmazhat kezeteket s specilis karaktereket!) b., A W rtk a kp szlessge (width), a H rtk a kp magassga (height) c., Az Src (Source) a kp forrst jelenti, tulajdonkppen ez a kp elrsi tja. d., A link rovatban adhatunk hivatkozst a kphez. Ha a siteroot-bl szeretnnk tallzni, akkor a beviteli mez mellett tallhat kis mappa ikonra kattintva van erre lehetsgnk. e., Ebben a mezben tudunk alternatv szveget hozzrendelni a kphez. Az alternatv szveg akkor jelenik meg, ha a kp nem tltdik le, vagy ppen letlts alatt ll. f., Az Edit felirat mgtt tallhat ikonok segtsgvel lehet a kpet szerkeszteni. Ezek a szerkesztsi lehetsgek szegnyesebbek, mint egy kpszerkeszt alkalmazs lehetsgei, de a Dreamweavernek nem is a kpek szerkesztse a feladata, ez a lehetsg egy kis plusz, ami nagy segtsgnkre lehet, ha ppen nincs kznl egy kpszerkeszt program. - Az els ikonra kattintva a Dreamweaver meghvja a szmtgpre teleptett kpszerkeszt alkalmazst, s megnyitja benne a kijellt kpet szerkesztsre. - A msodik ikonra kattintva szintn egy kpszerkeszt program kerl megnyitsra azzal a cllal, hogy webre optimalizljuk a kpet! - A harmadik ikonunk az gynevezett Crop tool (csonkts eszkze), melynek segtsgvel egy beszrt kpet lehet megcsonktani, teht a kp egy rszt eltvoltani, egy msik rszt pedig megtartani. - A negyedik ikon segtsgvel vissza tudjuk lltani az eredeti kpet, ha olyan mdostst vgeztnk el rajta, amely nem megfelel szmunkra. - Az tdik ikonnak az a szerepe, hogy a beszrt kp kontrasztjt illetve fnyerejt korigljuk ha szksges.

- A hatodik ikon szintn korrekcis clt szolgl. Erre az ikonra kattintva tudjuk a kpet lesteni bizonyos mrtkig.

g., Ha ltezik CSS formzs az adott kphez, akkor azt itt lehet hozzrendelni. h., Hotspot beszrsnak lehetsge (Area Map) Hrom fle hotspot tpus ltezik:

Rectangular (Tglalap) Oval (Ovlis) Polygon (Sokszg)

A hotspotok segtsgvel le tudjuk takarni a kp bizonyos rszeit, a fent emltett hrom formban. A letakart terletekre egyenknt lehet hivatkozst tenni.

i, Vertical Space s Horizontal Space pixelben trtn meghatrozsval adhatjuk meg a kp elhelyezkedst ahhoz az elemhez kpest, amelyen bell helyezkedik el maga a kp. Pldul ha a kp egy tblzat celljn bell van, akkor a cella bal fels sarkhoz kpest tudunk pozcionlni. j., Target mezben tudjuk megadni, hogy a kpre alkalmazott hivatkozs hol nyljon meg. k., Border beviteli mezben hatrozhatjuk meg, hogy milyen vastagsg keretet szeretnnk adni a kpnek. l., A kp vzszintes igaztsa, sorrendben balra zrt, kzpre zrt, jobbra zrt. m., Align (igazts) a szvegkrnyezethez kpest, melynek funkciit az albbi tblzat foglalja ssze:

Felvehet rtk Jelents

Top

Center

Default

Left

Right

Image Placeholder Szerkeszts sorn elfordulhat, hogy tudjuk egy kp tervezett helyt, de maga a kp mg nem kszlt el a weboldal szerkezet sszelltsa eltt. Ebben az esetben nyjt nagy segtsget az Image Placeholder, amely helyet foglal majd a nem ltez kpnek, hogy a tbbi tartalmi elemet el tudjuk helyezni az oldalon a kp elkszltig. Az Insert men->Image objects->Image Placeholder parancst vlasszuk:

A Name mezben megadhatjuk a kp ideiglenes nevt. A Width mezben a kp vrhat szlessgt, a Height mezben a vrhat magassgt adjuk meg. A Color opciban megadjuk az ideiglenes sznt, amivel majd lefedjk a kp helyt. Az Alternate text mezben elre adhatunk alternatv szveget a kpnek. Amikor a kp elkszlt, ms dolgunk nincs, mint a Properites palettn meg kell adnunk a kp forrst. (SRC) Rollover Image A Rollover Image egy klasszikus JavaScript vezrelt kpforgats. Ha a beszrt kp fl visszk az egeret, akkor a kp helyet cserl egy msik kppel, ha lehzzuk rla az egeret, akkor visszall az eredeti kp. Az Insert men->Image Objects->RolloverImage funkcijt vlasszuk. A kvetkez ablak fogad bennnket:

a., Kp nevnek meghatrozsa b., Az eredeti kpet itt tallzzuk ki c., Itt vlasztjuk ki a msodik kpet, mely akkor jelenik majd meg, amikor az eredeti kp fl visszk az egeret. d., Ha ezt a belltst bejelljk, akkor az eredeti kp betltdsekor automatikusan betltdik a msodik kp is. e., Alternatv szveg meghatrozsa. Az alternatv szveg akkor jelenik meg, ha a kp nem tltdik le, vagy ppen letlts alatt ll. f., Itt adhatjuk meg a Rollover Image hivatkozst. (Gyakorlatilag itt rendelnk hozz linket!) Navigation Bar A Navigation Bar segtsgvel komplett ment tudunk kszteni, ahol a menpontok akr ngy llapot gombokknt is tudnak zemelni. Ennek felttele, hogy legyen ngy darab gomb llapotot megjelent kpnk. (Nem ktelez mind a ngy llapotot elkszteni, mert a Navigation Bar kpes akr kett illetve hrom llapot gombokat is megjelenteni!) FONTOS: Egy html oldalon bell csak egy darab Navigation Bar-t engedlyez a Dreamweaver! A gombok ngy llapota:

Up (amikor megjelenik a gomb betltdskor) Over (amikor a gomb fl visszk az egeret) Down (amikor megkattintjuk a gombot) Over while down (amikor a gomb mr le van nyomva, s jbl fl visszk az egeret)

Vlasszuk az Insert men->Image Objects->Navigation Bar parancst, ahol a kvetkez ablak fogad bennnket:

a., A + jelre kattintva tudunk j elemeket hozzadni a Navigation Bar-hoz, mg a - jelre kattintva van lehetsgnk eltvoltani elemeket a Navigation Bar-bl. b., A Navigation Bar-ban szerepl elemek sorrendjt tudjuk vltoztatni a fel s lefel mutat nyilakkal. c., Itt lthatjuk felsorolva a Navigation Bar elemeit. d., Ebben a rovatban hatrozhatjuk meg az ppen aktulis elem nevt. e., Az els (Up) llapot kpnek kivlasztsa. f., A msodik (Over) llapot kpnek kivlasztsa. g., A harmadik (Down) llapot kpnek kivlasztsa. h., A negyedik (Over while Down) llapot kpnek kivlasztsa. i., Alternatv szveg megadsa. j., Hivatkozs megadsa. k., Az opci bekapcsolsval az els kp betltdsekor automatikusan letltdnek a tbbi llapotok kpei is. l., Az opci bekapcsolsval a harmadik llapot (Down) jelenik meg elszr (betltdskor). m., Itt hatrozhatjuk meg, hogy a Navigation Bar-t vzszintesen (Horizontally), vagy fgglegesen szeretnnk elhelyezni az oldalon. FONTOS: Ez a bellts ksbb nem mdosthat! n., A jellngyzet bejellsvel a Dreamweaver tblzatba rendezve hozza ltre a Navigation Bar-t. Fireworks HTML Az Adobe Fireworks webre optimalizlt kpszerkeszt programjban lehetsg van elre gyrtott Rollover Image-eket valamint Navigation Bart is ltrehozni, melyet el tudunk menteni HTML formtumban, s a ksz dokumentmot beemelhetjk egy j HTML dokumentumba a Dreamweaver segtsgvel. Vlasszuk az Insert men->Image Objects->Fireworks HTML parancst, majd tallzzuk ki a kvnt Fireworks html dokumentumot!

Mdia elemek beszrsa Lehetsgnk van weboldalunkat sznesebb tenni a begyazott tartalmak, videk, animcik s kisalkalmazsok segtsgvel. Ezt a lehetsget a Dreamweaver-ben a Insert men Media almenben rhetjk el. Image Viewer Flash alap kpmegjelentt szrhatunk be, ha az Insert men->Media->Image Viewer parancsot vlasztjuk. Ekkor megrkezik egy ablak, melyben a program azt krdezi, hogy mi legyen a neve a flash file-nak, ami ezt a kpnzegett fogja trolni. Adjunk neki egy tetszleges nevet kezetek nlkl, s kattinstsunk a Save gombra. A munkaterleten megjelenik egy szrke terlet, mely jelli a flash alap alkalmazs helyt. Ha kijelljk a terletet egy egr kattintssal, akkor a jobb oldalon, a palettk listjban megjelenik egy Flash element nev paletta, ahol az Image Viewer tovbbi belltsait adhatjuk meg. A belltsok kzl a legfontosabb az ImageURLs bellts, ahol vesszvel elvlasztva tudjuk felsorolni azoknak a kpeknek a listjt, melyeket szeretnnk alkalmazni a kpnzegetben. Flash Text Ebben a menpontban van lehetsgnk arra, hogy flash objektumknt helyezznk el szveget weboldalunkon. Erre akkor lehet szksg, ha olyan nem szokvnyos bettpust szeretnnk alakalmazni weboldalunkon, amely nem valszn, hogy a ltogatink szmtgpn teleptve van. Ha egy szveg nem szvegknt, hanem grafikai elemknt szerepel egy weboldalon, gy mindenki ltni fogja azt, attl fggetlenl, hogy rendelkezik-e az adott bettpussal.

A font belltsnl vlasztunk bettpust. A size feliratnl van lehetsgnk meghatrozni a szveg mrett. Az alatta tallhat mensor els kt eleme a flkvr s dlt betstlus. Mellettk tallhat ikonok segtsgvel lehetsgnk van a szveg vzszintes igaztsra. A color bellts a szveg alaprtelmezett sznt jelenti, ezzel a sznnel fog megjelenni az oldalon. A RolloverColor-nl kivlasztott szn akkor fog megjelenni, ha a szveg fl viszi altogat az egeret. A text beviteli mezbe rhatjuk be a flash szveget. A link belltsnl tudunk hozz hivatkozst rendelni. A target belltsnl pedig meghatrozni, hogy az adott hivatkozs hol legyen megnyitva. FONTOS: Csak itt tudunk hozz hivatkozst rendelni!

A bgcolor belltsnl meg kell hatroznunk a flash szveg httr sznt. Itt pontosan olyan sznt kell megadnunk, amilyen httrre kerlni fog a flash. tltsz nem lehet a flash szveg httere. A Save as belltsnl lehetsgnk van meghatrozni a flash text-et trol flash formtum .swf kiterjeszts file nevt. Flash Button A Dreamweaver tartalmaz egy olyan lehetsget, mely flash alap gombok ellltsra lett megalkotva, a nlkl, hogy flash lenne teleptve szmtgpnkre. Ha ezt a lehetsget vlasztjuk, a kvetkez ablak fogad bennnket:

A Sample mutatja az alatta lv Style belltsban kivlasztott sablon gomb minta nzett. A Button text-ben elhelyezett szveg lesz a gomb felirata, melyben a magyar karakterek megadsa sajnos nem lehetsges. A Font legrdl listban van lehetsgnk kivlasztani a kvnt bettpust, majd a Size belltsnl a kvnt betmretet. A Link rovatnl van lehetsgnk hivatkozst hozzrendeli a flash alap gombunkhoz. A target mezben adhatjuk meg azt, hogy a hivatkozott oldal hol jelenjen meg. A Bg color opcinl van lehetsgnk meghatrozni, hogy a flash gomb milyen szn httre kerljn. A Save as lehetsget ad arra, hogy egyni nevet adhassunk flash alap gombunkat trol . swf kiterjeszts file-unknak. Flash Video Flash alap videk beszrshoz ezt a menpontot kell vlasztanunk, ahol elregenerlt flash vide formtum .flv kiterjeszts file-unkat tudjuk hozzrendelni weboldalunkhoz. A menpontot vlasztva a kvetkez ablakot fogjuk ltni:

A Video type lehetsget ad arra, hogy kivlasszuk a video letltdsnek tpust. Az els lehetsg a Progressive download, ami video lejtszsakor, a lejtszs kzben folyamatosan tltdik le. A msik lehetsg a Streaming Video, amely mr egy elre publiklt video begyazst jelenti. Az URL lehetsgnl lehet kivlasztani a .flv file-t. A Skin opcinl tbb lejtsz megjelenst tudunk vlasztani, melyet az alatta lv boksz-ban meg is mutat neknk a Dreamweaver. A Width paramternl tudjuk belltani, hogy milyen szlessgben jelenjen meg videnk. A Height paramternl pedig bellthatjuk a vide magassgt. A Detect felirat gombra kattintva a Dreamweaver felderti, hogy eredetileg mekkora mret a video file. Az Auto play jell ngyzet bepiplsval rhetjk el azt, hogy videnk automatikusan elinduljon az oldalunk betltdsekor. Az Aut rewind lehetsg bejellsvel utastst adunk arra, hogy a video vgre rve automatikusan ellrl indtsa jra a lejtsz az adott videt. A Prompt user bejellsvel lehetsget adunk arra a felhasznlnak, hogy tjkoztassuk a vide megtekintshez szksges flash player letltsnek lehetsgeirl annak rdekben, hogy megfelelen tudja megtekinteni az ltalunk publiklni kvnt vide file-t. Ehhez kapcsoldik a Message boxban elhelyezett szveg, mely a tjkoztats szvegt tartalmazza. Shockwave Interaktv animcis elemeket tartalmaz grafikai objektumok beszrsra szolgl. Applet Elre megrt, gynevezett kisalkalmazs-ok beszrsra alkalmazhatjuk ezt a menpontot. Ilyen kisalkalmazs lehet a tbb helyen is alkalmazott Java Applet. ActiveX Az ActiveX a Microsoft ltal kifejlesztett technolgia, mely arra szolgl, hogy program sszetevk tudjanak kommuniklni egymssal egy kzs nyelven. A Weben vannak olyan alkalmazsok, melyek a ltogat szmtgpn lv programokkal tartanak kapcsolatot. Ha

van egy elre megrt ActiveX-nk s ezt szeretnnk begyazni weboldalunkba, akkor azt ebben a menpontban tehetjk meg. Plug-In A Plug-In magyar fordtsa bepl modul. Minden olyan megjelenteni kvnt tartalmat, melyet a bngsz nmagban nem kpes megjelenteni, azt bepl modulknt kell begyazni a weboldalba. Ilyen tartalom lehet pldul egy hang (mp3), video (avi), s maga a flash is begyazhat plug-in knt, hiszen a flash alap animcik megjelentsre is csak akkor kpes a bngsz, ha van teleptve flash player-nk. Tblzatok beszrsa Tblzatok alkalmazshoz vlasszuk az Insert->Table parancst. A tblzat beszrsnak belltsai a kvetkezk:

A Table size szekciban a rows a sorok szmt- , mg a columns az oszlopok szmt jelenti. A Table width bellts a tblzat szlessgnek megadst teszi lehetv. A Border thickness a tblzat keret vastagsgnak meghatrozsa. A Cellpadding cellamarg mrete, a Cellspacing cellakz meghatrozsa. A Header szerkciban lehetsgnk van hrom flekppen kiosztani a tblzat cellinak kiemelst (Heading). A Caption a tblzat cmkje. Az Align caption a cmke elhelyezkedse a tblzathoz kpest. A Summary mezben a tblzat sszefoglalsra van lehetsgnk. Rtegek alkalmazsa (Layers) A rtegek hasonlan nznek ki, mint a Word szvegdobozai. A legfb klnbsg az, hogy mg a szvegdobozokban csak szvegeket helyezhetnk el, gy a rtegekbe brmilyen

tartalmat. A rtegek mrett s kllemt mi hatrozzuk meg. A rtegek egyik legfontosabb belltsa a pozcija. A Dreamweaver az ltalunk elhelyezett rteg pozcijnak tulajdonsgait CSS-ben trolja. (A CSS-re a ksbbiekben rszletesen kitrnk) Ennek ksznheten a rtegekbl felptett oldalak, melyeket a Dreamweaver-el hozunk ltre, csaknem minden bngszben azonosan jelennek majd meg. Vlasszuk az Insert men->Layout objects->AP DIV parnacst. A beszrt rteg a kvetkezkppen fog megjelenni:

A rteg kijellshez kattintsunk r a rteg brmelyik keretre. Megjelennek a rteg mdosthat pontja, ahol t tudjuk mretezni az adott rteget, vagy el tudjuk mozgatni a kvnt helyre. A rteg kijellse utn a Properties paletta belltsai a kvetkezk:

Az L azt jelli, hogy a rteg milyen tvolsgban helyezkedik el a baloldaltl. A T mutatja meg, hogy milyen tvolsgra helyezkedik el a rteg a lap tetejtl. A W jelli a rteg szlessget, a H a rteg magassgt. A Z-index bellts mutatja meg, hogy az adott rteg az oldalon elhelyezett tbbi rteghez kpest milyen mrtkben van eltrben vagy ppen takarsban. Minl nagyobb a Z-index, annl jobban eltrben van egy rteg. A Bg image nl lehetsgnk van kitallzni egy kpet, mely a rteg httrkpe lesz. Az alatta tallhat Bg Color-nl van lehetsgnk a rteg httrsznnek meghatrozsra. Az Overflow a rtegbe kerlt tartalom tlcsordulst kezeli: a hidden elrejti a tlcsordult tartalmat, a srcoll automatikusan megjelenti a grgetsvot, az auto csak akkor jelenti meg a grgetsvot, ha arra szksg van. Viselkedsek (Behaviors) A Dreamweaver beptve tartalmaz tbb JavaScript vezrelt ltvny elemet, melyet az adott elem viselkedsnek neveznk. A JavaScript alapttele szerint egy objektumhoz rendelnk egy vagy tbb esemnyt, melynek bekvetkeztben vgre kell hajtdnia egy mveletnek. Ezt az esemny mvelet kapcsolatot hvjuk hivatalosan viselkedsnek. A viselkedsek alkalmazst a Behaviors palettn tudjuk meghatrozni. Ki kell jellni azt az elemet, amely a viselkeds objektuma lesz majd, s meg kell nyitnunk a Behaviors palettt a

Window men->Behaviors parancst vlasztva. A kvetkez lps, hogy a + jelre kattintva ki kell vlasztanunk az adott viselkedst, majd kivlaszts s bellts utn hozz kell rendelnnk az esemnyt. A folyamatot a kvetkez bra mutatja:

A kivlaszthat viselkedsek:

Call JavaScript: meghv egy elre megrt js-et, melyet nem generl, hanem neknk kell megrni, vagy beszerezni.

Change Property: Valamilyen esemny hatsra megvltoztatja egy objektum tulajdonsgait.

Check Plugin: Ellenrzni, hogy rendelkezik-e az oldal felhasznlja az adott Plug In-nal, s ennek fggvnyben tlt be adott weboldalakat.

Drag AP element: Az ltalunk beszrt rtegeket, mozgathatv teszi a felhasznlk szmra.

Effects: Ezeket a ltvny effekteket csak s kizrlag rtegekhez lehet rendelni. Klnbz ttnsek segtsgvel van lehetsgnk megjelenteni, vagy eltntetni a rtegeket.

Goto URL: Adott esemny hatsra tudunk meghvni egy URL cmet. Jump Menu s Jump Menu Go: Legrdl listt tudunk ltrehozni, melynek elemei

klnbz weboldalakra hivatkoznak, s vlasztskor meghvjuk ezeket az oldalakat. Open Browser Window: Adott esemny hatsra tudunk bngsz ablakot nyitni s

abban megmutatni egy adott RL cmet. Lehetsg van az ablak mretnek s attribtumainak meghatrozsra.

PopUp Message: Esemny hatsra felugr Windows zenetet kldhetnk az oldal felhasznljnak, melyet az zenet eltntetshez a ltogatnak le kell OK-zni a felugr zenetet.

Preaload Images: Elre be lehet tlteni weboldalunk adott kpeit a memriba, gy amikor a ltogat arra az oldalra rkezik ahol a kpek eredetileg elhelyezkednek, a kpek egy rsze, vagy akr mind mr betltdtt az adott lapra, gy a felhasznlnak nem kell annyi idt vrni a tartalom betltdsre.

Set Nav Bar Image: Itt is be lehet szrni Navigation Bart. (lsd feljebb image objects) Set Text: Esemny hatsra tudunk kiratni klnbz szvegeket ltalunk ltrehozott

obejtumokba, mnt pldul egy rteg, egy rlap beviteli mezje, vagy esetleg a bngsz llapotsora (Statusbar)

Show Hide Elements: Esemny hatsra lehet rtegeket eltntetni vagy ppen megjelenteni.

Swap Image, Swap Image Restore: Ez egy klasszikus kpforgats s annak visszalltsa. Ezzel a mvelettel vgzi el a Dreamweaver a Rollover Image opcit. (lsd feljebb image objects)

Timeline: A Dreamweaver kpes rtegeket mozgatni melyhez a Timeline-t (idvonal) hasznlja. Az idvonal adott pontjhoz is lehet viselkedst rendelni ezzel a lehetsggel.

Validate form: Esemny hatsra megviszglja, hogy egy adott rlap adott elembe megfelel rtkek kerltek-e.

Deprecated: rvnytelentett menpont, melyben olyan viselkedsek szerepelnek, melyekkel a rgebbi Dreamweaver verzik rendelkeztek. Azrt hagytk meg gy ezt a menpontot, mert elkpzelhet, hogy egy rgi weboldalt a Dreamweaver CS3-ban akarunk szerkeszteni, s a rgi meglv elemeket ezzel a lehetsggel lehet mdostani.

Show Events For: A Behaviors paletta nzetnek szktsre van itt lehetsgnk, ha tudjuk, hogy rgebbi verzij bngszkre is szeretnnk optimalizlni oldalunkat. A szkts hatsra csak azok a viselkedsek fognak megjelenni, melyeket tmogatnak a rgebbi bngszk is.

rlapok (Forms) A weboldalakon elhelyezett rlapoknak az a szerepe, hogy kommunikcit folytasson a weboldal ltogatjval. Az rlap elemeit minden esetben gy kell megvlogatni, hogy azt a felhasznl a lehet leggyorsabban s legegyszerbben tudja kitlteni. Vlasszuk az Objektum paletta->Forms elemt s nzzk a lehetsgeket balrl jobbra haladva:

Form: Ezzel az ikonnal jelezzk a Dreamweaver-nek, hogy mostantl egy rlapot ksztnk.

Textfield: Beviteli mez, kijellse utn a Properties palettn a kvetkezt jtjuk:

- Char width: a beviteli mez megjelensnek karakterszlessge - Max chars: a bevihet karakterek szmnak korltozsa - Type: single line=egysoros, multi line= tbbsoros, password= jelsz - Init val: Az ide bert rtk fog alaprtelmezetten megjelenni a beviteli mezben.

Hidden field: rejtett beviteli mez, melyet a felhasznl nem lt a weboldalon, de programozsi szempontbl fontos informcikat rejthetnk el benne.

Textarea: Tbbsoros beviteli mez, ugyanaz, mint a multi line bellts az egyszer textfieldnl.

Checkbox: jellngyzet, melyet akkor hasznlunk, ha fel akarunk sorolni tbb vlasztsi lehetsget, s engedlyezni akarjuk, hogy brmennyi lehetsget kivlaszthasson a ltogat.

RadioButton: jell karika, melyet akkor hasznlunk, ha fel akarunk sorolni tbb vlasztsi lehetsget, s NEM akarjuk engedlyezni, hogy brmennyi lehetsget kivlaszthasson a ltogat, hanem kizrlag egyet.

RadioGroup: jell karika csoport, melyet akkor hasznlunk, ha tbb olyan vlasztsi lehetsget akarunk publiklni oldalunkra, melyben egyenknt csak s kizrlag egy lehetsg vlaszthat.

List/Select: legrdl men, vagy lista Jump Menu: lsd. Viselkedsek Jump Menu, Jump Menu Go Image Field: Kpet szr be, melyet hasznlhatunk majd pldul klds gomb

helyett. File field: Itt lehet beszrni olyan rlap elemet, mellyel lehetsget adunk a

ltogatnak, hogy tallzzon szmtgprl egy file-t. Button: Gombot szr be, mellyel vglegesteni lehet az rlapot.

CSS Cascading Style Sheets (egymsba gyazott stluslapok) A CSS egy stlus ler nyelv, mely nmagban nem jelent meg tartalmat, csak egy msik ler nyelvvel trstva. (pl. HTML) A CSS-t a W3C azrt hozta ltre, hogy formzsi s megjelentsi szempontbl kiegsztse a HTML hinyossgait, valamint olyan j megjelensi formkat kzvettsen, melyek minden bngsz szmra egyrtelmen lerjk az adott tartalom megjelenst. A CSS egy platform s program fggetlen nyelv, csakgy, mint a HTML. Ebbl kvetkezik, hogy brmilyen szvegszerkesztben tudunk ltrehozni css lersokat. A CSS tbb formban tud egy adott html elemhez stlust rendelni. Mi a Dreamweaver segtsgvel a CSS osztlyok bevezetst vizsgljuk meg. A CSS parancsok szerepelhetnek kzvetlenl egy adott tag-hez rendelve, melyre a stlus formzsa vonatkozik, vagy elhelyezkedhetnek a head szekciban is, de lehetsg van kln . css file alkalmazsra is. Ha egy kln .css file-t hozunk ltre, s abban trolunk minden olyan formzst melyet a weboldalunk hasznl, majd a html oldalaknak megmutatjuk, hogy ebbl a css file-bl olvassk ki a rjuk tartoz parancsokat, akkor nagyon egyszeren, csak a css file tartalmt mdostva tudjuk weboldalunk sszes html oldalt befolysolni. Pontosan ezrt, mi most azt az esetet vizsgljuk, mikor kln file-ban troljuk weboldalunk stlus lersait. Osztlyok (class) Tetszleges nvvel ltrehozhatunk egy osztlyt, mely gymond gyjt szerepet fog jtszani egy formzs csoport trolsban. Az osztly neve nem lnyeges, de ha gy nevezzk, hogy az utaljon arra a tartalomra melyre eszkzlni fogjuk, akkor az sokat segthet. Pldul: Ha egy tblzatot akarunk megformzni, akkor nem rt tablazat nven ltrehozni osztlyunkat, melyben fel vannak sorolva azok az utastsok, melyek tblzatunk formzsra vonatkoznak. Az osztly nevekben nem hasznlhatak a specilis s kezetes karakterek.

Egy osztlyokba szedett css file a kvetkez kppen pl fel: Plda: A CSS file-unk neve legyen style.css. A benne lv tartalom: .tablazat { Tulajdonsg1; Tualjdonsg2; Tulajdnsg3; } A HTML dokumentum HEAD szekcijban el kell helyeznk a bngsz szmra azt az informcit, hogy tblzatunkat egy css file-ban elhelyezett stlussal formzzuk. Ebbl a html lersbl a bngsz mr tudja, hogy ltezik egy style.css file, s hogy ezt neki figyelembe kell vennie formzskor. A tblzat formzsa: . . . . . . A class attribtummal megadtuk a bngsznek, hogy a tablazat nev osztlyban felsorolt tulajdonsgokkal kell felruhznia a tblzatot. Mivel a rszben mr megadtuk, hogy hol van a css file, a bngsz vgig olvassa azt, megtallja a tablazat osztlyt s elolvassa annak utastsait, majd annak megfelelen formzza meg a tblzatot.

A Deamweaver CSS kezelse CSS stlus ltrehozshoz vlasszuk a Window men->CSS Styles parancst. Ennek eredmnyekppen megjelenik a palettk kztt a CSS paletta:

j css formzs alkalmazshoz vlasszuk a CSS paletta jobb als sarkban lv ikonsorbl a msodik elemet . Rkattintva a kvetkez ablak fogad bennnket:

A Selector Type-nl vlasszuk ki a Class lehetsget. A Name mezbe rjuk be a kvnt osztly nevt, pldnk szerint azt hogy tablazat. A Define in lehetsgnl jelljk be a New Style Sheet File opcit, hogy egy teljesen j css file-t hozzon ltre a Dreamweaver, majd kattintsunk az OK gombra. Eztun a Dreamweaver megkrdezi, hogy mi legyen a feil-unk neve. Adjuk neki a pldban meghatrozott nevet, teht style. Ments utn mr el is kezdhetjk a tablazat osztly belltsait:

A formzsi tulajdonsgok kategrikba vannak szedve: Type: Ebben a kategriban van lehetsgnk minden betformzssal kapcsolatos

belltsra. Background: Httr belltsai. Block: Szveg tartomnyok, bekezdsek formzsa. Box: Layerek s dobozok formzsai Border: Keretbelltsok List: Felsorolsok s szmozsok belltsai Positioning: Elemek pozcinlsnak belltsai Extensions: kiterjesztett belltsok

Ha vgeztnk az osztly meghatrozsval, akkor lthatjuk, hogy ltrejtt a style.css file, s benne van egy tablazat nev osztly. Az osztly hozzrendelst az adott tblzathoz, a tblzat Properties palettjnak Class parancsnl lehet eszkzlni. Ha megkapta a tblzat, hogy melyik osztlyba tartozik, akkor megjelennek rajta az osztly tulajdonsgai.

(XSLT - Extensible Stylesheet Language Transformations)