html/css - van ontwerp naar website

Van ontwerp naar html
  • Je kan een semantisch correcte html structuur bouwen met een header, footer en content elementen
  • Je kan deze elementen visueel positioneren zodat het overeen komt met het ontwerp dat je op papier hebt gemaakt

1 / 15
next
Slide 1: Slide
InformaticaMiddelbare schoolvwoLeerjaar 4

This lesson contains 15 slides, with interactive quiz and text slides.

time-iconLesson duration is: 45 min

Items in this lesson

Van ontwerp naar html
  • Je kan een semantisch correcte html structuur bouwen met een header, footer en content elementen
  • Je kan deze elementen visueel positioneren zodat het overeen komt met het ontwerp dat je op papier hebt gemaakt

Slide 1 - Slide

Wanneer moet je je PvA inleveren?

Slide 2 - Open question

Layout

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

Zo kan een schets eruit zien

Slide 3 - Slide

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 4 - Slide

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>
Stap 1.1

Opbreken grove blokken

Slide 5 - Slide

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>
Stap 1.2

Waar nodig de blokken opbreken in blokken

Slide 6 - Slide

Stap 1.2

Dit ziet er in de praktijk zo uit

Slide 7 - Slide

Stap 1.3

Lelijke witte randjes weghalen

Slide 8 - Slide

Stap 2

Header stylen. In dit geval: wat hoogte geven

Slide 9 - Slide

Stap 3.1

Content en navigatie. Als eerste zorgen we ervoor dat deze blokken naast elkaar komen in plaats van onder elkaar. 

Slide 10 - Slide

Stap 3.2

We geven het nav en article element een width. vw staat voor ViewWidth wat breedte van het scherm betekent. 20vw is dus 20% van de breedte van het scherm. 

Slide 11 - Slide

Stap 4

Footer positioneren door deze fixed te positioneren. De footer mag ook wat meer hoogte gebruiken. En wat doet position:fixed eigenlijk?

Slide 12 - Slide

5 minuten regel
Loop je vast? Probeer het zelf in 5 minuten op te lossen. Lukt dat niet, vraag dan om hulp.

Geen hulp in de buurt, ga dan verder met iets anders.

Slide 13 - Slide

Opdracht
Verdeel je ontwerp in minimaal 3 blokken en gebruik je tekst om zoveel mogelijk content te vullen. Gebruik de elementen uit de voorgaande voorbeelden en
  • ..gebruik <h1>, <h2> voor titels
  • ..gebruik <p> voor paragrafen (tekst)
  • ..gebruik <nav> voor navigatie
  • ..gebruik <ul> en <li> voor lijsten
timer
5:00

Slide 14 - Slide

Aan de slag
Html vullen met content:
  • article: het verhaal: tekst, plaatjes, filmpjes etc..
  • navigatie: alle knoppen
  • header/footer: titel, plaatje etc..
  • aside: ??

Slide 15 - Slide