Skip to content

Latest commit

 

History

History
80 lines (60 loc) · 4.45 KB

README.md

File metadata and controls

80 lines (60 loc) · 4.45 KB
Raw

Měním web: Developer Tools a uživatelské styly

Prezentace

  1. Úvod
  2. Developer Tools
  3. Uživatelské styly

Úkoly

Změna HTML v Developer Tools

  1. Najdi si zprávu na zpravodajském webu
  2. Přepiš existující zprávu
  • Přepiš titulek, perex
  • Přidej formátování, tučný text
  • Zmeň obrázek (můžeš použít třeba place kitten)
  • Odstraň zbytečné prvky, komentáře nebo reklamy

Změna stylů v Developer Tools

  1. Najdi nečitelnou stránku, například tuto: Báje a mýty
  2. Uprav styly tak, aby stránka byla čitelná
  • Odstraň obrázek na pozadí, změň barvu pozadí
  • Změň barvu, velikost a písmo textu
  • Odstraň rušivé prvky
  • Zkus upravit šířku textu aby byl čitelnější

Nainstaluj Stylish

Napiš si vlastní styl

  1. Zkus stránku upravit pomocí Developer Tools
  2. Ve Stylish vytvoř nový styl, nezapomeň jej pojmenovat
  3. Zapiš změněná pravidla a selektory
  4. Podívej se v Developer Tools, jak se tvůj styl aplikoval

Inspirace

  • Změň barvu lišty a pozadí na Facebook, přidej koťátka dle úvahy
  • Uprav portál IDOS aby měl hezčí barvy a větší písmo
  • Přestyluj iDnes (nebo jiný zpravodajský portál)
    • Zvětši písmo a změň jej na patkové
    • Odstraň rušivé prvky na stránce: související články, diskuze, reklamy…
  • Zvýrazni text „Komerční sdělení“ na webu Lupa (nebo jinde)

Užitečné zdroje pro stylování

Další nástroje pro modifikaci webu

Ukázky rozšíření