Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HT14 - F5

1e708b2afb8622d5c5f070a94a3425a9?s=47 Anton Tibblin
September 17, 2014

HT14 - F5

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

September 17, 2014
Tweet

More Decks by Anton Tibblin

Other Decks in Education

Transcript

  1. LAYOUT MED CSS

  2. Dagens föreläsning • Vad vi gått igenom hittills i kursen

    • Att designa en layout • Massor med demo!
  3. Frågor kring det vi gått igenom hittils? • HTML •

    Doctype <!doctype html> • Teckenuppsättning <meta charset=”utf-8”> • Taggar <h1>, <p>, <ul>, <li>, <i>, <b> • Tabeller <table><tr><td></td></tr></table> • Formulär <form action=”#” method=”get”> • CSS • Selektorer h1, .class, #id • Egenskaper font-size:12px; color:red;
  4. Översikt HTML-dokument Vad innehåller sidan? Metadata om sidan Sidans teckenkodning

    Sidans titel Sidans innehåll HTML, rotelementet
  5. Tabeller I webbläsaren

  6. Länkar Var länken leder Länk-element Länkens namn Extern länk Länk

    inom webbplatsen Intern länk
  7. Formulär

  8. CSS • Att formge en webbplats • Olika klädsel till

    samma innehåll • Hur hittar man det man vill ändra på?
  9. Boxar

  10. POSITIONERA SAKER

  11. Positionering • Static • Relative • Fixed • Absolute •

    Absolute/Fixed ger möjligheten att lägga element ”på varandra” genom egenskapen ”z-index”
  12. Demo positionering

  13. LAYOUT

  14. Hur skapar man en layout?

  15. Vi behöver alltså • Sidhuvud <header> • Navigation <nav> •

    Innehåll <div> • Sidfot <footer>
  16. Kan vara bra att ha… • En box (<div>) som

    omsluter hela sidan.
  17. Vad behöver vi veta? • Egenskapen ”float” • Gör så

    att man kan placera block-element bredvid varandra • Float:left; Flyttar elementet till vänster • Float:right; Flyttar elementet till höger
  18. Var börjar vi? • Demo!