Jelenlegi leckénkben már majdnem be is fejezzük az előzőleg elkezdett weboldalunk építését. A végére nagyon-nagyon közel leszünk a kész állapothoz és szívünkbe ettől bizonyára öröm költözik majd. Most azonban – kissé rendhagyó módon – sírni fogunk, mégpedig közösen. Először ugyanis keressük meg a Sírjunk együtt – Az Internet Explorer 7 és a PNG című írást (cikkünk Kiegészítők c., utolsó oldalán), majd annak tanulmányozása után térjünk vissza ide!
Fejléc
Folytassuk akkor oldalunk építését a fejléccel; nemcsak azért, mert ez van legfelül, hanem azért is, mert ez az oldal második legegyszerűbb része – mindössze két sor szöveg –, mégis tartogat némi meglepetést számunkra. Ha nem emlékeznénk a kódra, íme:
Weboldalunk fejlécének HTML-kódja...
Nagyon egyszerű: egy fejlec azonosítójú ‹div›, amelyben egy ‹h1› és egy ‹h2› címsort használunk az oldal – egyben képzeletbeli konferenciánk – címének, valamint az utóbbi helyszínének megjelenítésére. Hogy azért mégsem legyen ennyire egyszerű, egy icipicit trükközni fogunk a színekkel, ezért a ‹h1›-en belül logo1 és logo2 osztályba soroltuk a Lorem és az Ipsum szavakat a ‹span› tag segítségével. Ismétlésképpen: a ‹span› egy speciális tag, amellyel megjelölhetjük a HTML dokumentumunk bizonyos részeit – ahogy tettük ezt most az osztálydefiníciókkal. A CSS-ben ezekre a jelölésekre külön szabályokat definiálhatunk, így a megjelölt részek eltérő módon fognak megjelenni.
...és a hozzátartozó stílusdefiníciók
Nézzük akkor az erre vonatkozó CSS-stílusdefinícióinkat. Kezdjük magával a fejlec ‹div›-vel – remélhetőleg semmi olyat nem tartalmaz, amit már ne ismernénk. Először beállítjuk a fejléc szélességét (width) és magasságát (height) – ugye emlékszünk, hogy a szélesség esetében a 100% érték nem a teljes böngészőablakot, hanem a ‹div› számára éppen rendelkezésre álló helyet jelenti? Azt, hogy mennyi helye van, az őt befoglaló oldalelem, nevezetesen az oldal azonosítójú ‹div› szabja meg, amit a „múlt órán” 950 pixel szélesre definiáltunk, tehát a „100%” ebben az esetben 950 képpontot fog jelenteni. Nagyszerű, de akkor miért nem ezt írjuk a szélességhez? Azért, mert ha félóra múlva véletlenül meggondolnánk magunkat, és az oldal szélességét mégsem 950, hanem mondjuk 813 képpont szélesre akarnánk venni, akkor elég volna egy helyen, az oldal azonosító stílusdefiníciójában átírnunk a CSS fájlt. Ha viszont mindenhova „beégetnénk” a 950-et, akkor az összes helyen javítani kéne.
A következő lépésben beállítjuk a háttérszínt (#08324d) és a betűszínt (#fff – ugye erről fejből tudjuk már, hogy fehér?), majd a fejlécben használni kívánt betűtípust, amit direkt eltérőre vettük a ‹body› stílusában korábban definiálttól (az Verdana, Geneva, sans-serif volt, a fejléc pedig Arial, Helvetica, sans-serif lesz). Ezután megadjuk a fejlécben szereplő szövegek sortávolságát: legyen 1. A line-height-ről már megtanultuk, hogy arányszám (vagy szorzó, ha úgy jobban tetszik) és az adott szöveges oldalelem betűméretéhez képest állítja be az elem sorainak magasságát. Az „1” azt jelenti, hogy a címsorok magassága pontosan a betűmérettel lesz egyenlő, amivel tulajdonképpen közelebb húzzuk majd a két címsort egymáshoz. Végül igazítsuk középre a fejléc tartalmát (text-align).
A ‹body› háttérképének tetején, a fejléc háttérszínét használjuk, csak ezután indul a színátmenet
Egy pillanatra hagyjuk figyelmen kívül a CSS hátralevő részét – alakítsuk megjegyzéssé a /* és a */ karakterekkel –, és nézzük meg a változást. Máris lelepleztünk egy újabb kis vizuális trükköt: azzal, hogy sötétkék háttérszínt állítottunk be, a fejlécet kvázi kiemeltük az oldal (a fehér rész) fölé. Nade mi a helyzet az előző órán a ‹body› taghez tartozó definícióban beállított háttérképpel? Emlékeink szerint az színátmenetet tartalmaz; nem lesz ronda, hogy a fejléc meg egyszínű? Nem, mert a body háttérképét trükkösen úgy csináltuk meg, hogy figyelembe vettük a fejléc 90 képpontos magasságát. Ezért a háttérkép függőleges első 90 képpontja egyszínű: pont az a kék, amit a fejlécnek is beállítottunk (#08324d), és csak a 91. képpont után kezdődik a színátmenet.
Végezzük ki gyorsan a címsorokat is, mert így elég csúnyán néznek ki. A ‹h1› címsorra a következőképpen hivatkozunk:div#fejlec h1 , ami azt jelenti, hogy a fejlec azonosítójú ‹div›-en belüli ‹h1› címsor. Ennek akkor volna jelentősége, ha az oldalunkban máshol is előfordulna első szintű címsor. Egy pillanatra tegyük fel, hogy előfordul, és a másodikat a fejléctől eltérően szeretnénk megjeleníteni. Ha a CSS-ben csak simán h1-ként hivatkoznánk a címsorra, az az oldalon belüli összes előfordulásra hatással volna, tehát minden helyen ugyanúgy néznének ki, és további trükköket kéne bevetnünk – azonosítóval vagy osztálybesorolással ellátva őket –, hogy különbséget tehessünk közöttük. Ha viszont a fenti módon, a CSS-hivatkozásban ügyesen megmondjuk, hogy a szabályok melyik ‹h1›-re vonatkozzanak, nem kell feleslegesen elbonyolítanunk a HTML kódot. Érdemes ezt a gondolkodásmódot elsajátítani, valamint az ilyen hivatkozásoknál a stílusdefiníciót néhány karakterrel beljebb írni, ezzel is jelezve a hierarchiát: minden így leírt elem a fejlec azonosítójú ‹div› alá tartozik.
Ami a tényleges megjelenést illeti, három képpontos belső margó (padding) veszi körbe a címsort, amelynek betűmérete (font-size) 48 pixel. Ezután jönnek az érdekességek. Vannak olyan megrögzött weboldalkészítők, akik szerint nem szabad semmilyen szöveget csupa nagybetűvel írni a HTML dokumentumban; ha arra van szükség, hogy egy szöveg mégis így jelenjen meg, akkor arról a stíluslapon kell gondoskodni, nevezetesen a text-transform definícióval. Ehhez négyféle értéket használhatunk: a none azt jelenti, hogy nem transzformáljuk a szöveget sehova, az pont úgy jelenik meg, ahogy a HTML-ben szerepel; a capitalize minden szó első betűjét állítja nagybetűsre; az uppercase az összes betűből nagybetűt csinál, míg a lowercase épp ellenkezőleg, mindegyikből kicsit. Lehet, hogy igaza van a megrögzött weboldalkészítőknek, de ettől még nyugodtan írhattuk volna a HTML-ben is nagybetűkkel a konferencia nevét.
A text-transform tulajdonság és négy lehetséges állapota (none, capitalize, uppercase, lowercase)
Ha minden igaz, a letter-spacing sem fordult még elő: ezzel az adott szövegrészen belüli karakterek vízszintes távolságát, azaz a betűközt lehet növelni vagy csökkenteni. Tekintve, hogy a 48 képpontos méretnél elég jelentős távolság van a betűk között és a mi elképzelésünkben egy kicsit tömörebb cím szerepelt, egy kicsit összébb húztuk őket. Végül beállítottuk a betűszínt fehérre. Erre valójában nem lett volna szükség, hiszen a címsor ezt a tulajdonságot megörökölte volna a fejlec ‹div› stílusától. Azonban, mint a következő sorokban látjuk, a logo1 és a logo2 osztályban semmi mást nem csinálunk, mint más-más árnyalatú tört fehér színt állítunk be, így viszont nem haszontalan egymáshoz közel tartani azokat a definíciókat, amelyek azonos tulajdonságra, nevezetesen a betűszínre vonatkoznak.
Időzzünk el egy pillanatra ezeknél az osztályoknál, mert akad itt egy kis furcsaság. Emlékezzünk csak vissza, hogy azt tanultuk az azonosítókról és osztályokról, hogy ha a tag nevével együtt hivatkozunk rájuk, akkor az előbbit kettős kereszttel, utóbbit ponttal választjuk el a tag nevétől – ahogy azt láthattuk is a div#fejlec példában. Ebben az esetben azonban a h1 és a .logo1 között van egy szóköz. Hibás CSS-t írtunk volna? Nem. A h1.logo1 és a h1 .logo1 nem ugyanazt jelenti! Az előbbi logo1 osztályú elsőszintű címsort jelöl, míg a második azt mondja, hogy az elsőszintű címsoron belül előforduló logo1 osztályú elem. Így már világos, hogy esetünkben valóban a másodikat kell használnunk, hiszen nálunk nem a teljes címsor logo1 osztályú, hanem csak a Lorem szó, amire a ‹span› taggel aggattuk rá ezt az osztálydefiníciót.
A második szintű címsorban csak egy sima betűméretet állítottunk be, minden más fontosabb tulajdonságát (például a betűszínt) örökli a ‹div›-től. Mentsük a CSS-t és gyönyörködjünk az elkészült fejlécben.
A kész fejléc a címsorok stílusdefinícióival
Középtájon
Az oldal középső, mondhatni legfontosabb része még elég tragikusan fest. Először vegyük szemügyre, hogy milyen főbb elemekből épül fel.
Mint azt az előző órákon megbeszéltük, a kozep azonosítójú ‹div› „tartja össze” a benne levő bal_panel és jobb_panel azonosítójú elemeket, amelyek közül az előbbi az oldalak közötti navigációhoz szükséges menüt, utóbbi pedig az adott oldal tényleges szöveges tartalmát hordozza majd. Az alapprobléma, amivel azonnal szembesülünk, ha ránézünk a weboldal jelenlegi állapotára, hogy a két panel jelenleg egymás alatt helyezkedik el, pedig mi azt szeretnénk, ha egymás mellett volnának.
Mielőtt ezt megoldanánk, időzzünk el a kozep stílusdefinícióján.
Weboldalunk központi részének főbb struktúraelemei és a hozzájuk tartozó stílusdefiníció (a tartalmi elemek most lényegtelenek, kihalványítottuk)
Nagy meglepetések nem érhetnek senkit: beállítunk egy 1 em méretű felső eltartást (belső margót) a ‹div› tetejétől, 2 pixel vastag fehér felső keretet, 100%-ra állítjuk a szélességet, valamint beállítjuk a háttérszínt és a betűszínt, az előbbibe megint becsempészve némi dizájnelemet. Az em-mel, mint mértékegységgel már találkoztunk, tudjuk róla, hogy az adott elemben beállított betűmérettel azonos nagyságot jelöl. Mekkora a kozep ‹div›-ben a betűméret? Mivel külön nem rendelkeztünk róla, ezért ezt a tulajdonságot örökli valamelyik „elődjétől” az oldalstruktúrában. Mivel a hierarchiában összesen ketten vannak felette, a ‹body› és az oldal azonosítójú ‹div›, nem nehéz kitalálni, hogy az előbbitől örökli a 12 képpontos betűméretet, tehát 12 képpontos felső eltartást állítottunk be – ez egyébként nagyon egyszerűen kideríthető kedvenc Firefox-kiegészítőnk, a Firebug segítségével. A 100% szélességet a fejlécnél kellőképp kiveséztük, a háttérbeállítás pedig pontosan ugyanúgy működik, mint azt a ‹body› esetében láttuk: van egy 10×72 pixeles kis képünk, amit a kozep ‹div› bal felső sarkából kiindulva vízszintesen, „faltól-falig” ismételgetünk. Maga a kép egy világoskékből fehérbe tartó színátmenetet tartalmaz. Az utolsó sorra (overflow) mindjárt visszatérünk, de addig is, nézzük meg a jelenlegi állapotot, amelyből kiderül, hogy a 2 pixeles felső keret is egyfajta designelem volt, amely a háttérkép fölött egy kis élt varázsol az oldalunknak. Alakul.
A kozep ‹div› az aktuális betűméretet a ‹body› stílusbeállításaiból örökli, így lesz az 1 em méretű felső padding 12 pixel
Panelek
Most jön a varázslat, a két panelt egymás mellé kell tennünk. Erre többféle megoldás is létezik a CSS-ben: a klasszikus „lebegtetős”, a pozicionálós és a harmadik, a legelegánsabb, egyben legkevesebb problémával járó CSS táblás. (Utóbbi nem összekeverendő a HTML táblával; azzal már az első órán egy életre leszámoltunk, hogy táblaelemekkel építsük fel a weboldalunk struktúráját. Egy későbbi leckében visszatérünk majd erre a módszerre, mert érdemes megnézni, milyen egyszerűen lehet pusztán a megfelelő stílusok definiálásával táblázatos oldalszerkezetet kialakítani, csak épp meg kell várni, amíg az Internet Explorer 8 megjelenik. Aki addig nem bírja ki, olvassa el Kevin Yank december 13-i tippjét a 24ways.org weboldalon.) Maradjunk az első változatnál, amelynek lényege, hogy kiemeljük az építőelemeinket az oldal normál folyamából, és így egymás mellé „lebegtetjük” őket. Vegyünk elő egy négyzethálós füzetet, egy vonalzót meg némi íróeszközt, pixelreszelgetés következik.
A terv a következő: a rendelkezésünkre álló vízszintes 950 pixelt felosztjuk kétfelé: 200–750 pixel arányban. A bal_panel szélessége legyen 180 képpont, rakjunk köré 6-6 képpont eltartást (ebből persze csak a bal és a jobb fontos most számunkra), valamint legyen 8 pixel távolságra jobb_paneltől: 180 + 2×6 + 8 = 200, eddig jó. A jobb_panel esetében számoljunk fordítva: tudjuk, hogy maradt számára 750 pixel, használjunk itt is körben 6 pixel eltartást, ami azt jelenti, hogy 750-12, azaz 738 képpont széles lesz maga az oldalelem. Eddig, úgy tűnik, stimmel, és kell is, hogy stimmeljen, mert ha a lebegtetésnél akár csak egyetlen képponttal elszámoljuk magunkat valahol, az egész oldal atomjaira esik szét.
Nézzük a stílusdefiníciókat! A bal_panel esetében beállítjuk a 6 pixeles eltartást (padding), a 180 pixeles méretet (width), majd a float tulajdonsággal kiemeljük az oldal normál folyamából és kilebegtetjük az oldal bal szélére. A jobb_panel, ami maradt a normál folyásban, kénytelen „kikerülni” az útjában lebegő bal_panelt, de hogy ez egészen biztosan megtörténjen, beállítunk neki egy 200 pixeles bal margót (margin-left), amibe már beleszámoltuk a két panelt elválasztó 8 képpontos rést is. Itt is beállítjuk a 6 pixeles eltartást (padding) és végül a maradék helyet hozzárendeljük mint szélességet (width). Ha valakiben felmerül, hogy minek kell ennyit számolni, miért nem állítjuk be a két panel méretének egyszerűen a 200 meg a 750 képpontot, az nem figyelt a dobozmodellnél, tessék beülni az időgépbe és visszamenni 1-2 leckét. A többiek már pontosan tudják, hogy egy elem tényleges vízszintes mérete a szélesség, a bal és jobb eltartás, valamint a bal és jobb keret méretének összege. Nézzük meg, sikerült-e mindent jól kiszámolnunk és beállítanunk.
Egymás mellett a két panel a Firebug színezésében: a sárga a margót, a kék az eltartást, a sötétkék a szélességet, magasságot jelöli
Lábléc
A menü és a hírek kipofozása már nem fér bele ebbe a leckébe, de a láblécet még gyorsan a helyére tehetjük, és akkor már majdnem készen vagyunk. A HTML-kód végtelenül egyszerű: a lablec azonosítójú ‹div›-ben egyetlen ‹p› bekezdésszövegünk üldögél, amely világgá kürtöli, hogy a konferenciát és annak weboldalát ki gondozza.
Felül a lábléc HTML-kódja, alul a rá vonatkozó stílusdefiníciók
A rá vonatkozó stílusdefiníció sem sokkal bonyolultabb: hat pixeles felső-alsó eltartást állítunk (a bal és a jobb oldali ezúttal 0 marad), kisebbre vesszük a betűméretet, átalakítjuk a szöveget csupa nagybetűsre, középre igazítjuk, és beállítjuk a háttér- és betűszínt. Végül a clear: both; tulajdonság arról rendelkezik, hogy ha eddig az oldalban bárki is lebegett volna akár jobbra, akár balra, az ezt sürgősen fejezze be. Magyarul innentől kezdve visszaállítja az oldal normál folyását, azt ezt követő elemek már újra ennek megfelelően jelennek meg a böngészőben.
Itt tartunk, a főbb struktúraelemek rendben, már csak a menüt kell rendbe rakni és egy kicsit reszelni a híreken
Kiegészítők
Sírjunk együtt – Az Internet Explorer 7 és a PNG
Az előző órát azzal fejeztük be, hogy remekül állunk, csak éppen meg ne nézzük az eredményt Internet Explorer 7-ben, ha nem akarunk sírni. Itt az ideje, hogy szembenézzünk a problémával.
Túl sok dolgot nem csináltunk még a weboldalunkkal, jóformán csak beállítottuk a háttérszínt és az oldal azonosítójú ‹div› méretét. A háttérszínnél azonban alkalmaztunk egy kis trükköt. Nézzük a CSS-definíciót:
Látható, hogy egyszerre két dolgot teszünk: beállítjuk a háttérszínt (#106399), illetve betöltjük háttérnek a bg_body.png képet, amely 10×540 képpont méretű, tehát ahhoz, hogy beterítsük vele a weboldal hátterét, a bal felső sarkából kiindulva x irányban, azaz vízszintesen ismételgetnünk kell (repeat-x top left). A kép egy színátmenetet tartalmaz, amely egy sötétebb árnyalatú kékből pontosabban abba a kék színbe érkezik, amit a háttérszínként is használunk. Ez azt a hatást eredményezi, mintha a háttérszínünk fokozatosan kivilágosodna, majd a #106399-es kék színben megy tovább. Valójában az történik, hogy először a háttérképet látjuk, ami viszont rövidebb (540 képpont), mint az oldalunk teljes hossza. Ott, ahova már a kép nem ér el, a beállított háttérszín látszik, ám mivel ez pont ugyanaz a kék, amiben a színátmenet végződik, a háttérkép „belesimul” a háttérszínbe. Firefoxban legalábbis. Internet Explorer 7-ben ellenben katasztrófának lehetünk szemtanúi.
Bizonyára sokaknak rémlik, hogy a PNG és az Internet Explorer sohasem voltak barátok. Az „átlátszó” problémát azonban kijavították az IE7-ben, ez, tehát, amit most látunk, egy új gond. A PNG tartalmaz egy színkorrekciós értéket, a gammát, amely lehetővé tenné, hogy bármilyen készüléket használunk a weboldal megjelenítéséhez, a színek mindenhol egyformák legyenek. Ez azonban csak akkor működne, ha a böngésző tudná, hogy mi az adott rendszer gammája, amiben éppen működik, és ahhoz tudná kalibrálni a kép színeit. Ez azonban az esetek többségében nincs így, ezért egyes böngészők – Firefox, Opera – fejlesztői úgy döntöttek, hogy nem foglalkoznak a színkorrekcióval, megjelenítik a színeket úgy, ahogy vannak. Mások – IE7 és a Safari – pedig oly módon, hogy ők igenis használják ezt az információt. Hurrá, éljen a káosz! Lehetne vitatkozni arról, hogy melyik csoport csinálja helyesen, de minket jobbára az érdekelne, hogy mitől lesz egyforma a háttérképünk színátmenete minden böngészőben, vagy legalább passzoljanak a színek a CSS-ben megadottakhoz.
Megoldási lehetőség #1: ne trükközzünk a színekkel. Amennyiben nem próbáljuk összepasszítani egy kép színét egy CSS-ben beállított színnel, nem lesz semmi gond, attól eltekintve, hogy az IE7 az oldalon szereplő képek összes színét sötétebben jeleníti meg, mint kéne.
Megoldási lehetőség #2: ne használjunk PNG-t. A fenti háttérképünk összesen 128 különböző színt tartalmaz, ami azt jelenti, hogy információvesztés nélkül konvertálható 256 színű GIF formátumba, amivel semmi gond nincs, minden böngésző egyformán jeleníti meg.
Megoldási lehetőség #3: használjunk továbbra is PNG-t, de ne mentsük bele a gamma információt. Igazán remek ötlet, de mi van akkor, ha kedvenc grafikai alkalmazásunkban ez nem választható lehetőség? (Állítólag a GIMP-ben az.)
Megoldási lehetőség #4: használjunk továbbra is PNG-t, és vegyük ki utólag belőle a gamma információt. Erre a célra általában két programot szoktak ajánlani: a barátságosabb a TweakPNG, amelyben egyesével megnyithatjuk a képállományokat, képek helyett azonban a PNG fizikai felépítését fogjuk látni. Annyi csak a dolgunk, hogy az egérrel rákattintunk a gAMA kezdetű sorra, megnyomjuk a ‹Delete›, majd a ‹Ctrl+S› gombokat a billentyűzeten.
150 képnél ez egy kicsit macerás lehet. Parancssor-zsonglőröknek készült a másik megoldás a Pngcrush, amely sok más lehetőség mellett lehetővé teszi a gamma eltávolítását is (-rem gAMA paraméter).
24 Ways, az adventi naptár
Akiket komolyabban érdekel a weboldalkészítés, szívesen olvasgatnak érdekes cikkeket ebben a témában és nem okoz számukra problémát, ha mindezt angolul kell megtenniük, mindenképpen látogassanak el a 24ways.org című lapra. Immáron negyedik éve, hogy a szakma nevesebb alakjai december elejétől kezdve 24 napon át az adventi naptárra nagyon hasonló módon „megajándékozzák” az érdeklődőket egy-egy érdekes cikkel. Minden nap másvalaki kap szót, és mutat be egy jópofa módszert, ötletet a webgrafika, a HTML, a CSS vagy a JavaScript világából, illetve néha előfordulnak ezekhez lazábban kapcsolódó, de legalább olyan érdekes írások is. Természetesen elérhetők az elmúlt évek anyagai is. Igazi kincsesbánya, csak legyen időnk átbogarászni!
