Basiskennis Layout van webpagina’s

Cursusduur

03:49:40

Niveau

Beginner

deel deze cursus:

Basiskennis Layout van webpagina’s
30

Leer in deze cursus met behulp van HTML en CSS om pagina’s exact zo vorm te geven zoals je wilt. 

Cursusprogramma

  • De box
    • Algemene cursusinformatie
    • Hulpmiddelen in de browser gebruiken
    • Firefox uitbreiden met addons
    • Vormgeven met of zonder reset.css
    • Vormgeven met padding, border en margin
    • Collapsing margins
    • Collapsing margins bij nested elements
    • Boxeigenschappen voor inline elements
    • Boxeigenschappen voor inline block elements
  • Basiskennis weblayout
    • Layouten in HTML-4
    • Uitleg van weblayout in html5
    • Layout bouwen in html5 met header, nav, aside, footer en div
    • Statische – fixed – layout maken en positioneren met float
    • Kolommen bijeenhouden met behulp van omsluitende div
    • Webpagina layout centreren met omsluitende div – nested
  • Zwevende elementen met Float en Clear
    • Driekoloms layout maken met float en clear
    • Het clearen van floatende elementen
    • Clear left en right
  • Statische en/of flexibele layouts maken
    • Statische layout vormgeven met boxeigenschappen
    • Adaptive (fluid) layout maken met procenten
    • Adaptive (fluid) layout maken met procenten en absolute maten
  • Werken met kolommen
    • Float combineren met natural flow (3 koloms)
    • Boxeigenschappen isoleren door nesten (2 koloms)
    • Boxeigenschappen isoleren door nesten (3 koloms)
    • De hoogte van kolommen
    • Kolommen met gelijke hoogte creëren
    • Overflow beheersen
  • Positioneren met CSS-eigenschap Position
    • Positioneren met position:relative
    • Praktische toepassing voor position:relative
    • Positioneren met position:absolute
    • Praktische toepassing voor position:absolute
    • Positioneren met position:fixed
    • Z-index
  • Layouten met inline en block elementen
    • Uitleg van soorten elementen inline, block, inline-block
    • Boxeigenschappen van inline elementen
    • Inline elementen isoleren met class
    • Inline element creëren met b, i, strong, em, mark en span
    • Boxeigenschappen van standaard inline-block elementen
    • Inline element omzetten naar block element
    • Block element omzetten naar inline element