Macromedia deramweaver tutorial

néhány link:

http://www.hitetlen.hu/
http://www.grsites.com/
http://webmester.lap.hu/
http://www.thomas98.hu/
http://web.axelero.hu/fodorsi/
http://www.joomla.hu/

— honlap analizátor —

http://www.origo.hu//szoftverbazis/terkep/
http://www.honositomuhely.hu/
http://letoltes.prim.hu/

Ingyen statisztikák:

statcounter

A-STAT
MyStat.hu
WebSas
Statgep
TRY.hu

Ingyen tárhelyek:

atw.hu
uw.hu
freebase.hu
dynamicweb.hu
srv.hu
cjb.hu
tar.hu
freeweb.hu
NEXTárhely.hu

Macromedia deramweaver tutorial

A DreamWeaver kezelofelülete
Szöveg és formázása
Hivatkozások
Képek
Formanyomtatványok
Site Management
A Fejléc elemei
Frame-ek
Rétegek
Animáció Timeline-ok segítségével
Sablonok
Library
Viselkedések - Behaviors
HTML-Stílusok (DW3)
CSS-stílusok

A DreamWeaver kezelofelülete

Részei

- Menü sor
- Szerkesztő ablak
- Lebegő paletták
- Státusz sor

Menük

File: Oldalak mentése, megnyitása, stb.
Edit: Szerkesztés, Visszavonás, kiválasztások, kivágás, másolás, keresés, stb.
View: Megjelenítéssel kapcsolatos beállítások, parancsok. Pl.:Fejléc rész, vonalzók, stb. megjelenítése, azok beállításai (A szerkesztéssel kapcsolatos segédezközök megjelenítésére vonatkozik, a lebego palettákkal kapcsolatos beállításokat nem itt, hanem a Window menüben találjuk majd. Ezek a dolgok a böngészoben megtekintve az oldalon nem fognak megjelenni).
Insert: A weboldalakat alkotó, illetve azoakat leíró elemek hozzáadása, beillesztése a megfelelo helyre. (pl.: képek, táblázatok, stb.)
Modify: Az oldalon lévo, éppen kiválasztott elem illetve maga az oldal tulajdonságainak, beállításainak módósításával kapcsolatos ezközöket, parancsokat találjuk ebben a menüben.
Text: Szöveges adatok formázásával kapcsolatos parancsok
Commands: Különbözo kiegészíto parancsok. A menü tartalma függ az éppen aktuális kiválasztástól.
Window: Ablakok, lebego paletták megjelenítése, eltüntetése, rendezése.
Site: Ez a menüpont csak a DreamWeaver 3-ban található meg. A Site-okkal kapcsolatos parancsok találhatók benne.
Help: Súgó

Státusz-sor

Jelenlegi pozíciónál lévo HTML-tag
Felbontás: Felbontásra optimalizálásnál lehet jelentosége. Léteznek elore meghatározott beállítások, de mi is szabadon definiálhatunk ilyeneket.
Méret/Ido: Oldalunk mérete Kbyte-ban, illetve a Beállítások pont alatt megadott letöltési sebesség alapján becsült letöltési ido látható itt.
Mini - Indító sor: Különbözo lebego paletták megjelenítése, eltüntetése

Lebegő paletták

Objects:
Innen is lehetoség nyílik különbözo elemek beszúrására a dokumentumba. Négy részre van osztva, ezek között a felso sorban lévo lefelé mutató nyílra klikkelve, majd a megfelelo menüpontot kiválasztva tudunk váltani.
Properties: A kiválasztott elem(ek) tulajdonságait tudjuk átállítani a segítségével. Ez a paletta szinte folyamatos használatban van egy lap szerkesztése során.
Launcher: Indítópaletta. A különbözo egyéb palettákat jeleníthetjük meg-, illetve rejthetjük el a segítségével, valamint egyéb szolgáltatásokat (pl.: Site) érhetjük el vele. Ennek a palettának miniatur változata megtalálható a státuszsor (alsó keret) jobb szélén.
Library: Könyvtár. Itt tárolódnak a különbözo általunk eloredefiniált beszúrható elemek.
Styles: Egyéni stílusok definiálása, szerkesztése és felhasználásuk.
Behaviors: Viselkedés, eseménykezelés
Timeline: Idoegyenes, objektumok animálása.

Léteznek egyáb lebego paletták is. Az egyes paletták használatáról külön-külön a megfelelo résznél lesz szó. A lebego paletták többsége szabadon átméretezheto, egymásba pakolható, szétválasztható. Ezek a tulajdonságuk megkönnyítik munkánkat, különösen az igen összetett oldalak szerkesztésénél.

Különböző dolgok kijelölése

Szöveg: Shift + nyilak, egérgomb lenyomva tartása mellett a mutatóta szövegen végihúzva
Objektumok: (Bal) Klikk
Egyéb: Speciális kijelölési módszerek, majd az aktuális résznél külön lesz ezekrol szó.

Az egyes elemek kijelölésére lehtoségünk van a megfelelo HTML-kódrészlet kijelölésével is.

A weboldalakra vonatkozó alapveto beállítások:

Egy Internetes hely minden egyes oldala rendelkezik ilyen beállításokkal. Ezeket a Modify menü Page Properties pontjának használatával (CTRL + J) tudjuk megadni.

Az egyes beállítások pontos használatáról majd késobb, a megfelelo résznél lesz szó, itt szinte csak felsorolásszeru említést teszünk róluk.
Title: Az oldal neve, ez a felirat fog megjelenni a böngészo ablakneve sorában.
Background Image: Az oldal hátterének használt kép. Bovebben majd a képekkel foglalkozó résznél lesz róla szó.
Background: Háttérszín.
Link,
Visited Link,
Active Link: A hivatkozások, és azok állapotának jelölésére használt színek.
Document-Encoding: Az oldal szövegéhez rendelt kódlap. Különbözo nyelvu oldalak készítéséhez különbözo kódlapokat használunk. Pl.: angol lapokhoz Western1, magyar nyelvuekhez Central-European (ISO 8859-2). Az itt megadott beállítás hatása leginkább az ékezetes karakterek megjelenítésénél figyelheto meg.
Tracing Image: Az oldal tervezésénél segítségünkre lévo háttérkép állítható itt be. Késobbiekben külön kitérünk majd rá. Alatta a Tracing Image-re vonatkozó beállításokat találjuk.
Left,
Top Margin: Az egész dokumentum bal oldali, illetve felso margójának vastagságát (px) lehet itt meghatározni. A Netscape Navigator ezeket a beállításokat nem veszi figyelembe. Ez a beállítási lehetoség csak DreamW. 3-ban van
Margin Width,
Margin Height: Pontosan ugyanazt lehet beállítani ezekben a pontokban, mint a Left-, ill. Top Margin-nál. Ezeket a beállításokat az Internet Explorer böngészo nem veszi figyelembe (Ezek a pontok is csak DreamWeaver 3-ban vannak).

Szöveg és formázása

Szöveg alkalmazása elott elso lépésként mindig a Kódolást állítsuk be!

Karakterfajták

A weblapokon alkalmazható karakterkészleteket két nagy csoportba sorolhatjuk - változó (True Type), illetve fix szélességu (Monospaced) karakterekbol felépülo karakterkészletek.

- True type
- Arial
- Times New Roman
- Mono
- Courier

Lehetoség szerint csak ezt a három betutípust alkalmazzuk, mivel az oldal a betukészletet magát nem tartalmazza, csak utasításokat a használatára. Ezért, ha a weboldalt megtekinto ember nem rendelkezik az adott installált karakterkészlettel, böngészoje a nem ismert karakterfajtákat az általa alapértelmezettnek beállított karakterekkel fogja helyettesíteni. Ilyen esetekben gyakran elofordulhat, hogy az oldalon található képek, táblázatok és az oldal egyéb elemei a tervezetthez képest elcsúsznak, tönkretéve a lap arculatát. Kisebb feliratoknál, ha mindenképpen ragaszkodunk az adott karakterekhez, akkor ezekbol képet készítve, majd azt beillesztve elérhetjük a kívánt hatást.

(Active-X, Install on Demand - CSAK Internet Explorer-nél használható)

Szöveg tulajdonságai

Karakterkészlet: Az alkalmazni kívánt betutípust adhatjuk meg itt. A Default Font a böngészore bízza ezt a beállítást, ez általában a Times New Roman karakterkészletnek felel meg. Mivel ez nem minden böngészore igaz, érdemes minden szövegnél direkt megadni a használni kívánt karakterkészletet, így biztos, hogy a weblap tartalma mind a szerkesztovel, mind böngészokkel megtekintve azonos lesz.
Méret (SIZE): Betuk nagyságát állítjuk be itt. Használhatunk a beállításhoz abszolút és relatív méreteket. - Abszolút: A karakterek nagyságát egy 1 (legkisebb, 9pt) és 7 (legnagyobb, 20pt) közötti skálán adjuk meg. Ha semmit nem adunk meg, akkor az 3-as méretuként fog megjelenni (ez a legtöbb Böngészo alapértelmezése (12pt). Az alapértelmezett méretet természetesen átállíthatjuk (nemcsak hármas lehet, hanem 1-7-ig bármi).
- Relatív: A karaktereknek az alapértelmezett abszolút mérettol való eltérését adhatjuk meg. (-7 - +7). Természetesen a végeredmény itt is abszolút méretben 1 és 7 között mozog.

Szín: A szövegnek tetszoleges színt adhatunk meg (választás a palettáról, color picker ill. RGB kód alapján).
Ha ezt elhagyjuk, a szöveg színe a Modify menü Page Properties pontja alatt a Text-nél megadott színu lesz.
Módosítók: - Félkövér (Bold; B-ikon)
- Dolt (Italic; I-ikon)
- Aláhúzott (Underlined; Text/Style/Underlined)
Igazítás: A három ikon segítségével lehetoségünk van az adott bekezdést balra-, középre-, ill. jobbra igazítani.
Blokk formázás: - Címsorok (Heading 1-6): Különbözo méretu (1-es a legnagyobb, 6-os a legkisebb), félkövér betuvel írt szöveg.
- Bekezdés (Paragraph): Az adott szöveg elso karaktere elott egy üres sort hoz létre.
- Eloreformázott
(Preformatted) Az ilyen módszerrel megformázott szöveg pontosan úgy fog megjelenni, ahogyan az a HTML-kódban szerepel. A többi nem, mivel magát a HTML-kódot is tagoljuk különbözo WHITESPACE karakterekkel, ezért ilyen esetekben azokat - mindegy, hogy mennyi van belole egymás után, - a böngészok egy SPACE karakterként fogják megjeleníteni. Fontos megjegyezni, hogy az eloreformázottan írt karaktereket CSAK fix szélességu betukkel lehet megjeleníteni.

Eloredefiniált stílusok

Ezeket a stílusokat a Text menü Style pontja alatt találjuk a 2. résztol lefelé

- Strikethrough: Áthúzott
- Teletype: Írógép (Fix szélességu karakterek)
- Emphasis: Nyomatékosítás (Dolt betuk)
- Strong: Eros nyomaték (Félkövér betuk)
- Code: Számítógépes kód (Fix szélesség, általában a <PRE>-vel együtt alkalmazzás)
- Variable: Változó (Dolt betuk)
- Sample: Példa (Fix szélességu betuk)
- Keyboard: Billentyuzetrol történt bevitel (Fix szélességu betuk)
- Citation: Idézet (Dolt betuk)
- Definition: Meghatározás (Dolt betuk)

Ezek a hatások elérhetoek direkt formázási módszerekkel is.

- Kód olvashatóbbá tétele - Stíluslapok segítségével szabadon átdefiniálhatjuk ezek hatását.
Léteznek egyéb elore definiált stílusok, (pl.: törölt-, beillesztett szöveg), de ezeket igen ritka esetekben alkalmazzuk.

Listák

Listákat különbözo dolgok felsorolásánál, illetve egyszeru csoportosításoknál alkalmaz(hat)unk. Két nagy csoportjukat különböztetjük meg - a rendezett és a rendezetlen listákat. Listákat a megfelelo ikonra klikkelve hozhatunk létre (Listává formázhatjuk a szöveget).
Listák egymásba ágyazhatók a Balra- ill. Jobbra húzás ikonok segítségével. A List Item gomb használatával beállíthatjuk Listáink altípusát, valamint számozott Listáknál a beágyazott listákra vonatkozó számláló szabályokat.

A Menu és Directory List hatása teljesen megegyezik a sima Bulleted List hatásával, kivévé, hogy a Lista egy <MENU>...</MENU>, ill. <DIR>...</DIR> tag közé kerül. Ezeknek az eloredefiniált stílusokhoz hasonló szerepük van. Segítenek a HTML-kódot olvashatóbbá tenni, valamint stíluslapok, egyedi stílusok segítségével majd a késobbiekben szabadon átdefiniálhatjuk muködésüket.

Hivatkozások

Hivatkozások (Linkek) segítségével különbözo oldalakat tudunk összekapcsolni. A Linkek mintegy ugrópontként szolgálnak egy másik oldalra (esetleg egy bizonyos oldal egy adott pontjára, de léteznek teljesen más típusú linkek is). Lehetoségünk van mondandónkat oldalakra bontva, az oldalakat valamilyen rendszer szerint összefuzve elhelyezni az Interneten, ezáltal tagolva azt, és lehetoséget adva rá, annak, aki megtekinti, hogy ha ot bizonyos részek nem érdeklik, ne kelljen azt megnéznie.
Hivatkozásokká alakíthatunk szövegeket, képeket, képek bizonyos területeit (ill. a felhasználó ténykedésére létrejövo eseményeket, de errol majd késobb).
Az ugrópont (kép, szöveg, stb.) tualjdonságaként kell megadnunk a Link pont alatt annak a dokumentumnak az Internet címét, amire az ugrópontunk visz.
Linkek természetesen mutathatnak nem csak weboldalakra (*.htm, *.html file-ok), hanem bármilyen file-ra is, ebben az esetben, ha a felhasználó böngészoje nem tud mit kezdeni az adott dologgal, felkínálja, hogy a felhasználó letöltse azt.

Internet címek felépítése (URL-ek)

- Protokol (pl.: http)
- Hely (pl.: www.avix.hu)
- Dokumentum elhelyezkedése (/ie/) - tulajdonképpen mint egy könyvtárszerkezet.
- Dokumentum neve (index.htm)

Pl.: http://www.avix.hu/ie/index.htm

Protokol: Ennek segítségével dönti el a dokumentumot elkéro program, hogy azt hogyan kell kezelnie.

Relatív és abszolút URL-ek:

Abszolút URL:
Az Internet címet teljes egészében megadjuk (Különösen az oldalainkat tartalmazó webhelyen kívüli helyekre kialakított linkek használata esetén van értelme használatuknak). Pl.: www.avix.hu.

Relatív URL:
Nem adjuk meg a teljes Internet címet, csak az éppen aktuális dokumentumunkhoz képest az elérési útvonalat. Pl.: Ha a www.avix.hu/ie/index.htm-en vagyunk, és ugyanebben a könyvtárban (/ie/) van egy web.htm nevu dokumentum, akkor a relatív hivatkozás egyszeruen web.htm. Relatív hivatkozásokat csak az adott webhelyen belül található oldalakra kialakított linkek esetén tudunk alkalmazni.
A relatív link alkalmazásának elonye, hogy mivel az elso oldal megnyitásához az útvonal adott, mindig ehhez történik a viszonyítás, ezért lényegében mindegy, hogy az oldal hol van, akkor is muködoképes lesz (Tehát, ha mondjuk nem Neten, hanem otthon a merevlemezen tároljuk, akkor is muködni fog).

Szöveg, mint hivatkozás

Egy szöveg hivatkozássá alakításához jelöljük ki az adott szövegrészt, majd a Link tulajdonsághoz írjuk be a megfelelo dokumentum relatív, vagy abszolút Internet címét. Ilyenkor az adott szöveg aláhúzódik, illetve színt vált. Ezeket a színeket tudjuk beállítani a Page Properties Link, Visited Link ill. Active Link pontjainál.

- Link: A még nem látogatott hivatkozások színe (Kék)
- Visited Link: A már látogatott hivatkozások színe (Lilás)
- Active Link: Az éppen töltodo link színe (Piros)

Hivatkozások Elnevezett Horgonyokra (Named Anchors)

Elnevezett horgonyok segítségével bizonyos pontokat jelölhetünk meg oldalainkon, ahova késobb oda tudunk ugrani.
Létrehozásuk: Insert/Named Anchor, vagy az Objects palettán az Invisibles részbol a horgony ikonra klikkelve illetve a dokumentumba húzva azt.
Minden ilyen horgony rendelkezik egy névvel. Maga a horgony a böngészoben nem látszik.

Névadási szabályok: a különbözo objektumok elnevezésére csak az angol abc betuit ill. számokat használunk, a név szóközt nem tartalmazhat, nem kezdodhet számmal.

Ha egy ilyen horgonyra akarunk hivatkozni, akkor Linkként adjuk meg a horgony nevét elotte egy kettoskereszt (#) karakterrel (pl.: #teteje).
Lehetoség van más oldalon lévo horgonyra is hivatkozni, ilyenkor megadjuk a dokumentum Internet címét, majd #horgonynév (pl.: www.avix.hu/ie/hardware.htm#VGA, vagy relatív hardware.htm#VGA).

Bizonyos esetekben (pl.: eseménykezelés) hasznos, ha valamit hivatkozássá tudunk alakítani úgy, hogy az nem mutat semmire. Ilyen esetekben egy "névtelen" elnevezett horgonyt adunk meg a Link célpontjaként (simán #).

Levélküldés (mailto: linkek)

Ha Link-ként a mailto:email-cím "helyet" adjuk meg, az ugrópontra klikkeléskor a böngészo elindítja a felhasználó Internetes levelezo-programját, és beírja a címzett mezobe az email-cím-nél megadott értéket. Ha meg akarjuk adni a levél tárgyát (subject) is, akkor az email-cím után egy kérdojelet írunk, majd a subject=tárgyszöveget.

Pl.: mailto:szego@interware.hu?subject=tanfolyam

DreamWeaver 3 -ban lehetoségünk van az E-Mail Link objektum használatára, ilyenkor egy felbukkanó dialógusablakban kell megadnunk a link szövegét és a hozzá tartozó e-mail címet (és esetlegesen a tárgyat).

Egyéb "link" típusok

javascript: utasítás
Egy JavaScript nyelvu parancsot, illetve egy ilyen nyelven megírt funkciót tudunk vele végrehajtani. Természetesen csak a JavaScriptet ismero böngészok tudnak mit kezdeni vele. Pl.: javascript: alert('Klikk.')

about: valami
Létezik ilyen. CSAK az Internet Explorer használja. Pl.: about:blank.

Képek

Alkalmazási területek

Képeket alkalmazhatunk egy oldalon háttérképként, különbözo illusztrációkként, hivatkozásokként valamint hivatkozás térképekként.

Használható képformátumok

Internetes oldalakon háromféle képformátumot használhatunk, ezek a GIF89a, JPEG és a PNG. Egyes böngészok képesek megjeleníteni más formátumú képeket is, de kerüljük az ilyenek használatát, mert egyes böngészok NEM.

JPEG formátum
(*.jpg, *.jpeg): 16 Millió színu, veszteséges tömörítési eljárást használó képformátum. A kép Transzparenciával (átlátszó színnel) nem rendelkezhet. Veszteség mértéke különbözo lehet, ennek arányában változik a kép mérete (byte-ban).
GIF89a (*.gif): Palettás kép, a paletta max 256 színt tartalmazhat (lehet szürkeárnyalatos is). A paletta tartalmazhat egy Transzparens színt, ill. lehetoség van Alpha csatorna alapján történo Transzparencia meghatározására. A formátum veszteségmentes LZW tömörítést használ. Képes animációk eltárolására is (animGIF).
PNG (*.png): Viszonylag új formátum, 24-bit színmélységu, veszteségmentes tömörítést alkalmaz. Transzparencia szintén meghatározható szín, ill. alpha csatorna alapján.

Háttérképek

Lehetoségünk van az oldal háttereként egy kép megadására (mintha egy ilyen képre nyomtatták volna az oldalt).
Háttérképet a Modify menü Page Properties pontja alatt található Background Image beállításnál adhatunk meg. Itt meg kell határoznunk a kép elérési útvonalát (ez is lehet relatív vagy abszolút).
Az így beillesztett kép az oldal bal felso sarkától indulva kerül beillesztésre. Ha a kép nem elég nagy ahhoz, hogy kitöltse a rendelkezésre álló ablakméretet, akkor a böngészo mozaikszeruen ismételni fogja azt, ezt remekül felhasználhatjuk textúrák (pl.: egy márványminta) alkalmazásakor. Alapesetben a háttérkép a dokumentummal együtt mozog, ezt elkerülhetjük, ha a body tag-ben megadjuk a bgproperties="fixed" utasítást (CSAK IExplorer). Ilyenkor a háttérkép fix marad, a fölötte lévo tartalom fog csak elmozdulni, mintha egy átlátszó fólián huzogatnánk le-fel egy adott háttér felett. Ezt az utasítást a régebbi böngészok nem ismerik. Lehetoség szerint ne ezt használjuk, hanem inkább egyéni stílusok, stíluslapok alkalmazásával érjünk el hasonló hatást (errol a módszerrol majd késobb). Természetesen alkalmazhatunk animált GIF képeket is háttérként, bár ez általában elég zavaró tud lenni.

Tracing Image

Az oldalbeállításoknál (Modify/Page Properties) egy, az oldal tervezésében segítségünkre lévo képet adhatunk meg. Leginkább akkor fogjuk használni, ha az eredeti hátterünk valamilyen okból tönkrement.

Lehetoségünk van az ilyen kép pozíciójának, láthatóságának, áttetszoségének pontos beállítására.

Tracing Image megjelenítése, elrejtése (View/Tracing Image/Show):
Ha a Show pont ki van pipálva, a kép látszik, ellenkezo esetben nem.
Pozíció: Az Adjust Position menüpont segítségével beállíthatjuk a kép bal felso sarkának a az oldal szélétol mért távolságát pixelben. Mozgathatjuk a képet pixelenként a kurzornyilakkal, illetve 5 pixelenként a SHIFT + nyilak billentyukkel. A képek helyét visszaállíthatjuk a kiindulási pontba a Reset Position pontnál (,vagy megadhatunk 0,0 koordinátát a helyzetének). Lehetoségünk van képünket egy, az oldalon kiválasztott elemhez igazítani, ilyenkor az adott elem és a kép bal felso sarka kerül azonos koordinátára. Ezt az Align with Selection menüpont segítségével tehetjük meg.
Áttetszoség: A Page Properties menüpontban az Image Transparency alatt lévo csúszkán lehetséges (0% teljesen átlátszó, 100 % semennyire sem átlátszó).

Képek a dokumentumban

Képeket az Insert menü Image pontja segítségével, illetve az Objects palettán lévo kép ikonra klikkelve, vagy az ikont az oldalon a megfelelo helyre húzva tudunk beilleszteni. Beillesztéskor a felbukkanó menüben meg kell határoznunk a kép elérési útvonalát.

Képek tulajdonságai

- Név: Egy nevet rendelhetünk a képhez. Ennek a névnek akkor lesz szerepe, ha késobb valamilyen viselkedést, a felhasználó ügyködésére történo reakciót akarunk majd hozzárendelni (ez esetben sem kötelezo a név használata, de sokkal egyszerubb egy név alapján hivatkozni rá, mint a dokumentumban lévo képek közüli sorszáma szerint; különösen, ha az oldal sok képet tartalmaz).
- Szélesség (W),
Magasság(H): Itt adhatjuk meg, hogy képünk mekkora területet töltsön ki. Ez megadható pixelben (px), %-ban, miliméterben, centiméterben, pontban (pt), illetve ezek kombinációjaként. Érdemes pixelben megadni mivel az egyéb méreteket a program amúgy is pixellé alakítja. Átméretezésre lehetoségünk van a kijelölt kép keretén lévo négyzetek elhúzásával is. A kép alapállapotban akkora területet fog elfoglalni, amekkora a mérete (ha a W ill. H értéket megváltoztattuk, akkor az félkövér betuvel lesz kiemelve). Csak igen kevés esetben érdemes átméretezni a képet, mert minosége jelentos mértékben romolhat. Abban az esetben ha valamiért mégis más méretben akarjuk használni, lehetoség szerint inkább egy képszerkeszto programmal méretezzük át, majd az így kapott képet illesszük a dokumentumba (persze vannak speciális esetek, amikor érdemesebb a böngészore bízni az átméretezést). Ha vissza akarjuk állítani képünk méretét az eredetire, kattintsunk a Refresh gombra.
- Forrás(SRC): A kép elérési útvonala. (Természetesen lehet abszolút is, pl.:www.extra.hu/pic/kep.jpg)
- Hivatkozás(Link): A képet hivatkozássá alakíthatjuk. Ez pontosan úgy muködik, mintha szöveggel tennénk azt.
- Alt: Egy alternatív szöveget rendelhetünk képünkhöz, ennek többféle szerepe is van: - Ez a felirat lesz látható a kép letöltodése közben
- Nem-grafikus böngészok (pl.: Lynx) ezt a szöveget fogják megjeleníteni a kép helyett egy keretben
- Bizonyos böngészok esetén ha a kép fölött tartjuk az egérmutatót, ez a felirat fog "tool-tip" szeruen megjelenni.

- Bélelés: (V- és H space) Itt pixelben megadhatjuk, hogy a kép alsó-felso, ill jobb-bal szélétol számítva mekkora területet akarunk üresen hagyni. (Természetesen nem csak pixelben adható meg, hanem egyéb mértékegységekben is).
- Keret (Border): A kép keretének vastagságát állíthatjuk be itt. Ha a kép link is egyben, a keret színére a linkek színeinek beállításai érvényesülnek.
- LowSrc: Megadhatunk egy, a kép méreteivel megegyezo másik képet, ami az eredeti kép elott fog letöltodni.
Felhasználása: Megadunk egy kisebb méretu (byte-ban) képet. Ez sokkal gyorsabban le fog töltodni, mint az eredeti kép, így aki megnézi a lapot, már nagyjából el fogja tudni képzelni, mi lesz ott.
- Align: Itt határozzuk meg, hogy a kép környezetében lévo szöveg hogyan igazodjon a képhez viszonyítva. - BrowserDefault: A használt böngészo alapértelmezett beállításai fogják meghatározni az igazítást.
- Baseline: A szöveg alapvonalát a kép aljával egy vonalra igazítja.
- Bottom: Mint a Baseline.
- AbsoluteBottom: A kép alját és a szöveg alját igazítja egy vonalra.
- Top: A legmagasabb karakter tetejét igazítja egy vonalra a kép tetejével (A kép kerete is beleszámít a kép méretébe).
- TextTop: Mint a Top, de itt a keretet nem számolja a képhez.
- Middle: A szöveg alapvonalát a kép közepéhez igazítja.
- AbsoluteMiddle: A szöveg közepét a kép közepéhez igazítja.
- Left: A képet a bal oldalra helyezi, jobbról futtatja körül szöveggel. Ha a képet balra zárt szöveg elozi meg, a kép általában egy új sorba kerül, a kép után következo szöveg a kép feletti sorban folytatódik a másikat követve.
- Right: A képet a jobb oldalra helyezi, balról futtatja körül szöveggel. Ha a képet jobbra zárt szöveg követi, a kép általában új sorba kerül, az elotte lévo szöveg pedig a kép felett fog elhelyezkedni.

Edit: A nyomógombra klikkelve elindíthatjuk a Beállításoknál (Edit/Preferences) megadott képszerkeszto programot, ami alapból be is fogja tölteni az adott képet. Ugyanezt megtehetjük, ha a CTRL (Mac: Command) gombot lenyomva tartjuk, majd duplán klikkelünk a képre. (Harmadik lehetoség: Jobb klikk a képre, majd a legördülo menübol válasszuk az Edit Image pontot.)

Map: A gombra kattintva kliens-oldali hivatkozás-térképeket tudunk létrehozni. Ez a nyomógomb nem található meg a DreamWeaver 3 -ban, a térképet itt a Properities paletta segítségével készíthetjük el.

Kliens oldali térképek

Egy ábrához egy "térképet " tudunk készíteni, amelyen a kép bizonyos területei hivatkozásokként muküdnek.

Nagyon fontos, hogy ha egy képre alkalmazunk ilyen hivatkozástérképet, akkor magát a képet ne alakítsuk hivatkozássá!

Lehetoségünk van téglalap, kör ill. sokszög alakú területeket megjelölnünk az adott képen, és minden ilyen megadott területre külön-külön beállítani, hogy mire legyen hivatkozás, mi legyen az alternatív neve, (ill. megadhatjuk, hogy a betöltodo oldal hol jelenjen majd meg, de errol részletesebben a Frame-eknél).

Beállítások:

- MapName: Itt kell megadnunk a térképünk nevét. Az adott térképnek mindenképpen kell, hogy legyen egy neve. A névadási szabályok itt is érvényesülnek (A térképekre való hivatkozás az elnevezett horgonyokhoz hasonlóan történik - # név - ezért ne adjunk a térképnek olyan nevet, amely már egy másik horgonynál is szerepelt).
- Területek: A különbözo alakú ikonokra klikkelve tudjuk megrajzolni a képen a kívánt területet, a nyíl ikon segítségével tudjuk kiválasztani valamelyik területet. Egy létrehozott terület törlése azt kijelölve, majd a Del billentyut megnyomva lehetséges.
- Link: Itt adhatjuk meg, hogy a kijelölt terület mire legyen hivatkozás (Internet cím).
- Alt: A terület alternatív neve. Muködése megegyezik a képnél említett alternatív névvel , de értelemszeruen csak az adott területre vonatkozik.
- Target: Beállíthatjuk, hogy a hivatkozás hol jelenjen majd meg. _blank: Egy új, üres böngészoablakban.
_self: Abban az ablakban, amelyben az adott oldalunk található.
_top: Abban az ablakban, amelyben az adott oldalunk található, de az oldalról minden Frame-et le fog törölni a böngészo (bovebben lásd: Frame-ek).
_parent: Abban az ablakban, ahonnan az adott oldalunkat megnyitottuk.
Frame-név: Megadhatunk egy általunk létrehozott Frame-et is (errol bovebben a Frame-eknél).

Fontos, hogy a definiált területek ne lógjanak bele egymásba, ellenkezo esetben az eredmény teljesen kiszámíthatatlan lesz.

Formanyomtatványok

A formanyomtatványoknak a felhasználóktól való információ gyujtésében van szerepük.

Táblázatok létrehozása

Táblázatot az Insert menü Table pontja használatával, vagy az object palettán lévo Táblázat ikonra klikkelve, ill. a megfelelo helyre húzva illeszthetünk be. A megjeleno dialógusablakban rögtön megadhatjuk táblázatunk alapveto jellemzoit.

- Felhasználásuk: - Véleménykutatás
- On-Line vásárlások
- Keresok

A formok muködéséhez két dolog szükséges - A HTML-kód, ami a Form megjelenítésérol gondoskodik; és egy szerver oldali alkalmazás, v. script ill. kliens oldali script (CGI), ami az adatok feldolgozásáról gondoskodik. DreamWeaverrel lehetoségünk van Formok létrehozására, kliens oldali ellenorzésükre, vagy más típusú kliens oldali feldolgozásra scriptek segítségével (ehhez már legalább JavaScript turheto ismerete szükséges).

Formok létrehozása

Használhatjuk az Insert menü Form pontját, vagy az Objects paletta Forms részérol a Form ikonra kattintva, ill. azt a dokumentum megfelelo helyére húzva is létrehozhatunk formanyomtatványokat.

Formok tulajdonságai

- Név: A formanyomtatvány nevének a kliens oldali kezelésnél van értelme. Ez az adat nem kerül majd a szerver felé elküldésre.
- Action: Itt kell megadnunk azt az Internet címet (linket), ahhol az a szerver oldali script vagy alkalmazás található, amely majd a Form feldolgozását fogja végezni. Ha a feldolgozást kliens oldalon végezzük, nem kell megadni, mert ilyenkor más módszereket használunk.
- Method: Az adatátadási módszert állíthatjuk be. - Get: Az adatok az Action-nél megadott URL-hez hozzáfuzve kerülnek elküldésre. Ez a módszer több szempontból hátrányos. Egyrészt az URL látható, tehát lehetoleg ha jelszavakat is küldünk ne alkalmazzuk ezt a módszert. Másrészt mivel egy URL maximum 8192 karakter hosszúságú lehet, ezért így csak korlátozott mennyiségu információ átadására van lehetoség. Vannak esetek, amikor mégis ezt érdemes használni.
- Post: Az adatok a Standard Bemeneten (<STDIN>) kerülnek átadásra.

Formok elemei, és tulajdonságaik

Elemek beillesztése: Insert / Form Object / Elem, vagy az Objects paletta megfelelo elemére kattintva, illetve azt a dokumentumba húzva.

Szövegmezo (Textfield)
A különbözo szövegmezok szöveges adatok bevitelére szolgálnak.

Tulajdonságaik:
- Név: a mezo tartalmához kötött név, ami majd paraméterként átadásra kerül. Itt említjük meg, hogy egy formanyomtatvány minden egyes elemének más névvel kell rendelkeznie.
- Char Width: Megadja, hogy a mezoben maximum hány karakter jelenítheto meg; azaz hány karakter szélességu az adott mezo.
- Max Chars: Itt adjuk meg, hogy az adott szövegmezobe maximálisan hány karakter gépelheto be. Ha a mezo Multi Line típusú, ez az opció nem jelenik meg.
- Num Lines: Beállíthatjuk, hogy a szöveges területünk hány sor magasságú legyen. Ez az opció nem jelenik meg Egysoros- ill. Jelszó típusú szövegmezoknél.
- Type: A szövegmezo típusa: - Single Line: Egy soros beviteli mezo.
- Multi Line: Több soros beviteli mezo.
- Password: Jelszó mezo. Lényegében teljesen úgy muködik, mint a Single Line típusú beviteli mezo, de a begépelt karakterek helyett majd csak valamilyen maszk-karakterek fognak megjelenni a weboldalon.

- Init Value: Az adott mezo alapértéke. Kiindulási állapotban a mezoben az itt megadott szöveg lesz, valamint ha a felhasználó egy Reset típusú nyomógombra kattint, az itt megadott érték fog ismételten beíródni.
- Wrap: (Csak Multi Line típusnál.) Itt kikapcsolhatjuk (Off) a szöveg automatikus tördelését, ill. különbözo módszereket adhatunk meg hozzá (Virtual, Physical).

Jelölonégyzet (CheckBox):

Választási lehetoségeket tartalmazó opció-sorozatoknál használjuk, azokban az esetekben, amikor azt akarjuk, hogy az adott csoport több eleme is választható legyen.

Tulajdonságai:
- Név:
- Checked Value: Azt az értéket adjuk meg, ami majd a formanyomtatvány elküldésekor az azt feldolgozó alkalmazásnak átadódik, abban az esetben, ha a felhasználó az adott jelölonégyzetet kipipálta.
- Initial State: Beállíthatjuk, hogy alaphelyzetben ki legyen-e pipálva (Checked), vagy ne (Unchecked) az adott CheckBox.

Opcióválasztó mezo (Radio-Button):

Akkor használjuk, ha azt akarjuk, hogy egy opció-csoportból egyszerre csak egy elem legyen kiválasztható. Az ilyen opciócsoport egyik elemét kiválasztva az összes ugyanazon csoportba tartozó lehetoség kiválasztása törlodik.

Tulajdonságai:
- Név: Az ópciócsoport neve, amelybe majd az adott mezo tartozni fog. MINDEN AZONOS csoportban lévo Radio-Buttonnak ugyanazzal a Névvel KELL rendelkeznie.
- Checked Value: Azt az értéket adjuk meg itt, ami elküldésre kerül, ha az adott opció van kiválasztva.
- Initial State: Beállíthatjuk, hogy kezdetben az adott opció ki van-e választva. Elméletileg lehetoség van egy csoport több elemét is alapértelmezésként kiválasztani, de kerüljük az ilyen megoldást, hiszen azért alkalmazunk ilyen típusú formanyomtatvány elemet, hogy ezt majd elkerüljük.

Listák és Menük:

Használatukkal értéksorozatokat kínálhatunk a felhasználónak, amelybol majd szabadon választhat (egy vagy több lehetoséget).

A listáknak három fajtájuk van: Legördülo (Menu), sima lista (List), ill. lista több választási lehetoséggel (List).

Tulajdonságai:
- Type: A lista típusát állíthatjuk be. (Menu v. List)
- Height: Megadhatjuk, hogy hány sor magas legyen a lista (Menu típusnál ez a pont nem jelenik meg).
- Allow Multiple: Ezt a pontot bejelölve megadhatjuk, hogy a listának egyszerre több eleme is kiválasztható legyen.
- List Values: Erre a nyomógombra kattintva a listát szöveggel, és a hozzá tartozó elküldendo érkekkel tudjuk feltölteni, illetve a már megadott elemeit törölhetjük, módosíthatjuk, sorrendjüket változtathatjuk meg.
- Initially Selected: A lista alapértelmezettként kiválasztott pontját (ill. többszörös választás engedélyezése esetén pontjait) állíthatjuk be.

File Feltöltés (File Upload):

A File feltöltés mezo tulajdonságai megegyeznek az Egysoros (Single Line) szöveges mezo tulajdonságaival. Ilyen mezo beillesztésekor a mezo mellett meg fog jelenni egy nyomógomb is, aminek segítségével a felhasználó majd megkeresheti a feltölteni kívánt file-t gépén.

Meg kell említeni, hogy ez a mezo csak akkor fog muködni, ha az adott szerveren engedélyezve van a névtelen (anonymous) feltöltés.

Abban az esetben, ha használjuk ezt a mezot, manuálisan be kell írnunk a <FORM> tag-be az ENCTYPE="multipart/form-data" paramétert, hogy biztosítsuk a feltölteni kívánt file megfelelo kódolását.

Kép-mezo (Image-field):

Segítségével egy képet illeszthetünk a formanyomtatványba (ezt egyébként egy sima képpel is megtehetjük).

Rejtett mezo (Hidden field) :

Az ilyen típusú mezoket a böngészo nem fogja megjeleníteni. Szerepe: A formmal együtt még egy név-érték párost tudunk küldeni a feldolgozó alkalmazásnak. Ennek például akkor lehet szerepe, ha egy alkalmazás több formanyomtatvány feldolgozását is elvégzi. Ilyenkor ezzel tudjuk azonosítani az adott formanyomtatványt (ugyanis formanyomtatvány neve NEM kerül elküldésre).

Nyomógombok (Button):

Funkció szerint háromféle nyomógombot különböztetünk meg:

- Elküldo - gomb (Submit)
- Alaphelyzetbe állító gomb (Reset)
- Sima gomb (None)
Tulajdonságai:
- Név:
- Label: A gombon található felirat
- Action: A gomb muködése
- Submit form: A gomb a form -ot fogja elküldeni feldolgozásra
- Reset form: A gomb alaphelyzetbe állítja a formanyomtatványt
- None: Alaphelyzetben semmit sem csinál, nekünk kell majd valamilyen kliens-oldali scripttel leírni a muködését.

Jump Menu:

Segítségével létrehozhatunk egy legördülo menüt, amelynek valmelyik elemét választva egy beállított oldalt tudunk megjeleníteni.

Tulajdonságai:
- Menu Items: Ebben a mezoben válogathatunk a legördülo menü tartalma között, a +, - gombokkal új elemeket hozhatunk létre, ill. törölhetjük a meglévoket. A le - fel nyilak segítségével a menü elemeinek sorrendjén változtathatunk.
- Text: A kiválasztott ponthoz tartozó szöveges részt adhatjuk meg, ez a szöveg fog megjelenni a menüben.
- When Selected
Go to URL: Az adott ponthoz tartozó hivatkozást adhatjuk meg.
- Open URLs in: Kiválaszthatjuk, hogy a megadott hivatkozást melyik ablakban ill. frame-ben akarjuk majd megjeleníteni (ld.: Frame-ek).
- Menu Name: Nevet rendelünk a menünkhöz. Ez a JavaScript alkalmazása miatt fontos.
- Options: Egyéb lehetoségek
- Insert Go Button
After Menu: Beszúr egy Go feliratú nyomógombot (Button - none + Javascript), amellyel szintén a kiválasztott hivatkozást tudjuk majd megejeleníteni.
- Select First Item
After URL Change: Az "ugrás" után a menünek mindig az elso eleme lesz kiválasztva.

Maga a Jump Menu muködése szerint nem tartozik egy form elemei közé.
Tudni kell, hogyha a menü egy elemét kiválasztjuk, az ugrás azonnal megtörténik, ezért alaphelyzetben a Go nyomógomb alkalmazásának semmi értelme sincs. (Az automatikus ugrás elkerülheto, ha a menüt tartalmazó SELECT mezorol eltávolítjuk az onChange eseménykezelést. Ezután az objektum azonban nem lesz Jump Menu-ként szerkesztheto.

Formanyomtatványok alkalmazásával kapcsolatos megjegyzések

A formokat elküldés elott érdemes valamilyen kliens oldali scripttel ellenorizni, hogy helyesen lettek-e kitöltve.
Formanyomtatvány elemeket nem csak formanyomtatványokon belül használhatjuk. Ennek különbözo kliens-oldali scriptek alkalmazásakor van jelentosége (pl.: Jump Menu).
A Jump Menu-t NE alkalmazzuk egy FORM-ban!

Site Management

Site meghatározása:
Egy tárolóhely azoknak a dokumentumoknak (html file-ok, képek, ?), amelyek egy webhelyhez tartoznak. Egy Site egy vagy két részbol áll - egy lokális részbol, és esetlegesen egy távoli (remote) részbol.

Site-ok alkalmazásának szerepe

Site-ok alkalmazásával lehetoségünk nyílik a dokumentumaink közötti linkek ellenorzésére, a webhely könyvtárstruktúrájának megváltoztatására anélkül, hogy manuálisan esetlegesen több száz hivatkozást kelljen kijavítanunk. Egy klikk segítségével fel-, letölthetjuk dokumentumainkat.
A Check In / Out rendszer használatával a csapatmunkát tudjuk lényegesen megkönnyíteni, az ilyen munkából adódó hibalehetoségek nagy részét kiszurni.

Site-ok létrehozása

Site-ot a Site / New Site pont segítségével hozhatunk létre.

- Local Info:
- Site Name: A tárhelyünkhöz rendelt név. A késobbiekben ez alapján fogjuk tudni azonosítani Site-jainkat.
- Local Root
Folder: Itt adjuk meg azt a helyet a merevlemezen, ahhol a Site-hoz tartozó file-ok tárolásra kerülnek. Az itt definiált könyvtár lesz a Site gyökér (\) könyvtára. (Relatív hivatkozások alkalmazásánál erre is lehet relatívan hivatkozni - pl.: /ajanlt/akciok.html)
- HTTP adress: Megadhatjuk Site-unk majdani Internetes helyét, így a dokumentumban lévo, erre a helyre történo abszolút hivatkozások Offline módban is ellenorizhetové vállnak.
- Cache: Létrehozhatunk egy kiegészíto tárat, ez meggyorsítja a linkek ellenorzését, az oldalak frissítését. Érdemes használni (Ha nem kapcsoljuk be, a program a Site létrehozása elott még egyszer rá fog kérdezni, hogy létrehozzon-e cache-t).

- Web Server Info:
- Server Access: a Site "távoli" megfelelojéhez való hozzáférés módját állíthatjuk be. - None: Nincs távoli hely, csak lokálisan dolgozunk.
- Local/Network: A "távoli" hely a saját gépünkön egy másik könyvtárban található (Local), vagy a helyi hálózaton keresztül kapcsolódunk hozzá (Network). A megjelno Remote Folder mezoben adjuk meg a Site gyökérkönyvtáraként kezelt könyvtárat.
- FTP: A távoli helyhez egy FTP kiszolgálón keresztül kapcsolódunk.
- FTP Host: Az FTP kiszolgáló címe (pl.: ftp.ora.com).
- Host Directory: Az adott kiszolgálón lévo könyvtárunk, ami a gyökérkönyvtár megfeleloje
- Login: A kiszolgálóra történo bejelentkezéshez használt felhasználói név.
- Password: Jelszavunk. (a Save pont bekapcsolásával mentodik, nem kell mindig megadnunk.)
- Use Firewall: Ha az FTP kiszolgálóhoz egy tuzfalon keresztül kapcsolódunk, akkor ezt a pontot jelöljük be.

Check In / Check Out:

A Check In / Check Out rendszert akkor használjuk, ha többen dolgozunk egy weblap elkészítésén, vagy egyedül, de több helyrol. A rendszer lehetové teszi, hogy ha valaki dolgozik egy file-lal, és azt kijelölte magának, akkor a többiek ne tudják azt megváltoztatni, amíg ez a helyzet áll fent. Ezzel kizárhatjuk az olyan hibákat, mint például amikor két ember egyszerre próbál elmenteni egy bizonyos file-t ugyanarra a névre.

CSAK akkor használhatjuk a rendszert, ha van távoli hely is definiálva.

Check Out:
Kijelöljük a file-t, hogy mi dolgozunk vele. Egy pipa ikon jelenik meg mellette annak a felhasználónak a nevével, aki kijelölte magának a file-t (a pipa zöld, ha mi jelöltük ki; piros, ha valaki más). Kijelöléskor az adott file letöltodik a távoli helyrol, majd a távoli helyen csak olvashatóvá (read-only; locked) válik.

Check In:
Miután befejeztük a munkát az adott file-lal, ezzel a paranccsal tudjuk a rá vonatkozó kijelölésünket megszuntetni. Ilyenkor az adott file feltöltodik a távoli helyre, ott írhatóvá válik, nálunk pedig csak olvasható lesz (read-only; locked).

Beállítások:

Enable Check In / Check Out: A rendszer alkalmazásának ki-, bekapcsolása.
Check Out Files When Opening: Egy file megnyitásakor automatikusan jelölodjön ki, hogy dolgozunk vele.
Check Out Name: Kijelöléskor ez a felirat jelenjen majd meg a pipa ikon mellett, mint név.

Site Map Layout:

A hivatkozástérkép-módban történo megjelenítésre vonatkozó beállítások.

- Home Page: Webhelyünkhöz tartozó alapértelmezett nyitóoldal. Ha nem adunk meg semmit, a DreamWeaver megpróbálja az index.html, majd az index.htm file-t beállítani nyitóoldalként. Ha egyik sem sikerül, és Térkép módba akarunk kapcsolni, felszólít, hogy adjunk meg egy nyitóoldalt.
- Number of Columns: Itt adjuk meg, hogy egy sorban hány dokumentumot jelképezo ikont akarunk maximum megjeleníteni egymás mellett.
-Column Width: Az ikonok, és a hozzájuk tartozó feliratok számára a rendelkezésre álló terület szélességet határozzuk meg ebben a pontban (pixel).
- Icon Labels: Beállíthatjuk, hogy az ikonok mellett a hozzátartozó file-név vagy oldalcím (<TITLE>) jelenjen meg.
- Display Files
Marked as Hidden: Rejtett file-ok megjelenítése.
- Display Dependent
Files: Bekapcsolva a dokumentumokhoz kapcsolódó, nem HTML file-ok is láthatóvá válnak (pl.: képek, appletek, flash mozik?).

Design Notes:

Fejlesztés közben minden file-hoz megjegyzéseket fuzhetünk, amik munkatársaink számára is láthatóak lesznek. Segítségükkel tájékoztathatjuk oket elvárásainkról, észrevételeinkrol, az adott file állapotáról, stb.

- Maintain Design Notes:: Design Note-ok alkalmazásának be-, ill. kikapcsolása.
- Upload Design Notes for Sharing: Bekapcsolva megjegyzéseink fel fognak töltodni a távoli helyre is, így a lapokon dolgozó többi ember számára is hozzáférhetové válnak.
- Clean Up: A gomb lenyomásával törölhetjük az olyan megjegyzéseket, amelyek nem tartoznak semelyik file-hoz sem. (pl.: A file-t már töröltük, de a megjegyzés megmaradt).

Site-ablak

Site Files: A távoli helyen lévo file-ok megjelenítése. (Ha nem adtunk távoli helyet, akkor üres ablak jelenik meg.
Site Map: Egy hivatkozás-térképet jeleníthetünk meg segítségével, amely dokumentumaink egymáshoz kapcsolódását mutatja be.
Connect: A nyomógomb segítségével kapcsolódhatunk a megadott FTP kiszolgálóhoz.
Refresh: Használatával újra lekérhetjük a távoli helyen található adatok listáját (Frissítés).
Get: A kijelölt file-okat, könyvtárakat letölti a távoli helyrol.
Put: A kijelölt file-okat a távoli helyre másolja.

Nyitóoldal definiálása

Egy file-t nyitóoldalnak (Home Page) állíthatunk be, ha ráklikkelünk az egér jobb gombjával (Mac: CTRL+Klikk), majd a menübol a Set As Home Page pontot választjuk.

Linkek ellenorzése

Lehetoségünk van ellenorizni, hogy a webhelyünkön (Site-unkon) belüli oldalakon található hivatkozások helyesek-e. Ezt a File menü Check Links / Entire Site pontjának segítségével tehetjük meg.

A dialógusablakban láthatjuk az ellenorzés eredményét.
- Broken Links: Olyan hivatkozások, amelyek nem létezo dokumentumokra mutatnak. Az ilyen hivatkozásokat ki kell javítanunk.
- External Links: Azok a hivatkozások, amelyek a Site-on kívüli helyekre mutatnak (pl.:maito: linkek). Ezeknek az ellenorzése nem lehetséges DreamWeaver használatával.
- Orphaned Files: Olyan file-ok, amelyek a Site valamelyik könyvtárában helyezkednek el, de semmilyen hivatkozás nem mutat rájuk, tehát csak ott vannak, de nem elérhetoek, ezért feleslegesen foglalják a helyet.

A Fejléc elemei

A dokumentumok fejléc mezojében a dokumentumra vonatkozó információkat (pl.: oldal címe) és a böngészoknek adott ún. fejlécparancsokat találjuk.

A Head mezo tartalma megtekintheto a HTML-ablakban (a <HEAD> és </HEAD> tag-ek között), vagy a szerkesztoablak felett, ha bekapcsoljuk a View menü Head Contents pontját.

Fejléc elemeket az Objects paletta fejléc (Head) részérol szúrhatunk be az oldalba.

Az egyes elemek

Title: Az oldal neve.
Meta: Oldallal kapcsolatos információk, fejlécparancsok.
Base: Hivatkozás alapok.
Link: Csatolások, csatolási viszonyok.
Script: A fejléc tartalmazhat még klien-oldali scripteket is.

<BASE> tag

Href: Megadhatjuk, hogy az általunk használt relatív hivatkozások milyen címhez képest legyenek viszonyítva.
Target: Az alapértelmezett megjelenítési célpontot (ablak vagy frame) adjuk meg segítségével. Ha link létrehozásánál semmit nem adunk meg Target-ként, akkor ezt a beállítást fogja használni (egyébként alapértelmezett a _self). Abban az esetben, ha a linknél megadunk célpontot, természetesen az ott megadott célpont fog érvényesülni.

<LINK> tag

Href: A file URL-je (Internetes címe), amivel viszonyt akarunk meghatározni.
ID: Egy azonosítót rendelhetünk a <LINK>-hez.
Title: Egy név hozzáadás a viszonyhoz. Ennek stíluslapoknál lehet szerepe.
Rel: A href-ben megadott file-lal való viszony fajtája állítható be (a dokumentum ? file viszony).
Rev: Fordított viszony definiálása (file ? dokumentum viszony).

Egy dologhoz vagy Rel-t, vagy Rev-et használjunk, mindkettot ne!
A megadható viszonyok Rel és Rev esetén is ugyanazok.

A lehetséges viszonyok:

Alternate: Másik verzió (HREFLANG-gal együtt használva másik nyelvu verzió, MEDIA-val más megjelenítésre [nyomtató, projector, stb.] szánt).
Stylesheet: Külso stíluslap (Stíluslap csatolás pl.: <LINK Rel=?Stylesheet? href="/stilus.css">).
Start: Kiinduló dokumentum egy dokumentum gyujteménybol.
Next: A dokumentum után következo dokumentum, az ajánlott olvasási sorrend szerint. Egyes böngészok (pl.:WebTV) az ilyen dokumentumokat elkezdik a háttérben letölteni, hogy a felhasználónak minnél kevesebbet kelljen rá várnia.
Prev: Elozo dokumentum.
Contents: A dokumentumhoz tartozó tartalomjegyzék.
Index: A dokumentum szószedete.
Glossary: A dokumentumhoz tartozó kifejezés gyujtemény.
Copyright: A dokumentumhoz tartozó, szerzoi Copyright információkat tartalmazó dokumentum.
Chapter: Dokumentumgyujtemény fejezete.
Section: Dokumentum egy szakasza.
Subsection: dokumentum egy alszakasza.
Appendix: Függelék a dokumentumhoz.
Help: Súgó a dokumentumhoz.
Bookmark: Könyvjelzok egy dokumentumhoz.

META tag-ek

A Meta tag-ek a dokumentumra vonatkozó metainformációkat, fejlécparancsokat tartalmazzák. Ilyenek pl. a Keywords, Description, Refresh. Bármennyi Meta tag szerepelhet egy oldal fejlécében.

Meatinformációk - <META NEME="Név" CONTENT="Érték">

Segítségükkel név - érték párokat rendelhetünk a dokumentumunkhoz. Nincsen standard lista a megadható nevekrol, ill. azok értékeirol, bármit szabadon használhatunk. Létezik egy-két ilyen Metainformácios adat, amelyet speciális célokra alkalmazunk:

Keywords:
Kulcsszavak. Egyes keresok ennek a meta tagnek a segítségével határozzák meg, hogy bizonyos keresési kritériumoknak megfelel-e a dokumentum.

Pl.: <META NAME="Keywords" CONTENT="Suli, Iskola, Isi, suli, iskola, középiskola">

A keresok általában csak az elso 100-150 adatot veszik figyelembe ebbol a Meta tag-bol.
Description:
Ha a dokumentum megfelel a keresési kritériumnak, akkor a keresok egy része ezt a szöveget jeleníti meg, mint az adott dokumentum leírása.

Pl.: <META NAME="Description" CONTENT="A Kovács László Középiskola honlapja">

A keresok általában csak az elso 100-120 karaktert jelenítik meg.
Fejlécparancsok - <META HTTP-EQUIV="Parancs" CONTENT="Paraméterek">

Refresh: A parancs egy megadott ido elteltével betölt egy megadott URL-en található dokumentumot.
Pl.: <META HTTP-EQUIV=?Refresh? CONTENT=?10; www.extra.hu?> 10 másodperc elteltével az adott dokumentum helyett betölti a www.extra.hu címen található dokumentumot.
Expires: Dokumentum érvényességi idejét határozza meg. Megadja azt az idopontot, amikor a dokumentum ?lejár?.
Pl.: <META HTTP-EQUIV=?Expires? CONTEN=?Mon, 27 Aug 1998 12:00:00 GMT?>
Content-Type: Adott dokumentum MIME-típusának, kódolásának leírása (Ld. Oldaltulajdonságok, karakter-kódolás).
Pl.: text/html; charset=Western.
Content-Script-Type: A beillesztett Scriptek alapértelmezett típusa. Pl.: text/javascript.
Content-Style-Type: A használt stílus alapértelmezett típusa. Pl.: text/css.

Frame-ek

Frame-ek segítségével részekre oszthatjuk a böngészo ablakát, és ezen részekben más-más dokumentumokat jeleníthetünk meg.

Pl.: Két Frame-et alkalmazunk, az egyik a navigációs rész, ez fix, nem mozog, nem változik, a másik részben a navigációs részen választott témát jelenítjük meg.

Frame-ekkel felosztott dokumentumok felépítése

Az ilyen dokumentumok két részbol állnak: egy, a Frame-ek elhelyezkedését, méreteit leíró oldalból (Frameset), és az adott Frame-ben megjelenített oldalból.

Frame-ek létrehozása

Kapcsoljuk be a View menü Frame Borders pontját, majd az oldal valamelyik szélén kattintsunk a keretre, azután az ALT billentyut lenyomva tartva húzzuk azt a megfelelo helyre.
Válasszuk a Modify menü Frameset pontját, majd a menübol a megosztás irányát.
Válasszuk ki az objects paletta Frame részérol az alkalmazni kívánt beosztást.
A régi böngészok (3.0-nál kisebb verziószámúak) nem képesek a Fram-eket tartalmazó oldalak megjelenítésére.

Ilyenkor ezek a Modify menü NoFrames Content pontja alatt megszerkesztett oldalt jelenítik meg.

Természetesen lehetoségünk van Frameset-ek egymásba ágyazására is.

Frame-ek törlése

Kapcsoljuk be a View menü Frame Borders pontját, majd a keretet ragadjuk meg az egérrel, és húzzuk ki a képernyorol.

A Frames Paletta (Window / Frames)

A Frame-ekkel való munkában sok segítséget nyújt ez a paletta, leginkább az egyes Frame-ek, Frameset-ek kijelölését könnyíti meg.

- Frame kijelölése: A palettán kattintsunk a kívánt Frame-be.
- Frameset kijelölése: A palettán kattintsunk a Frame-eket körülvevo keretre.

Frameset tulajdonságai

Borders: A framesetben elhelyezkedo frame-ek kereteinek alakja. Yes: 3D-s hatású keretek
No: Sima, egyszínu keretek
Default: Böngészo beállítása szerint (általában Yes).

Border Width: A keretek szélessége (px). Ha nem akarunk kereteket alkalmazni, akkor állítsunk be nullát szélességnek.
Border Color: A keretek színe.
Value: Az éppen kiválasztott frame méretét állíthatjuk be itt. A framek között a paletta jobb oldalán lévo, a frameset beosztását jelképezo ikon egyes részeire kattintva tudunk váltani. Az itt megadott beállítások akkor lesznek igazán fontosak, ha a felhasználó átméretezi a böngészo ablakot. Az egyes Frame-ek méretének változása az itt és a Units pontnál megadott értékektol fog függeni.
Units: A méretezéshez használt mértékegység. Pixel: Az adott frame fixen ennyi képpont szélességu, ez a méret akkor sem fog megváltozni, ha a felhasználó átméretezi a böngészo ablakot.
Percent: A frame az ablak méretének a Value pontban megadott százalékát fogja kitölteni. Ez a szélesség az ablak átméretezésével megváltozik.
Relative: Csak egy Frame méretezéséhez használhatjuk. Az adott Frame ki fogja tölteni az összes helyet, amelyet a többi Frame szabadon hagy neki. Ilyen esetben a program a Value pontban megadott értéket nem veszi figyelembe.

Frame-ek tulajdonságai

Frame Name: Az adott Frame neve. Fontos, hogy elnevezzük oket, mert késobb ez alapján fogunk hivatkozni rájuk, ha valamit egy adott frame-ben akarunk megjeleníteni.
Src: Annak a dokumentumnak a helye, amit alaphelyzetben az adott Frame-ben akarunk megjeleníteni.
Borders: Beállíthatjuk az adott Frame keretének típusát. A beállítási lehetoségek megegyeznek a Frameset tulajdonságainál leírtakkal, de ezen beállítások értelem szeruen felülbírálják a Frameset beállításait.
Border Color: A keret színe. Ez is felülírja a Frameset-nél megadott értéket.
Scroll: Ebben a pontban beállíthatjuk a Frame viselkedését arra az esetre vonatkozóan, ha a tartalma nem férne el benne. Auto: Amennyiben a Frame tartalma nem fér el a Frame-ben, akkor görgetosávok jelennek meg.
Default: Böngészo beállítása szerinti viselkedés (általában Auto).
Yes: Mindenképp megjelennek a görgetosávok, akkor is, ha a tartalom elfér a Frame-ben.
No: A görgetosávok nem jelennek meg, abban az esetben sem, ha a tartalom nem férne el az adot területen.

No Resize: Bekapcsolásával megakadályozhatjuk, hogy a felhasználó a böngészoablakban átméretezze a Frame-eket.
Margin width,
height: A Frame szélei- és tartalma között lévo üresen hagyott terület mérete (margó).

Frameset mentése

Magát a Frame-ek elhelyezését leíró dokumentumot a File menü Save Frameset pontjával tudjuk elmenteni.

Frame-ek mentése

Klikkeljünk a szerkesztoablakban valahová az elmenteni kívánt Frame-en belül, majd válasszuk a File menü Save, vagy Save As pontját.

Hivatkozások célpontjának kiválasztása

A dokumentumban eloforduló minden egyes hivatkozásnál lehetoségünk van megadni, hogy azt a hivatkozást hol (melyik ablakban v. frame-ben) akarjuk megjeleníteni. Ezt a hivatkozás tulajdonságainál (properties paletta) a Target nevu legördülo menü megfelelo pontját választva tehetjük meg. Ha egy általunk létrehozott frame-ben kívánjuk a megadott oldalt megjeleníteni, válasszuk a menübol az adott Frame nevét.

Megjegyzések

Mindig érdemes a frame tartalmát az adott frame-ben megszerkeszteni. Bizonyos esetekben egy frame-ben több oldalt is meg fogunk jeleníteni egymás után, ilyenkor szerkesztésnél mindig az adott Frame-ben nyissuk meg oket (File menü, Opne in Frame), majd a szerkesztés befejeztével mentsük el az oldalt, de a Frameset-et NE!

Frame-ek háttérszínei: A Frame-ek nem rendelkeznek önálló háttérszínnel, ez mindig az éppen megjelenített dokumentumtól függ.

Alapesetben a Frame-eket tartalmazó oldal címe a FRAMESET oldalbeállításainál megadott címmel fog megegyezni!

Rétegek

A rétegeket elsosorban az oldalra beillesztheto elemek pontos pozícionálására használjuk. Tartalmazhatnak bármilyen objektumot, ami a dokumentum törzs részébe kerülhet, rétegeket is.
Hátrányuk, hogy megjelenítésüket csak a 4.0 ill. nagyobb verziószámú böngészok támogatják.

A rétegeket két csoportba sorolhatjuk:

- CSS ? rétegek
- Netscape ? rétegek

Rétegek létrehozása

Insert menü Layer pontjával egy alapértelmezett tulajdonságokkal (ld. Edit/Preferences) rendelkezo réteget hozhatunk létre.
Kattintsunk a réteg ikonra az object palettán, majd a dokumentumban "rajzoljuk" meg!

Húzzuk a réteg ikont a dokumentumba.
Beágyazott réteg létrehozása.
Az object palettáról húzzuk a réteg ikont arra a rétegre, amibe be akarjuk ágyazni.

A rétegek tulajdonságai

- Név: A réteg azonosítója. Szerepe a szokásos.
- L: A réteg távolsága az ablak (ill. a szülo réteg) bal szélétol.
- T: A réteg távolsága az ablak (ill. a szülo réteg) felso szélétol.
- BgImage: A rétegre tett háttérkép (muködése mint táblázatoknál).
- BgColor: A réteg háttérszíne.
- W: Szélesség fix méretben (px, cm, ?), vagy a szülohöz (ez lehet az oldal is) képest %-ban.
- H: Magasság
- Z-index: Ez az érték határozza meg, hogy a réteg mely rétegek alatt, ill. fölött helyezkedik el. Minnél magasabb, a réteg mindig annál feljebb van. (Egy réteg mindig feljebb van, mint maga az oldal).
- Visibility: A réteg láthatósága - Default: Böngészo beállításai szerint (általában Inherit).
- Visible: Látható
- Hidden: Rejtett
- Inherit: A réteg láthatóságát a szülo rétegtol (vagy nem beágyazott réteg esetén az oldaltól) "örökli", azaz, ha az látható, o is látható lesz; ha nem, akkor rejtett.

- Tag: Réteg típusának beállítása: - DIV, SPAN: CSS rétegek
- LAYER, ILAYER: Netscape rétegek

- Overflow: CSAK CSS RÉTEGEKNÉL! Itt adhatjuk meg rétegünk viselkedését arra az esetre, ha a benne lévo tartalom több helyet igényelne, mint maga a réteg. - Visible: A réteg megnyúlik akkorára, hogy a tartalom elférjen benne.
- Hidden: A réteg mérete nem változik, a túllógó tartalom nem fog megjelenni.
- Scroll: Akár elfér a rétegen a tartalom, akár nem, görgetosávok fognak megjelenni, és ezekkel tudjuk az esetleges tullógó részt megtekinteni.
- Auto: Amennyiben több tartalom nem fér el a rétegen, götgetosávok jelennek meg, egyébként nem.

- Clip: Itt adhatjuk meg, hogy az adott rétegbol mekkora rész kerüljön megjelenítésre. Az L, R, T, B mezokben megadhatjuk, hogy mennyit vágunk le a bal és a jobb oldalon, ill. felül és alul.

Egyéb tulajdonságok, csak Netscape rétegeknél:
- src: Megadhatunk egy HTML oldalt, ami a rétegen fog megjelenni.
- A/B: A Z-index használata helyett a rétegek sorrendjét megadhatjuk úgy is, hogy meghatározzuk, egy réteg melyik fölött (Above), ill. alatt (Below) van.
- Use: - Left, Top: A réteg pozícionálásakor a koordináták a szülotol lesznek számolva.
- PageX, PageY: A réteg elhelyezésénél a koordináták mindig az oldal bal felso sarkától számolódnak, függetlenül attól, hogy a réteg beágyazott, vagy sem.

A LAYER ill. ILAYER rétegeket az Internet Explorer nem képes megjeleníteni. A Netscape Navigator régebbi verziói nem kezelik a CSS rétegeket, de az újabbak is gondban vannak, ha a felhasználó átméretezi böngészoje ablakát.
Az utóbbira megoldás, ha minden átméretezés után egy kis JavaScript-tel gondoskodunk róla, hogy az oldalt újra letöltsük.

Ezt DreamWeaver 3-ban a Commands menü Add Layer Resize Fix pontjával tehetjük meg.

A Layer paletta (Window / Layers)

A réteg palettán a Prevent Layer Overlaps pontot bejelölve a program megakadályozza, hogy az oldalon található rétegek fedésbe kerüljenek egymással (Ez a késobbiekben lehet hasznos, ha rétegeinket táblázatokká akarjuk konvertálni).
Kijelölhetünk egy réteget, ha a nevére kattintunk (egyszerre többet is, ha lenyomva tartjuk a SHIFT billentyut).
Ha duplán klikkelünk egy réteg nevére, átnevezhetjük azt.
Megváltoztathatjuk a rétegek Z-indexét, ráklikkelve, majd a megfelelo számot megadva.
Megváltoztathatjuk a rétegek egymáshoz viszonyított magasságát: egyszeruen húzzuk a kívánt réteget a megfelelo helyre a palettán.
Lehetoségünk van rétegek egymásba ágyazására, ezt a CTRL (Mac: Command) gomb lenyomva tartása mellett a beágyazandó réteget a szülore húzva tehetjük meg.
A szem ikon alatti sorban a rétegek láthatóságát állíthatjuk be. (Nyitott szem: látható; csukott szem: rejtett; semmi: öröklés). Ha magára a szem ikonra klikkelünk a felso sorban, akkor egyszerre az összes réteg láthatóságát állíthatjuk.

Rétegek módosítása

Átméretezés:

Properties palettán megadjuk az új méreteket
Kiválasztjuk a réteget, majd az oldalain lévo négyzeteket megragadva a megfelelo méreture állítjuk.
Mozgatás:

A réteget a "fülénél" megragadva elhúzzuk a kívánt helyre.
Pixelenként mozgathatjuk a kijelölt réteget a kurzornyilakkal (Shift-tel együtt a beállított igazodási értékenként).

Rétegek igazítása

Ha egyszerre több réteget jelöltünk ki, ezeket igazíthatjuk, illetve méretezhetjük egymáshoz viszonyítva. Az igazítás, méretezés mindig az utoljára kijelölt réteghez viszonyítva történik.

Modify / Layers:
Align Left: A kiválasztott rétegek bal oldalát egy vonalba igazítja.
Align Right: A jobb oldalukat igazítja egy vonalba.
Align Top: Felso szélek igazítása egy vonalra.
Align Bottom: Alsó szélek igazítása.
Make Smae Width: Megegyezo szélességure állítja a rétegeket.
Make Same Height: Megegyezo magasságúra állítja a rétegeket.

Ez manuálisan is megteheto, ha több réteget kiválasztunk, majd a Properties palettán (Multiple Layers), megadjuk a kívánt értékeket.

A Rács

- Rétegek pozicionálásánál hasznos lehet a segédrács bekapcsolása.
- Megjelenítése: View / Grid / Show
- Igazodás a beállított értékhez: View/Grid/Snap To

A rács beállításai (View / Grid / Settings):
- Visible Grid: Rács megjelenítése
- Spacing: Rács surusége (min. 25px).
- Color: A rács színe.
- Display: A megjelenítés módja: - Lines: Vonalháló
- Dots: Pontokból álló vonalak

- Snapping: Az igazítás ki-be kapcsolása.
- Snap Every: Beállíthatjuk, hogy az automatikus igazítás hány pixelenként történjen (érdemes valami olyan értéket megadni, ami maradék nélkül megvan a rács suruségénél definiált értékben).

Rétegek és táblázatok

A program használatakor lehetoségünk nyílik az oldalon található táblázat(ok) rétegekké alakítására, illetve az oldalon lévo rétegek táblázattá konvertálására. Ez utóbbi csak akkor végezheto el, ha az oldalon nincsenek egymást fedo, beágyazott, ill. az oldalról részben, vagy teljesen kilógó rétegek.

Táblázatok konvertálása rétegekké

(Modify / Layout / Reposition Contents Using Layers) - (Modify / Layout Mode / Convert Tables to Layers) [DW3]

Prevent Layer Overlaps: Megakadályozza, hogy a létrejövo rétegek fedésbe kerüljenek egymással (ld.: Layer paletta hasonló nevu pontja).
Show Layer Palette: A konvertálás után a program bekapcsolja-e a Réteg palettát.
Show Grid, Snap to Grid: ld. a rácsnál leírtakat.
A parancs a táblázatok minden NEM-üres celláját réteggé alakítja. A háttérszínnel rendelkezo cella nem számít üresnek, de ha csak háttérképpel rendelkezik, akkor igen.

Rétegek konvertálása táblázattá (Modify / Layout / Convert Layers to Table)

- Most Accurate: Minden réteghez létrehoz egy megfelelo méretu cellát, plussz annyi cellát, hogy a rétegek közötti távolság megmaradjon.
- Smallest: Collapse Empty Cells: Ha a rétegek széleinek egymástól mért távolsága a megadott mértéken (px) belül van, akkor egy vonalra kerülnek; a létrejövo táblázatban nem lesz köztük üres cella a térköz fenntartásához. Ezt a módszert alkalmazzuk, ha nem kell teljesen pontosan történnie a konverziónak, hiszen az így létrehozott táblázat jóval kevesebb cellából szokott állni, így sokkal könnyebben kezelheto.
- Use Transparent Gif: A létrejövo táblázat utolsó sorát a program átlátszó GIF képekkel tölti ki, így biztosítva a táblázat kello szélességét. (Mivel egy cella nem lehet kisebb méretu, mint a tartalma, ezért nem lehetséges, hogy táblázatunk majd összenyomódik.) Ha az opció be van kapcsolva, nem lesz módunk, hogy a táblázat egyes oszlopainak méretét manuálisan módosítsuk, csak akkor, ha a képeket eltávolítjuk az alsó cellákból.
- Center on Page: A létrejövo táblázat az oldal közepére lesz igazítva. Ha nincs bekapcsolva, a táblázat balra igazodik.
- Layout Tools: ld. táblázatok konvertálása rétegekké.

FONTOS: Egymást fedo, beágyazott, az oldalról kilógó rétegek nem konvertálhatók táblázattá!

Konvertálás 3.0-és böngészokhöz (File / Convert / 3.0 Browser Compatibile)

Létrehoz egy új dokumentumot, ebbe másolja be az eredetit a szükséges módosításokkal, hogy az megfeleljen a régebbi böngészoknek is.

- Layers to Tables: Rétegek Táblázattá konvertálása.
- CSS to HTML Markup: CSS stílusokat HTML formázássá alakít (errol bovebben a CSS stílusoknál).
- Both: Mindkét módosítást elvégzi.

Megjegyzések

Ha rétegekkel dolgozunk, MINDIG azonnal nevezzük el a létrehozott rétegeket, olyan névvel, amirol egybol felismerjük.
Érdemes az Edit menü Preferences pontjában az Invisible elements alatt kikapcsolni az Anchor Points for Layers részt, mert ha be van kapcsolva, a program által jelölésre használt ikon miatt szerkesztés közben a rétegek valamennyit elcsúszhatnak (18px), és így nehéz megtervezni a kívánt külalakot

Animáció Timeline-ok segítségével

A Timeline-okkal létrehozott animáción tulajdonképpen rétegek helyzetének, méretének, láthatóságának, Z-indexének adott idoközönkénti dinamikus megváltoztatását értjük. Ezt a DreamWeaver egy Javascript létrehozásával éri el.

Alkalmazásának elonye: Semmiféle Plugint, Active-X vezérloelemet nem igényelnek, hiszen csak rétegeket és JavaScriptet alkalmazunk.

FONTOS:
A Timeline-ok rétegekkal kapcsolatos funkciói csak a 4.0+ böngészokben muködnek. Alkalmazásuk során vigyáznunk kell, hogy ne töröljünk az oldalról olyan elemeket, amelyekre a Timeline használata során hivatkozunk.

A Timeline paletta

Az Autoplay bekapcsolásával az animáció automatikusan le fog játszódni, ha az oldal letöltodött.

Ha Loop-ot bekapcsoljuk, végtelenített módban játszódik le az animáció.

Fps: Másodpercenként megjelenítendo képkockák száma. Ne állítsuk 15 fölé, mert a legtöbb böngészo ugysem tudja ennél gyorsabban lejátszani.

Animáció létrehozása

Mozgassuk az animálni kívánt rétegünket a kiindulási helyzetbe.
Válasszuk a Modify / Timeline / Add Object to Timeline pontot.
Klikkeljünk a Timeline palettán az utolsó képkockára (egy üres kör található itt, jelezve, hogy ez egy kulcskocka).
Mozgassuk a réteget a kívánt befejezo helyzetbe.
Lehetoségünk nyílik további kulcskockák meghatározására is, ehhez a megfelelo csatorna kívánt képkockájában klikkeljünk az egér jobb gombjával (Mac: CTRL+Klikk), majd válasszuk az Add KeyFrame pontot. (Ugyanezt a hatást érjük el, ha a CTRL (Mac: Command) gomb lenyomása mellett az adott képkockára kattintunk).

Minden kulcskockában meghatározhatjuk az animációban résztvevo réteg helyét, méretét (Netscape Navigator böngészonél ez nem használható), Z-indexét, láthatóságát.

Természetesen az animáció minden egyes képkockáját kulcskockává alakíthatjuk.

Megjegyzés:
Timeline-ba kép is felveheto, de ennek csak az src (forrás) tulajdonságát tudjuk dinamikusan változtatni, és ennek a hátásnak az eléréséhez is sokkal jobb megoldás (ld. késobb).

Rétegek mozgatása meghatározott út alapján

Válasszuk ki az animálni kívánt réteget.
Mozgassuk abba a pontba, ahol az animáció kezdetekor lesz.
Válasszuk a Modify / Timeline / Recorf Path of Layer pontot.
Ragadjuk meg a réteget, és húzzuk végig azon az úton, amit meg akarjuk, hogy tegyen az animáció során.
A végpont elérésekor engedjük el az egér gombját.

Timeline-ok módosítása

- Animáció idejének
növelése: Ragadjuk meg, és húzzuk el jobbra az utolsó képkockát. Ilyenkor a többi kulcskocka elosztása arányosan történik. Ha azt akarjuk, hogy csak az utolsó képkocka helyzete módosuljon, húzás közben tartsuk lenyomva a CTRL billentyut.
- Kulcskockák mozgatása: Egyszeruen húzzuk a kulcskockát a kívánt pozícióba.
- Egész animáció térben
való eltolása: Klikkeljünk a kívánt csatornán egy nem-kulcskocka mezore (Ha lenyomva tartjuk a SHIFT gombot, akkor ezt több csatornán is megtehetjük), majd a szerkesztoablakban húzzuk az animációban résztvevo réteget (és az animációt) a kívánt pozícióra.

Több Timeline használata

Lehetoségünk van arra, hogy több Timeline-t alkalmazzunk egy dokumentumon belül, így könnyebben létrehozhatunk bonyolultabb animációkat, összetettebb viselkedéssel (ld. Viselkedés), amelyek bizonyos események hatására reagálnak.

Új Timeline hozzáadása a dokumentumhoz:
Válasszuk a Modify / Timeline / Add Timeline pontot.

Timeline-ok törlése:
Modify / Timeline / Remove Timeline.

A Timeline-ok elemeire is használhatjuk az Edit menü Cut, copy, paste parancsait. Értelem szeruen egy adott objektum egy meghatározott pillanatban egyszerre csak egy helyen fordulhat elo, ezért bizonyos helyekre nem tudunk beilleszteni objektumokat.

Megjegyzések

Nagy képeket tartalmazó rétegeket ne mozgassunk, inkább szabdaljuk fel a képet, helyezzük el több rétegre, és ezeket a kisebbeket mozgassuk.
Ahelyett, hogy egy kép src tulajdonságát próbálnánk meg dinamikusan módosítani, helyezzük el a másik képet egy rejtett rétegen, és a megfelelo helyen és idoben jelenítsük meg a rejtett réteget, és tüntessük el az eredeti képet tartalmazót. Ezzel a megoldással elkerülhetjük, hogy várakozni kelljen az új kép letöltésére, hiszen az oldal megnyitásakor a kép már letöltodik a réteggel együtt, csupán nem látszik.
Simább animációkat hozhatunk létre, ha több képkockát használunk, és nagyobb fps értéket adunk meg. Az optimális hatás elérése érdekében érdemes több lehetoséget megpróbálni, majd megtekinteni különbözo böngészokben.

Sablonok

Sablonokat abban az esetben alkalmazunk, ha Site-unkon több oldalt készítünk ugyanolyan, vagy nagyon hasonló arculattal. Ilyenkor ahelyett, hogy minden egyes oldalnál megadnánk a megfelelo beállításokat, beillesztenénk a kívánt helyre a megfelelo elemeket a kívánt viselkedésekkel, létrehozunk egy sablont, majd a sablon alapján fogjuk létrehozni egyes oldalainkat. Az így létrehozott oldalak egyszerre módosíthatóak, ha magát a sablont fogjuk módosítani.

Amikor egy sablont hozunk létre tulajdonképpen megcsinálunk egy oldalt, és ezek egyes részeit szerkeszthetové tesszük, másokat nem.

Természetesen a sablonok azután is megváltoztathatóak, hogy dokumentumokat hoztunk létre belolük. Ilyenkor a program fel fogja kínálni a lehetoséget, hogy frissíti a sablonból létrehozott oldalakat.

Tudni kell, hogy sablonaink mindig egy Site-hoz tartoznak.

Sablonok létrehozása

Bármely dokumentum mentheto sablonként (ilyenkor azonban mentés után majd még szerkesztheto területeket kell meghatároznunk hozzá). Ezt a File menü Save As Template pontjával tehetjük meg.

Új, üres sablont hozhatunk létre a Templates paletta (Window / Templates) New ikonjára klikkelve, vagy a Templates paletta menüjének a New pontját választva. Ilyenkor azonnal adjunk nevet a létrehozott sablonunknak, hogy a késobbiekben könnyen tudjuk majd azonosítani.

Sablonok szerkesztése

Sablon szerkesztés üzemmódba a sablon palettán a szerkeszteni kívánt sablon nevére történo dupla kattintásssal térhetünk át. (Másik módszer, hogy kiválasszuk a szerkeszteni kívánt sablont, majd az Open ikonra klikkelünk.)

Sablon szerkesztése közben a <<Template>> felirat látható az oldal neve elott az ablak címsávjában.

Oldalbeállítások (Modify / Page Properties)

A Title beállítás kivételével a késobbiekben a sablonból létrehozott oldalak tulajdonságainál történt változtatások figyelmen kívül maradnak. Ha ezeket meg akarjuk a késobbiekben változtatni, vagy a sablont kell megváltoztatnunk, vagy az adott oldalt kell leválasztanunk a sablonról.

Szerkesztheto- és zárolt területek

Minden sablonban vannak szerkesztheto (Editable) és nemszerkesztheto (Locked) területek, objektumok. A szerkesztheto részeket, tartalmukat szabadon változtathatjuk a sablonból létrehozott dokumentumokban. A zárolt részek a sablonból létrehozott oldalakon nem módosíthatók. (Természetesen a sablon szerkesztése közben zárolt területeket is szabadon megváltoztathatunk.)

Alapértelmezésként az egész sablon zárolt, nem rendelkezik egyetlen szerkesztheto területtel sem!

Ha olyan sablonból akarunk létrehozni dokumentumot, amely nem rendelkezik szerkesztheto részekkel, a program rá fog kérdezni, hogy ezt valóban meg akarjuk-e tenni.

Tehát ahhoz, hogy sablonaink használhatóak legyenek, szerkesztheto részeket kell meghatároznunk, beszúrnunk.

Szerkesztheto területek meghatározása

Válasszuk ki azt a részt, amit szerkeszthetové akarunk tenni.
Válasszuk a Modify / Templates / Mark Selection Editable pontot
A megjeleno dialógus ablakban adjunk egy nevet a szerkesztheto területnek
Táblázatok esetében szerkeszthetové teheto maga a táblázat, illetve celláinak tartalma. Egyszerre csak egy cellát tehetünk szerkeszthetové, ha többet akarunk, jelöljük ki egyesével oket, és minden egyes cellára külön alkalmazzuk a fent leírtakat. Ha a táblázatot szerkeszthetové tesszük, akkor csak magát a táblázatot tudjuk majd módosítani, tartalmát nem. Ha csak a tartalom szerkesztheto, a táblázat beállításait nem fogjuk tudni megváltoztatni.

Új szerkesztheto terület létrehozása

Vigyük a kurzort oda, ahová szerkesztheto területet akarunk beilleszteni.
Válasszuk a Modify / Templates / New Editable Region pontot.
Adjunk egy nevet a szerkesztheto területnek (Ez a név majd kapcsos zárójelekben fog megjelenni a sablonban, ide majd valamilyen tartalmat szúrhatunk be).

Zárolás

Lehetoségünk van a már szerkeszthetové alakított területek zárolására, ehhez válasszuk a Modify / Templates / Unmark Editable Region pontot, majd jelöljük ki a listából a megfelelo terület nevét.

A Sablonokkal kapcsolatos beállítások (Edit / Preferences / Highlighting)

Beállítható a szerkesztheto (Editable Regions), illetve a Zárolt (Locked Regions) területek kiemelésére használt szín.
A kiemelés csak akkor fog megtörténni, ha a View / Invisible Elements be van kapcsolva.

A sablonok szerkesztésénél a szerkeszthetonek meghatározott területek lesznek csak kiemelve a beállított színnel. Természetesen a többi részt is szabadon módosíthatjuk, amíg a sablont szerkesztjük.

A sablonból létrehozott dokumentumban csak a zárolt területek lesznek kiemelve a meghatározott színnel, ezek szerkesztése nem lehetséges.

A kiemelés a HTML kódban is megtörténik. A szerkesztheto területek a <!-- #BeginEditable "Név" --> és az
<-- #EndEditable --> megjegyzések között találhatók.

Dokumentumok léterehozása sablonok alapján

Ha egy sablon alapján akarunk új dokumentumot létrehozni, használjuk a File / New From Template pontot, majd válasszuk ki az adott Site-hoz tartozó, alkalmazni kívánt sablont.
Másik megoldás, ha létrehozunk egy új oldalt (File / New), majd alkalmazzuk rá az adott sablont; a sablon a palettárol a dokumentumba történo húzásával.

Sablonok alkalmazása létezo dokumentumokra

Modify / Templates / Apply to Page
A Templates Palettáról az alkalmazni kívánt sablont a dokumentumba húzzuk
A palettán kiválasztjuk a megfelelo sablont, majd az Apply gombra klikkelünk.
Ilyenkor a sablon tartalma hozzáadódik az oldalhoz.

Ha egy másik sablon alkalmazva volt az oldalra, a program megnézi, hogy vannak-e azonos nevu területek, és ilyenkor megpróbálja a megfelelo részeket behelyettesíteni. Ha vannak olyan területek a régi sablonban (részek az oldalon), amely az alkalmazni kívánt sablonban nem szerepelnek, akkor a DreamWeaver rákérdez, hogy ezeket törölje, vagy vegye bele az új sablonba. Ha az új sablonban több szerkesztheto terület van, mint a dokumentumban volt, ezek egyszeruen hozzáadódnak az oldalhoz.

Dokumentumok leválasztása az oket létrehozó sablonról

A leválasztást a Modify / Templates / Detach from Sablon.dwt ponttal tehetjük meg. Ilyenkor az oldal teljes egészében szerkeszthetové válik, de innentol kezdve nem lehetséges a dokumentum sablon alapján történo frissítése.

Dokumentumok frissítése

Ha megváltoztatunk egy sablont, a program végignézi, hogy mely dokumentumaink állnak kapcsolatban vele, és felkínálja azok automatikus frissítését. Amennyiben itt nem végeznénk el ezt, a késobbiekben is lehetoségünk nyílik rá a Modify / Templates / Update Current Page (Éppen aktuális oldal frissítése), ill. Update Pages (több oldal frissítése) pontok alkalmazásával.

Több oldal frissítése:
- Look in: Hol keresse a program a frissítendo oldalakat - Entire Site: Egy a mögötte lévo listából kiválasztott teljes Site-on belül.
- Files That Use: Az adott Site-on belül az olyan file-okat keresse, amelyek a listából kiválasztott sablont használják.

FONTOS:
Ha megváltoztatjuk egy sablon nevét, frissítés elott újra alkalmaznunk kell azt a kívánt oldalakra!

Megjegyzések

Sablonok tartalmazhatnak Timeline-okat, CSS stílusokat, viselkedéseket. Mivel ezek a Fejléc (HEAD) mezo elemei (a viselkedések csak részben), ezért azok módosítása nem lesz lehetséges a sablon alapján létrehozott dokumentumokban, hiszen ezekben a Fejléc mezo elemei közül csak a Title szerkesztheto.

Library

A Libraryben (Könyvtár) elemeket (pl.: Képek, szövegek, hivatkozások, egyéb objektumk) tárolhatunk el. Olyan elemeknél szoktuk használni, amelyek többször elofordulnak oldalainkon. A Libraryben tárolt elemeket nevezzük Library Itemeknek.
Amikor a Librarybol egy elemet illesztünk az oldalba, a DreamWeaver beilleszti az adott elemhez tartozó HTML kódot, és tesz egy megjegyzést magának, hogy ez a beillesztett kód egy külso objektumhoz tartozik, így lehetoséget biztosít, hogy ha magát a Library Itemet változtatjuk meg, akkor a beillesztett részeket automatikusan frissíteni tudja.

Fontos, hogy a sablonokhoz hasonlóan, egy Library is egy Site-hoz tartozik.

Library Itemek létrehozása

Válasszuk ki az adott elem(ek)et, ami(ke)t Library Itemmé kívánunk alakítani
A kijelölt részt húzzuk át a Library palettára, vagy a paletta menüjébol válasszuk a New Library Item pontot, vagy kattintsunk a palettán a New ikonra (ha ezek egyike sem tetszik, választhatjuk a Modify menü Library / Add Object to Library pontját is).
Adjunk egy nevet a létrehozott Library Itemnek.
FONTOS:
Csak olyan dolgokat illeszthetünk be a Librarybe, amelyek a dokumentum törzs (BODY) részébe beilleszthetok. A külso eroforrásokra (pl.: képek) csak hivatkozik a program, tehát ahhoz, hogy ezek megfeleloen beilleszthetoek legyenek, az adott eroforrásoknak létezniük kell a megfelelo helyen!

Library Itemek beillesztése az oldalra

A beillsztéshez a Library palettáról húzzuk a kívánt elemet a dokumentum megfelelo helyére, vagy állítsuk a kurzort a szerkesztoablakban a beszúrás helyére, majd a palettán az elem kiválasztása után kattintsunk az Insert gombra.

Ha el akarjuk kerülni, hogy az adott rész Library Itemként történjen beillesztésre - nekünk csak a HTML kódra van szükségünk-, akkor tartsuk lenyomva a CTRL billentyut beillesztés közben. Az így beillesztett elemek nem Library Itemként fognak kezelodni, tehát automatikus frissítésük nem lehetséges.

Library Itemek módosítása

Válasszuk ki a szerkeszteni kívánt elemet a palettán.
Klikkeljünk az Open ikonra, vagy válasszuk a paletta menüjébol az Edit parancsot.
Szerkesszük át az elem(ek)et a kívánt formára.
A File menü Save pontjával mentsük el a változtatásokat.
A dialógus ablakban határozzuk meg, hogy frissíteni akarjuk-e megváltoztatott elemet tartalmazó dokumentumaink tartalmát, vagy sem (ez a sablonoknál leírtakhoz hasonlóan történik). Amennyiben nem akarunk frissíteni, ezt a késobbiekben is megtehetjük a Modify / Library / Update Pages pontban.

Library Itemek törlése

Válasszuk ki a palettán a törölni kívánt elemet
A paletta menüjébol válasszuk a Delete pontot, vagy klikkeljünk a Kuka ikonra.
FONTOS:
Attól függetlenül, hogy törlünk egy elemet, az adott elemet tartalmazó dokumentumok tartalma nem változik.

Library Item-ek szerkeszthetové tétele a dokumentumban

Egy Library Item-et szerkeszthetové tehetünk, ha az adott kódot leválasztjuk a Libraryrol. Ezt az elemet a dokumentumban kiválasztva, majd a Properties palettán a Detach From Original gombra klikkelve tehetjük meg. Természetesen ilyenkor, mivel töröltük az elemre való hivatkozást, az adott Library Item módosításakor ez a rész nem fog frissítésre kerülni.

Libraryvel kapcsolatos beállítások (Edit / Preferences / Highlighting / Library Items)

Megadhatunk egy színt, amit a program a Library Itemek kiemelésére fog használni. A kiemelés csak akkor történik meg, ha a View / Invisible Elements be van kapcsolva.

Viselkedések - Behaviors

Viselkedések (Behaviors) alkalmazásával lehetoségünk nyílik arra, hogy a felhasználó cselekedetei hatására változások történjenek oldalunkon. A DreamWeaver a viselkedések megteremtéséhez JavaScript-et használ. (Egyébként ez nem csak JavaScripttel, hanem más, kliens oldali scriptnyelvek segítségével ? pl.: VBScript - illetve appletek, Flash mozik, stb. alkalmazásával is lehetséges.)

A Viselkedések három részbol állnak:
- Akció: Ez maga a változás, ami valamilyen esemény hatására történik.
- Esemény: Minden akcióhoz tartozik egy esemény, az adott akció ennek hatására fog lejátszódni. Egy eseményhez több akciót is kapcsolhatunk, ilyenkor azok a meghatározott sorrendben fognak lejátszódni.
- Elem: Az a dolog, amihez az események és a hozzájuk tartozó akciók kötodnek. Egy elemhez több ilyen esemény-akció páros is kötheto.

FONTOS:
A lejátszódó akciók nem feltétlen a felhasználó cselekedeteire jönnek létre, más, tolük független események is kiválthatják az akció végrehajtását (pl.: az akció egy kép letöltodésekor játszódik le).
Tudni kell, hogy nem minden böngészo támogat minden eseménykezelot, illetve azok használatát bizonyos elemeken.

Be*haviors paletta (Window / Behaviors)

- + gomb: Akció hozzáadása. Maga az akció a rákattintás után megjeleno menübol választható ki.
- - gomb: Akció törlése. Válasszuk ki a törölni kívánt akciót, majd kattintsunk rá.
- Events for: Ebben a legördülo menüben állíthatjuk be, hogy milyen eseménykezeloket alkalmazhatunk. Minden büngészo más-más eseménykezelokkel rendelkezhet fajtától, ill. verziótól függoen.
- Le, fel nyilak: Ezek segítségével állíthatjuk be az ugyanazon esemény hatására bekövetkezo akciók lejátszódási sorrendjét.
- A használni kívánt eseménykezelot az akció elott található legördülo menübol választhatjuk ki.

A paletta címsorában láthatjuk az elemet (pl.: <img>), amihez a viselkedést kötni akarjuk.

Eseménykezelok

Viselkedés illesztése egyes elemekhez

Válasszuk ki a kívánt elemet (Ha az egész dokumentumot akarjuk, klikkeljünk a státusz soron lévo <body> tag-re).
Nyomjuk le a + gombot a palettán
Válasszuk ki a megfelelo akciót
Adjuk meg az akció paramétereit
Ha az alapértelmezett eseménykezelo nem megfelelo számunkra, válasszunk egy másikat az akció elott található legördülo menüben. Egyes eseménykezelok zárójelben vannak. Ez azt jelenti, hogy ahhoz, hogy az adott eseménykezelo muködjön, valahogy át kell alakítani az adott elemet (pl. képekbol hivatkozást kell csinálni, hogy az onMouseOver muködjön). A zárójeles eseménykezelo választásakor a program automatikusan elvégzi a szükséges módosításokat.

Viselkedés illsztése Timeline-okhoz

A Timeline B csatornáján kattintsunk duplán arra a képkockára, ahol a viselkedést el kívánjuk helyezni.
Válasszuk ki az alkalmazni kívánt akciót, adjuk meg paramétereit. Természetesen az akciók nem csak a Timeline elemeire lehetnek hatással, hanem az oldalon található bármely objektumra.

A Timeline-okhoz rögzített egyetlen lehetséges eseménykezelo az onFrameX.

A hozzárendelt akciók megváltoztatása

Egy akció paramétereit megváltoztathatjuk, ha a Behaviors palettán duplán kattintunk a kívánt akcióra.

Az egyes akciók használata

Call Javascript:
Javascript parancsot, vagy egy általunk megírt funkciót hívhatunk meg segítségével. A hívás az eval parancs segítségével kerül kiértékelésre.

Change Property:
Egy elem tulajdonságai változtathatók meg segítségével. Bizonyos böngészok bizonyos elemekre nem képesek alkalmazni. A megjeleno párbeszéd ablakban eloször válasszuk ki a megváltoztatni kívánt objektum típusát, majd magát az objektumot. Ezután válasszuk ki a legördülo menübol, vagy adjuk meg manuálisan a megváltoztatni kívánt tulajdonságot. A New Value pontban adjuk meg a tulajdonság új értékét.

Check Browser:
Használatával megállapíthatjuk, hogy a felhasználó milyen böngészovel tekinti meg oldalunkat, és az eredménytol függoen automatikusan egy másik oldalt tölthetünk be számára. A Netscape? melletti szövegmezoben beállíthatjuk, hogy a Netscape Navigator megadott verziója, ill. késobbi esetén maradjunk ezen a lapon (Stay on this Page), ugorjunk egy URL-re (Go to Url), vagy ugorjunk egy alternatív URL-re (Go to Alternate URL). Az alatta lévo sorban megadhatjuk, mi történjen abban az esetben, ha a Netscape a megadott verziószámnál kisebb. Ugyanezen beállításokat elvégezhetjük Internet Explorerre, illetve egyéb böngészokre (bár ezeknél a verziószám érzékelés kimarad). Az URL, ill. Alt URL pontokban határozzuk meg a fenti beállításokhoz használt hivatkozásokat.

Check Plugin:
Átirányíthatjuk a böngészot egy másik oldalra, attól függoen, hogy bizonyos Plugin (ill. Flash és Shockwave esetén Active-X vezérloelem) telepítve van-e a kliens gépen. A Plugin pontban kiválaszthatjuk (Select), vagy manuálisan megadhatjuk (Enter) az ellenorizni kívánt Plugin-t.
Az If Found, Go to URL pontban adjuk meg annak az oldalnak a címét, amelyet akkor akarunk megjeleníteni, ha a kliens gép rendelkezik a keresett Plugin-nel. (Ennek a pontnak a meghatározása nem kötelezo.) Amennyiben nem találtunk megfelelo Plugint, az ez alatt megadott oldalt fogja a böngészo megjeleníteni.
Az alsó jelölonégyzetet bekapcsolva - amennyiben az ellenorzés valamilyen oknál fogva nem lehetséges,- mindig arra a hivatkozásra fog a böngészo ugrani, amit arra az esetre adtunk meg, hogy a keresett Plugin megvan.

Control Shockwave or Flash:
Használatához kell, hogy legyen az oldalon egy beillesztett, névvel rendelkezo Shockwave, vagy Flash mozi. A Movie pontban kiválaszthatjuk, hogy melyik mozival akarunk dolgozni.
Az Action részen határozzuk meg, hogy az adott mozival mi történjen:
Play: Lejátszás folytatása
Stop: Lejátszás leállítása
Rewind: Mozi visszatekerése az elso képkockához
Go to Frame: Megadott képkockához ugrás a moziban.

Drag Layer
Rétegek Drag&Drop típusú mozgatására használjuk. Legcélszerubb ezt az akciót a BODY elemmel összekapcsolni egy onLoad eseménykezelo segítségével. Ez azért fontos, mert a scriptnek még azelott le kell futnia, hogy a felhasználó megpróbálná a meghatározott réteget mozgatni.

- Basic rész: - Layer: A réteg neve, amihez megadjuk a mozgatásával kapcsolatos paramétereket.
- Movement: A mozgás típusa - Unconstrained: Szabad
- Constrained: Behatárolt. Ebben az esetben a megjeleno szövegmezokben definiálhatunk egy, a réteg kezdeti helyzetéhez viszonyított mozgási teröletet (px).

- Drop Target: Egy célpontot adhatunk meg a réteg "ledobásához". A Get Current Position gomb használatával lekérhetjük az adott réteg aktuális pozícóját.
- Snap If Within: Itt egy értéket adhatunk meg pixelben, és ha a réteg ledobás elotti távolsága ezen az értékhatáron belül van a Drop Target pontban megadott koordinátákhoz képest, akkor a réteg a Drop Targetnél megadott pontba fog igazodni.

- Advanced rész: - Drag Handle: - Entire Layer: A réteg területén belül bárhol megragadhatjuk azt.
- Area Within
Layer: A réteg "megragadása" csak területének egy meghatározott részén lesz lehetséges. Ezt a részt tudjuk megadni a megjeleno szövegmezokben (px).

- While Dragging: Mozgatás közben mi történjen: - Bring
to Front: Bejelölve mozgatás közben a réteg Z-indexe átállítódik, hogy ez legyen a legmagasabb (ez a réteg legyen legfelül).
- Then: Ebben a menüben határozzuk meg, hogy a mozgatás végeztével mi történjen a réteggel: - Leave on
Top: Maradjon legfelül.
- Restore
Z-index: Álljon vissza eredeti magasságába

- Call
Javascript: Javascript meghívása mozgatás közben (pl. akkor alkalmazzuk, ha mozgatás közben mindig ki akarjuk valahová írni a réteg éppen aktuális koordinátáit).

- When Dropped
Call Javascript: Lerakáskor Javascript hívása.
- Only if Snapped: Ezt a pontot bejelölve csak akkor lesz meghívva a fentebb megadott JS, ha a réteg a mozgatás befejeztével a Drop Target pontba került.

Go To URL:
Megadott URL betöltése a kiválasztott ablakokba, frame-ekbe. Minden egyes Frame-nek, ill. ablaknak külön megadhatjuk, hogy milyen URL-t jelenítsen meg.

Jump Menu, Jump Menu Go:
Lásd: Formanyomtatvány elemek ? Jump Menu

Open Browser Window:
Egy adott URL-t jeleníthetünk meg egy új böngészo-ablakban. A létrejövo ablaknak beállíthatjuk szinte az összes tulajdonságát.
- URL to Display: Az új ablakban megjelenítendo hivatkozás
- Window width: A létrejövo ablak szélessége
- Window height: Magassága
- Attributes: Az új ablak tulajdonságait állíthatjuk itt be, egyszeruen jelöljük be az ablak megjeleníteni kívánt részeit.
Window Name: A létrehozandó ablak neve. Ez alapján tudunk majd a késobbiekben a létrejött ablakra hivatkozni, ha valamit meg akarunk jeleníteni benne.

Ha nem adunk meg méreteket a létrehozandó ablakhoz, akkor a méretek, tulajdonságok meg fognak egyezni az eredeti ablak méreteivel és tulajdonságaival.

Play Sound:
Hangokat, zenét játszhatunk le a segítségével. Használatához a kliensnek rendelkeznie kell az adott hangformátum lejátszását biztosító pluginnel. A hangfile meghatározásához adjuk meg az elérési útvonalát (vagy Internetes címét) a párbeszéd ablakban.

Popup-message:
Egy általunk definiált szöveggel rendelkezo üzenet-ablakot jeleníthetünk meg segítségével. A megjeleno ablak csak egy OK gombbal fog rendelkezni. Tájékoztató szövegek megjelenítésére szoktuk használni ezt az akciót.
Kapcsos zárójelek között JavaScript funkciókat, tulajdonságokat, globális változókat, kifejezéseket is beillszthetünk az üzenetablakba (pl.: Az oldalon található hivatkozások száma: {document.links.length}).

Preload Images
Elore letölthetjük használatával az alaphelyzetben az oldalon meg nem jeleno képeket, így ha valamilyen dinamikus képcserét végzünk majd a dokumentumban, nem kell várnunk az új kép letöltodésére, hiszen az már benne lesz a böngészo cache-ében.
Ezt az akciót a BODY taghez érdemes illeszteni onLoad eseménykezelovel.

Set Nav Bar Image:
A Nav Bar objektum(Object paletta / Navigation Bar):
Segítségével egy navigációs menüt készíthetünk oldalunkra

- Nav Bar Elements: A navigációs menü elemei, sorrendjük.
- Element Name: Az adott elem neve, Ez a JavaScript alkalmazás miatt fontos.
- Up Image: A menü-elemhez tartozó kép (alapállapot).
- Over Image: Az a kép, ami akkor jelenik meg, ha a menüelem fölött tartózkodunk a pointerrel.
- Down Image: A menüpontra klikkelve megjelenítendo kép.
- Over While Down: Ez a kép jelenik meg, ha az adott menüelemen lenyomva tartjuk az egérgombot.
- When Clicked Go
to URL: Az elemre történt kattintás hatására megjeleníteni kívánt hivatkozás.
- In: A frame, vagy ablak, amiben a megadott hivatkozást meg akarjuk jeleníteni.
- Options: Egyéb beállítási lehetoségek: - Preload Images: A különbözo állapotokhoz tartozó képek elore letöltése (ld. Preload Images akció).
- Show Down Image
Initially: Alaphelyzetben a menüponthoz tartozó képek közül a lenyomott állapothoz hozzárendelt jelenjen meg.

- Insert: A beillesztésnél használt elrendezés: - Horizontally: Vízszintes elhelyezés
- Vertically: Függoleges elhelyezés

- Use Tables: Bekapcsolva az elemek egy táblázatba rendezve fognak beillesztésre kerülni.

Az akció:
A navigációs menü elemeinek különbözo állapotaihoz tartozó képek, ill. a megjeleníteni kívánt URL dinamikus megváltoztatására használjuk.

A hozzá tartozó Basic rész használata megegyezik a Navigation Barnál leírtakkal.

Advanced:
A legördülo menübol kiválaszthatunk egy állapotot, és ha az adott menüpont a kiválasztott állapothoz tartozó képet mutatja, megadhatjuk az Also Set pontnál, hogy a többi elem milyen állapotba kerüljön (illetve milyen képet jelenítsen meg).

A Navigation Bar-on egy ikonra klikkelve az össze többi Up helyzetbe fog kerülni alapértelmezett helyzetben. Ha ezt el akarjuk kerülni, akkor a Set NavBar Image akciót kell használnunk.

Set Text of Frame:
Egy frame-hez tartozó HTML kódot alakíthatunk át vele. Lehetoségünk van a dinamikusan létrehozandó kódba különbözo scriptek beillesztésére is.

A Get Current HTML gombot lenyomva az adott frame éppen aktuális HTML kódját tudjuk lekérni.
Ha bekapcsoljuk a Preserve Background Color mezot, az új változat meg fogja tartani az eredeti háttér, szöveg, ill. link színeit.

Set Text of Layer:
Ugyanaz, mint a Set Text of Frame, de itt egy réteg tartalmát módosíthatjuk.

Set Text of Status Bar:
Ezzel a böngészo státuszsorának szövegét változtathatjuk meg. Értelemszeruen ide képek (<img>) nem szúrhatóak be. Itt is van lehetoségünk kapcsos zárójelek között JavaScript beillesztésre (ld.: Popup-Message).

Set Text of Textfield:
Egy, az oldalon található szövegmezo tartalmát változtathatjuk meg segítségével.

Show / Hide Layers:
Rétegeket tüntethetünk el, vagy jeleníthetünk meg alkalmazásával. Minden egyes rétegnek (bármelyik frame-ben is vannak) megadhatjuk, hogy látható (Show), vagy rejtett (Hide) legyen, ill. láthatósága ne változzon (Default).

Swap Image:
Képek dinamikus cseréje hajtható végre vele a kép objektumok src (forrás) tulajdonságának megváltoztatásával. Fontos, hogy a torzulás elkerülése érdekében ugyanakkora képet adjunk meg cserének.

Az akció használata elott nevet kell adni a kívánt Image objektumoknak!

- Images: Itt választhatjuk ki, hogy melyik képen akarunk változtatni.
- Set Source to: Megadjuk az új kép helyét.
- Preload Images: Bekapcsolva elore letöltjük a csereképet is.
- Restore Images
onMouseOut: Bekapcsolva az MouseOut esemény hatására a képek visszaállnak eredeti helyzetükbe.

Swap Image Restore:
Az adott elemen az utoljára végrehajtott Swap Image akció utáni állapotot állítja vissza az azt megelozobe.

Go To Timeline Frame:
Használatával a Timeline egy általunk megadott képkockájához ugorhatunk.
- Timeline: Megadjuk, hogy melyik Timeline-nal dolgozunk.
- Go To Frame: Meghatározzuk, hogy hanyadik képkockára akarunk ugrani.
- Loop: Ez a bizonyos ugrás hányszor történjen meg egymás után.

FONTOS:
A loop mezohöz CSAK akkor rendeljünk értéket, ha a viselkedést az adott Timeline egyik képkockájához csatoltuk!

Play Timeline:
Egy megadott Timeline lejátszását kezdhetjük meg, vagy folytathatjuk vele.

Stop Timeline:
Megállíthatjuk a kiválasztott (ill **ALL TIMELINE ** esetén az összes) Timeline lejátszását (Play Timeline akció hatásaként innen fog az animáció folytatódni).

Validate Form:
Egy formanyomtatvány szöveges részeinek kitöltésének helyességét ellenorizhetjük az akció segítségével. Ezt az akciót köthetjük az adott FORMhoz egy onSubmit eseménykezelovel, vagy az egyes mezokhöz onChange, vagy onBlur eseménykezelo alkalmazásával.

- Named Fields: Az ellenorizendo mezo(k).
- Value Required: Bekapcsolva az adott mezo üres értéket nem fog elfogadni.
- Accept: Az alpontokban határozhatjuk meg, hogy milyen értéket fogad el helyesnek a FORM. - Anything: Bármit
- Number: Bármilyen számot (római számokat persze nem).
- Email address: Bármilyen olyan karaktersorozatot, amiben megtalálható a @ karakter.
- Number from to: A két megadott számérték közötti számokat.

Megjegyzések

Természetesen az alkalmazható akciók száma korlátlan, lehetoségünk van saját akciók megírására is.

HTML-Stílusok (DW3)

A HTML- stílus kifejezésen egy vagy több HTML formázó tag (pl.: <B>, <I>, <P align="center">) alkalmazását értjük egy adott szövegrészen belül.
Ugyanezzel a formázási technikával messze nem tudjuk utolérni a CSS-stílusok nyújtotta lehetoségeket, de mivel tulajdonképpen csak HTML tag-ek különbözo kombinációját alkalmazzuk a formázáshoz szinte bizonyos, hogy minden böngészoben a kívánt eredményt fogjuk elérni.

A HTML-stílusokat szöveg- ill bekezdések formázására tudjuk használni. Mondhatni, létrehozunk egy formázás-köteget, és ezt alkalmazzuk a meghatározott részen.

A CSS stílusokkal ellentétben egy stílus megváltoztatásakor a stílus alapján létrehozott szöveg, ill. az olyan szövegek, amelyekre a stílust alkalmaztuk, nem fognak "frissülni".

A HTML-Styles paletta

Kétféle HTML-stílus létezik: Sorközi (kijelölt szövegrészre érvényesül), és blokk-szintu (egész bekezdésre hat).

Az egyes stílusfajták a palettán (blokk szintu), vagy a (sorközi) képekkel vannak jelölve. Amenyiben az ábra mellett egy + jelet is találunk, ez azt jelenti, hogy a stílus "hozzá fog adódni" az elozoleg alkalmazott(ak)hoz, nem fogja felülírni azokat.

A paletta menüje:
- Edit: Ez maga a változás, ami valamilyen esemény hatására történik.
- Duplicate: Másolat létrehozása egy stílusról
- Delete: Törlés
- Apply: Alkalmazása a kijelölésre

HTML-stílusok alkalmazása

Sorközi stílus esetén jelöljük ki a szövegrészt, amire a stílust alkalmazni akarjuk; blokk-szintuek esetén vigyük a kurzort valahová a blokk területén belülre, majd a palettán válasszuk ki a kívánt stílust és kattintsunk az Apply gombra. (Amennyiben a gomb elotti jelölonégyzet ki van pipálva, ez nem szükséges, a kijelöléskor az adott stílus automatikusan alkalmazásra kerül.)

HTML-stílus létrehozása

Egy új stílus létrehozásához kattintsunk a paletta menüjére, majd válasszuk a New pontot.

- Name: A létrehozott stílus neve.
- Apply to: Itt állítjuk be, hogy a stílus sorközi (Selection), ill. blokk-szintu (Paragraph) lesz.
- When
Applying: Beállíthatjuk, hogy a stílus alkalmazásakor hozzáadódjon az eddigiekhez (Add to Existing Style), vagy írja felül a már meglévo formázási paramétereket (Clear Existing Style).
- Paragraph
attributes: Beállíthatjuk a blokk típusát (Format), és igazítását (Alignment).

CSS-stílusok

CSS stílusok segítségével szinte bármilyen objektum megjelenítését szabadon tudjuk befolyásolni. Lehetoségünk van a stílusainkat egy külso file-ban, egy úgynevezett stíluslapon eltárolni, majd ezt alkalmazni oldalainkra. Megtehetjük, hogy az egyes HTML tagek megjelenítési tulajdonságait atformáljuk (pl.: a H1 nem nagy méretu, félkövér karaktereket fog használni, hanem egy 18 pontos középre igazított, sötétkék színu, villogó feliratot).
Alkalmazásukkal olyan formázási lehetoségeink is adódnak, amelyek pusztán HTML nyelv alkalmazásával nem lennének lehetségesek (pl beállíthatjuk a szövegekben a szavak közötti távolságot cm-ben megadva).

Sajnos a CSS-stílusok használatát csak a 4.0 ill. annál nagyobb verziószámú böngészok támogatják, de ezek sem képesek minden formázási lehetoséget megjeleníteni, illetve nem mindegyik böngészo jeleníti meg oket pontosan.

A CSS a HTML-hez hasonlóan egy leíró nyelv, több verziója létezik (CSS1, CSS2). A DreamWeaver a CSS1 specifikációt használja.

A CSS-stílusokat három csoportba oszthatjuk:

- Egyedi stílusok (Custom Style)
- HTML tageket felüldefiniáló stílusok (Redefine HTML tag)
- CSS választó stílusok (CSS-Selector)
A CSS stílusok alkalmazása egy kicsit körülményesebb, mint a HTML formázás, hiszen bármely egyedi stílust bármelyik elemre ráhúzhatjuk, de bizonyos meghatározásoknál bizonyos paramétereknek az adott objektumok esetén nincs értelmük, ezért elég kiszámíthatatlan hatásokat érhetünk el helytelen használatukkal.
Pl.: Egy képre ráhúzunk egy stílust, ami az adott szöveges részt hivatott villogóvá tenni.

CSS Stílusok létrehozása

CSS stílust a CSS paletta New ikonjára klikkelve, vagy a paletta menüjének New pontját választva hozhatunk létre.

Elso lépésként válasszuk ki a létrehozandó stílus típusát:
- Custom Style: Egyedi stílus. Ha ezt a pontot válasszuk, a szövegmezoben adjunk egy nevet stílusunknak.
- Redefine HTML: HTML taget felülíró stílus. A legördülo menübol válasszuk ki, hogy melyik HTML tag felülírását akarjuk elvégezni.
- CSS-Selector: Itt egy stílust határozhatunk meg, amit abban az esetben fogunk használni, ha a HTML tagek bizonyos sorrendben követik egymást. A szövegmezobe írjuk be szóközzel elválasztva az egymást követo tag-eket. Pl.: td h1.

Ha kiválasztottuk a megfelelo stílust, és meghatároztuk a szükséges paramétereket, kattintsunk az OK gombra.

Type ? Karakterek formázása

- Font: Karakterkészlet típusa (lista).
- Size: Az alkalmazott karakterek mérete (px, pt, cm, mm, pica, stb.)
- Style: Beállíthatjuk, hogy sima, vagy dolt betus karaktereket akarunk alkalmazni
- Weight: A karakterek "kövérsége" (400: Normal, 700: Félkövér)
- Variant: Beállíthatjuk, hogy a karakterkészlet mely változatát akarjuk használni.
- Line Height: Megadhatjuk a sormagasságot. Ezt a beállítást jelenleg semelyik böngészo sem támogatja
- Case: Betuméretek beállítása: - Capitalize: A szövegben minden szó elso karakterét nagybetuvé alakítja
- Uppercase: A szöveget csupa nagybetuvé alakítja
- Lowercase: Csupa kisbetu
- None: Betuméretekkel kapcsolatos beállítások elvetése

- Decoration: A szöveg "díszítése": - Underline: Aláhúzás
- Overline: Föléhúzás
- Line-Through: Áthúzás
- Blink: Villiogás
- None: Dekorácók eltávolítása

- Color: A szöveg színe

Backgrount ? Hátterek formázása

- Background Color: Háttérszín
- Background Image: Háttérkép
- Repeat: Háttérkép ismétlésével kapcsolatos beállítások - No-repeat: Nincs ismétlés
- Repeat: Ismétlodés mindkét irányban
- Repeat-X: A háttérkép csak vízszíntesen ismétlodik.
- Repeat-Y: A háttérkép csak függolegesen ismétlodik.

- Attachment: A háttérkép rögzítésével kapcsolatos beállítások
- Fixed: A háttérkép fix, nem scrollozódik a dokumentummal (mint bgproperties="fixed")
- Scroll: Az oldallal együtt mozog.
- Horizontal Position: Háttérkép vízszintes igazítása - Left: Balra
- Center: Középre
- Right: Jobbra
- (Value): Az adott objektum (oldal, táblázat, cella, réteg, stb.) bal szélétol a megadott távolságra.

- Vertical Position: Függoleges igazítás - Top: Felülre
- Center: Középre
- Bottom: Alulra
- (Value): A felso széltol a megadott távolságra

A Horizontal- ill. Vertical Position pontoknál megadott beállításoknak csak akkor van értelmük, ha a háttér rögzítéséhez (Attachment) a fix pontot választottuk.

Block ? Blokk szintu formázások

- Word Spacing: Szavak közötti távolság
- Letter Spacing: Betuk közötti távolság
- Vertical Alignment: A blokk függoleges igazítása, leggyakrabban a szülo objektumhoz képest. Ld.:Képek, Alignment tulajdonság.
- Text-Align: Szöveg igazítása a blokkon belül: - Left: Balra zár
- Right: Jobbra zár
- Center: Középre igazított
- Justify Sorkizárt. (Ha ezt használjuk, felülbírálhatja a Letter, ill. Word Spacingnél megadott értékeket.)

- Text-Indent: A blokk elején lévo szöveg behúzásának mértéke.
- Whitespace: Szóköz, tabulátor karakterek kezelésének módja: - Normal: Mint HTML-ben
- Pre: Mint HTML eloreformázott blokk esetén
- Nowrap: Automatikus sortördelés kikapcsolása.

Box ? Elemek befoglalója

- Width: Befoglaló szélessége
- Height: Befoglaló magassága
- Float: Befoglaló szöveggel való körbefuttatásának módja - Left: ld. képek, alignment
- Right: ld. képek, alignment
- None: nincs körbefuttatás

- Clear: Itt meghatározhatjuk, hogyha az adott befoglalónkat valamelyik oldalról egy másik elem, vagy szöveg eloz meg (vagy követ), akkor ezeket az új objektumokat új sorba rendezzük.
- Padding: A befoglaló bélelése. A befoglaló szélei és tartalmának szélei közötti távolság a megadott mértékegységben (ld.: Táblázatok, Cellpaddind)
- Margin: A befoglaló széle, és a befoglalót körülvevo objektumok közötti távolság a különbözo irányokban.

Border ? Keretezés

- Width: Keret szélessége az egyes oldalakon
- Color: Keret színe az egyes oldalokon
- Style: Keret stílusa: - Solid: Tömör
- Double: Dupla
- Dotted: Pontozott
- Dashed: Szaggatott
- Outset: Kiemelkedo
- Inset: Süllyesztett

List ? Listák formázásai

- Type: Lista típusa (Az egyes típusokról bovebben ld. Listák)
- Bullet Image: Rendezetlen lista esetén egy képet rendelhetünk a lista pontjait jelképezo ikon helyére
- Position: A lista pozícionálása, azaz az új sorba kerülo szöveg bal széle mihez legyen igazítva - Inside: Igazítás a listaelem-jelhez.
- Outside: Igazítás az éppen aktuális behúzáshoz

Positioning ? Elhelyezés az objektumok rétegre másolásával

- Type: Az elhelyezés módszere: - Absolute: A létrejövo réteg koordinátáit az oldal bal felso sarkához viszonyítjuk
- Relative: A megadott koordinátákat az objektum aktuális pozíciójához képest értelmezzük
- Static: A megadott koordinátákat nem vesszük figyelembe, az új réteg mindig pontosan ott jön létre, ahol az eredeti objektum elhelyezkedik

- Visibility: A létrejövo réteg láthatóságát állíthatjuk be ebben a pontban
- Overflow: ld. Rétegek tulajdonságai, Overflow tulajdonság
- Placement: Itt adhatjuk meg a koordinátákat, amelyeket a fentebb beállított viszonyítási alaptól függoen a réteg elhelyezésére fogunk használni, és a léterjövo réteg szélességét, magasságát is ebben a pontban állítjuk be.
- Clip: Levágandó területek meghatározása (ld. Rétegek tulajdonságai, Clip)

A létrehozott réteg típusát az Edit/Preferences Layers pontjánál megadott TAG beállítás határozza meg.

Extensions ? Egyéb effektek

- PageBreak: Az oldal nyomtatásakor oldaltörés alkalmazása (Jelenleg nem támogatott) - Before: az objektum elott
- After: az objektum után

- Cursor: Beállíthatjuk, hogy az objektum fölé állva milyen egérmutató jelenjen meg (csak IE4+) - Hand: Kéz
- Crosshair: Célkereszt
- Text: Szöveg
- Wait: Homokóra
- XYResize: Különbözo irányú átméretezo

- Filter: Speciális effektek alkalmazása (IE4+) - Invert: Színek invertálása
- FlipH, FlipV: Vízszintes, függoleges tükrözés
- Stb. Szöveg

CSS stílusok alkalmazása

Jelöljük ki azt a rész, ill. objektumot, amire a stílust alkalmazni akarjuk, majd a CSS palettán válasszuk ki az alkalmazni kívánt stílust, és klikkeljünk az Apply gombra.

Külso stíluslapok létrehozása

Hozzuk létre az oldalon az összes CSS stílust, majd válasszuk a File / Export / Export CSS Styles pontot.

Külso stíluslapok alkalmazása

Kattintsunk a CSS paletta Edit ikonjára, majd a menübol a Link gombra.
File / Url: Itt adjuk meg a stíluslap helyét, vagy Internet-címét
Add as: Meghatározzuk a csatolás módját - Link: Csatolás
- Import: Behozatal

Az Import beilleszti a stíluslap tartalmát az aktuális dokumentumba, a Link eléri és továbbítja az információkat. A Link opcióval való csatolás sokkal elterjedtebb, támogatottabb, több lehetoséget biztosít.

CSS stílus ütközések

Ha két stílust használunk egy adott rész formázására, és azok:

Nem ütköznek, akkor mindkét stílus érvényesülni fog.
Ütköznek (két CSS stílus), akkor az adott részhez a HTML kódban közelebb található stílus fog érvényesülni.
Ütköznek (HTML és CSS), akkor a CSS stílus érvényesül.

levélküldés próba2

fel