Basiskennis Layout van webpagina’s

Cursusduur

03:49:40

Niveau

Beginner

deel deze cursus:

Share on facebook
Share on linkedin
Share on pinterest
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