16. diel - Štýlovanie tabuliek a galérie fotiek v HTML a CSS

V minulej lekcii, Tvorba podstránok a kontaktný formulár , sme začali dokončovať jednotlivé podstránky. Dnes v HTML / CSS tutoriálu web dokončíme kompletne.

Zručnosti

Stránku zručnosti už máme z časti pripravenú z prvých dielov seriálu. Opäť ju upravíme tak, aby v nej bol vložený celý layout, ako sme to urobili minule so stránkou kontakt.html.

Pretože už poznáme CSS, trochu lepšie tabuľku ostylujeme. Ako prvý ju dáme nejaké IDčko, ponúka sa zručnosti. Hlavným problémom je, že nemáme stĺpce (bunky) rovnako široké. Že to tak vyzerá je len náhoda, keďže text vo všetkých bunkách je podobne dlhý. Skúste si niečo pripísať do jednej z buniek, rozšíri sa. Každej bunke nastavme šírku na 33% a nejaký padding:

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

výsledok:

Ako vidíte, obsah v bunke tabuľky sa v predvolenom nastavení center zvisle. To sa nám nehodí, pretože by sme chceli mať nadpisy v rovnakej výške, zarovnané zhora. To nastavíme opäť všetkým bunkám pomocou CSS vlastnosti vertical-align s hodnotou top:

vertical-align: top;

K zarovnanie na stred použijeme hodnotu middle, k zarovnanie nadol bottom. Táto vlastnosť funguje len u tabuliek, v ostatných elementoch sa bohužiaľ takto jednoducho centrovať nedá. Opäť narážame na neslávne preslávené centrovanie v CSS.

Neukazovali sme si ešte, ako sa štýlom rámček tabuľky. Je to veľmi podobné ako štýlovanie rámčeka ostatných elementov, avšak tabuľka má rámček dvojitý. Skúsme si opäť v tom istom selektora nastaviť rámček všetkých buniek na šedý, 1px tučný:

border: 1px solid gray;

výsledok:

Vidíme, že to nie je úplne to, čo by sme chceli. Rámčeky zlejeme pomocou vlastnosti border-collapse, nastavené na hodnotu collapse. Tú však nenastavíte bunkám, ale celé tabuľke:

#dovednosti {
    border-collapse: collapse;
}

Výsledok už vyzerá podľa očakávania.

Posledný pehou na kráse našej tabuľky sú Nevycentrovan˘ obrázky v prvom riadku. Chceli by sme vycentrovať obsah len tohto jedného riadku a zvyšok riadkov nechať zarovnaných doľava (dlhý vycentrovaný text je zle čitateľný). Možností je viac, tou najjednoduchšie je dať riadku triedu centrovaný:

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

Dokončili sme teda ďalšie podstránku:

Referencie

Na stránke s referenciami si vytvoríme malú galériu obrázkov s aplikáciami a weby, ktoré ste vytvorili. Galéria obrázkov sa vám určite hodí nielen na obrázky vašich prác, ale napríklad aj na fotky a podobne. Ja si požičiam obrázok tohto webu a miestne ukážkové aplikácie v Jave a Pascale. Použijem teda tieto 3 obrázky.

Galéria obrázkov

Začnime tým, že si ku každému obrázku vytvoríme miniatúru. Bolo by veľkou chybou zobrazovať náhľady ako veľké obrázky, pretože sa dlho sťahujú. Preto si vo svojom obľúbenom grafickom editore (GIMP, Photoshop, ...) zmenšite svoje obrázky, ja som všetkým nastavil výšku na 128px a k ich názvu som pripojil _nahled.

Vytvoríme si podstránku reference.html tak, ako všetky podstránky, teda skopírovaním napr. Indexu. Do section umiestnime nejaké to rozprávanie a div, v ktorom budú jednotlivé náhľady:

<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 nie je nič zložité. Urobili sme si div, v ktorom sú poskladané za sebou jednotlivé náhľady. Každý náhľad odkazuje na originálny (veľký) obrázok. U odkazu sme nastavili atribút title, ten môžeme nastaviť každému prvku v HTML a zobrazí ich vtedy, keď na element prejdeme kurzorom myši:

Trochu našu galériu vylepšíme cez CSS, určite ste si všimli pripraveného ID. Nastavíme obrázkom v galérii border, padding, margin a tieň:

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

výsledok:

Takto to vyzerá oveľa lepšie, že? A pritom to bolo tak jednoduché. Pokiaľ na náhľad klikneme, zobrazí sa veľký obrázok. Efekt je ale trochu škaredý, celá stránka zmizne a obrázok je nepekne umiestnený v ľavom hornom rohu, na prázdne stránke. Ukážeme si, ako to vyriešiť lepšie.

Lightbox

Lightbox je webový doplnok, napísaný v jazyku JavaScript. Práve JavaScript sa používa na dynamické prvky moderných webov, ako je napr. Vyskakovacie okno s galériou obrázkov, ktorú iste dobre poznáte z mnohých webov. Cez JavaScript je tiež napr. Riešené navigačné menu tu na ITnetwork.

Projekt je zadarmo a dostupný na adrese http://lokeshdhakar.com/...ts/lightbox2. Použitie je veľmi jednoduché, stiahnite si archív s projektom a zložky js, images a css rozbaľte do zložky s vaším webom. Podobne, ako musíme CSS pripojiť k HTML, musíme k HTML pripojiť aj tento skript, aby sa na stránke spustil. Do hlavičky stránky vložíme nasledujúce odkazy na potrebné skripty a aj na CSS súbor lightboxu:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>

Teraz pridáme všetkým odkazom v galérii atribút rel s hodnotou lightbox [referencie]:

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

Stránku obnovte a kliknite na náhľad. Výsledok je veľmi pôsobivý:

Ak pridáte na ktorúkoľvek stránku do hlavičky potrebnej skripty a potom na nejaký odkaz na obrázok použijete rel = "lightbox", zobrazí sa v lightbox. Ak navyše uvediete meno galérie v hranatých zátvorkách, bude Lightbox tieto obrázky chápať ako z jednej galérie a nechá vás medzi nimi prechádzať pomocou myši alebo šípok.

Podstránku "O mne" si iste už zvládnete dokončiť sami. Týmto teda máme web hotový. V budúcej lekcii, Štylovanie navigačného menu pomocou flexboxu , si ukážeme, ako ho nahrať na webhosting a aký webhosting vybrať. Dnešný výsledok máte ako vždy k stiahnutiu v prílohe článku.

V ďalšej lekcii, Štylovanie navigačného menu pomocou flexboxu , naštylujeme navigačnom menu.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.