Wat is LessonUp
Zoeken
Kanalen
Inloggen
Registreren
‹
Terug naar zoeken
6 HTML: Lay-outs
Webdesign: Lay-outs
Roland Kok
ro.kok@kw1c.nl
1 / 18
volgende
Slide 1:
Tekstslide
In deze les zitten
18 slides
, met
tekstslides
.
Start les
Bewaar
Deel
Printen
Onderdelen in deze les
Webdesign: Lay-outs
Roland Kok
ro.kok@kw1c.nl
Slide 1 - Tekstslide
Herhaling: Hoe werkt CSS?
Slide 2 - 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 3 - Tekstslide
Van ontwerp naar HTML & CSS
Slide 4 - Tekstslide
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 - Tekstslide
Ontwerp
Slide 6 - Tekstslide
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt
Wireframe
Ontwerp
Slide 7 - 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 8 - 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>
1. Grove blokken:
Slide 9 - Tekstslide
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 - 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>
Dus eerst: Grove blokken
Slide 11 - 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>
Daarna: Waar nodig
opbreken in
kleinere blokken
<header>
...
</header>
<nav>...
</nav>
<article>...</article>
<aside>...</aside>
<footer>...
</footer>
Slide 12 - Tekstslide
CSS grid
layout in HTML & CSS
Slide 13 - Tekstslide
Voorbeeld: Layout
Slide 14 - 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 15 - 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 16 - Tekstslide
Afstand tussen grid-items
Drie mogelijkheden:
grid-column-gap
grid-row-gap
grid-gap
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Slide 17 - Tekstslide
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 - Tekstslide
Meer lessen zoals deze
Webdesign (6: CSS Grid)
Januari 2023
- Les met
15 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4,5
Webdesign - Les 3 (23/24): CSS
September 2023
- Les met
24 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4
html/css - van ontwerp naar website
Oktober 2022
- Les met
15 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML en CSS - van ontwerp naar website
September 2022
- Les met
14 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML + CSS les 4: selectors + margins + ontwerp + flexbox
Augustus 2023
- Les met
41 slides
Informatica
WO
Studiejaar 4
HTML + CSS les 5: ontwerp website + Trello + devtools + PO
Augustus 2023
- Les met
22 slides
Informatica
WO
Studiejaar 4
HTML & CSS: Blokkendoos
Oktober 2024
- Les met
34 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4
9. Online zetten & Header / Footer in PHP
Juni 2024
- Les met
26 slides
Software Developer [WEB_A]
MBO
Studiejaar 1