VT16 - DA355A - Layout med CSS
-
Upload
anton-tibblin -
Category
Education
-
view
190 -
download
0
Transcript of VT16 - DA355A - Layout med CSS
![Page 1: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/1.jpg)
Layout med CSS
![Page 2: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/2.jpg)
Dagens föreläsning
• Snabb repetition
• Element för positionering
• Positionering av element• Static
• Relative
• Absolute
• Fixed
• Layout med CSS
• Exempel, exempel & exempel
![Page 3: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/3.jpg)
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;
![Page 4: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/4.jpg)
Översikt HTML-dokument
Vad innehåller sidan?
Metadata om sidan
Sidans teckenkodning
Sidans titel
Sidans innehåll
HTML, rotelementet
![Page 5: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/5.jpg)
Länkar
Var länken lederLänk-element Länkens namn
Extern länk
Länk inom webbplatsen
Intern länk
![Page 6: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/6.jpg)
Tabeller
I webbläsaren
![Page 7: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/7.jpg)
Formulär
![Page 8: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/8.jpg)
CSS
• Att formge en webbplats
• Olika klädsel till samma innehåll
• Hur hittar man det man vill ändra på?
![Page 9: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/9.jpg)
Boxar
Total bredd för en box är: Content (width) + Padding + Border.Margin är sedan marginalen från boxen
![Page 10: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/10.jpg)
Element för layout
![Page 11: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/11.jpg)
Elementet <div>
• “The <div> tag defines a division or a section in an HTML document.”
![Page 12: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/12.jpg)
Andra, ”bättre”, element för layout
• <header> Definierar ett sidhuvud för dokument/artikel
• <nav> Definierar en navigation
• <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
![Page 13: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/13.jpg)
Positionera saker
![Page 14: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/14.jpg)
Positionering
• Visar elementen i den ordning de skrivs i HTML-koden• Static (standard)
• Relative
• Visar elementen i relation till förälder-elementet eller dokumentet• Absolute
• Fixed
![Page 15: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/15.jpg)
Position: static
• Är standard-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
![Page 16: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/16.jpg)
Position: relative
• Elementen visas 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
![Page 17: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/17.jpg)
Position: absolute
• Specificerar ett elements position relativt mot• Förälder-elementet (som har ”position: relative”)
• Eller om detta ej finns, till dokumentet
![Page 18: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/18.jpg)
Position: fixed
• Specificerar ett elements position relativt mot• Hela dokumentet
• Positionen påverkas inte när man skrollar, utan ligger ”fastklistrad” på samma plats på skärmen
![Page 19: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/19.jpg)
Att lägga element bredvid 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
![Page 20: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/20.jpg)
Demo positionering
![Page 21: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/21.jpg)
Layout
![Page 22: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/22.jpg)
Hur skapar man en layout?
![Page 23: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/23.jpg)
Vi behöver alltså
• Sidhuvud <header>
• Navigation <nav>
• Innehåll <div>
• Sidfot <footer>
![Page 24: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/24.jpg)
Kan vara bra att ha…
• En box (<div>) som omsluter hela sidan.
![Page 25: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/25.jpg)
Demo layout
![Page 26: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/26.jpg)
![Page 27: VT16 - DA355A - Layout med CSS](https://reader031.fdocuments.net/reader031/viewer/2022020103/58a4d3901a28ab480e8b724b/html5/thumbnails/27.jpg)
Egenskapen: box-sizinghttp://www.w3schools.com/cssref/css3_pr_box-sizing.asp