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í.
Stáhnout
Staženo 5259x (1.09 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
Komentáře


Zobrazeno 10 zpráv z 84. Zobrazit vše