Newsflash

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.

Opdracht

Het nieuwsbericht bestaat uit verschillende onderdelen;

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:

  1. ±10min – Uitleg opdracht
  2. ±20min – Maak de XHTML voor het nieuwsbericht
  3. ±10min – Maak een schets van hoe je de elementen wilt positioneren
  4. ±30min – Schrijf de CSS
  5. ±10min – Zet de maten om naar em's

1. de opdracht

Nieuwsflash

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.

3. Maak een schets van hoe je de elementen wilt positioneren

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.

4. Schrijf de CSS

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!