< WebKészítés /> interaktív webszerkesztő tananyagok

Oldalfelépítés kialakítása

Az eddigiek során többször is említésre került, hogy a régen sűrűnhasznált táblázatos megjelenítési módot az oldalfelépítéshez nem szabad használni. Miért használták mégis? 1996 előtt még nem volt más lehetőség. A stíluslapok ebben az évben jelentek meg, és további 3 év kellett hozzá, hogy elterjedjen annyira, hogy mindenki biztonságosan használhassa. Most azonban kezünkben a modernebb eszköz. Lássuk 6 érvet, miért is térjünk át!

1. A táblázat nem szemantikus, adatok tárolására találták ki!
2. A kód mérete nagyobb lesz, mintha CSS-sel oldanánk meg a felépítést.
3. A stíluslap újrafelhasználható! A böngésző egy letöltés után gyorsító tárazza a stíluslapot, amit később az összes oldalra alkalmazhat. Táblázatokat esetén minden oldalon újra kell építeni a kinézetet, ezzel növelve a betöltési időt!
4. Az egymásba ágyazott táblázatok egy idő után nagyon bonyolulttá, nehezen olvashatóvá és karbantarthatatlanná válhatnak.
5. A táblázatos oldalfelépítés korlátokat emel az akadálymentesítés elé. A képernyő felolvasónak celláról cellára kell ugrálnia, amíg igazi tartalomhoz jut.
6. A táblázat nélküli oldal jobb keresőeredményeket produkálhat.

A megoldás: használjunk <div></div> címkéket, ezeket akár egymásba is ágyazhatjuk, és stíluslappal pozícionáljuk őket.

Egyoszlopos elrendezés

A cél általában, hogy egy középre igazított oszlopot készítsünk. Először is vegyük figyelembe, hogy a body elemnek is van margója, belső margója, és keretet is lehet neki adni. Először is egy div elemet hoztunk létre egy egyedi azonosítóval (#wrap). Az elem középre igazításához három dolog szükséges: Először adjunk meg neki egy szélességet! Fix elrendezés esetén ajánlott a 750 (980) pixel. Azért pont ennyi, mert ekkor 800×600 (1024×768)-as felbontásban sem jelenik meg vízszintes görgetősáv. A vízszintes görgetősávot jobb elkerülni! Hasonlóan jó megoldás lehet, ha a képernyőméret százalékos arányát használjuk. (Teljes képernyős elrendezés.) Állítsuk a bal és a jobb oldali margót egyaránt auto értékre! Szabvány szerint a szélességgel együtt ennek azt kell eredményeznie, hogy az elem középre igazítva jelenjen meg. A biztonság kedvéért pedig alkalmazzuk a body elemre a text-align: center meghatározást a régebbi böngészők miatt. Később a div elemben balra visszaigazíthatjuk a szöveget, különben öröklődne a tulajdonság. Ha háttérrel látjuk el, belső margót is alkalmazhatunk.

Többoszlopos felépítés

Ha az előző elrendezést több oszloppal bővítenénk, illetve fejlécet és láblécet is használnánk, tegyük a következőket: Készítsünk további div elemeket a #wrap-en belül. A középre igazítás már az előbb megtörtént. Az elsőt kinevezzük fejlécnek. A következő div elemre beállítjuk a float: left meghatározást, így az balra fog kiúszni. A megfelelő működéshez szélességet is be kell állítani rá! Több balos oszlop esetén ugyanígy járjunk el. A jobb oldali oszlopok ettől csak annyiban különböznek, hogy float: right meghatározást kapnak. Ezeket követi a forráskódban a tartalom, minek ugyanakkora bal és jobb margót kell adni, mint amennyi az őt megelőző jobb és bal oldali oszlopok szélessége. Ha elmulasztjuk, akkor körbefolyná az előző oszlopokat. Vegyük észre, hogy neki nem feltétlen kell kapnia fix szélességet! Javíthatunk az elrendezésen, ha belső margót állítunk az oszlopokra. Ekkor viszont a tartalom számára készített elem bal és jobb margóit annyival kell megnövelni, amennyi a belső margók értéke összeadva a két-két oszlop között. Legvégül a láblécre még alkalmazni kell a clear: both meghatározást, hogy biztosan alulra kerüljön. További margók és szegélyek használata esetén ne spóroljunk, tegyünk be minden div elembe egy újabb div elemet, és ezekre alkalmazzuk a továbbiakat...

KódTesztelő a gyakorláshoz

Problémát jelenthet az oszlopok egyenlőtlen hossza, hiszen az elemeknek csak addig tart a hátterük, ameddig tartalom van bennük. Ezért hátteret inkább a szülőjük kapja, ne ők. Ha például n×250 pixel szélességű oszlopaink vannak, akkor olyan háttérképet kell készítenünk, ami 750 pixel széles, néhány pixel magas és n*250 pixelenként más színű. Ez a módszer természetesen változó szélesség eseteknél nem alkalmazható.

Listák használata menüként

A listák egy kis stílussal feldobva kiválóan alkalmasak menünek. A trükk az, hogy nem a li elemeket, hanem az a elemeket formázzuk. Beállítjuk rájuk a display: block meghatározást, és fix szélességet, így lesznek azonos szélességűnek a menüpontok. Továbbá a list-style-type: none meghatározással eltüntetjük a listaelemek elől a kis fekete karikát, a text-decoration: none meghatározással pedig az aláhúzást a linkekről. Ezután már csak a színeket és a margókat kell beállítanunk, illetve alkalmazhatjuk a :hover álosztályt a linkekre a dinamikusság érdekében. Képek használata esetén a keretet kézzel kell eltűntetnünk a következő módon: a img {border: none;}. Szükség esetén az egészet vízszintessé tehetjük, ha a li elemekre beállítjuk a display: inline-t. Ha oldalanként jelölni is szeretnénk az aktuális menüpontot, akkor minden oldalon egy class="aktualis" meghatározást vessünk be a megfelelőhöz.

KódTesztelő a gyakorláshoz

Néhány érdekesség

Készíthetünk a hivatkozások mellé különböző specifikus képeket is, hogy lehessen tudni mi áll mögötte. A trükk, hogy az a elem hátterére egy képet helyezünk ismétlés nélkül, majd belső margót állítunk hozzá, és a hátteret eltoljuk ez alá. Használhatók a korábban említett attribútum kijelölők is a különböző fájltípusokhoz, mint: a[href$=".pdf"].

Ugyancsak hasonló hatás váltható ki a content: url("URL-CÍM")-mel, mely egy médiára mutat (előbbi esetben kép), de egyszerű szöveg is lehet, vagy konkrét elemre vonatkoztatva az attr([pelda]) akár az elem pelda attribútumának értékét is képes kiírni. A normal esetén pedig nem generálódik tartalom.

Ugrás az oldal tetejére!

Ugrás a következő oldalra!

0 hozzászólás