Multimedia
Les 4

Wat is CSS?

Doelstelling

1. We beginnen met het kiezen van de juiste karakterset.
2. We leren hoe je bestanden upload naar Cloud9.
3. Het wordt tijd om de bloemlezing pagina op te maken. Opmaak betekent drie dingen:
   1. de juiste terminologie voor opmaak leren gebruiken;
   2. elementen positioneren:
      1. wireframe / mockup maken;
      2. wireframe / mockup omzetten naar html;
      3. een tabel van de te positioneren elementen maken;
   3. elementen aankleden met kleur, vorm, achtergrond, animatie enz.
4. In deze les leren we hoe je de verschillende onderdelen, body, header, article, aside, section enz. op de pagina positioneert.

Leerpad

1. Hoe je een karakterset instelt zie je in het filmpje De juiste karakterset instellen met behulp van de meta tag. Info hierover op meta tag.
2. Hoe je een bestand uploadt naar Cloud9 zie je in het filmpje Een bestand uploaden naar Cloud9.
3. Denken in sjablonen
   1. Een HTML sjabloon voor een detail artikel type pagina.
   2. Wireframes en/of mockups tekenen
   3. Filmpje: Wireframes tekenen in Word
4. CSS
   1. Algemeen
   2. Wat is CSS?
   3. Hoe schrijf ik het?
   4. CSS Selectoren
   5. Inline en block elementen
   6. Het CSS box model
   7. meten in CSS
   8. CSS - blokgrootte
   9. CSS - blokgrootte beperken
   10. CSS eigenschap: overflow
   11. CSS eigenschap: margin
   12. CSS eigenschap: padding
   13. CSS werken met kleur
   14. CSS eigenschap: border
   15. Natuurlijke flow van elementen op een pagina
   16. HTML elementen postioneren

Oefening

1. We vertrekken van de oefening Pagina header en hoofdnavigatie. Vind je op CodePen.

   See the Pen Pagina-header en hoofdnavigatie by Jef Inghelbrecht (@jef) on CodePen.

   We kopiëren de Marsman pagina naar Marsman - indeling. Als je vertrekt van de CodePen pagina moet je wel de src van de afbeelding aanpassen. Op die manier houden we de versies bij. En we gaan verder met marsman.html
2. We maken een extern CSS bestand met de naam app.css in de map css.
3. We linken het bestand.
4. We maken een lijst met te positioneren elementen.
5. Met de universele selector stellen we de border-size in op border-box en alle kantlijnen en opvulsels op 0.
6. body en html % instellen
7. We beginnen met de containers te plaatsen en grootte te geven.
8. Vervolgens positioneren we de tekstelementen en geven er een grootte aan.
9. Bloemlezing Marsman is het resultaat.
10. Bekijk het filmpje: HTML elementen positioneren

Opdracht

1. Vertrek van de Marsman pagina en maak een gelijkaardige pagina met je eigen onderwerp (artikel).
2. Maak een wireframe voor je eigen pagina.
3. Stel een tabel op met de te postioneren elementen en geeft de positie, hoogte, breedte en witruimte op.
4. Maak een extern css bestand met de naam app.css en plaats dat in een map met de naam css (hoofdlettergevoelig!).
5. Maak de stijlregels aan overeenkomstig de waarden in de tabel met de te positioneren elementen.