Workshop week 6
In deze workshop gaan we met CSS en XHTML een nieuwsbericht opmaken, Hierbij richten we ons in het bijzonder op positionering en schaalbaarheid.Voor deze workshop kan je natuurlijk weer gebruik maken van de lesbrief.
- Gebruik in eerste instantie de XHTML ‘tag’ namen om stijlen toe te kennen
<p> </p>
(p { background: lime;}
) - Gebruik classes als uitzondering op de regel!
<p class=”geel”> </p>
(.geel { background: yellow;}
) - Maak nuttig gebruik van overerving
- Je kunt ieder XHTML element positioneren!
- zet alle maten om naar em's voor proportioneel schalen
Opdracht
Het nieuwsbericht bestaat uit verschillende onderdelen;
- een datum
- een kop
- een supkop
- een foto
- tekstblok
- een menu (vorige, volgende en overzicht)
Het artikel moet proportioneel te schalen zijn (Ctrl +/-) en het artikel moet gecentreerd binnen het browser window blijven wanneer je het window van grote veranderd.
Denk eraan dat de XHTML tag's bedoeld zijn om de tekst(data) te structureren en niet voor opmaak doeleinden. Zorg dus eerst dat de XHTML valid is en begin daarna aan de CSS.
De beschikbare tijd zal als volgt worden ingedeeld:
- ±10min – Uitleg opdracht
- ±20min – Maak de XHTML voor het nieuwsbericht
- ±10min – Maak een schets van hoe je de elementen wilt positioneren
- ±30min – Schrijf de CSS
- ±10min – Zet de maten om naar em's
1. de opdracht
2. Maak de XHTML voor het nieuwsbericht
Hierbij gaat het niet zozeer om de inhoud van het bericht. Besteed hier dan ook niet al te veel tijd aan.
Als je denkt klaar te zijn met de XHTML dan valideer je de code eerst, voordat je aan de CSS begint.
Het is handig dat je weet wat je moet doen voordat je begint. Maak hiervoor een schetsje van de situatie waarin je aangeeft hoe je om gaat met de positionering.
- static
- relative
- absolute
- fixed
Werk top down. Denk aan de boom structuur van de HTML. Maak gebruik van de overerving.
5. Zet de maten om naar em's
Bekijk wat de font-size is binnen een element (let op de overerving) en pas dan de gebruikte maten aan.
Om het werk klassikaal te kunnen bespreken moet het op de server staan.
http://student.cmd.hro.nl/0123456/jaar1/herfst/fed/workshop6/...
Upload alle mappen en documenten die van belang zijn en test online of alles werkt!