Webdesign (6: CSS Grid)

• Informatica
• Middelbare school
• havo, vwo
• Leerjaar 4,5

Webdesign: CSS Grid

Antje Roestenburg

[e-mail]

Van ontwerp naar HTML & CSS

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>

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>

Waar nodig

opbreken in 

kleinere blokken

<header>...</header>

<nav>...</nav>

<article>...</article>

<aside>...</aside>

<footer>...</footer>

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)

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;

}

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.

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:

• 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