What is LessonUp
Search
Channels
AI tools
Beta
Log in
Register
‹
Return to search
Webdesign (6: CSS Grid)
Webdesign: CSS Grid
Antje Roestenburg
a.roestenburg@minkema.nl
1 / 15
next
Slide 1:
Slide
Informatica
Middelbare school
havo, vwo
Leerjaar 4,5
This lesson contains
15 slides
, with
text slides
.
Lesson duration is:
30 min
Start lesson
Save
Share
Print lesson
Items in this lesson
Webdesign: CSS Grid
Antje Roestenburg
a.roestenburg@minkema.nl
Slide 1 - Slide
Van ontwerp naar HTML & CSS
Slide 2 - Slide
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt
Wireframe
Ontwerp
Slide 3 - Slide
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 - Slide
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 - Slide
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 - Slide
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 - Slide
Herhaling: Hoe werkt CSS?
Slide 8 - Slide
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 - Slide
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 - Slide
Layout
Slide 11 - Slide
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 - Slide
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 - Slide
Afstand tussen grid-items
Drie mogelijkheden:
grid-column-gap
grid-row-gap
grid-gap
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Slide 14 - Slide
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 - Slide
More lessons like this
hoofdstuk 3 les 1
September 2024
- Lesson with
16 slides
DP4
Middelbare school
vmbo b, k, t
Leerjaar 4
OP Z'N KOP B.V.
June 2024
- Lesson with
69 slides
by
PIONIER!
Kunstzinnige oriëntatie
Basisschool
Groep 7,8
PIONIER!
Ouderavond Parijs
January 2018
- Lesson with
22 slides
by
Dé Schoolreisgids
Aardrijkskunde
Middelbare school
vmbo t, mavo
Leerjaar 4
Dé Schoolreisgids
Weven Voorbereidingsles
October 2022
- Lesson with
20 slides
by
Ontdek kunst en erfgoed in Amersfoort
Kunstzinnige oriëntatie
Basisschool
Groep 5,6
Ontdek kunst en erfgoed in Amersfoort
Weven Voorbereidingsles
November 2024
- Lesson with
20 slides
by
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
- Lesson with
8 slides
by
Stichting FutureNL
Oriëntatie op jezelf en de wereld
Informatievaardigheden
+1
Basisschool
Groep 4,5
Stichting FutureNL
Ouderavond Berlijn
May 2019
- Lesson with
17 slides
by
Dé Schoolreisgids
Duits
Middelbare school
vmbo, mavo, havo, vwo
Leerjaar 1-6
Dé Schoolreisgids
Ouderavond Barcelona
July 2018
- Lesson with
16 slides
by
Dé Schoolreisgids
Culturele en kunstzinnige vorming
Middelbare school
vmbo, mavo, havo, vwo
Leerjaar 1-6
Dé Schoolreisgids