CSS - Årstider

Du ska formatera denna sida med hjälp av css. Det ska bli fyra sidor; vår, sommar, höst och en vintersida.

layouten gör du med div

Det kommer att bli 4 htm-filer och 4-css filer samt de bilder du väljer att använda dig av. Bilderna ska du ha fotat själv eller så kan du ta stockbilder på tullangen.se eller deviantart.com . Varför kan du inte bara "googla" efter bilder? jo det vet du vell! Upphovsrätten, du kommer att får redovisa sidan och den ska läggas upp på maclabbet.se.
Börja med att deklarera dina html-taggar i css-filen, de <taggar> jag använt mig av för att skapa detta html dokument är följande; <body>, <h1>, <h2> <h3><p> <länkarna>.

I html dokumentet så ska du bara ändra på hur texten och länkarna ska placeras på sidan, de ska du lägga in i <div> så du kan skapa fyra olika layouter. Men låt annars html koden vara som den är och lägg bara in de olika styckena text och länkar i dina div;ar så att får den layout du vill ha. Om du har glömt hur man gör eller bara vill friska upp minnet lite så kolla på de tidigare exemplen vi gjorde >> se exempel

Idén till denna övning hittade jag på http://www.csszengarden.com/ och så gjorde jag den lite lättare och inte så avancerad men ändå tillräckligt svår för att vara till nytta och skapa en förståelse för css och hur man kan använda det. Du kan alltid gå till Webdesingskolan och se på mer exempel, tips och hjälp hur du ska göra, den versionen som ligger på skolans server är mer komplett än den som ligger ute på nätet.

Gör sidan så fin du kan och slarva inte utan lägg ner tid och arbete på detta, det kommer att löna sig att lägga ner lite arbete så att sidan bli bra och att du också lär dig hur man skapar sidor med hjälp av divar och css.

En sak som fortfarande gäller, är att hålla ordning på din katalog/fil struktur, jobba mot c:\ som vanligt och lägg dina html-filer, css-filer och bilder på ett sätt så att det funkar och går lätt att lägga ut det på Maclabbet. En sak till all formatering ska ske i den externa css-filen, tex.(min_stil1.css) eller vad du valt att kalla den. så inga stilar får deklareras i direkt i html-filen. vid redovisning så tittar vi även i kod-läget och i css-filen.
Lycka till med övningen / Kennet

Tullängen - Sidan som är lite bättre och lite roligare än andra sidor

Spara ner den oformaterade texten / koden. (txt-fil)

OBS! självklart ska din sida se bra och lika dan ut i både Internet Explorer och i Mozilla Firefox

Vårsidan Sommarsidan Höstsidan Vintersidan