Bij BO Ontwerpproces heb je een grid gemaakt met jouw beste product foto’s (BO Ontwerpproces module 4). Webpagina’s maken vaak ook gebruik van een grid. Een grid op een webpagina kun je goed maken met behulp van een zogenaamde ‘flex-box‘.
Flex-box, de CSS methode voor flexibele pagina opmaak
Flex-box is een mooie, flexibele methode om blokken content (afbeeldingen en tekst) in een lay-out op jouw webpagina op te maken.
Instructievideo’s
- Intro: hoe te starten (04:57)
- Grid maken met
flex-boxtechniek (07:04) In dit filmpje maak je het flex-box systeem, de basis van deze opdracht! - Foto’s toevoegen en passend maken met
max-width(03:46) - Tekst toevoegen (taalvaardigheid) met achtergrond en padding (05:28)
- Beginkapitaal (05:02)
- Plaatje passend maken met
object-fit: cover;(01:54) - Monogram toevoegen aan je titels met
float(03:26) - Onderschrift bij afbeeldingen toevoegen met
hover(04:10) (voor de excellente studenten)
Opdracht: Grid lay-out (BO Ontwerpproces)
Maak een grid lay-out in een webpagina
Download hier een voorbeeldpagina
De opdracht is: maak een grid, vergelijkbaar met de grid-opdracht van Beroepsopdracht, en verwerk daar jouw beste productfoto’s in. Eén grid-blokje gebruik je voor jouw tekst van Taalvaardigheid. Deze tekst maak je op met een beginkapitaal en je deelt de tekst op in kopje(s) en alinea’s. Ook voeg je een streamer toe.
Pas de typo css declaraties toe en meerdere lettertypes van bijvoorbeeld Google Fonts die je hebt geleerd bij de vorige opdracht (songtekst).
HTML pagina
- Maak een webpagina met de gebruikelijke
<head>en<body>tags. (gebruik de template die je hierboven kan downloaden) - Plak alvast jouw Taalvaardigheid tekst in de <body> tag.
- Zet om de broodteksten een
<p>tag - Als je een streamer wil maken, zet je om jouw streamer een
<p>tag met een class<p class="streamer">Jouw streamer</p> - Zet jouw 6 beste productfoto’s in een image map. Natuurlijk bewerk je de afbeeldingen eerst met photoshop (webp, niet zwaarder dan 500KB, goed schoon-gesneden, etc.)
- Maak een nieuwe stylesheet en koppel die aan jouw HTML pagina
CSS pagina
- Volg de bovenstaande instructie video’s
- Gebruik de fonts van Google Fonts of Adobe Fonts.
Heb je een serif (schreef) gekozen voor jouw titel en een sans-serif (schreefloos) voor jouw broodtekst? Zoek een serif en sans-serif font op Google Fonts of Adobe fonts die op jouw gekozen fonts bij VRMG lijken.
Tip: Doe de instructievideo’s niet letterlijk na. Bedenk je eigen grid en voer die uit.
Planning
- Week 5: filmpje 1 en 2 – opzetten grid
- Week 6: filmpjes 3 en 4 – tekst en foto’s toevoegen
- Week 7: filmpje 5, 6 en 7 – tekst opmaak en monogram
Filmpje 8 is voor de excellente student