De box en het layouten van webpagina’s

Dankzij het zogeheten boxmodel ben je 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 van de cursus

Je leert in deze cursus 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.

Wat ga je leren

• Uitleg van de box
• Vormgeven met padding, border en margin
• Boxeigenschappen voor inline en inline block elements
• Layouten in HTML-4 en HTML-5
• Statische (fixed) layout maken en positioneren met float
• Kolommen bijeenhouden met behulp van omsluitende
• Webpagina layout centreren met omsluitende (nested)
• Zwevende elementen met Float en Clear
• Het clearen van floatende elementen
• Statische en/of flexibele layouts maken
• Statische layout vormgeven met boxeigenschappen
• Adaptive (fluid) layout maken met procenten en absolute maten
• Werken met kolommen en float
• Positioneren met CSS-eigenschap Position
• Positioneren met position: relative, absolute en fixed
• Layouten met inline en block elementen
• Inline elementen isoleren met class
• Boxeigenschappen van standaard inline-block elementen
• Inline element omzetten naar block element
• Block element omzetten naar inline element

Duur en studiebelasting

De duur van deze videocursus is 2 uur en 04 minuten met een studiebelasting van ca. 8 tot 10 uur. Onze video’s zijn met zorg gemonteerd. Hierin leggen we in een zo kort mogelijke tijd exact uit wat je moet weten. Echter om je deze technieken volledig eigen te maken zul je met al het geleerde moeten experimenteren en oefenen. Hiervoor kun je ofwel ons downloadbaar materiaal of eigen materiaal gebruiken. Houd rekening met een minimale studiebelasting van drie keer de videoduur.

Doelgroep van deze cursus

Webdesigners, webdevelopers en webbouwers die het leren layouten van webpagina’s met behulp van het boxmodel en css-eigenschappen als float en position onder de knie willen krijgen.

Lesmaterialen

De cursus bestaat uit video’s met downloadbaar oefenmateriaal. Al onze video’s zijn Nederlands gesproken en ondertiteld. Wij maken zoveel mogelijk gebruik van de Engelse Interface van de software maar we benoemen in onze uitleg ook de Nederlandse (vak)termen. Je dient zelf zorg te dragen voor de installatie van de benodigde software op je computer.

Opbouw van de cursus

Deze cursus is opgebouwd uit instructievideo’s verdeeld over hoofdstukken. Wij adviseren om de volgorde van de hoofdstukken en de video’s aan te houden aangezien latere video’s vaak teruggrijpen op geleerde kennis in eerder video’s.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Toetsing

Deze cursus bevat geen (eind)toets. Je ontvangt bij afronding een certificaat als bewijs van deelname.

Certificaat / afronding

Na het succesvol volgen van deze cursus ontvang je een bewijs van afronding van House-of-Training. Bewaar dit deelnamebewijs bij je (LinkedIn) profiel, portfolio of online CV. Zo toon je aan iedereen jouw kennis, ambitie en talent.