Weboldalkészítő suli #22 - Képgaléria nyitóoldalak

A képgalériák legfontosabb részei az indexoldalak, amelyeken a képek kicsinyített változatait tekinthetik meg a felhasználók, ahol kiválaszthatják, hogy mely képeket szeretnék nagyban is megtekinteni. Már csak azért is fontos az indexoldal kinézete, mert a látogatók ezzel találkoznak először, ez alapján alakul ki bennük az első vélemény a képgalériáról.

Az indexkép ezúttal szó szerint a képek listája

A képek listája

Ahogyan azt sorozatunk korábbi részeiben már többször bebizonyítottuk, az esetek többségében akkor járunk a legjobban, ha a weboldalak tartalmi részét, vagyis a HTML-kódot a lehető legegyszerűbben építjük fel. E tanácsot megfogadva most is a lehető legegyszerűbb megoldást fogjuk választani, és szó szerint vesszük, hogy egy képgaléria indexoldala nem más, mint egy képes lista.

Ezért létrehozunk egy egyszerű felsorolást, vagy más néven rendezetlen listát, ahogyan azt például a menünél is tettük korábban, azzal az apró eltéréssel, hogy most nem egyedi azonosítóval, hanem feltételezve azt a ritka alkalmat, hogy egy oldalon akár több galéria is előfordulhat, osztálynévvel látjuk el (‹ul class="photos"›). Ennek a listának a listaelemeibe egy-egy hivatkozást helyezzünk el, amelyek egy-egy képre mutatnak, a hivatkozásokon belülre pedig a képek kicsinyített változatát, indexképét, ikonját illesszük: ‹li›‹a href="http://pcworld.hu/url?photos/img01.jpg"›‹img src="photos/tn_img01.jpg" alt="" /›‹/a›‹/li›

Amint listánkat lezárjuk egy ‹/ul›-lel, tulajdonképpen készen is vagyunk első galériánk indexoldalának HTML-részével.

Kijjebb tolt keret

Eltérően a korábbiaktól, ezúttal ne nullázzuk ki az összes elem margóját, eltartását és keretét, már csak azért sem, mert ahol számítanak, amúgy is be fogjuk állítani ezeket az egyes elemeknél.

Első galériánk formázását nem visszük túlzásba

Már-már reflexszerűnek mondhatjuk, hogy először is beállítjuk az oldalon megjelenő szövegek alapértelmezett betűtípusát, -stílusát és -méretét a body szekción keresztül (1–5. sorok), bár ezek egy részére most nem is lesz szükségünk, így a címsorunknál csak az ezektől való eltéréseket (nagyobb és félkövér betű), valamint a szöveg középre igazítását kell megadnunk (7-11. sorok).

A képek listájának, vagyis az ‹ul›-nek 780 pixelnyi szélességet állítsunk be, és a jól bevált margin: 0 auto; beállítással igazítsuk középre. Ezenkívül még természetesen el kell tüntetnünk a listaelemek elől a felsorolásjelet (list-style-type: none;), és ha valaki úgy gondolja – mi ezúttal úgy gondoltuk –, akkor még egy kicsit csinosíthatjuk is magát a listát egy háttérszínnel és/vagy egy vékony kerettel. De ha akár háttérszínt, akár keretet adunk a listának, mindenképpen hozzá kell adnunk az overflow stílustulajdonságot auto értékkel is, különben a listaelemek „floatolása” után magának a listának a magassága nulla pixel lenne, és csak egy vékony csíkként jelenne meg a címsor alatt (13–21. sorok). Az előzőekből az is könnyen kikövetkeztethető, hogy magukat a listaelemeket, amelyek ugyebár blokkszintű elemek, kivesszük a normál folyamból egy float stílustulajdonsággal, méghozzá balra „igazítva” (float: left;). Ahogyan azt említettük, emiatt van szükség egy szinttel feljebb a túlcsordulás – ami ez esetben inkább „alulcsordulás” – automatikus kezelésére.

Amikor a keret szó szerint háttere a képnek

Ha most megnézzük oldalunkat, akkor azt láthatjuk, hogy a kis képek szépen sorban, balról jobbra haladva követik egymást, azonban csúnyán egymáshoz tapadnak, és nem igazán néznek jól ki az alapértelmezett kétpixeles kék és lila keretek sem. Éppen ezért a hivatkozásokon belüli képeknek először is adjunk körben egy kis margót (margin: 3px;), majd a keretet egy picit tartsuk el (padding: 2px;) magától a képtől, majd az eltartás területét színezzük fehérre (background: #fff;), az eredetileg kék keretet pedig feketére (border: 2px solid #000;).

A mintaoldal frissítését követően jól látható, hogy képünknek két kerete lett. Egy belső, aminek vastagságát a padding, színét pedig a background tulajdonság határozza meg, hiszen ezt a színt az ‹img› objektum „dobozában” a – nem átlátszó hátterű – képek esetében csak az előbbivel megadott területen lehet látni; és egy külső, amelynek mind a vastagságát, mind a színét a border paramétereivel tudjuk beállítani.

Egyszerű fekete keretek, amelyek elpirulnak, ha az egér a kép fölé ér

Legvégül még annyival fűszerezzük meg első képlistánkat, hogy annak a képnek, amely fölött az egérkurzor mozog, a keretét színezzük pirosra. Elviekben használhatnánk a képre is a :hover pszeudo-osztályt, azonban ezt jellemzően inkább a hivatkozásoknál szoktuk megadni, és mivel a kép amúgy is egy hivatkozáson belül található, így semmi akadálya annak, hogy az img:hover helyett inkább a:hover img stílusjelölőt használjuk. Ráadásul nem szükséges a keret minden tulajdonságát újra megadnunk, elegendő csak az új színt (border-color: red;).