Az előző alkalommal óriásit léptünk előre és már majdnem befejeztük a weboldal készítését, csak a bal oldali menü és a jobb oldalon megjelenő cikkek csinosítása maradt hátra. Az előző órán vett legfontosabb „varázslat” az úgynevezett lebegtetés (csúnya idegen szóval: floatolás) volt: a bal_panel azonosítójú ‹div›-re vonatkozó stílusok között a float: left; szabályt alkalmazva kiemeltük a ‹div›-et a dokumentum normálfolyamából, és „kilebegtettünk” a rendelkezésére álló hely bal oldalára. Amikor a böngésző meg akarja jeleníteni a jobb_panelt, észreveszi, hogy ott lebeg „az orra előtt” a bal_panel, és gondolkodóba esik: ha van mellette elég hely, megpróbálja kikerülni, ha nincs, átugorja a lebegő oldalelemet. Épp ezért pontos számításokat végeztünk, hogy előre megállapítsuk mindkét ‹div› külső-belső margójának (margin, padding) és szélességének (width) megfelelő értékeit. A tervezésnek köszönhetően végül egymás mellé került a két panel, pont, ahogy szerettük volna.
Egy kis ismétlés: a menü és tartalmi rész pontosan kiszámolt adatai teszik lehetővé, hogy lebegtetéssel egymás mellett jelenjen meg a két ‹div›
A menü
Folytassuk akkor a bal_panelben található menü átalakításával. Emlékeztetőül, az első képen látható, hogy a menüt egy felsorolással hoztuk létre (angolul: unordered list, azaz rendezetlen lista; ebből a kifejezésből származik a tag neve is: ‹ul›). Mint azt korábban megtanultuk, a felsorolás úgy épül fel, hogy az ‹ul› és a záró ‹/ul› tagek fogják közre a listát ténylegesen alkotó listaelemeket, amelyeket a ‹li› és ‹/li› tagekkel jelölünk (a ‹li› list item angol kifejezés rövidítése, ami magyarul szó szerint listaelemet jelent). Esetünkben minden listaelem tartalmaz egy-egy hivatkozást (‹a›...‹/a›) – ettől lesz belőle menüpont, így tudjuk majd arra használni, hogy navigálhassunk a különböző aloldalak között –, amelyek az egyszerűség kedvéért most nem mutatnak sehova (href=”#”).
Így építettük fel a menüt hónapokkal ezelőtt a weboldal XHTML részében
Mielőtt hozzákezdenénk a stíluslap szerkesztéséhez, vizsgáljuk meg, hogyan hivatkozhatunk a menüre a CSS fájlban. Elég egy pillantást vetni az XHTML kódra, máris kiderül, hogy az ‹ul› taget elláttuk a menu azonosítóval (id=”menu”), amely a legkézenfekvőbb hivatkozási lehetőséget kínálja. Egy pillanatra tegyük azonban fel, hogy a HTML-rész szerkesztésekor megfeledkeztünk az azonosítóról. Ebben az esetben sincs baj, hiszen a bal_panelen keresztül pontosan meg tudjuk címezni az ‹ul› taget a stíluslapon, az alábbi módon:
div#bal_panel ul
{
...
}
A fenti kifejezés azt jelenti, hogy a beállított szabály a bal_panel azonosítójú ‹div› elemen belül valamennyi rendezetlen listára vonatkozzon. (A címzési módszer nagyon hasonló ahhoz, amit a fejlécben is alkalmaztunk a különböző címsorok használatánál.) Tekintve, hogy jelenleg a bal_panel tartalma a menünkön kívül semmi másból nem áll, akár használhatnánk ezt a módszert is, ellenben érdemes ilyenkor mindig előre tervezni, és gondolni arra a lehetőségre, hogy később a panel kiegészülhet újabb tartalmi elemekkel. A vékony felépítésből következően valószínűleg ezek is felsorolások lesznek, az pedig elég rosszul venné ki magát, ha az oldal bal szélén minden menünek nézne ki. Pontosan ezért adtunk azonosítót az ‹ul› tagnek, hogy egyrészt az XHTML forrásban egyértelművé tegyük a szerepét, funkcióját, másrészt hogy megkülönböztessük a menüt a későbbi egyéb felsorolásoktól.
Bár oldalunk kiváló háttérképe miatt nem igazán látszik, de a böngészőben a menü jelenleg valóban felsorolásként jelenik meg, azaz minden sor elején ott éktelenkedik a kör alakú fekete listajel. Ezt egyszerűen eltüntethetjük a
list-style-type: none;
CSS-szabállyal. Ennek érdekessége, hogy egyaránt használhatjuk az ‹ul› vagy a ‹li› oldalelemekre vonatkozó stílusdefiníciókban. Az előbbiben akkor szokták alkalmazni, ha valamennyi listaelemből egységesen el szeretnék tüntetni a listajelet, míg az utóbbi lehetőséget kínál arra, hogy csak bizonyos listaelemeknek egyáltalán ne legyen listajele, vagy más listajele legyen, mint az összes többinek. A list-style-type ugyanis természetesen más értékeket is felvehet, mint az a hármas ábrán is látszik. (Kiváló házi feladat a www.w3schools.com CSS-tananyagból kikeresi a list-style-type lehetséges értékeit, és készíteni egy mintaoldalt, ahol mindegyik látszik.)
Példa a list-style-type stílus lehetséges értékeire nem rendezett lista (‹ul›) környezetben
Listajelek nélkül a felsorolás akár már ebben a formájában is használható volna menüként, de sokkal látványosabbá tehetjük mindössze két viszonylag egyszerű szabály hozzáadásával. A menüre vonatkozó mindhárom szabály látszik a negyedik képen, valamint láthatjuk azt is, hogy nézett ki az utóbbi kettő hozzáadása előtt és végleges formájában.
Előtte és utána: sima kis felsorolásból tetszetős menüt varázsoltunk, mindössze három egyszerű szabály beiktatásával
Azt a trükköt alkalmaztuk, hogy nem magát a listaelemet formáztuk meg, hanem a benne levő hivatkozásokat. Mint tudjuk, az ‹a› hivatkozás tag sorszintű elem, ezért a display: block; szabállyal blokk szintévű konvertáltuk. Azt is tudjuk már, hogy ez azt jelenti, hogy az ‹a› innentől a dobozmodellnek megfelelően viselkedik. Ezt kétféle módon is kihasználjuk: egyrészt nem kell beállítanunk sem szélességet, sem magasságot a menüpontoknak, lévén az ‹a› kitölti a szintén blokkszintű ‹li› tag által létrehozott teljes területet. Elég csak a háttérszínt és a betűszínt átállítani, máris sokkal inkább tűnik menünek az egész, mint egyszerű felsorolásnak. A 4 képpontos eltartással (padding) biztosítjuk, hogy a szöveg és a menüpont széle között legyen egy kis üres hely. És trükköztünk egy picit a kerettel is: látható, hogy egy világosabb színű felső és sötétebb alsó keretet állítottunk be, amitől a menüpontoknak egy árnyalatnyi kiemelkedése lesz a két dimenzióból.
A harmadik szabályban az éppen az egérmutató alatt levő aktív menüpont tulajdonságait írjuk le. Ezt az állapotot hívják idegen szóval hovernek – ahogy az látszik is a szabály a:hover címzéséből –, és azt kell róla tudni, hogy mivel minden tulajdonságot örököl a hivatkozásra vonatkozó előző szabálytól. Nem szükséges tehát újra leírnunk a 4 képpontos eltartást, blokkszinté konvertálást stb., elég csak a különbségre koncentrálnunk: megváltoztatjuk a háttér és a keret színét, mégpedig azonos színre (az eltérő színű keretek itt csak zavarnának).
Ez a végtelenül egyszerű menü számos módon továbbfejlesztő és persze sokkal látványosabbá is tehető, ha erre van igény.
Híreket mondunk
Búcsúzzunk el a bal_paneltől és koncentráljunk a weboldal fő tartalmi részére, ahol jelenleg számtalan érdekes hír olvasható a konferenciával kapcsolatban. Persze a főoldalra csak a rövid összefoglaló kerül ki, de ha valamelyik felkelti a látogató figyelmét, rákattinthat a hír címére vagy a Tovább feliratra és így eljuthat a teljes cikkhez. Ha megnézzük az XHTML állomány idevonatkozó részét, azt látjuk, hogy mindegyik hírt külön „becsomagoltuk” egy hir osztályú ‹div› blokkba. Ezen belül harmadik szintű címsorral (‹h3›) jelenítjük meg a hír címét, az összefoglaló pedig sima bekezdésszöveg (‹p›). Bármiféle formázás nélkül – pontosabban a böngészőnk alapértelmezett stíluslapjának szabályaival megjelenítve – sajnos meglehetősen lehangoló látványt nyújt, itt az ideje, hogy beavatkozzunk.
A hírek XHTML kódja: szerkezetileg azonos felépítésű blokkok, csak a tartalom változik mindegyikben
Az egyes hírblokkok CSS-beli címzése ebben az esetben teljesen egyértelmű: a hir osztályt és a benne levő további oldalelemet fogjuk formázni lehetőségeink szerint. Kezdjük rögtön magával az osztállyal: a két soros alsó margóval (margin-bottom: 2em;) kicsit széttoljuk a hírblokkokat és beállítjuk a megfelelő betűszínt. A hírek címeinek jelöléséhez a ‹h3› taget, azaz harmadszintű címsort használtunk. Az erre vonatkozó stílusdefinícióban választunk egy másik, elegánsabb betűtípust (font-family), beállítjuk a kívánt betűméretet, félkövér (magyarul vastag) betűkkel fogunk írni, és egy vékony alsó kerettel alá is húzzuk a címet. A bekezdésszöveg nagyjából jó így: a ‹body›-tól örökli a betűkészlet és a sortávolság beállításait, az osztálytól pedig az új betűszínt. Gyakorlatként érdemes megnézni az öröklődéseket a Firefox böngésző Firebug kiegészítőjében.
Hogy ne maradjunk ezúttal sem Firebug nélkül, itt épp a hír bekezdésszövegére vonatkozó öröklött szabályokat vizsgáljuk
Amin talán változtatni kéne, az a Tovább felirat, azaz a bekezdésen belüli hivatkozások hangsúlyosabbá tétele. Mivel normál betűszínként a menüpontok alap háttérszínét használjuk, a hivatkozásokat az egérkurzor alatti menüpont világosabb háttérszínével fogjuk megkülönbözteti, és biztos, ami biztos, beállítjuk a vastag betűket is. Végül, rendelkezünk a hivatkozások hover állapotáról, ami csak annyiban fog eltérni az alaphelyzettől, hogy ilyenkor aláhúzzuk a szöveget.
A hírek evolúciója: így változott meg a kinézetük, ahogy sorban beleraktuk a stíluslapba az újabb és újabb szabályokat
Epilógus
Azzal a jóleső érzéssel dőlhetünk hátra a székben, hogy készítettünk egy weboldalt a szószátyárok konferenciájáról. Először összeállítottuk a tartalmi és strukturális részeket XHTML-ben (valid XHTML 1.0 Strict), majd ehhez készítettük egy dizájnt – előbb papíron, aztán azt jól felülbíráltuk fejben –, és végül addig faragtuk a stíluslapját, amíg ez az egész élvezhető weblap lett belőle. Persze, ez csak egy egyszerű példa volt, amely remélhetőleg a sorozat követőit még több kísérletezésre, saját utakon való kalandozásra buzdítja.
Egy hosszú és remélhetőleg tapasztalatokban gazdag munka végeredménye, amely kiindulópontként szolgálhat számtalan izgalmas kísérlethez
A suli nem zárja be kapuit, de várhatóan a következő részben kissé átalakul majd: teret enged vendégprofesszoroknak is, hogy a weboldalkészítés eddig még nem érintett vagy részleteiben nem tárgyalt területeiről tartsanak egy vagy többrészes kiselőadásokat. Addig is mindenkit sok szeretettel látunk a PC World Segélyvonal fórumán (www.pcworld.hu/forum), kritikával, véleménnyel vagy akár kérdésekkel (amelyekre megpróbálunk válaszolni is).
Az elkészült stíluslap teljes kódja:
Kiegészítő: Az olvasó kérdez – Munka a színekkel
Az előző részben sokat foglalkoztunk a színekkel, például a weboldal hátterének és fejlécének kialakításakor. Érkezett egy olyan olvasói kérdés, hogy honnan tudjuk, hogy egy adott színnek mi a szokásos kettős kereszt + 6 számjegy formában megadott változata? Olvasónk nem konkrétan az #RRGGBB formula jelentésére gondolt (ahol ugye az adott szín három összetevőjét – piros, zöld, kék – adjuk meg 0 és 255 közötti, 16-os számrendszerbeli számokkal), hanem arra, hogy hogyan tudná megnézni egy grafikus programban, hogy az adott kódhoz ténylegesen milyen szín tartozik? Illetve ha változtatna rajta, akkor hogyan tudja a program által kijelzett értékeket a leggyorsabban visszaalakítani erre a formára?
Nos, amennyiben nem vagyunk fejszámoló művészek, minden azon múlik, hogy milyen grafikus programot használunk. Házi kedvencünkkel, a Corel Paint Shop Pro Photóval ez nagyon egyszerű, ugyanis a színválasztó palettán van egy HTML feliratú mező, ahova közvetlenül beírhatjuk a fenti formában a stíluslapon használt színt, amit a program rögtön meg is jelenít. Ha változtatunk rajta valamit, a HTML mezőben levő érték automatikusan újragenerálódik, így elég csak kimásolnunk onnan és egy az egyben beilleszthetjük a stíluslapba. Ha nem vagyunk ilyen szerencsések választott programunkkal, akkor a legegyszerűbb, ha nem kínozzuk magunkat a 16-os számrendszerbeli számokkal, és az #RRGGBB formula helyett az rgb(R,G,B) színmegadási lehetőséget használjuk a stíluslapon, ahol az R, a G és a B az adott szín piros, zöld és kék komponense 10-es számrendszerbeli számokkal leírva, ahogy a grafikus program is megmutatja őket.
