Lekce 16 - Stylování tabulek a galerie fotek v HTML a CSS

V minulé lekci, Tvorba podstránek a kontaktní formulář, jsme začali dokončovat jednotlivé podstránky.

Dnes v HTML/CSS tutoriálu dokončíme web kompletně.

Dovednosti

Stránku dovednosti již máme z části připravenou z prvních dílů seriálu. Opět ji upravíme tak, aby v ní byl vložený celý layout, jako jsme to udělali minule se stránkou kontakt.html.

Protože již známe CSS, trochu lépe tabulku ostylujeme. Jako první ji dáme nějaké IDčko, nabízí se dovednosti. Hlavním problémem je, že nemáme sloupce (buňky) stejně široké. Že to tak vypadá je jen náhoda, jelikož text ve všech buňkách je podobně dlouhý. Zkuste si něco připsat do jedné z buněk, rozšíří se. Každé buňce nastavme šířku na 33% a nějaký padding:

#dovednosti td {
    width: 33%;
    padding: 20px;
}

Výsledek:

Jak vidíte, obsah v buňce tabulky se ve výchozím nastavení centruje svisle. To se nám nehodí, protože bychom chtěli mít nadpisy ve stejné výšce, zarovnané shora. To nastavíme opět všem buňkám pomocí CSS vlastnosti vertical-align s hodnotou top:

vertical-align: top;

K zarovnání na střed použijeme hodnotu middle, k zarovnání dolů bottom. Tato vlastnost funguje pouze u tabulek, v ostatních elementech se bohužel takto jednoduše centrovat nedá. Opět narážíme na nechvalně proslulé centrování v CSS.

Neukazovali jsme si ještě, jak se styluje rámeček tabulky. Je to velmi podobné jako stylování rámečku ostatních elementů, avšak tabulka má rámeček dvojitý. Zkusme si opět v tom samém selektoru nastavit rámeček všech buněk na šedý, 1px tlustý:

border: 1px solid gray;

Výsledek:

Vidíme, že to není úplně to, co bychom chtěli. Rámečky slijeme pomocí vlastnosti border-collapse, nastavené na hodnotu collapse. Tu však nenastavíme buňkám, ale celé tabulce:

#dovednosti {
    border-collapse: collapse;
}

Výsledek již vypadá dle očekávání.

Poslední pihou na kráse naší tabulky jsou nevycentrované obrázky v prvním řádku. Chtěli bychom vycentrovat obsah jen tohoto jednoho řádku a zbytek řádků nechat zarovnaných doleva (dlouhý vycentrovaný text je špatně čitelný). Možností je více, tou nejjednodušší je dát řádku třídu .centrovany:

...
<table id="dovednosti">
    <tr class="centrovany">
        ...

Dokončili jsme tedy další podstránku:

Reference

Na stránce s referencemi si vytvoříme malou galerii obrázků s aplikacemi a weby, které jste vytvořili. Galerie obrázků se vám určitě hodí nejen na obrázky vašich prací, ale třeba i na fotky a podobně. Já si půjčím obrázek tohoto webu a místní ukázkové aplikace v Javě a Pascalu. Použiji tedy tyto 3 obrázky.

Galerie obrázků

Začněme tím, že si ke každému obrázku vytvoříme miniaturu. Bylo by velkou chybou zobrazovat náhledy jako velké obrázky, jelikož se dlouho stahují. Proto si ve svém oblíbeném grafickém editoru (GIMPu, PhotoShopu, ...) zmenšete své obrázky, já jsem všem nastavil výšku na 128px a k jejich názvu jsem připojil _nahled.

Vytvoříme si podstránku reference.html tak, jako všechny podstránky, tedy zkopírováním např. indexu. Do section umístíme nějaké to povídání a div, ve kterém budou jednotlivé náhledy:

<p>Níže naleznete ukázky mých dosavadních prací. Mohu vám nabídnout tvorbu podobného softwaru na zakázku.</p>

<div id="reference">
    <a href="obrazky/kalkulacka_java.png" title="Kalkulačka v Javě"><img src="obrazky/kalkulacka_java_nahled.png" alt="Kalkulačka v Javě" /></a>
    <a href="obrazky/miny_pascal.png" title="Miny v Pascalu"><img src="obrazky/miny_pascal_nahled.png" alt="Miny v Pascalu" /></a>
    <a href="obrazky/hobi_web.jpg" title="Web v HTML a CSS"><img src="obrazky/hobi_web_nahled.jpg" alt="Web v HTML a CSS" /></a>
</div>

Na kódu není nic složitého. Udělali jsme si div, ve kterém jsou poskládané za sebou jednotlivé náhledy. Každý náhled odkazuje na originální (velký) obrázek. U odkazu jsme nastavili atribut title, ten můžeme nastavit každému prvku v HTML a zobrazí je tehdy, když na element najedeme kurzorem myši:

Trochu naši galerii vylepšíme přes CSS, určitě jste si všimli připraveného ID. Nastavíme obrázkům v galerii border, padding, margin a stín:

#reference img {
    border: 1px solid gray;
    padding: 6px;
    box-shadow: 3px 3px 6px #999999;
    margin-right: 6px;
}

Výsledek:

Takhle to vypadá mnohem lépe, že? A přitom to bylo tak jednoduché. Pokud na náhled klikneme, zobrazí se velký obrázek. Efekt je ale poněkud ošklivý, celá stránka zmizí a obrázek je nevzhledně umístěn v levém horním rohu, na prázdné stránce. Ukážeme si, jak to vyřešit lépe.

Lightbox

Lightbox je webový doplněk, napsaný v jazyce JavaScript. Právě JavaScript se používá na dynamické prvky moderních webů, jako je např. vyskakovací okno s galerií obrázků, kterou jistě dobře znáte z mnoha webů. Přes JavaScript je také např. řešeno navigační menu zde na ITnetwork.

Projekt je zadarmo a dostupný na adrese https://github.com/…h/lightbox2/. Stáhnout si ho můžeme přes zelené tlačítko s textem "code". Po kliknutí na tlačítko se nám rozbalí menu a úplně na konci seznamu je ke stažení archiv ZIP (Download ZIP). Soubory, které potřebujeme, jsou ve složce /dist. V ní jsou složky js/, images/ a css/, které rozbalíme do složky s naším webem. Podobně, jako musíme CSS připojit k HTML, musíme k HTML připojit i tento skript, aby se na stránce spustil. Do hlavičky stránky vložíme následující odkazy na potřebné skripty a i na CSS soubor lightboxu:

<link rel="stylesheet" href="styl.css" type="text/css" />
<link rel="stylesheet" href="css/lightbox.min.css" type="text/css" media="screen" />
<script src="js/lightbox-plus-jquery.min.js"></script>
<script src="js/lightbox.min.js"></script>

Nyní přidáme všem odkazům v galerii atribut rel s hodnotou lightbox[reference]:

...
<a href="obrazky/kalkulacka_java.png" title="Kalkulačka v Javě" rel="lightbox[reference]">
...

Stránku obnovte a klikněte na náhled. Výsledek je velmi působivý:

Pokud přidáte na kteroukoli stránku do hlavičky potřebné skripty a poté na nějaký odkaz na obrázek použijete rel="lightbox", zobrazí se v LightBoxu. Pokud navíc uvedete jméno galerie v hranatých závorkách, bude LightBox tyto obrázky chápat jako z jedné galerie a nechá vás mezi nimi přecházet pomocí myši nebo šipek.

Podstránku "O mně" si jistě již zvládnete dokončit sami. Tímto tedy máme web hotový. Dnešní výsledek máte jako vždy ke stažení v příloze článku.

V následujícím cvičení, Řešené úlohy k 14.-16. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.