Importované fonty

Když chceme aktuálně využívat fonty, musí být nainstalované na daném zařízení.

Webové fonty

• fonty se importují ze stránek (stáhnou se)
• fonty se uloží do cache a příště se již nestahují
• vkládáme pomocí CSS

Kolik typů písmen je optimální?

Fonty

• relativně velké soubory
• velký počet ruší uživatele
• optimálně jednotky
• každé písmo můžeme mít různé varianty a ty musíme taktéž limitovat

Google fonts

• písma Latin Extended většinou obsahují znaky, které potřebuje Český jazyk
• vybrané písma můžeme stáhnout nebo rovnou vložit do stránky

Tagy moderního rozložení

Tagy moderního rozložení

• v HTML5 byly přidány nové značky
• značky popisují nejčastější části stránek
• tyto tagy se od nyní budou muset používat
• tyto tagy nemají žádné styly - pouze se zobrazují blokově

Tagy rozložení

• header — hlavička - logo, navigace, kontaktní informace, ...
• nav — navigace - odkazy, mapy, ...
• article — příspěvek - ucelený celek informací
• section — sekce - sekce příspěvku
• main — hlavní část - obsahuje informace, které se na strankách často mění
• aside — boční část - nejsou hlavní informace, např. autor článku, ...
• footer — patička - navigace, copyright, ...

A proč by se měly tyto značky využívat?

Rozložení v minulosti

Využívání tabulek

• vnořené tabulky
• webové stránky na levé straně
• hloupé tabulky
• šířky zařízení

K čemu jsou určeny tabulky?

Webové stránky nejsou seznam informací.

Motivace rozložení

• zarovnání dvou věcí vedle sebe je v (nám známem) CSS hrozné
• v CSS3: vytvořeny dva nástroje — flexbox & grid
• přidávají různé příkazy k umisťování prvků na stránce
• to bude naší náplní dalších hodin

Flexbox

• nejpoužívanější nástroj na rozložení
• spoustu příkazů
• nutná praxe a investování času
• podporované všude, skvělá responzivita
• flexbox zapneme na prvku tak, že nastavíme display: flex;

Kontejner

• = obal okolo prvků
• = container
• určuje jak se prvky budou zarovnávat
• prvky se vždy zobrazují jako blok
• pro nás blok na kterém flexbox zapneme

Předměty

• = jednotlivý prvek uvnitř flexboxu
• = dítě, child, item, prvek

Osy

• dvě osy
• hlavní — určuje hlavní směr posunu, obyčejně osa X
• vedlejší — určuje vedlejší směr posunu, obyčejně osa Y

Zarovnání na hlavní ose

justify-content

Zarovnání na vedlejší ose

align-items

Prohození os

flex-direction

Zalomení

flex-wrap

Flexení

• všechny rozložení lze tvořit pomocí uvedených vlastností
• přemýšlení co je flexbox

A Complete Guide to Flexbox

Tečky

Společná práce

YouTube videa

Společná práce

SSPŠ

Společná práce

Řešení

Webový portál → Studijní materiály → Řešené úlohy