Webstandards w6

510 views

Published on

html

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
510
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webstandards w6

  1. 1. Les 06: Paginaopmaak<br />1<br />
  2. 2. Front-end development<br />Agenda van vandaag<br /><ul><li>ToetsHoofdstuk 7
  3. 3. Besprekenhuiswerk
  4. 4. Presentatie over lesstof, met
  5. 5. voorbeelden
  6. 6. gelegenheidomvragentestellen of tediscussieren</li></ul>2<br />
  7. 7. Front-end development<br />Paginaopmaak:<br />wat<br />waar<br />css<br />2<br />
  8. 8. Front-end development<br />Page Layout: grid layout<br />wat<br />waar<br />css<br />2<br />
  9. 9. Front-end development<br />Page Layout: template layout<br />wat<br />waar<br />css<br />2<br />
  10. 10. Front-end development<br />Fixed-sizevs.Elasticvs.Liquidlayout<br />2<br />
  11. 11. Front-end development<br />Voor en nadelen<br />2<br />
  12. 12. Front-end development<br />Eenbeetjevloeibaar (liquid-fixed hybride) <br />2<br />
  13. 13. Front-end development<br />Eenbeetjeelastisch (elastic-liquid hybride) <br />2<br />
  14. 14. Front-end development<br />Box model<br />content content content content conte<br />nt content content content content content content content content contentcontent content content content conte<br />nt content content content content co<br />2<br />
  15. 15. Front-end development<br />Boxmodel: colapsingmagrins<br />margin-top:2em<br />padding-top:1em<br />padding-botton:1em<br /> border-bottom:1px<br />margin-botton:2em<br />margin-top: 2em<br /> border-top:1px<br />padding-top:1em<br />padding-botton:1em<br />margin-botton:2em<br />2<br />
  16. 16. Front-end development<br />Rekenen met het box model<br />30px+ 422px + (348px) = 800px<br />30px+ 422px + (variabel, = 80%<br /> afhankelijk van resolutie)<br />1px+10px+ 400px +10px+1px = 422px<br />1px+1em+ 40em +1em+1px = (variabel, afhankelijk van browser instellingen)<br />2<br />
  17. 17. Front-end development<br />Een box vormgeven(kan op velemanieren)<br />2<br />
  18. 18. Front-end development<br />Blokkennaastelkaar(floating boxes)<br />2<br />
  19. 19. Front-end development<br />Lesopdracht:<br />Download de html,<br />Maak de volgende layout<br />met wat <div>’jes, met breedte, hoogte <br />en een achtergrondkleur:<br />Vervolgens kun je doorgaan met de volgende layouts:<br />2<br />
  20. 20. Front-end development<br />Is width:45% + padding:20px kleinerdan 50% ? (column-content-div)<br />2<br />
  21. 21. Front-end development<br />Footer (staatnognietonderaan)<br />2<br />
  22. 22. Front-end development<br />Footer herpositioneren(op eerstevrijeregel)<br />2<br />
  23. 23. Front-end development<br />Kolommenopmaakzondertabellen(Faux-columns)<br />Bron: http://www.alistapart.com/articles/fauxcolumns/<br />2<br />
  24. 24. Front-end development<br />Kolommenopmaakzondertabellen(Faux-columns)<br />2<br />
  25. 25. Front-end development<br />Overflow<br />2<br />
  26. 26. Front-end development<br />Allekolommeneven hoog (handigtruckje)<br />2<br />
  27. 27. Front-end development<br />Logische vs. visuelevolgorde<br />2<br />
  28. 28. Front-end development<br />Visuelevolgordewijzigen<br />2<br />
  29. 29. Front-end development<br />Lesopdracht:<br />Download de html en pas de css aan zodat de visuele vogorde als volgt wordt:<br />
  30. 30. Front-end development<br />Volgende week:<br /><ul><li>Tabellen, waarvoortabellenbedoeldzijn
  31. 31. meer over de positionering van xHTMLelementen</li></ul>Huiswerkvoor week 7: <br /><ul><li> week opdracht: week 6
  32. 32. lezenhoofdstuk 6</li></ul>2<br />

×