Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se
1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna labora&on finns det en bildfil som du kan ladda ner i en zip-fil. Länk &ll zip-filen finns på labora&onens webbsida. Då du packat upp zip-filen, får du en mapp som innehåller bildfilen. Skapa en mapp kallad u2 i din mapp dold i mappen webbsidor, som du skapade i labora&on 1. De filer 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 bildfilen i den. pics är mappen med bilden som du laddar ner från labbens sida. Övriga filer är de som du skapar i labora&onen.
2a. Skapa en HTML-fil Ä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-filerna och en CSS-fil som ger en grunds&l för dem. Nu skapar du först en mall för sidorna. Denna mall ska också finnas med i din redovisning av uppgi9 U2. Skapa en HTML-fil 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 består av 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 nav main footer h1 för huvudrubrik och h3 för underrubrik. Länkarna för sidorna läggar du i en ul-lista. Ta med länkar för de tre frågorna samt mallen. 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.) Lägg in di[ namn och datum. Lägg texten direkt i footer, utan p-element.
3. Skapa en CSS-fil Alla sidor ska s&lsä[as med samma CSS-fil. Skapa en CSS-fil. 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-filen korrekt. I HTML-filen (template.htm) lägger du in en link-tagg för a[ ta in CSS-filen. Testa i webbläsaren och se a[ sidan har den bakgrundsfärg du ange[, så a[ du vet a[ CSS-filen länkas in korrekt. Skapa tre kopior av HTML-filen för fråga D &ll F och namnge filerna 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-filen 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 en gemensam s&l för h2 och h3. h3 Skapa även 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 finns 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 finns 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å fliken för filuppladdning. Dra din CSS-fil &ll rutan i mi[en eller klicka på knappen Bläddra och peka ut din fil. 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 fick 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-fil som du skapade för frågan. Delfrågor Två frågor om kravspecifika&on och Garre[s utvecklingsmodell. D D1: I en kravspecifika&on är det vik> 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 finns (dvs namnen som finns på planen i figuren 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.