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
() 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:
<H1>Fcm</H1>
<H2>Cm</H2>
<H3>Alcm</H3>
<H4>Alcm</H4>
<H5>Alcm</H5>
<H6>Alcm</H6>

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.
<head>
<link href=style.css rel=stylesheets type=text/css />
</head>

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:
<body>
.
.
.
<table class=tablazat>
.
.
.
</table>

A class attribtummal megadtuk a bngsznek, hogy a tablazat nev osztlyban felsorolt
tulajdonsgokkal kell felruhznia a tblzatot. Mivel a <head> 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.