Lekce 16 - Stylování tabulek a galerie fotek v HTML a CSS
V minulé lekci, Meta tagy, tvorba podstránek a kontaktní formulář, jsme si představili meta tagy a 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 již udělali se stránkou kontakt.html.
Hlavička <head> stránky dovednosti.html
bude vypadat takto:
<head> <meta charset="utf-8" /> <meta name="description" content="Mé dovednosti, mezi které patří programování v Javě, Pascalu a HTML" /> <meta name="keywords" content="programátor, hobi, dovednosti, java, html, pascal" /> <meta name="author" content="HoBi" /> <link rel="shortcut icon" href="obrazky/ikona.ico" /> <link rel="stylesheet" href="styl.css" type="text/css" /> <title>Dovednosti</title> </head>
Dále na začátek elementu <body> přidáme
<header> s logem a navigačním menu
<nav>. V navigačním menu nezapomeneme přiřadit třídu
aktivni tagu <li> s odkazem právě na
dovednosti.html:
<header> <div id="logo"> <h1>Honza<span>Bittner</span></h1> <small>webdeveloper</small> </div> <nav> <ul> <li><a href="index.html">Domů</a></li> <li><a href="omne.html">O mně</a></li> <li class="aktivni"><a href="dovednosti.html">Dovednosti</a></li> <li><a href="reference.html">Reference</a></li> <li><a class="kontakt-tlacitko" href="kontakt.html">Kontakt</a></li> </ul> </nav> </header>
Pod výše přidaný <header> vložíme článek
<article>, jehož hlavním obsahem bude naše již
vytvořená tabulka s dovednostmi. Tuto tabulku tedy převedeme do tagu
<section> a článku ještě nastavíme nadpis
<header>:
<article> <div id="centrovac"> <header> <h1>Dovednosti</h1> </header> <section> <table> <tr> <td> <img src="obrazky/html.png" alt="HTML" /> </td> <td> <img src="obrazky/java.png" alt="Java" /> </td> <td> <img src="obrazky/pascal.png" alt="Pascal" /> </td> </tr> <tr> <td> <h2>HTML</h2> <p>S HTML začínám a umím vytvořit jednoduché webové stránky, jako jsou tyto.</p> </td> <td> <h2>Java</h2> <p>Javu se učím z tutoriálů na itnetwork.cz, dokáži tvořit jednoduché konzolové i okenní aplikace a programovat objektově.</p> </td> <td> <h2>Pascal</h2> <p>Pascal nás učí ve škole, ale raději se učím moderní jazyky z ITnetwork.</p> </td> </tr> </table> </section> </div> </article>
Pozor, <div> s ID centrovac
nesmí obsahovat třídu domu-article, jako to má hlavní stránka
index.html. Tato třída by nám z tohoto elementu
<div> udělala mřížku, což nechceme.
Stránce na konec <body> ještě přidáme také
<footer> stejně, jako ho již máme na stránkách
předtím:
<footer> Vytvořil ©HoBi 2021 pro <a href="https://itnetwork.cz">itnetwork.cz</a> </footer>
Stylování tabulky
Protože již známe CSS trochu lépe, tabulku si ostylujeme. Jako první ji
dáme nějaké ID, abychom ji mohli v CSS jednoznačně vybrat. Nabízí se
dovednosti:
<table id="dovednosti">
Hlavním problémem je, že nemáme sloupce (buňky) stejně široké. Že to
tak vypadá je jen náhoda, jelikož text je ve všech buňkách podobně
dlouhý. Připíšeme-li něco do jedné z buněk, buňky se rozšíří.
Každé buňce proto nastavíme šířku na 33% a nějaký
padding.
Do CSS souboru si tedy přidáme nový selektor:
#dovednosti td { width: 33%; padding: 10px; }
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:
#dovednosti td { width: 33%; padding: 10px; vertical-align: top; }
Naše stránka nyní vypadá takto:
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ý:
#dovednosti td { width: 33%; padding: 10px; vertical-align: top; border: 1px solid gray; }
Výsledek po nastavení rámečku vypadá takto:
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í vadou na kráse naší tabulky jsou nevycentrované obrázky v
prvním řádku. Budeme chtít vycentrovat obsah jen tohoto jednoho řádku a
zbytek řádků nechat zarovnaný doleva (dlouhý vycentrovaný text je špatně
čitelný). Možností je více, a tou nejjednodušší je dát řádku naši
třídu centrovany:
... <table id="dovednosti"> <tr class="centrovany"> ...
Dokončili jsme tedy další podstránku, celý její kód naleznete v příloze na konci článku.
Úprava index.html
Aby stránka index.html souhlasila s požadovaným designem, tak
si z jejího článku ještě odebereme odkaz na nově upravenou stránku s
dovednostmi. Element <section> upravíme do následující
podoby:
<section> <p> Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde. </p> <p> Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT. Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>. </p> <p> Rád čtu a někdy (hlavně v létě) i sportuju. </p> <p> Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>! </p> <p class="tlacitko-odstavec"> <a href="reference.html" class="reference-tlacitko">Moje reference</a> </p> </section>
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:
Obrázky si uložíme do naší složky /obrazky.
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. Zmenšené obrázky opět uložme do složky
/obrazky.
Vytvoření podstránky
reference.html
Vytvoříme si podstránku reference.html tak, jako všechny
podstránky. Do hlavičky opět vložíme nějaké tagy s metadaty, odkaz na CSS
soubor a definici ikony a titulku stránky:
<head> <meta charset="utf-8" /> <meta name="description" content="Aplikace od HoBiho." /> <meta name="keywords" content="aplikace, programátor, HoBi, reference" /> <meta name="author" content="HoBi" /> <link rel="shortcut icon" href="obrazky/ikona.ico" /> <link rel="stylesheet" href="styl.css" type="text/css" /> <title>Reference</title> </head>
V <body> budeme opět mít <header>,
<article> a <footer>. Část
<header> si nakopírujeme např. z index.html a
nezapomeneme položce stránky, na které se vyskytujeme (Reference)
přiřadit třídu aktivni:
<body> <header> <div id="logo"><h1>Honza<span>Bittner</span></h1><small>webdeveloper</small></div> <nav> <ul> <li><a href="index.html">Domů</a></li> <li><a href="omne.html">O mně</a></li> <li><a href="dovednosti.html">Dovednosti</a></li> <li class="aktivni"><a href="reference.html">Reference</a></li> <li><a class="kontakt-tlacitko" href="kontakt.html">Kontakt</a></li> </ul> </nav> </header> <article> </article> <footer> Vytvořil ©HoBi 2021 pro <a href="https://itnetwork.cz">itnetwork.cz</a> </footer> </body>
Část <article> bude mít taktéž stejnou strukturu jako
zbylé stránky. Do <header> vložíme nadpis a do
<section> hlavní obsah stránky:
<article> <div id="centrovac"> <header> <h1>Reference</h1> </header> <section> <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> </section> </div> </article>
Dali jsme si pozor, aby <div> s ID
centrovac neobsahoval třídu domu-article.
V kódu jsme si vytvořili <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. Jeho text se
zobrazí jen tehdy, když na element najedeme kurzorem myši:
Stylování galerie
Trochu naši galerii vylepšíme přes CSS. Určitě jste si všimli
připraveného ID reference. 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; }
Nic by nás zde nemělo překvapit. S těmito vlastnostmi jsem se již setkali.
Naše galerie nyní vypadá takto:
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 a
vloží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 <head> 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]:
<div id="reference"> <a href="obrazky/kalkulacka_java.png" title="Kalkulačka v Javě" rel="lightbox[reference]"> <img src="obrazky/kalkulacka_java_nahled.png" alt="Kalkulačka v Javě" /> </a> <a href="obrazky/miny_pascal.png" title="Miny v Pascalu" rel="lightbox[reference]"> <img src="obrazky/miny_pascal_nahled.png" alt="Miny v Pascalu" /> </a> <a href="obrazky/hobi_web.jpg" title="Web v HTML a CSS" rel="lightbox[reference]"> <img src="obrazky/hobi_web_nahled.jpg" alt="Web v HTML a CSS" /> </a> </div>
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ádneme dokončit sami. Můžeme si do ní napsat pár slov o tom, co nás k programování přivedlo 🙂 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í.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 6003x (2.71 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Komentáře
Zobrazeno 10 zpráv z 111. Zobrazit vše