• Save
Webstandards w6
Upcoming SlideShare
Loading in...5
×
 

Webstandards w6

on

  • 492 views

html

html

Statistics

Views

Total Views
492
Views on SlideShare
492
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webstandards w6 Webstandards w6 Presentation Transcript

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