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.

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:
  1. Wat is belangrijk? Staat dat duidelijk in beeld?
  2. Gebruik je herkenbare patronen?
  3. Ontwerp alleen voor wat je nodig hebt
Wireframe
Ontwerp

Slide 7 - Tekstslide

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

Slide 8 - Tekstslide

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:

Slide 9 - Tekstslide

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:

Slide 10 - Tekstslide

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

Slide 11 - Tekstslide

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>

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