Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se
1. Dokument i övningarna I denna labora&on finns inga filer ar ladda ner. Du arbetar nu vidare med den CSS-fil som du skapade i förra labora&onen. Då du testar i webbläsaren öppnar du HTML-filen med din mall (template.htm). mall I slutet av övningarna kommer Fråga E och du lägger då in den och dir svar i HTML-filen för den frågan.
2. Förändringar i HTML-filerna För ar kunna skilja på sidans innehåll och body som blir marginal, ska du införa yrerligare er element i HTML-koden. Lägg &ll er div-element med id="wrapper" som omger hela sidans innehåll. Div-elementets starragg ska alltså ligga direkt under starraggen för <body> och sluraggen ska ligga direkt ovanför sluraggen </body>. DeRa måste du lägga &ll i alla HTML-filer.
3. Förberedande kod En del element som används i HTML-koden för ar gruppera delar av koden kan ha förvalda värden ("deafult-värden") på margin och padding i webbläsaren. Dessa kan dock vara olika i olika webbläsare. Så för ar det inte ska ställa &ll något problem i layouten, börjar du med ar ta bort dessa marginaler. Följande lägger du in i början av din CSS-kod, före alla andra s&linställningar. Räkna upp elementen html, body och alla andra element som du har för layouten, dvs html, body, div, header, nav, main, sec9on, footer I s&len särer du margin och padding &ll 0. Har du även använt andra element, som t.ex. ar9cle och aside, tar du med dem också. Men ta inte med elementen för textstycken, rubriker, listor, etc., om du vill behålla de inbyggda marginalerna för dem. För ar öka chansen ar layouten ska fungera även i äldre webbläsare, som inte känner igen alla nya element i HTML5, räknar du upp dessa element och särer display &ll block, dvs header, nav, main, footer, sec9on {display:block;}
4. Centrera sidan Sidan ska nu centreras med hjälp av div-elementet med id="wrapper", som du la &ll i övning 2. #wrapper #wrapper {...} Ta bort width ur s&len för body och lägg istället in den i en s&l för #wrapper. Lägg även in margin:0 auto; i s&len, så ar elementet, och därmed sidans innehåll, centreras. Olika bakgrundsfärg i #wrapper och body Kopiera s&len för background-color från body och lägg in den i s&len för #wrapper. Ändra sedan bakgrundsfärgen i body &ll valfri färg (prova med svart, men välj vilken färg du vill). Du ska alltså ha kvar en s&l för background-color även i body. DeRa blir en färg på marginalen &ll vänster och höger om sidans innehåll.
5. Justera marginaler Navigeringen och texten i innehållet hamnar nu precis i kanten av bakgrundsfärgen i body. Du ska nu justera dera. Navigeringen ska skjutas &ll höger. DeRa kan göras på flera sär med margin-led eller padding-led i an&ngen nav eller ul i navigeringen. E>ersom det redan finns en s&l för nav ul, kan vi lägga &ll det där. Lägg in padding-led i s&len för nav ul och välj det värde du vill ha (t.ex. 15px). Hela innehållet i main ska få en marginal mellan texten och kantlinjen, main {...} så dera måste läggas in med padding. Lägg &ll en s&l för main och använd där padding med lämpligt värde (t.ex. 10px);
6. Layout i två kolumner Nu ska du dela upp layouten i två kolumner och lägga navigeringen &ll vänster om övrigt innehåll. nav Skapa en s&l för nav och lägg in float:led;. SäR också width &ll 140px; nav ul li Ändra display för li-elementen från inline &ll block. Lägg också in margin-bofom med lämpligt värde (t.ex. 25px), för ar få er avstånd mellan länkarna. main nav a nav Lägg in margin-led för main och sär värdet &ll 140px (samma värde som width för nav) Lägg &ll display:block; så ar länkarna fyller ut hela bredden för navigeringskolumnen. Egentligen blir det inte hela bredden för nav, e>ersom det finns marginaler med margin och padding i s&larna för ul och li. Om du vill skjuta hela navigeringsmenyn nedåt, lägger du in padding-top i s&len för nav. Prova t.ex. med er värde på 20px.
7. Sidfoten Nu ska du prova hur det blir med en sida, där innehållet endast är några rader. Höjden för innehållet (main) ska vara lägre än navigeringsmenyn. Skapa en kopia av dir malldokument (template.htm) och kalla den nya filen template2.htm. I main tar du bort frågan och allt annat innehåll, utom er textstycke. Öppna sidan i webbläsaren och se hur det ser ut. Sidfoten hamnar då för högt och navigeringsmenyn går ner under sidfoten. Skjut ner sidfoten. Lägg in clear:both; i s&len för footer. Då skrivs inte sidfoten ut, förrän både vänsteroch högerkolumn är klara. Testa både template.htm och template2.htm i webbläsaren, för ar se ar det ser OK ut.
8. Navigering &ll höger Du kan också prova ar lägga navigeringslänkarna i en kolumn &ll höger. nav Ändra led &ll right i s&len för float. main Ändra s&len margin-led &ll margin-right. Ändra &llbaks &ll vänster igen. Resterande övningar i denna och nästa labora&on förutsärer ar du har navigeringen &ll vänster.
9. Bakgrundsfärg för navigeringen Du har nu ingen bakgrundsfärg varken i nav eller main, så den bakgrundsfärg som syns är den som finns i #wrapper. Du ska nu lägga in en annan bakgrundsfärg i kolumnen för navigeringen. nav Lägg in en bakgrundsfärg i s&len för nav. Testa i webbläsaren. I template2.htm fyller färgen hela kolumnen, men ej i template.htm, där navigeringen är kortare än innehållet. Det går inte göra kolumnen längre, utan istället får du göra på följande sär: Lägg in den bakgrundsfärg som du har i #wrapper i s&len för main. Lägg in bakgrundsfärgen som du lagt i nav i s&len för #wrapper. I nav tar du bort s&len för bakgrundsfärg. Då syns där istället färgen du har i #wrapper. Testa i webbläsaren. Nu blir det bra i template.htm, men inte i template2.htm. Fyll ut kolumnen för main. Lägg &ll följande kod i CSS-filen: main:ader {content:""; display:block; clear:both;} Effekten är densamma som ar lägga in er br-element i slutet av main, fast istället för ar behöva göra det i varje HTML-fil, görs det här i CSS-filen.
10. Markering av sida i navigeringen Nu ska du lägga in en markering av en länk i navigeringen för ar visa vilken sida man är på. I HTML-filerna lägger du &ll er id-arribut. I filen template.htm lägger du &ll id="thispage" i a-taggen som har en länk &ll den sidan. Gör likadana &llägg i länkarna i de andra filerna. I filen för fråga D lägger du alltså &ll id-arributet i länken för sidan D, i filen för fråga E i länken för sidan E, etc. Så id-arributet ska endast finnas i en av länkarna. I CSS-filen lägger du in en s&l för #thispage. Lägg in en annan bakgrundsfärg och eventuellt andra inställningar som du vill göra. #thispage {...}
11. Validera CSS-koden För ar kontrollera ar din CSS-kod är korrekt enligt språkets regler, validerar du den på samma sär som i labora&on 4. Använd validatorn på hrp://jigsaw.w3.org/css-validator/#validate_by_upload
12. Fråga E HTML och CSS Fråga E ska läggas in och besvaras i den HTML-fil som du skapade för frågan. Delfrågor Två frågor om CSS och koppling mellan HTML och CSS med id och class. E E1: Vad menas med kaskad i CSS? Hur fungerar det? E2: I HTML-taggarna kan man ha arribut med id och class och sedan referera &ll dem i CSS-koden. Vad är skillnaden, när ska man använda id och när ska man använda class? Då du lagt in frågan och dif svar på sidan, öppnar du den i webbläsaren och kontrollerar om s9len stämmer eller om du behöver justera något. Endast frågorna och dina svar ska finnas på sidan. Övrigt innehåll som du hade i mallen, tar du bort på denna sida. OmfaRning ska vara några rader text per delfråga.