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.

>>Vissza a tartalomhoz
Untitled Document