Manapság, amikor szinte ahány látogató, annyi képernyőfelbontás, akkor igen nehéz megtalálni az optimális elrendezést, ami mindenkinek megfelel.

Időnként előfordul, hogy oldalunkhoz JavaScript segítségével különféle elemeket adunk hozzá. Az új tartalomdarabkákat ez alkalommal stíluselemek használatával hozzuk létre.

Legutóbb elkészítettük oldalaink „nyomtatható változatát”. Most egy kis javascriptes segítséggel hivatkozásainkból lábjegyzeteket hozunk létre.

A weboldalak készítésekor a képernyőt tekintjük elsődleges megjelenítő felületnek. Ugyanakkor a felhasználók rendszeres kívánsága, hogy egyes oldalaknak legyen nyomtatható változata is.

Ezúttal - felhasználva az elmúlt leckékben tanultakat - mintaoldalunkat fogjuk JavaScript-mentessé, és természetesen kicsit látványosabbá tenni.

A 23. leckében lépésről lépésre felépítettünk egy képgalériát, ebben a fotók akkor jelentek meg, amikor az indexkép fölé vittük az egeret. Most ezt tesszük még látványosabbá CSS3-as animációkkal.

A korábbi leckékben megkezdett irányvonalat folytatva a weboldalkészítő suli aktuális leckéjében is elsősorban a HTML5-CSS3 párosra fogunk koncentrálni - ám egy viszonylag csendes bejelentésre való tekintettel, egy kissé rendhagyó módon.

Legutóbbi leckénkben elkezdtünk ismerkedni a CSS3 újdonságaival, és - a tanultakat alkalmazva - nekikezdtünk átalakítani az idei konferencia oldalait. Ez alkalommal folytatjuk a megkezdett munkát, ám előtte alaposabban bemutatunk egy olyan stílustulajdonságot, amely valószínűleg hamarosan nagy népszerűségnek fog örvendeni.

Legutóbb néhány szép példát megtekintve megkezdtük az ismerkedést a böngészők által egyelőre eltérő mértékben - és sajnos eltérő módon - támogatott CSS3 újdonságaival. Ez alkalommal nekikezdünk „CSS3-asítani” konferenciánk honlapját, megnézzük, hogyan tehetnénk a munkánkat (még) egyszerűbbé a készülő szabvány lehetőségeinek kihasználásával.

Kissé rendhagyó leckénk első felében hivatalosan is búcsút veszünk a Microsoft népszerű, ám teljesen elavult böngészőjétől, az Internet Explorer 6-tól, majd elkezdünk ismerkedni az egyelőre „béta-állapotban” lévő CSS3 újdonságaival.

Korábban több látványos és interaktív fotógalériát készítettünk kizárólag a CSS stíluslapokra támaszkodva. Most némi JavaScript-támogatással összeállítunk egy igazán „sokoldalú” képtárat. Ám ahhoz, hogy JavaScript programunknak minél kevesebbet kelljen dolgoznia, megfelelően elő kell készítenünk a talajt.

Olyan galériákat készítettünk az előző leckében, amelyekben a fotók akkor jelentek meg, amikor az egeret az indexképek fölé mozgattuk. E galériák egyedüli hátránya, hogy amint az egérkurzor elhagyta a galéria területét, a fotó eltűnt a keretből. Ezúttal két olyan képgyűjteményt rakunk össze, amelyekben a fotók az indexképre történő kattintáskor jelennek meg, de ami fontosabb, hogy a következő kattintásig a helyükön is maradnak - és még mindig mellőzzük a JavaScript nyújtotta lehetőségeket.

Az első magunk készítette weboldal éppolyan emlékezetes lehet, mint mondjuk az első szerelem. A folyamat, amelynek során összetákoltuk, feltöltöttük, behívtuk, és egyszer csak megjelent a böngészőben... valami tagadhatatlanul katartikus élmény. (Igen, a miénk is rettenetesen nézett ki.)

Legutóbbi leckénkben megnéztük, hogyan lehet egy képgaléria indexoldalát néhány egyszerű trükkel feldobni, az átlagosnál érdekesebbé tenni. Ez alkalommal készülő galériánkba némi életet viszünk azzal, hogy amint az egér az indexképek fölé ér, megjelenítjük a kép nagy(obb) változatát - anélkül, hogy egyetlen sornyi JavaScript-kódot írnánk.

Míg türelmesen várakozunk, hogy a kicsinosított, a bevitt adatokat még az elküldés előtt ellenőrző űrlapunk kitöltésével az érdeklődők regisztráljanak a konferenciára, nekikezdünk saját „képgaléria-motorunk” fejlesztésének, amivel előbb a konferenciának otthont adó város néhány nevezetességét, a későbbiek során pedig a konferencián készült fotókat mutatjuk majd be.

Az elmúlt három lecke folyamán felépítettük, csinosítottuk, áttekinthetőbbé és kényelmesebbé tettük űrlapunkat. Ám hiába jelöltük meg azokat a kérdéseket, amelyekre feltétlenül választ várnánk, hiába adjuk meg, hogy milyen formában kérjük az adatokat, ha ezeket a kéréseket a felhasználók figyelmen kívül hagyják. Éppen ezért itt az ideje, hogy ellenőrizzük az adatokat - még az űrlap elküldése előtt.

Az űrlapok formázásakor viszonylag könnyedén megváltoztathatjuk a szövegbeviteli mezők és a gombok kinézetét, ám ha szeretnénk a böngészők gyári rádiógombjai és jelölőmezői helyett valami látványosabbat, akkor azokért bizony meg kell dolgoznunk.

Ez alkalommal megnézünk néhány ötletet arra, hogyan lehet mindezeket minél egyszerűbben formába hozni, valamint elkezdjük kicsit felhasználóbarátabbá tenni regisztrációs űrlapunkat.

Jelen leckénkben a honlapkészítés egyik, ha nem a „legzűrösebb” területére evezünk: elkezdjük összerakni konferenciánk regisztrációs űrlapját. Ez alkalommal elsősorban az űrlapok tartalmi részével, vagyis a HTML-kóddal fogunk foglalkozni, a formázás (CSS), a helyben történő ellenőrzés és az egyéb kényelmi szolgáltatások (JavaScript) a következő leckékre maradnak.

Aktuális leckénkben két klasszikus dizájnproblémát fogunk egy kicsit alaposabban körüljárni. Először megnézzük, hogyan dobhatjuk fel például főoldalunk híreit egy kicsit lekerekített sarkú (vagy még díszesebb) dobozokkal, majd ezt követően több technikát is kipróbálunk arra, hogy címsorainkat képekkel helyettesítsük, hogy legalább ezek szebb betűtípusokkal jelenhessenek meg oldalainkon.