html/css - van ontwerp naar website

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

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
  

Wanneer moet je je PvA inleveren?

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

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>

Stap 1.1

Opbreken 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>

Stap 1.2

Waar nodig de blokken opbreken in blokken

Stap 1.2

Dit ziet er in de praktijk zo uit

Stap 1.3

Lelijke witte randjes weghalen

Stap 2

Header stylen. In dit geval: wat hoogte geven

Stap 3.1

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

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. 

Stap 4

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

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.

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

Aan de slag

Html vullen met content:

• article: het verhaal: tekst, plaatjes, filmpjes etc..
• navigatie: alle knoppen
• header/footer: titel, plaatje etc..
• aside: ??