TOETS HTM22 >HTM22 MEDIAVORMGEVEN INTERACTIEF MEDIADESIGN INTERACTIVE. Naam student:... Studenten nummer:... URL waar mijn werk te vinden is:

Transcriptie

1 Naam student:... Studenten nummer:... URL waar mijn werk te vinden is:...glr-imd.nl/... >HTM22 MEDIAVORMGEVEN INTERACTIEF MEDIADESIGN INTERACTIVE TOETS HTM22

2 TOETS HTM Download eindtoets-bestanden.zip van POLS en maak de volgende website. Het betreft 1 pagina. Bouw deze pagina zo exact mogelijk na. Maten kun je aflezen van het wireframe. De website is qua formaat geoptimaliseerd voor ipad (1024 x 768). De linkjes in het menu moeten werken maar als link mag je een telefoonhekje (#) opnemen. De nadruk van deze toets ligt op positionering van de div-elementen, het bouwen en opmaken van een tabel en het bouwen en werkend maken van het formulier. Een en ander is al aangeleverd: er is al een HTML bestand, een gekoppeld CSS bestand en de afbeeldingen zijn aangeleverd. Echter, er moet nog zeer veel gebeuren. De hele opmaak moet gedaan worden en er moet een reset CSS gekoppeld worden aan het document. De plaatsing van de menu-items en het formulier hoeven niet pixel nauwkeurig geplaatst te worden maar je werkt moet wel lijken op het voorbeeld! WAAR ZAL DE DOCENT OP LETTEN? Je site lijkt op het voorbeeld (niet pixel nauwkeurig). Je site staat in je Z-schijf in een mapje genaamd HTM22-toets. Je site staat online op Je hebt een reset CSS gekoppeld. Je site opgebouwd uit (genestte) div-elementen. De positionering van je div-elementen is zodanig dat het bij diverse beeldschermbreedten uitziet zoals hieronder. Het formulier werkt met behulp van het formto .php script. Je hebt een tabel gebruikt om je formulier uit te lijnen. Je HTML en CSS zijn netjes. Maximaal te behalen 7 punten EXTRA PUNTEN VOOR: Roll over van de menu items Een gele focus op de invoervelden wanneer je hier wat in wilt typen. GLR SEPTEMBER 2014 Y. DE BRUIN 2

3 Als de site verkleind of vergroot wordt dan blijft deze in het midden van het scherm gecentreerd. Tot op het moment dat de minimale breedte is bereikt (de stippellijntjes). Hier links zie je twee screenshots met de teksten en opties die in het formulier gebruikt worden. GLR SEPTEMBER 2014 Y. DE BRUIN 3

4 Links: browser venster is verkleind Rechts: screenshot bij een nog verder verkleind browser venster. GLR SEPTEMBER 2014 Y. DE BRUIN 4

5 HULP BIJ HET MAKEN VAN DEZE OPDRACHT STIJLEN, KLEUREN EN FONTS Basisfont: Heading 1: Header: Container: Kleur focus: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial, sans-serif; tekstgrootte 14px, line-height 140%, tekstkleur #000. Hetzelfde als het basisfont maar met tekstgrootte 136px en tekstkleur #9e1b5f. 150 pixels hoog pixels breed. 100% hoog. #e8f2ad GLR SEPTEMBER 2014 Y. DE BRUIN 5