Situace, cíl, výchozí diagnostika podkladu.
CSS a vizuální systém · 45 minut
CSS Grid a dvourozměrná galerie
Žák sestaví mřížku, která přehledně reaguje na šířku obrazovky.
00
ČASOVÁ OSA
Struktura 45minutové hodiny
Krátký výklad pojmů a demonstrace prvního kroku.
Samostatná práce podle konkrétního postupu.
Test před/po, oprava, export a exit ticket.
01
STUDIJNÍ MATERIÁL
Co potřebuješ vědět před prací
Co je cílem
V lekci „CSS Grid a dvourozměrná galerie“ vytváříš výstup „Responzivní grid galerie“. Nejde jen o použití nástroje, ale o výsledek, který lze otevřít, zkontrolovat a vysvětlit.
Tři vrstvy webu
HTML popisuje význam a strukturu, CSS vzhled a rozvržení, JavaScript chování. Oddělení vrstev usnadní opravu i testování na mobilu, klávesnici a v různých prohlížečích.
Jak postupovat
Upravuj HTML, CSS a JavaScript odděleně, každou změnu zkontroluj v prohlížeči a sleduj Console, rozložení i ovládání klávesnicí.
Praktický příklad
Zadání zní: Vytvoř galerii používající Grid a minmax. Nejprve označ vstup, potom proveď jednu konkrétní změnu a hned zapiš, co se změnilo a proč.
Jak poznáš hotovou práci
Nejsou rozbité relativní cesty ani chyby v Console, stránka nepřetéká na úzké šířce a hlavní ovládání je dostupné klávesnicí. K odevzdání patří zdrojová verze, výsledek a vyplněný záznam postupu.
Slovníček pojmů
grid
Pojem z lekce „CSS Grid a dvourozměrná galerie“; v odpovědi jej použij jako součást konkrétního rozhodnutí, postupu nebo kontroly.
columns
Pojem z lekce „CSS Grid a dvourozměrná galerie“; v odpovědi jej použij jako součást konkrétního rozhodnutí, postupu nebo kontroly.
minmax
Pojem z lekce „CSS Grid a dvourozměrná galerie“; v odpovědi jej použij jako součást konkrétního rozhodnutí, postupu nebo kontroly.
gap
Pojem z lekce „CSS Grid a dvourozměrná galerie“; v odpovědi jej použij jako součást konkrétního rozhodnutí, postupu nebo kontroly.
auto-fit
Pojem z lekce „CSS Grid a dvourozměrná galerie“; v odpovědi jej použij jako součást konkrétního rozhodnutí, postupu nebo kontroly.
02
VIDEO K LEKCI
Ukázka postupu od vyučujícího
Video zatím nebylo vloženo
Vyučující jej může doplnit v administraci pouhým vložením odkazu na YouTube. Lekci lze dokončit i podle podrobného výkladu a bodového postupu.
03
ŘÍZENÁ PRÁCE
Konkrétní postup krok za krokem
- 01
Stáhni 10_KOMPLETNI_BALICEK.zip, rozbal jej do nové složky a otevři README i VZOR_VYSTUPU.svg.
- 02
Zkopíruj startovní soubor nebo projekt jako 10_pracovni_v01; původní soubory ponech beze změny.
- 03
Otevři index.html a současně DevTools; před změnou ověř Console, odkazy a relativní cesty.
- 04
Vytvoř galerii používající Grid a minmax.
- 05
Strukturu uprav v HTML, vzhled v CSS a chování v JavaScriptu; po každé části obnov stránku a zkontroluj Console.
- 06
Otestuj šířky 360, 768 a 1440 px, tabulátor a všechny odkazy; finální složku otevři z čistého umístění.
- 07
Vyplň kontrolní protokol, podepiš odevzdání a stáhni finální PDF s názvem 10_odevzdani.pdf.
04
PRACOVNÍ PODKLADY
Stáhni si soubory, se kterými budeš pracovat
Takhle může vypadat hotový výstup. Vlastní obsah vytvoř podle zadání; ukázka slouží jako vodítko ke struktuře a míře dokončení.
Vzorové zadání PDF
Pokud vyučující nahraje vzorové zadání v administraci, zobrazí se zde jen pro prohlížení přímo v lekci.
Vše je v jednom souboru: stáhni 10_KOMPLETNI_BALICEK.zip. Uvnitř najdeš vzor, zadání, pracovní list, kontrolní protokol, startovní projekt i všechny cvičné soubory.
05
OTEVŘENÉ ODPOVĚDI
Pracovní list navázaný na praktický úkol
Otevřít dvoustránkový list pro tisk / PDF
1. Představa výsledkuOdpověď musí obsahovat konkrétní hodnotu, soubor, rozhodnutí nebo výsledek testu.
Než jsi začal/a: co má být výsledkem „Responzivní grid galerie“ a které tři znaky sis ve vzoru výstupu označil/a jako povinné?
2. Výchozí stavOdpověď musí obsahovat konkrétní hodnotu, soubor, rozhodnutí nebo výsledek testu.
Výchozí stav: který soubor nebo podklad jsi otevřel/a, co už bylo správně a co konkrétně chybělo nebo nefungovalo?
3. Co jsem udělal/aOdpověď musí obsahovat konkrétní hodnotu, soubor, rozhodnutí nebo výsledek testu.
Postup práce: napiš po pořadě alespoň čtyři kroky, které jsi skutečně provedl/a. U každého uveď nástroj, soubor nebo nastavení a kdy jsi výsledek uložil/a.
4. Proč jsem se tak rozhodl/aOdpověď musí obsahovat konkrétní hodnotu, soubor, rozhodnutí nebo výsledek testu.
Rozhodování: kterou nejdůležitější změnu jsi udělal/a, proč jsi zvolil/a právě ji a jak s ní souvisejí pojmy grid, columns, minmax, gap?
5. Test a opravaOdpověď musí obsahovat konkrétní hodnotu, soubor, rozhodnutí nebo výsledek testu.
Kontrola a oprava: co jsi přesně otestoval/a, co jsi očekával/a, co se skutečně stalo a kterou jednu chybu jsi potom opravil/a?
6. Finální stavOdpověď musí obsahovat konkrétní hodnotu, soubor, rozhodnutí nebo výsledek testu.
Finální stav: jak se jmenuje odevzdávaný soubor, kde je uložený, podle kterých kritérií je hotový a co bys příště udělal/a lépe?
06
KONTROLA PRAKTICKÉ PRÁCE
Zkontroluj výsledek před testem
Jsi autor webové prezentace pro skutečné publikum. Výsledek musí fungovat po otevření z čisté složky, na mobilu i bez myši.
Splnění zadání
Vytvoř galerii používající Grid a minmax.
Očekávaný výstup
Responzivní grid galerie
Na co si dát pozor
- Absolutní cesta fungující jen na jednom počítači.
- Vzhled bez sémantické struktury, čitelného focusu nebo kontroly na mobilu.
07
ZÁVĚREČNÁ KONTROLA
Krátký test porozumění
08
EXIT TICKET
Co si z lekce odnášíš
Dokončeno neznamená pouze vytvořeno. Výsledek je dokončený tehdy, když je uložený, znovu otevřitelný, otestovaný a vysvětlitelný podle kritérií.
09
FINÁLNÍ ODEVZDÁNÍ
Připrav výstup k odevzdání
ZDROJ + VÝSLEDEK + KONTROLA
Responzivní grid galerie
Odevzdej zdrojový soubor nebo projekt, výsledný export a vyplněný kontrolní protokol. Uveď, co jsi testoval/a a kterou chybu jsi opravil/a.
Zatím nebyl vybrán žádný soubor.
Tlačítko vytvoří PDF s odpověďmi, výsledkem testu, odkazem v Teams, jménem a podpisem. PDF potom přilož ke stejnému úkolu v Teams.