Tvorba webových stránek pro školy

V minulém článku jsem popsal náš kurz z hlediska uplatnění a použití získaných znalostí a dovedností buď při správě a úpravě webových stránek školy nebo pro výuku. V tom to článku uvedu některá témata, se kterými se na školení Tvorba webových stránek setkáte.

Školení je rozděleno do dvou bloků, není potřeba absolvovat oba. V druhém bloku předpokládáme základní znalosti HTML a CSS.

1. blok

Zde si v rámci teoretického úvodu představíme mim o jiné i generátor HTML stránek Mobirise. Uděláme kompletní webovou prezentaci a vygenerujeme zdrojové kódy. Vysvětlíme si, jak se využívají kaskádové styly, rozebereme nastavení hlavičky webové stránky a napojení systému na framework Bootstrap.

V praktické části se budeme věnovat responzivnímu vzhledu stránek webu, různým výstupním médiím a jejich nastavení. Rozebereme především nové tagy, které přinesla norma HTML5. Ukážeme si použití moderních internetových písem a znaků infografiky.

2. blok

Jedná se o ryze praktickou část. V tomto bloku DVPP kurzu Tvorba webových stránek vytvoříme kompletní webovou prezentaci. Použijeme postupy podrobně vysvětlené v prvním bloku. Využijeme také nové vlastnosti CSS3. Vysvětlíme si, jak propojit prezentaci s JavaScriptem. Web bude statický, nepotřebuje podporu internetového serveru, ale můžete jej umístit na libovolnou doménu.

Ukázka použití Google fonts

Google vytvořil tisíce písem, která můžete bez jakýchkoliv dalších podmínek použít ve své webové prezentaci. Ukážeme si, jak některé z nich použijete na odstavec textu.

Na webu https://fonts.google.com/ si vyberte písmo Lobster.
Vpravo vedle ukázky písma zvolte „+ Select this type“
Otevře se panel, kde ti můžete zkopírovat zápis do hlavičky webové stránky.

Takto vypadá alternativní zápis CSS

@import url(‚https://fonts.googleapis.com/css2?family=Lobster&display=swap‘);

Nyní již stačí upravit vzhled odstavce pomocí stylového zápisu

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis nibh at felis congue commodo. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Mauris elementum mauris vitae tortor. Žluťoučký kůň úpěl šíleně smutné ódy