6 HTML: Lay-outs

Webdesign: Lay-outs

Roland Kok

[e-mail]

Herhaling: Hoe werkt CSS?

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;

}

Van ontwerp naar HTML & CSS

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.

Ontwerp

Tips:

1. Wat is belangrijk? Staat dat duidelijk in beeld?
2. Gebruik je herkenbare patronen?
3. Ontwerp alleen voor wat je nodig hebt

Wireframe

Ontwerp

Layout

Tips:

1. Wat is belangrijk? Staat dat duidelijk in beeld?
2. Gebruik je herkenbare patronen?
3. Ontwerp alleen voor wat je nodig hebt!

Je hebt je layout,
maar hoe begin je nou?

In (ongeveer) 4 stappen:

1. Juiste html schrijven
2. Header styling
3. Content en navigatie styling
4. Footer styling

Layout

Tips:

1. Wat is belangrijk? Staat dat duidelijk in beeld?
2. Gebruik je herkenbare patronen?
3. Ontwerp alleen voor wat je nodig hebt!

<header>

<div>

<footer>

<header>...</header>

<div>...</div>

<footer>...</footer>

1. Grove blokken:

Layout

Tips:

1. Wat is belangrijk? Staat dat duidelijk in beeld?
2. Gebruik je herkenbare patronen?
3. 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:

Layout

Tips:

1. Wat is belangrijk? Staat dat duidelijk in beeld?
2. Gebruik je herkenbare patronen?
3. Ontwerp alleen voor wat je nodig hebt!

<header>

<div>

<footer>

<header>...</header>

<div>...</div>

<footer>...</footer>

Dus eerst: Grove blokken

Layout

Tips:

1. Wat is belangrijk? Staat dat duidelijk in beeld?
2. Gebruik je herkenbare patronen?
3. 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>

CSS grid

layout in HTML & CSS

Voorbeeld: Layout

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';

} 

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

Afstand tussen grid-items

Drie mogelijkheden:

• grid-column-gap 
  
• grid-row-gap
• grid-gap

.grid-container {

  display: grid;

  grid-gap: 50px 100px;

}

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)