HT14 - F5

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!