Wat is LessonUp
Zoeken
Kanalen
aiToolsTab
Beta
Inloggen
Registreren
‹
Terug naar zoeken
Webdesign (6: CSS Grid)
Webdesign: CSS Grid
Antje Roestenburg
a.roestenburg@minkema.nl
1 / 15
volgende
Slide 1:
Tekstslide
Informatica
Middelbare school
havo, vwo
Leerjaar 4,5
In deze les zitten
15 slides
, met
tekstslides
.
Lesduur is:
30 min
Start les
Bewaar
Deel
Printen
Onderdelen in deze les
Webdesign: CSS Grid
Antje Roestenburg
a.roestenburg@minkema.nl
Slide 1 - Tekstslide
Van ontwerp naar HTML & CSS
Slide 2 - Tekstslide
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt
Wireframe
Ontwerp
Slide 3 - Tekstslide
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
Je hebt je layout,
maar hoe begin je nou?
In (ongeveer) 4 stappen:
Juiste html schrijven
Header styling
Content en navigatie styling
Footer styling
Slide 4 - Tekstslide
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
<header>
<div>
<footer>
<header>
...
</header>
<div>...
</div>
<footer>...
</footer>
Grove blokken
Slide 5 - Tekstslide
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
<header>
<article>
<footer>
<nav>
<aside>
<div>
Waar nodig
opbreken in
kleinere blokken
<header>
...
</header>
<nav>...
</nav>
<article>...</article>
<aside>...</aside>
<footer>...
</footer>
Slide 6 - Tekstslide
Hoe werkt CSS?
Een stylesheet maak je in een
eigen bestand
.
Je slaat het bestand op met de naam
style.css
.
Je
verwijst in al je HTML-pagina's
naar de stylesheet.
(zie ook
w3schools.com/css
)
Slide 7 - Tekstslide
Herhaling: Hoe werkt CSS?
Slide 8 - Tekstslide
Herhaling: Opmaak definiëren met selectors
Tag selector (HTML tag)
h2
{
color: blue;
font-style: italic;
}
ID selector (een per pagina)
#footer {
color: red;
}
Class
selector (meerdere)
.article {
background-color: #cccccc;
}
Slide 9 - Tekstslide
Pagina opbouw
Bij het ontwerpen van een website moet je vaak denken in de vorm van tabellen.
Als je een ruwe schets maakt van een website dan bestaat een website vaak uit verschillende basiselementen.
Slide 10 - Tekstslide
Layout
Slide 11 - Tekstslide
HTML
CSS
<div id="grid-container">
<div id="kop">
De kop
</div>
<div id="midden">
Het midden
</div>
<div id="voet">
De voet
</div>
</div>
#kop {
grid-area: kop;
}
#midden {
grid-area: midden;
}
#voet {
grid-area: voet;
}
#grid-container {
display: grid;
grid-template-areas:
'
kop
'
'
midden
'
'voet';
}
Slide 12 - Tekstslide
Grid areas
Grid container
#kop {
grid-area:
kop
;
}
#kopafbeelding {
grid-area:
kopafbeelding
;
}
#midden {
grid-area:
midden
;
}
#middenlinks {
grid-area:
links
;
}
#middenrechts {
grid-area:
rechts
;
}
#voet {
grid-area:
voet
;
}
#grid-container {
display: grid;
grid-template-areas:
'
kop kop
kopafbeelding
'
'
links
midden
rechts
'
'
voet voet voet
';
}
kop
kop
kopafbeelding
links
midden
rechts
voet
voet
voet
Slide 13 - Tekstslide
Afstand tussen grid-items
Drie mogelijkheden:
grid-column-gap
grid-row-gap
grid-gap
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Slide 14 - Tekstslide
Aan de slag:
Kijk t/m video
4
Maak t/m opdracht
24
in WebDesign met HTML & CSS
v 0.4
(stel evtl vragen in het Q&A document)
Verzamel ideen (teksten en plaatjes) voor je Website
Slide 15 - Tekstslide
Meer lessen zoals deze
hoofdstuk 3 les 1
September 2024
- Les met
16 slides
DP4
Middelbare school
vmbo b, k, t
Leerjaar 4
OP Z'N KOP B.V.
June 2024
- Les met
69 slides
door
PIONIER!
Kunstzinnige oriëntatie
Basisschool
Groep 7,8
PIONIER!
Ouderavond Parijs
January 2018
- Les met
22 slides
door
Dé Schoolreisgids
Aardrijkskunde
Middelbare school
vmbo t, mavo
Leerjaar 4
Dé Schoolreisgids
Weven Voorbereidingsles
October 2022
- Les met
20 slides
door
Ontdek kunst en erfgoed in Amersfoort
Kunstzinnige oriëntatie
Basisschool
Groep 5,6
Ontdek kunst en erfgoed in Amersfoort
Weven Voorbereidingsles
November 2024
- Les met
20 slides
door
Ontdek kunst en erfgoed in Amersfoort
Kunstzinnige oriëntatie
Basisschool
Groep 5,6
Ontdek kunst en erfgoed in Amersfoort
Digi-doener! | De mens van top tot teen
September 2021
- Les met
8 slides
door
Stichting FutureNL
Oriëntatie op jezelf en de wereld
Informatievaardigheden
+1
Basisschool
Groep 4,5
Stichting FutureNL
Ouderavond Berlijn
May 2019
- Les met
17 slides
door
Dé Schoolreisgids
Duits
Middelbare school
vmbo, mavo, havo, vwo
Leerjaar 1-6
Dé Schoolreisgids
Ouderavond Barcelona
July 2018
- Les met
16 slides
door
Dé Schoolreisgids
Culturele en kunstzinnige vorming
Middelbare school
vmbo, mavo, havo, vwo
Leerjaar 1-6
Dé Schoolreisgids