Götes Värdshus

Den examinerande uppgiften på det här momentet.

Mål för den här uppgiften; 


 Pseudoklasser, hover, visited, focus, active 
 Layout med hjälp av position och/eller floats. 
 HTML5 taggar för layout.

 

 


 

Så här ser Götes värdshus ut just nu.

Göta värdshus har en usel hemsida. Det vet ägaren om eftersom han har klantat ihop den själv. Han gillar färger och  stavar tyvärr som en kratta. Det är din uppgift att styra upp den så den passar för webben 2015. 
Han har upptäckt att sidan hamnar långt ner i Googles sökresultat. Det beror på några saker;

 

  1. Han använder föråldrade HTML-taggar (divitis) 
  2. Sidan är ful som stryk så få väljer att länka dit. 
  3. Den är överhuvudtaget inte layoutad, han har bara lagt in lite content huller om buller. 
  4. Det här vill han att du ska göra; 
  5. Lägg in nya html tags, header, footer, aside, nav, section, article 
  6. Positionera dem med float eller position så det ser snyggt ut. 
  7. Skapa en snygg navbar, eller iallfall snygga länkar. (det räcker om du skriver ”#” för länkar).

Hur du ska göra

Gösta har inget hum om vad som är fint. Han tycker att det ska vara enkelt att hitta på sidan. Det är för det mesta fint om du kan skapa en enkel och luftig sida.

 

 

Betygsättning

E

Du kan använda float, clear, separat stylesheet som du länkar till. Du kan använda en lista för att 
skapa länkar. Du kan skapa ett hoverbeteende som inte är helt snyggt. (tex får du oavsiktliga ”hopp” 
med din hoover.

Du kan testa om du skrivit rätt css och html när du är klar.

C

Du använder korrekt html tags. Du jobbar självständigt. Du behärskar en del svårare positionering. 
Du kan skapa en navbar. Du arbetar korrekt, dvs din hover hoppar inte. Du lägger inte text för nära en kant 
så det blir svårt att läsa. Du lägger in alt-text på bilder.

Sidan validerar utan fel som HTML 5 och CSS 3.

A

Du kan skapa en horisontell navbar och förstår ingående hur hooverbeteenden fungerar. Vid behov 
kan du använda dig av svårare positionering. Du förstår z-index och hur du kan använda det vid behov.

Du klarar av att bygga en suckerfish som funkar.(eller något motsvarande som kräver tankemöda)

Din kod är inte upprepad, dvs du skriver effektivt (DRY). Därmed kan du välja vilka selectorer du
behvöer targeta för uppnå ditt mål.

Du kan självständigt söka rätt på lösningar via sidor på nätet, tex ta rätt på CSS 3 selectors.

 

Hjälp till uppgiften

Suckerfish förklaring av kod

Enklare variant av suckerfish

Förklaring till kod av enklare suckerfish

 

Exempel på hur du kan bygga layouten med hjälp av floats;

 

minLayout


Bra men lite krånglig tutorial på nätet 
Boken kap 5 hur du använder css-selektorer. 
Boken kap 10 speciellt sidan 348-356.

HTML tags som du kan behöva för att utföra uppgiften