Geek tričko zdarma Geek tričko zdarma
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Tvorba podstránek a kontaktní formulář, jsme začali dokončovat jednotlivé podstránky. Dnes v HTML/CSS tutoriálu web dokončíme 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

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

...
<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[refe­rence]:

...
<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ý. V příští lekci, Nahrání webu na internet, si ukážeme, jak ho nahrát na webhosting a jaký webhosting vybrat. Dnešní výsledek máte jako vždy ke stažení v příloze článku.


 

Stáhnout

Staženo 4563x (1.1 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
44 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.
Předchozí článek
Tvorba podstránek a kontaktní formulář
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Cvičení k 14.-16. lekci HTML a CSS
Aktivity (4)

 

 

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

Avatar
Daniel
Člen
Avatar
Daniel:1. března 22:37

Proč ti tečky?

Odkaz k obrázku:

<img src="../../../OneDrive/Obrázky/obrazky.html/iphoneX.png" alt="iphonex">

A

alt="iphonex

jé moc krátký měl by být delší.

 
Odpovědět 1. března 22:37
Avatar
Odpovídá na Daniel
Michal Šmahel:2. března 12:36

Ahoj, tečky v adrese mají svůj význam. Vychází to z adresování u běžných operačních systémů. Mohou se objevit dva případy:

  • Jedna tečka ("./css/style.css") - s tímto se moc nesetkáš. Značí to totiž, že se cesta bere od aktuálního adresáře (v němž je soubor, kam píšeš adresu).
  • Dvě tečky ("../css/style­.css"). Tento případ se vyskytuje celkem často. Každé vepsání "../" (bez uvozovek) do adresy představuje skok o adresář výše (opět od adresáře, kde je soubor, který se odkazuje).

Poté se ještě používá "/" (bez uvozovek) na začátcích adres. Ten značí tzv. kořenový adresář (root). To je adresář na nejvyšší úrovni. Adresy, které začínají lomítkem, se tedy berou od nejvyššího adresáře.

Odpovědět  +1 2. března 12:36
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Michal Šmahel:2. března 12:39

Někde je chybná cesta. Projdi si CSS soubory lightboxu a oprav v nich cesty k daným obrázkům. Objemu kódu se neboj, zvládneš to, je to pořád jen CSS.

Odpovědět 2. března 12:39
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Daniel
Člen
Avatar
Odpovídá na Michal Šmahel
Daniel:2. března 13:50

Moc děkují za odpověď.Já jsem nováček tvorbě webu.A tohle jsem ještě nikde neviděl. :-)

 
Odpovědět 2. března 13:50
Avatar
Viky273
Člen
Avatar
Viky273:30. března 14:32

Ahoj, když jsem nahrála obrázky, každý se mi zobrazuje v jiné velikosti. Jak to prosím opravit?
děkuju

 
Odpovědět 30. března 14:32
Avatar
Jakub Ondrák:1. května 18:52

nový lightbox mi funguje s tímto:

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

případně pro další verze - linky na skripty je potřeba upravit podle názvů souborů ve složce js/

 
Odpovědět 1. května 18:52
Avatar
Jakub Podskalský:12. května 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. května 0:48
Avatar
Nocik
Člen
Avatar
Odpovídá na Jakub Podskalský
Nocik:13. května 19:44

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

Odpovědět 13. května 19:44
Vítězství je stav mysli.
Avatar
Odpovídá na Nocik
Jakub Podskalský:13. května 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. května 22:04
Avatar
Nocik
Člen
Avatar
Odpovídá na Jakub Podskalský
Nocik:13. května 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. května 22:06
Vítězství je stav mysli.
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 72. Zobrazit vše