PositioneringHTML 3 - Rätt sak på rätt plats

Agenda

• Gårdagens lösningar!

• Dagens tillämpningar!

• Vilka attribut använder vi!

• Float, clear, display!

• Praktisk genomgång

1994 - 1997

• Frames introducerades av Netscape!

• Bra för dåtidens uppkoppling!

• Tolkas oregelbundet av webbläsare!

• Scrolls i innehållet

http://www.angelfire.com/super/badwebs/

1997 - 2002

• Tabeller för positionering!

• Relativt enkelt att programmera!

• Tolkas oregelbundet av webbläsarna!

• Scrolls i innehållet!

• Lidande användbarhet!

• Väldigt tunga sidor, tog lång tid att ladda!

• Svårt att förändra och uppdatera

http://www.hotdesign.com/seybold/index.html

2002 - 2010

• CSS för positionering!

• Använd <div> Kaspslar in innehållet </div>!

• Tolkas mer konsekvent av webbläsarna!

• Anpassningsbar i höjdled!

• Snabbare rendering och lättare webbplatser!

• Lättare att förändra och strukturera om!

• Öppnar upp för mobilanpassning

2010 - ???

• HTML 5, i princip samma sak!

• <div> kapslar in innehållet </div>!

• Nya positionerings-taggar: <header><footer><section> o.sv.!

• Märker upp innehåll med en tillhörighet!

• Google har / kommer implementera detta i deras sökalgoritm!

• Bra för användbarheten; speciellt över olika enheter

HTML 4 vs HTML 5

Förhållanden

• Visar relationen mellan olika objekt!

• Parent, child och siblings (first, second, o.s.v.)!

• Förälder, barn och syskon!

Förarbete

• Skissa upp en layout, blueprint!

• Diskutera avstånd och marginaler!

• Hur fungerar uppdateringar?!

• Sparar massa tid och programmeringskrångel!

• Viktiga saker över vecket!

HTML / CSS

• HTML:!

• id eller class som selektorer!

• Flera klasser / id:s per element!

• CSS:!

• # för id och . för class!

• Glöm inte!

• Indrag!

• <!-- kommentar HTML --> och /* kommentar CSS */!

http://wikicode.wikidot.com/system:default-css

CSS-Attribut

• Width och height skrivs med px eller em!

• Min-height och max-width!

• Margin: 0 10px 15px 20px;!

• Margin-top, margin-right, margin-bottom, margin-left!

• Padding: 20px 15px 10px 0;!

• Top, right, bottom, left !

Block VS Inline

Span eller Div?!

Width: 100px, border 1px, padding: 10px, margin 10px?

Position

• Position: static, relative, absolute och fixed!

• Z-index: sorterar i z-led!

• Float: right eller left!

• Clear: right, left eller both!

• Visa exempel!

• Overflow: hidden, scroll, visible (både i x- och y-led)!

• Är bara nödvändig vid fixerad höjd och sidled!

• Visa exempel !

Wrapper

• Centrera innehållet i webbläsaren!

• Bra för användbarheten!

• Spelar ingen roll hur bred skärm webbplatsen visas på!

• <div id=”wrapper”> Allt innehåll </div>!

• Sätt en bredd på #wrapper!

• Margin: 0 auto;!

Praktisk Genomgång

Läshänvisningar

• Föreläsning: Formulär och Tabeller!

• Tabeller: 203 - 228 i HTML och CSS-boken!

• Formulär: 243 - 313 i HTML och CSS-boken!

!