Labora&on 6 CSS och responsiv webbdesign – övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik © 2015 Rune Körnefors [email protected] 1. Ladda ner arbetsdokument Till övningarna i denna labora&on ﬁnns det eP par bildﬁler som du kan ladda ner i en zip-‐ﬁl. Länk &ll zip-‐ﬁlen ﬁnns på labora&onens webbsida. Då du packat upp zip-‐ﬁlen, får du en mapp med bildﬁlerna. FlyPa över bilderna &ll mappen pics i din mapp för u2. Du arbetar sedan vidare med de ﬁler som du ha: i labora&on L4 och L5. I slutet av övningarna kommer Fråga F och du lägger då in den och diP svar i HTML-‐ﬁlen för den frågan. Däre:er summerar du det hela och sammanställer din redovisning av uppgi: U2. 2. Bilderna Innan vi kommer in på övningarna i responsiv design, ska du lägga in bilderna på din webbsida. mall •  Öppna ﬁlen med din mall (template.htm). •  Bilden rpw.png lägger du in mellan två textstycken. •  Bilden smartphone.png lägger du direkt under h3-‐taggen för en rubrik. Under img-‐taggen ska det endast vara eP textstycke och sedan nästa rubrik. Så du får kanske ﬂyPa om textstyckena. •  Lägg också in eP id-‐aPribut i img-‐taggen för den andra bilden. •  Öppna sedan CSS-‐ﬁlen och skriv en s&l för den andra bilden. •  Referera &ll bildens id och lägg in en s&l som gör aP bilden ﬂyter &ll höger. •  Bilden kommer då även in på nästa avsniP, så lägg in clear för h3-‐rubrikerna i main. Egentligen krävs det nu endast för rubriken under bilden, men lägg det på alla rubriker. Det kan ju på andra sidor läggas in bilder ovanför andra rubriker. •  Så lägg alltså in clear:both; för main h3. Du bör redan ha en s&l för main h3, så lägg det i den. •  I den nya s&len för bilden (för diP id) lägger du också in en liten marginal (t.ex. 10px) och begränsa bildens bredd &ll 120px. 3. Meta-‐tagg för viewport För aP inte mobiltelefonen ska försöka skala om webbsidan och visa den fulla layouten förminskad, lägger du in en meta-‐tagg för viewport i alla HTML-‐ﬁler. •  Öppna alla dina HTML-‐ﬁler i mappen u2 och lägg in följande tagg i head-‐delen: <meta name="viewport" content="width=device-‐width, ini?al-‐scale=1.0"> 4. Flexibel layout Första steget mot en responsiv design är aP skapa en ﬂexibel bredd på sidan och kolumnerna. Det ska bli en "elas&sk layout" (ﬂuid grid) där bredden blir smalare när fönstret blir smalare. •  Ändra width &ll max-‐width i s&len för #wrapper. •  Testa i webbläsaren. •  Ta fram verktyget där du kan dra i kanten på sidan och sam&digt se vilken storlek den har. I Firefox ﬁnns det i menyn Verktyg-‐>Webbutvecklare-‐>Responsiv designvy. •  Dra i högerkanten och gör sidan smalare. •  Ändra kolumnernas width &ll procentvärden. •  nav •  Bredden är 140px utav 800px, så det blir 140/800 = 17.5%, som du skriver i width. •  Det ﬁnns inga margin eller padding i vänster-‐ eller högerkant, så inget mer behöver ändras i nav. I annat fall hade även margin och padding fåP räknas om &ll procent. •  main •  margin-‐leJ blir densamma som bredden på nav, dvs 17.5% •  Det ﬁnns inget width, utan bredden anpassar sig automa&skt e:er det utrymme som ﬁnns kvar. Men det ﬁnns en padding på 10px. DePa kan man i dePa fall ha kvar som 10px, om man vill ha den marginalen även då fönstret blir smalare. Annars räknas det om &ll procent, men behåll nu 10px. 5. Flexibla bilder Den stora bilden hamnar utanför kolumnen, då fönstret görs smalare. Bilderna ska förminskas, så aP de blir maximalt 100% av &llgängligt utrymme. •  Lägg &ll en s&l för img och säP max-‐width &ll 100%. •  DePa gäller alltså inte bara den stora bilden, utan alla bilder på sidorna, även om du nu endast kommer se resultatet i den stora bilden. 6. Fontstorlek Då sedan media queries införs ska vi prova oss fram och göra fönstret smalare, för aP se vid vilken bredd vi behöver göra en förändring. Men dePa beror på vilken storlek vi har på texten. Har vi en fontstorlek på 12px, kan vi kanske dra ner fönstrets bredd &ll 450px, innan texten i navigeringslänkarna inte får plats på en rad. Har vi istället en fontstorlek på 16px, inträﬀar dePa vid en fönsterbredd på 530px. Det kan alltså bli olika för olika användare, beroende på vad de har inställt i sin webbläsare. Därför ska vi nu fastställa fontens storlek i CSS-‐ﬁlen, så aP det blir lika överallt. Om man vill kan man sedan ta bort fonstorleken igen och räkna om bredden i media queries &ll enheten em. Men just nu använder vi pixel, e:ersom sidans bredd anges i pixel, då vi förändrar storleken i verktyget. Så för aP slippa en massa omräkningar mellan olika enheter nu, använder vi enheten px. •  Lägg &ll font-‐size:12px; i s&len för body. •  Om det redan var den storleken som var inställd i din webbläsare ser du ingen skillnad, men annars kanske du nu ser aP texten blir mindre. 7. Första media query För aP hiPa gränsen för den första media queryn får du i webbläsaren ta fram verktyget Responsiv designvy och dra högerkanten åt vänster, &lls du tycker aP layouten behöver förändras. Du har troligen inte exakt samma innehåll som jag har på mina sidor, så du kommer kanske fram &ll andra gränser än de jag här anger. Använd då de värden du själv kommer fram &ll. Jag kommer ner &ll c:a 480px innan navigeringsmenyn blir för trång, men jag har ganska korta e&kePer i länkarna och vill förbereda för aP även kunna ha lite längre, så jag säPer gränsen på 640px. Då ska layouten göras om, så aP sidan blir endast en kolumn, med navigeringen på en rad ovanför innehållet. •  Inför en media query som gäller för fönster med en maximal bredd på 640px (eller den gräns du kom fram &ll). I media queryn gör du följande: •  nav •  Ändra ﬂoat, så aP navigeringen inte ligger &ll vänster. Ändra också width, så aP det blir hela sidans bredd. •  För li och a ändrar du så aP länkarna hamnar in&ll varandra på en rad. •  Du kan också behöva justera margin och padding för en del element. •  Om du vill aP alla länkar ska ha samma bredd, säPer du display &ll inline-‐block i s&len för a-‐elementen. Där anger du också den bredd du vill ha på width. Du kan också centrera texten. •  main •  Ta bort inskjutningen av vänsterkanten. 8. Andra media query Vid 360px får inte navigeringen plats på en rad. Beroende på vilken bredd du har på dina länkar i navigeringen, kan du komma fram &ll eP annat värde. Så prova och använd det värde du kommer fram &ll. Navigeringen ska nu ändras &ll länkar som ligger under varandra. •  Inför en media query för 360px (eller diP värde). I media queryn gör du: •  nav •  Ändra display &ll block igen, både för li och a. Om du i förra övningen la in en bredd med width för a, säPer du nu width &ll auto. •  För hela nav samt ul och li i nav säPer du både margin och padding &ll 0, så aP navigeringslänkarna hamnar precis under bilden i sidhuvudet och fyller ut hela sidans bredd. •  I s&len för a-‐elementet lägger du på en kantlinje med border:3px outset #900; •  Beroende på vilken bakgrundsfärg du har på dina länkar, kan du behöva ändra &ll någon annan färg i kantlinjen än den som anges ovan. 9. Tredje media query Den tredje media queryn vill jag införa vid 280px. Då ska bilden som ﬂyter &ll höger om texten ändras, så aP den inte längre är ﬂytande. •  Inför en media query för 280px. I media queryn gör du: •  Referera &ll det id du har i img-‐taggen. •  Ändra ﬂoat &ll none. 10. Tabellen Jag har en ganska liten tabell på mallsidan (template.htm), så där behöver egentligen inte tabellen ändras, utan den får hela &den plats. Men tabellen på sidan för Fråga D är lite större och kan behöva förändras. Jag väljer aP lägga in denna förändring i en media query vid 340px. En vanlig förändring av en tabell är aP man presenterar de olika tabellcellerna under varandra, så det blir en tabell med en kolumn. •  Inför en media query för 340px. I media queryn gör du: •  table •  Ta bort skuggan, genom aP säPa box-‐shadow &ll none. •  SäP också bredden &ll 100%. •  th, td •  SäP display &ll block, så aP tabellcellerna blir varsin rad. •  tr •  För aP avskilja de olika delarna, kan du lägga in en tjockare underkant under varje tr med: border-‐boOom:2px solid #333; 11. Sidhuvudet Sidhuvudet fungerar ganska bra som det är. Bakgrundsbilden är centrerad och med mo&vet som ﬁnns i bilden fungerar det bra. Men du kan också prova aP ändra så aP bilden vänster-‐ eller högerjusteras, för aP se skillnaden. •  DePa gör du inte i någon media query, utan ändra direkt i s&len för header. •  Ändra s&len background-‐posi?on &ll leJ och studera hur det blir i webbläsaren för olika bredd på sidan. •  Ändra sedan &ll right och se hur det blir. •  Ändra sedan &llbaks &ll center eller behåll leJ eller right, vilket du vill ha. Då fönstret blir smalt, kan sidhuvudet se lite stort ut, så i en media query ska du förminska bilden och göra header lägre. •  Lägg in dePa i den första media queryn. •  header •  SäP höjden &ll 100px. •  Lägg också in s&len background-‐size:auto 100px; •  Då säPs även höjden på bilden &ll 100px och bredden anpassas automa&skt. 12. Validera CSS-‐koden För aP kontrollera aP din CSS-‐kod är korrekt enligt språkets regler, validerar du den på samma säP som i labora&on 4 och 5. •  Använd validatorn på hPp://jigsaw.w3.org/css-‐validator/#validate_by_upload 13. Fråga F – Navigering Fråga F ska läggas in och besvaras i den HTML-‐ﬁl som du skapade för frågan. F Delfrågor GarreP tar upp navigering i kapitel 6 och nämner olika typer av navigering. Förklara följande två, som är ganska lika varandra. Beskriv vad det är och ge exempel, gärna genom aP hänvisa &ll webbplatser där det används. F1: Supplementary naviga&on. F2: Courtesy naviga&on. Då du lagt in frågan och diO svar på sidan, öppnar du den i webbläsaren och kontrollerar om s?len stämmer eller om du behöver justera något. OmfaPning skavara några rader text per delfråga. 14. Publicera och testa i mobilen Publicera dina sidor i Web Publishing i FirstClass. Använd an&ngen FirstClass klientprogram eller eP FTP-‐program. •  Du gör på samma säP som i uppgi: U1. •  Lägg upp mappen u2 i mappen dold. Du kan dra upp hela mappen på en gång. •  På ingångssidan i din porvolio (index.htm) skapar du en länk &ll sidan för fråga D i u2. •  Byt ut index.htm i Web Publishing. •  Öppna din webbporvolio i webbläsaren på adressen hOp://www.fc.lnu.se/~anvid där anvid är diP eget användarid och testa aP alla länkar fungerar och aP sidorna ser ut som de ska. •  Om du har en smartphone, tar du också fram dina sidor på den och ser hur det blir där. Uppgi: U2 Då du nu genomfört labora&on 4 &ll 6 ska uppgi: 2 vara klar. Men för aP försäkra dig om aP du fåP med allt, går du igenom alla krav och kontrollerar dem mot dina sidor. Kraven ﬁnns dels i de allmänna kraven på uppgi:ssidan och dels i kraven för respek&ve del på sidorna för labora&on 4 &ll 6. Glöm inte bort aP också skicka in eP meddelande i mappen för U2 i kursmappen i FirstClass, så vi vet aP du redovisat uppgi:en.