Labora&on 4 CSS och validering – övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik © 2015 Rune Körnefors [email protected] 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna labora&on ﬁnns det en bildﬁl 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 som innehåller bildﬁlen. Skapa en mapp kallad u2 i din mapp dold i mappen webbsidor, som du skapade i labora&on 1. De ﬁler du sedan skapar i labora&on 4 &l 6, lägger du i mappen u2. Skapa där en mapp pics och lägg den nedladdade bildﬁlen i den. pics är mappen med bilden som du laddar ner från labbens sida. Övriga ﬁler är de som du skapar i labora&onen. 2a. Skapa en HTML-‐ﬁl Även i uppgi9 U2 ska du skapa tre webbsidor med svar på varsin fråga. Det ges en fråga i var och en av de tre labora&onerna L4 &ll L6. Frågorna benämns Fråga D &ll Fråga F och de har också beskrivande underrubriker, på samma sä[ som Fråga A &ll Fråga C i &digare uppgi9/labora&oner. I U2 ska sidorna också s&lsä[as med CSS. I L4 skapas grundstrukturen, i L5 skapas layout och i L6 görs en responsiv design. I denna labora&on (L4) skapar du alltså HTML-‐ﬁlerna och en CSS-‐ﬁl som ger en grunds&l för dem. Nu skapar du först en mall för sidorna. Denna mall ska också ﬁnnas med i din redovisning av uppgi9 U2. •  Skapa en HTML-‐ﬁl och kalla den template.htm. •  Strukturera koden i HTML, så a[ du har med följande delar: mall •  header: e[ sidhuvud med frågans rubrik •  nav: navigeringslänkar för a[ gå mellan de olika sidorna •  main: innehåll där en del består av frågans text och en annan del di[ svar •  footer: en sidfot med t.ex. di[ namn och datum. fortsä7ning i övning 2b … 2b. Innehåll på sidan För a[ ha något a[ s&lsä[a i de kommande övningarna, lägger du först in en nonsenstext eller "Lorem ipsum"-‐text: h[p://www.lipsum.com/ •  header •  h1 för huvudrubrik och h3 för underrubrik. •  nav •  Länkarna för sidorna läggar du i en ul-‐lista. • 
Ta med länkar för de tre frågorna samt mallen. •  main •  E[ element (t.ex. sec>on eller div) för frågan. • 
• 
Lägg in e[ id-‐a[ribut med lämpligt namn i star[aggen. Innehållet ska vara e[ textstycke och en ol-‐lista med delfrågor. •  Resten av main ska sedan vara di[ svar, men lägg nu in fem textstycken med "lorem ipsum" och några rubriker. • 
Använd h2 för den första rubriken och h3 för de övriga. •  Lägg också in en tabell med fem rader. • 
• 
Använd th i den övre raden och td i de övriga. Ta inte med något border-‐a[ribut i table-‐taggen. (S&l med kantlinjer ska du sedan göra med CSS.) •  footer •  Lägg in di[ namn och datum. • 
Lägg texten direkt i footer, utan p-‐element. 3. Skapa en CSS-‐ﬁl Alla sidor ska s&lsä[as med samma CSS-‐ﬁl. •  Skapa en CSS-‐ﬁl. •  Lägg in en s&l för body, där du anger en s&l för en bakgrundsfärg. •  De[a för a[ du enkelt ska kunna se a[ du sedan länkar in CSS-‐ﬁlen korrekt. •  I HTML-‐ﬁlen (template.htm) lägger du in en link-‐tagg för a[ ta in CSS-‐ﬁlen. •  Testa i webbläsaren och se a[ sidan har den bakgrundsfärg du ange[, så a[ du vet a[ CSS-‐ﬁlen länkas in korrekt. •  Skapa tre kopior av HTML-‐ﬁlen för fråga D &ll F och namnge ﬁlerna så som du namngav dem i dina navigeringslänkar. •  Testa igen i webbläsaren, för a[ se a[ länkarna i navigeringen fungerar och a[ s&lmallen används på alla sidor. D E F mall 4. Grunds&l I CSS-‐ﬁlen börjar du med en grunds&l för några vanliga element i sidornas kod. •  body •  Lägg t.ex. in s&l för bakgrundsfärg, texhärg och val av typsni[. •  Begränsa också bredden &ll t.ex. 800 pixlar. •  h2, h3 •  Både för rubrikerna h2 och h3, lägger du in en annan texhärg och kursiv text eller annan valfri s&l. Du ska alltså ha samma s&l för h2 och h3. •  h3 •  Skapa en egen s&l för h3 och lägg in en kantlinje ovanför h3-‐rubrikerna med följande kod för h3: border-‐top:1px solid #999; padding-‐top:10px; 5. S&l för sidhuvud Skapa nu en s&l för sidhuvudet. •  header •  Lägg in bilden bg.jpg som bakgrundsbild. •  Sä[ höjden på header &ll 140px (samma höjd som bilden). •  Bilden är bredare än sidans innehåll, så lägg även in background-‐posi>on:center; för a[ centrera bilden. •  Rubrikerna h1 och h3 i header •  Sä[ padding &ll lämpligt värde (t.ex. 10px) för a[ få e[ litet avstånd från kanten &ll texten. •  Den s&l du redan har för h3 (från föregående övning) gäller även här. Du får ändra den &digare s&len, så a[ den endast gäller för rubriker i main. Lägg där &ll main både före h2 och h3. •  Lägg sedan &ll s&l för h1 och h3 i header där du väljer lämplig texhärg och eventuellt annan s&l. •  Om du vill justera avståndet mellan rubrikerna, dvs h1 och h3, får du experimentera med olika värden på margin och padding (eller egentligen margin-‐top, margin-‐bo7om, padding-‐top och padding-‐bo7om). Du kan börja med a[ sä[a dem &ll 0 och sedan öka &ll de värden du vill ha. 6. S&l för sidfot Nu ska du skapa en s&l för sidfoten. •  footer •  Välj valfri färg på bakgrund och text. •  Centrera texten med text-‐align. •  Välj också lämpligt värde (t.ex. 10px) på padding. 7. S&l för navigering Nu är det dags a[ s&lsä[a navigeringslänkarna. Du ska ändra listan, så a[ det blir en rad med länkar. •  nav ul •  Ta bort punkterna före varje rad. •  Sä[ padding &ll 0, så a[ inskjutningen i vänsterkanten tas bort. •  nav ul li •  Ändra display, så a[ alla li-‐element hamnar in&ll varandra på samma rad. •  Lägg &ll en marginal i högerkanten för varje li, för a[ få lämpligt avstånd mellan länkarna. •  nav a •  Ta bort understrykningen. •  Lägg in en padding på några pixlar. •  Lägg in en bakgrundsfärg och texhärg för a:link och a:visited. •  Lägg in en annan bakgrundsfärg (och eventuellt texhärg) för a:hover och a:ac>ve. 8. S&l för frågerutan Rutan för frågan ska nu få rundade hörn och en skugga. •  Referera &ll rutan med hjälp av det id du lagt in i taggen. •  Lägg in en annan bakgrundsfärg. •  Lägg &ll en kantlinje, t.ex. en kant på 4px, solid och lite mörkare färg. •  Lägg &ll rundade hörn med border-‐radius. •  Experimentera med olika värden, för a[ få den rundning du vill ha. •  Lägg också &ll en padding, så a[ inte texten hamnar precis in&ll kanten. •  Gör rutan smalare och centrera den. •  Sä[ bredden &ll 80%. •  Lägg &ll margin:0 auto; för a[ centrera rutan. •  Lägg på en skugga •  Lägg på en skugga i höger-‐ och underkant med box-‐shadow. •  Välj valfria värden på storlek och färg. 9. S&l för tabellen Nu ska tabellen s&lsä[as. •  th, td •  Börja med a[ ge th och td en kantlinje med border:1px solid #666; •  Lägg också in e[ lämpligt värde på padding, för a[ få en inre marginal i tabellcellerna. •  table •  För a[ slå ihop cellerna, så det inte blir något avstånd mellan dem, lägger du för table in följande s&l: border-‐collapse:collapse; •  tr •  Lägg in s&l för vit bakgrundsfärg, så a[ raderna i tabellen blir vita. •  th •  Lägg in s&l för en annan bakgrundsfärg och texhärg för th. •  table •  Lägg också en skugga på table, på samma sä[ som du gjorde för frågerutan i föregående övning. •  För a[ skuggan under tabellen ska få plats, får du också lägga &ll margin-‐bo7om, med e[ värde som är lite större än skuggan. 10. Pseudoklasser Det ﬁnns olika sä[ a[ välja ut vilka element som en s&l ska gälla för. Då man ange[ en tagg (eller id eller class) kan man också lägga på en pseudoklass. Du har redan använt det i länkarna med :link, etc. Nu ska du också använda en pseudoklass för a[ välja varannan rad i tabellen. •  Jämna rader i tabellen •  Skriv en s&l för tr:nth-‐child(even) { } •  Lägg in en annan bakgrundsfärg i s&len, dvs mellan klamrarna. 11. Lägga &ll innehåll Med pseudoklasserna :before och :aPer, kan man lägga &ll e[ innehåll i början eller slutet av e[ element. Det blir alltså före eller e9er det innehåll som ﬁnns i elementet i HTML-‐koden. •  Lägg &ll tre streck före varje h3-‐rubrik i main. •  I s&len använder du content, för a[ lägga &ll innehållet. •  main h3:before {content: "-‐-‐-‐ ";} 12. Validera CSS-‐koden För a[ kontrollera a[ CSS-‐koden stämmer med språkets regler, ska du validera koden. •  Använd validatorn på h[p://jigsaw.w3.org/css-‐validator/#validate_by_upload •  Se &ll a[ du är på ﬂiken för ﬁluppladdning. •  Dra din CSS-‐ﬁl &ll rutan i mi[en eller klicka på knappen Bläddra och peka ut din ﬁl. •  Klicka sedan på knappen Granska. •  Om koden är korrekt, får du en grön ruta som säger a[ du inte har några fel. •  I annat fall får du en lista med felmeddelanden. •  Rä[a i så fall dess fel och validera om, &lls allt är OK. •  Om du inte ﬁck några felmeddelanden i valideringen, kan du prova med a[ införa något fel i din CSS-‐kod och validera om. Då ser du hur felmeddelandena kan se ut. 13. Fråga D – Garre[s utvecklingsmodell Fråga D ska läggas in och besvaras i den HTML-‐ﬁl som du skapade för frågan. D Delfrågor Två frågor om kravspeciﬁka&on och Garre[s utvecklingsmodell. D1: I en kravspeciﬁka&on är det vik&gt a[ kraven skrivs, så a[ de är mätbara. Vad menas med det? Ge e[ exempel. D2: Beskriv Garre[s modell i en tabell med en rad per plan i modellen. I första kolumnen anger du namn på planet. I den andra kolumnen anger du namn på de delar som ﬁnns (dvs namnen som ﬁnns på planen i ﬁguren för modellen). I tredje kolumnen ger du en mycket kort beskrivning av vad som görs på planet (en eller två meningar). Då du lagt in frågan och di7 svar på sidan, öppnar du den i webbläsaren och kontrollerar om s>len stämmer eller om du behöver justera något. Dessa frågor är avvägda mot vad du nu också ska arbeta med i uppgi9 U3, där du gör olika delar enligt modellen parallellt med U2 och övriga moment i kursen. Se veckoplanen och Gan[-‐
schemat. på kursens webbplats. Omfa[ning på D1 ska vara e[ par textstycken, fem &ll &o rader text på webbsidan. Omfa[ning på D2 är tabellen med korta texter i rutorna.