Black friday Black friday
Aprílový black friday tě nenechá v klidu! Až 80 % prémiového obsahu zdarma. Více informací

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

HTML a CSS Statický web Stylování tabulek a galerie fotek v HTML a CSS American English version English version

ONEbit hosting 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 4466x (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?
42 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.
Miniatura
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 (56)

Avatar
Jiří Anderle:30.3.2018 0:02

Také při naprogramování podle návodu mi nefugovalo zobrazování orig. fotek. Až pak podle Johny B. a podle Nocik jsem to opravil a výsledek vynikající. Fuguje to, jak má. Díky.

 
Odpovědět 30.3.2018 0:02
Avatar
Jan Jurníček:22.11.2018 10:57

Pokud jde vám jenom o to, vypnout Lightbox pro viewporty, do kterých se na šířku nevejde popup okno s nejširším obrázkem, tak to jde zařídit přidáním atributu media do linku na Lightbox.css. Pro správnou detekci šířky viewportu je ovšem třeba do hlavičky stránky přidat meta tag se jménem viewport, neboť není pixel jako pixel. Vyzkoušel jsem si, že to popup okno se u nejširšího obrázku hobi_web.jpg zobrazuje rozumně ještě při šířce průhledu 775px. Při užších průhledech se nevejde do průhledu.

<meta name="viewport" content="width=de­vice-width, initial-scale=1.0" />

<link rel="stylesheet" href="css/lig­htbox.css" type="text/css" media="screen and (min-width: 750px)" />

Podmínka v atributu media stylový předpis zapne jen pro viewporty typu obrazovka o minimální šířce viewportu 750 pixelů. Pod touto šířkou se bude odkaz zobrazovat tak, jako by lightbox přilinkován nebyl.

Jestli vám jde ale taky o to, aby se na velmi malých obrazovkách mobilů ani nestahovaly obrázky (i kvůli výkonu a limitům datových přenosů) a nefungovaly odkazy, tak bude asi nutno pomoci si javascriptem, třeba takhle:

https://www.itnetwork.cz/…lighter/1123

 
Odpovědět 22.11.2018 10:57
Avatar
Niesomtu Hraskova:26.11.2018 20:49

zatial mi všetko funguje jak má.

 
Odpovědět 26.11.2018 20:49
Avatar
Patrik Pastor:27. února 21:41

Rad bych se zeptal vubec mi to nefunguje a spadne to, dival sem se i na examples ve složce s lightboxem a nenašel jsem co bych ve svém kódu neměl:

<head>
<title>Referen­ce</title>
<link rel="stylesheet" href="lightbox2-master/dist/css/lig­htbox.min.css" type="text/css" media="screen" />
<script src="lightbox2-master/dist/js/lig­htbox-plus-jquery.min.js"></scrip­t>
</head>

u obrázku sem měl potom toto:

<img src="../../../O­neDrive/Obráz­ky/obrazky.html/ip­honeX.png" alt="iphonex">

cesty ke složkám/fotkám a ke všemu jsou správně, tak nevím proč to nefunguje. prosim o radu

 
Odpovědět 27. února 21:41
Avatar
Odpovídá na Patrik Pastor
Michal Šmahel:27. února 22:25

Ahoj, tady bude nejspíše problém s cestou k obrázku. obrazky.html bude patrně soubor, nikoliv adresář. Obrázek tedy nebude nalezen a poté to nebude fungovat. Podívej se, v jaké složce je obrázek opravdu uložen a cestu k němu oprav.

Pokud by to nepomohlo, ještě napiš.

Odpovědět 27. února 22:25
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Michal Šmahel
Patrik Pastor:1. března 21:25

dik, pomohlo to. Funguje je to až na malou "prkotinu" a to je ta, že u zobrazení jednotlivých images z galerie se na nich neukáže šipka (doleva/doprava) + zavřít. Tedy to co v lightbox souboru je v souboru "..lightbox2-master\dist\i­mages". Obrázky jsem z toho souboru zkopíroval a dal k sobě do složky k mým obrázkům (obrázky na html web). Ale žádná změna. Jako fakticky to funguje, ale chtěl bych to dotáhnout jako tady v tutoriálu. V příloze screenshot galerie. Dík za radu

 
Odpovědět 1. března 21:25
Avatar
Daniel
Člen
Avatar
Odpovídá na Patrik Pastor
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
Odpovídá na Patrik Pastor
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
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 66. Zobrazit vše