We gaan beginnen met een lekker simpele en lelijke website layout. Deze layout heeft drie elementen: Een rode header, een blauw menu en een groen inhoud gedeelte.
Zorg ervoor dat de header over de gehele breedte loopt en een lekker dikke padding heeft. Onder de header staan het menu en de inhoud, zorg ervoor dat het menu altijd 20% van de breedte inneemt, en de inhoud de rest van de breedte. Zorg er ook voor dat het menu en de inhoud 300 pixels hoog zijn.
Twee kolommen is tegenwoordig passé, een beetje website heeft tegenwoordig drie kolommen. En een footer! En is gecentreerd!
Voeg een extra kolom en een footer toe aan de pagina. De derde kolom is net als het menu 20% van de pagina. De footer komt onder de drie kolommen te staan. Alles onder de header is gecentreerd en heeft een vaste breedte van 800 pixels.
Je hebt inmiddels genoeg kennis om al echte website layouts te kunnen maken. We gaan ons wagen aan een layout die de meeste van jullie wel eens gezien hebben, die van MARKTHAL.nl!
Deze website heeft twee headers, één met de titel van de pagina en één met een zoekbalk. Daaronder bevinden zich twee kolommen met informatie over een verkoper en wat hij probeert te verkopen.
Gebruik de volgende links om de website te maken:
De volgende kleuren worden gebruikt op de pagina:
#f2b479
#a6784b
#21479c
#e1e8f5
#b1c4df
#fffbe7
Websites maken is niet altijd maar andere layouts kopiëren, soms moet je zelf een layouts ontwerpen.
Ontwerp zelf een webpagina en maak deze met HTML en CSS. Als je grafisch niet zo goed bent mag je ook op internet zoeken naar een gelikte website of template voor 'inspiratie'.
