Chap3 Lesson 5 design css

In class:
log in at the computer and lessonup. 
1 / 10
suivant
Slide 1: Diapositive
MediawijsheidMiddelbare schoolmavo, havo, vwoLeerjaar 2

Cette leçon contient 10 diapositives, avec quiz interactif et diapositives de texte.

time-iconLa durée de la leçon est: 50 min

Éléments de cette leçon

In class:
log in at the computer and lessonup. 

Slide 1 - Diapositive

welcome back!
Don't forget your portfolio!
= typingclub :)
1 april: level 400

Slide 2 - Diapositive

Let's start
Make sure you have scrimba at the ready. 

Slide 3 - Diapositive

Status update
A
Ik heb hulp nodig
B
Ik ben bij met al m'n lessen en kan verder werken
C
Ik loop achter maar kan zelf verder

Slide 4 - Quiz

Opmaak: css 
Je hebt verschillende manieren om je opmaak op je website te bepalen.
Intern
extern 
Inline

Slide 5 - Diapositive

Begin
1. klik in je scrimba op de drie puntjes bij explorer aan de linkerkant.
2. klik op new file
3. voer een titel in die zonder spaties aan elkaar zit en eindigt op .css
bijvoorbeeld mijnstijl.css

Slide 6 - Diapositive

Voeg toe
Voeg de volgende zin toe in de header van je site.
Hierbij is rel=href gehele bestandsnaam zoals die ook in de zijkant staat van je document. 

Slide 7 - Diapositive

Orde houden: Div
Met een tabel kan je de verschillende onderdelen van een pagina redelijk positioneren. Helaas
heeft een tabel een aantal beperkingen.
De inhoud bepaalt dus de grootte, niet de tabel.
Deze, en andere, problemen zijn op te lossen door het gebruik van div’s. ‘Div’ staat voor
division. Je deelt hiermee je pagina op in verschillende delen die een vaste grootte en plaats
(kunnen) hebben, wel of geen scrollbalk, aparte lettertypen, ….
De opmaak (stijl) van een div gebeurt bijna altijd met css.
Omdat er meestal meerdere div’s op één pagina staan, krijgen ze allemaal een aparte naam. Zo kan je ze uit elkaar houden. 
(‘id’ of ‘class’).
Voorbeeld:
<div id="div1" style="position:absolute; left:100px; top:200px;
width:300px; height:300px; background-color:#ffff00; overflow:auto;">
Hier staat de inhoud van de div
</div>
Je ziet dat de volledig opmaak in het attribuut “style” staat.

Slide 8 - Diapositive

Nu je dit hebt gezien komt de uitdaging
https://www.w3schools.com/css/css_howto.asp 
Ga naar de bovenstaande link en probeer zaken uit van CSS.
Heb je vragen stel ze gerust. Begin bij bij de simpele dingen als achtergronden, text en nav menu.
Wanneer je vastloopt laat je dit weten. 

Slide 9 - Diapositive

Waar moet je je nu op voorbereiden?
Dat je met behulp van al deze lessen een site kan bouwen. 
Wanneer je de laag steeds moeilijker maakt en meer toe kan voegen zal je cijfer hoger worden. 

Slide 10 - Diapositive