Qu'est-ce que LessonUp
Rechercher
Canaux
Connectez-vous
S'inscrire
‹
Revenir à la recherche
6 HTML: Lay-outs
Webdesign: Lay-outs
Roland Kok
ro.kok@kw1c.nl
1 / 18
suivant
Slide 1:
Diapositive
Cette leçon contient
18 diapositives
, avec
diapositives de texte
.
Commencer la leçon
Partager
Imprimer la leçon
Éléments de cette leçon
Webdesign: Lay-outs
Roland Kok
ro.kok@kw1c.nl
Slide 1 - Diapositive
Herhaling: Hoe werkt CSS?
Slide 2 - Diapositive
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 3 - Diapositive
Van ontwerp naar HTML & CSS
Slide 4 - Diapositive
Ontwerp
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 blokken.
Slide 5 - Diapositive
Ontwerp
Slide 6 - Diapositive
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt
Wireframe
Ontwerp
Slide 7 - Diapositive
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 8 - Diapositive
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>
1. Grove blokken:
Slide 9 - Diapositive
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
<aside>
<article>
<nav>
<div>
<header>
<footer>
<header>...</header>
<nav>...</nav>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
2. Waar nodig
opbreken in
kleinere blokken:
Slide 10 - Diapositive
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>
Dus eerst: Grove blokken
Slide 11 - Diapositive
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>
Daarna: Waar nodig
opbreken in
kleinere blokken
<header>
...
</header>
<nav>...
</nav>
<article>...</article>
<aside>...</aside>
<footer>...
</footer>
Slide 12 - Diapositive
CSS grid
layout in HTML & CSS
Slide 13 - Diapositive
Voorbeeld: Layout
Slide 14 - Diapositive
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 15 - Diapositive
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 16 - Diapositive
Afstand tussen grid-items
Drie mogelijkheden:
grid-column-gap
grid-row-gap
grid-gap
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Slide 17 - Diapositive
Aan de slag:
Fundament: HTML & CSS (A2)
* t/m hoofdstuk 5 (Werken met blokken)
* vraag 1 van hoofdstuk 5.12
W3Schools
* CSS Grid Layout Module (
w3schools.com/css/css_grid.asp
)
Slide 18 - Diapositive
Plus de leçons comme celle-ci
Webdesign (6: CSS Grid)
Janvier 2023
- Leçon avec
15 diapositives
Informatica
Middelbare school
havo, vwo
Leerjaar 4,5
Webdesign - Les 3 (23/24): CSS
Septembre 2023
- Leçon avec
24 diapositives
Informatica
Middelbare school
havo, vwo
Leerjaar 4
html/css - van ontwerp naar website
Octobre 2022
- Leçon avec
15 diapositives
Informatica
Middelbare school
vwo
Leerjaar 4
HTML en CSS - van ontwerp naar website
Septembre 2022
- Leçon avec
14 diapositives
Informatica
Middelbare school
vwo
Leerjaar 4
HTML + CSS les 4: selectors + margins + ontwerp + flexbox
Août 2023
- Leçon avec
41 diapositives
Informatica
WO
Studiejaar 4
HTML + CSS les 5: ontwerp website + Trello + devtools + PO
Août 2023
- Leçon avec
22 diapositives
Informatica
WO
Studiejaar 4
HTML & CSS: Blokkendoos
Octobre 2024
- Leçon avec
34 diapositives
Informatica
Middelbare school
havo, vwo
Leerjaar 4
9. Online zetten & Header / Footer in PHP
Février 2022
- Leçon avec
26 diapositives
Software Developer [WEB_A]
MBO
Studiejaar 1