Python týden
Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu
80 % bodů zdarma na online výuku díky naší Letní akci!

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:

Stylování tabulek v HTML přes CSS

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:

Rámeček HTML tabulky v CSS
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

Rámeček HTML tabulky v CSS

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.

Kalkulačka v Javě
Miny v Pascalu
Web v HTML a CSS

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:

Galerie obrázků v HTML a CSS

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:

Galerie obrázků v HTML a CSS

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 http://lokeshdhakar.com/…ts/lightbox2. Použití je velmi jednoduché, stáhněte si archiv s projektem a složky js, images a css rozbalte do složky s vaší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="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>

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ý:

Použití lightboxu ke galerii obrázků v HTML

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 5035x (1.1 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Tvorba podstránek a kontaktní formulář
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
51 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (5)

 

 

Komentáře
Zobrazit starší komentáře (68)

Avatar
Jakub Podskalský:12.5.2019 0:48

Sice reaguji po roce a půl, ale přesto ti chci poděkovat. :D Patlal jsem se s tím už jakou dobu a furt nic, tvoje řešení mi ale funguje.

Taková menší otázka, co přesně značí ty hranaté závorky? ať tam dám co chci, tak se nic nemění, ani jejich obsah nikde nevidím...

 
Odpovědět
12.5.2019 0:48
Avatar
Nocik
Redaktor
Avatar
Odpovídá na Jakub Podskalský
Nocik:13.5.2019 19:44

Spojí to všechny soubory s totožnou hodnotou rel="" k sobě.

Odpovědět
13.5.2019 19:44
Vítězství je stav mysli.
Avatar
Odpovídá na Nocik
Jakub Podskalský:13.5.2019 22:04

Aha, jasně. Dík. Nečekal jsem, že mi odepíšeš... Znamená to, že už jsi za tu dobu postoupil v HTML a CSS na nějakou úroveň? Přecejen je to už asi rok a půl, co jsi komentoval pod tento článek. :D

 
Odpovědět
13.5.2019 22:04
Avatar
Nocik
Redaktor
Avatar
Odpovídá na Jakub Podskalský
Nocik:13.5.2019 22:06

V podstatě ano, ale spíš se teď snažím v PHP :) každopádně klidně pomůžu, když to bude v mojich silách

Odpovědět
13.5.2019 22:06
Vítězství je stav mysli.
Avatar
Anna Ove Bahulíková:4.9.2019 20:03

Z nějakého důvodu se mi v dovednostech po napojení na css zobrazuje font, který neumí některá česká písmena. Kontrolovala jsem si to, ale prostě nemůžu najít kde se stala chyba. v Index.html tento problém vůbec nemám. Může někdo poradit, prosím? Přijde mi jako blbost specifikovat font úplně u všeho zvlášť. Ta chyba se projevuje totiž i v té navigaci a i samotném logu stránky.

 
Odpovědět
4.9.2019 20:03
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Anna Ove Bahulíková:10.9.2019 21:02

Ahoj, má tu někdo aktuální návod na verzi Lightboxu 2.11.1? Bohužel to, co tam píšou, mi z nějakého důvodu nefunguje.

 
Odpovědět
10.9.2019 21:02
Avatar
Gina Jana Dvořáková:6. dubna 19:17

Paráda, na vše jsem přišla a vše krásně funguje :-) Webík jsem si upravila i podle sebe, co se týká vzhledu a pozic :-) Moc děkuji.

 
Odpovědět
6. dubna 19:17
Avatar
Odpovídá na Anna Ove Bahulíková
Gina Jana Dvořáková:6. dubna 19:21

Lightbox 2.11.1
kód HTML:

<link rel="stylesheet" href="css/lig­htbox.css" type="text/css" media="screen" />
<script src="js/lightbox-plus-jquery.min.js"></scrip­t>
<script src="js/lightbox-plus-jquery.js"></scrip­t>
<script src="js/lightbox­.min.js"></scrip­t>
<script src="js/lightbox­.js"></script>

snad pomůžu... :-)

 
Odpovědět
6. dubna 19:21
Avatar
Pavel Kaplan
Člen
Avatar
Pavel Kaplan:3. května 11:00

Zdravím všechny co se budou trápit s Lightboxem- linky uvedené v článku již nejsou aktivní a odkazují na neexistující soubory.

 
Odpovědět
3. května 11:00
Avatar
Jaroslav Strmiska:15. května 19:24

Při pokusu zkopírovat .js soubory do adresáře projektu HTML, můj PC odmítá s těmito soubory (lightbox.js, lightbox.min.js, ...) pracovat. Tvrdí, že soubory jsou potencionálně nebezpečné a přístup k nim zablokuje. Zde v diskuzi tento problém nikdo neuvádí. Odblokovat antivirovou ochranu mi nepříjde zrovna rozumné. Takže nevím jak toto vyřešit.

 
Odpovědět
15. května 19:24
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

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