Download to read offline
More Related Content
Similar to HT17 - DA156A - Layout med HTML & CSS
HT17 - DA156A - Layout med HTML & CSS
- 1.
- 2. Dagens föreläsning • Snabbrepetition • Element för positionering • Positionering av element • Static • Relative • Absolute • Fixed • Layout med CSS • Exempel, exempel & exempel
- 3. Frågor kring detvi 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ållersidan? Metadata om sidan Sidans teckenkodning Sidans titel Sidans innehåll HTML, rotelementet
- 5. Länkar Var länken lederLänk-elementLänkens namn Extern länk Länk inom webbplatsen Intern länk
- 6.
- 7.
- 8. CSS • Att formgeen webbplats • Olika klädsel till samma innehåll • Hur hittar man det man vill ändra på?
- 9. Boxar Total bredd fören box är: Content (width) + Padding + Border. Margin är sedan marginalen från boxen
- 10.
- 12. Elementet <div> “The <div>tag defines a division or a section in an HTML document.”
- 13.
- 14. Positionering • Visar elementeni den ordning de skrivs i HTML-koden • Static (standard) • Relative • Visar elementen i relation till förälder-elementet eller dokumentet • Absolute • Fixed
- 15. Position: static • Ärstandard-positionen för HTML-element • Elementen visas i den ordning som de skrivs i (det som står först i HTML-dokumentet visas först) • Egenskaper som ej används med position: static • left, right, top, bottom • z-index
- 16. Position: relative • Elementenvisas i den ordning som de skrivs i (det som står först i HTML-dokumentet visas först) • Egenskaper som kan användas med position: relative • left, right, top, bottom • Avstånd från elementets normala plats på webbsidan • z-index • Avgör om elementet ska ligga över/under andra element
- 17. Position: absolute • Specificerarett elements position relativt mot • Förälder-elementet (som har ”position: relative”) • Eller om detta ej finns, till dokumentet
- 18. Position: fixed • Specificerarett elements position relativt mot • Hela dokumentet • Positionen påverkas inte när man skrollar, utan ligger ”fastklistrad” på samma plats på skärmen
- 19. Att lägga elementbredvid varandra • 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 • Gäller • postion: static • position: relative
- 20.
- 21.
- 23.
- 24. Andra, ”bättre”, elementför layout <header> Definierar ett sidhuvud för dokument/artikel <nav> Definierar en navigation <main> Definierar huvudinnehåll i ett dokument <section> Definierar en sektion i ett dokument/artikel <aside> Definierar innehåll som skiljer sig (t.ex. ”sidebar”) <footer> Definierar en sidfot för dokument/artikel
- 25. Hur skapar manen layout?
- 26. Vi behöver alltså •Sidhuvud <header> • Navigation <nav> • Innehåll <main> • Sidfot <footer>
- 27. Kan vara braatt ha… • En box (<div>) som omsluter hela sidan.
- 28.
- 29.
- 30.
- 32.