Weblayout met HTML & CSS Voeg toe aan favorieten

Het layouten van webpagina’s. Leer met behulp van HTML en CSS om pagina’s exact zo vorm te geven zoals je wilt. Hiervoor maak je gebruik van het zogeheten boxmodel. Met CSS kun je de vormgeving en de plaatsing van teksten, afbeeldingen en overige media exact bepalen. Zowel statisch als responsive.

De box en het layouten van webpagina’s
Dankzij het zogeheten boxmodel ben je in staat om tekst, afbeeldingen en overige media exact te positioneren en vorm te geven zoals je dat wilt. Hiermee bepaal je de layout van de webpagina. Je leert de boxeigenschappen op de juiste manier in te zetten en te benutten. Elke webpagina wordt opgebouwd uit speciaal hiervoor in het leven geroepen html5-elementen (header, nav, aside, footer en div). In dit hoofdstuk leer je alle mogelijke vormen van layout te creëren.

Positioneren van elementen
Soms moeten elementen zich natuurlijk gedragen in de ‘flow’, maar soms wil je de positie en het gedrag van elementen exact kunnen bepalen. CSS biedt hiervoor specifieke position-stijlopdrachten. Leer hoe je een webpagina-layout maakt in flexibele kolommen maar ook hoe je kaders op vaste posities kunt zetten.

Doel
Na het volgen van deze cursus kun je met behulp van HTML en CSS webpagina’s layouten. Je beheerst de wijze waarop je dankzij het boxmodel elk element op de pagina kunt positioneren en vormgeven.

Doelgroep
Iedereen die webpagina’s zelf wil kunnen vormgeven en layouten met behulp van HTML & CSS. Ook webdesigners die voornamelijk websites maken met een CMS hebben baat bij de kennis en inzichten van deze cursus. Want als je aanpassingen wilt kunnen maken in een template dan is kennis van de broncode onmisbaar.

Deze cursus biedt:

• 24-7 Toegang tot de online cursus Weblayout met HTML & CSS (+40 video’s)
• Downloadbaar bronmateriaal bij video’s
• Nederlandstalig onderwijs
• Certificaat na afronding
• 5% korting op vervolgstudies

Studeer en leer in je eigen tijd en tempo
In deze cursus werk je zelfstandig wanneer het jou uitkomt en in je eigen tempo. De online cursus bestaat uit duidelijke instructievideo’s en downloadbare bestanden waarmee je het geleerde kunt oefenen en eigen kunt maken. Onze video’s zijn Nederlandstalig en ondertiteld. Je hebt 24-7 toegang tot jouw persoonlijke online studieomgeving.

Inhoudsoverzicht van instructievideo’s

• 40 video’s | Totale videoduur is 03:09:42
• Docent en auteur: Belinda Kampf

De box

• 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 (2 koloms)
• 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
• Praktische toepassing voor position:fixed
• Z-index

Layouten met inline en block elementen

• Zelf basisdocument bouwen
• 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