Moderní rozložení 1

17. hodina WBA


Matěj Cajthaml — SSPŠ

©

Opakování

Co dělá pseudotřída :first-child?
K čemu slouží kotva v URL?
Jak zaplníme rodiče obrázkem aby mu zůstal stejný podíl šířky a výšky?
K čemu slouží tag caption? Kam ho vkládáme?
Lze zaoblit jeden roh v CSS? Jak?

Fonty

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

Nyní si ukážeme jak je používat bez instalace.

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

  • odkaz
  • fonty k dispozici zdarma
  • 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, ...
  • 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 stránká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

Overflow

  • určuje jak se prvek bude chovat při přetečení
  • hidden, visible, auto, scroll

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

Shrnutí

Jaké tagy patří do moderního rozložení (dle HTML5)?
Jak prohodíme osy ve flexboxu?
Jak označíme prvek jako kontejner — rodiče?
K čemu slouží tag aside? Co označuje?
Jak zarovnáme prvky na vedlejší ose?
K čemu slouží na tagu li atribut value?

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/