Styla din rapportsida till webtec-kursen

Du skall jobba vidare med stylen på din rapportsida i kursen och styla upp webbsidan med navbar, header, footer, article, aside, kolumnlayout och responsivitet.

När du är klar har du förhoppningvis en snyggare webbplats än tidigare. Du har iallafall en hel del med CSS-kod och du bör ha lärt dig en hel del nyttiga CSS konstruktioner.

#Förkunskaper

Du har jobbat igenom övningen “Styla din webbsida med HTML och CSS” och du har därmed grundstrukturen klar.

#Introduktion och förberedelse

Om du har jobbat igenom övningen så är du förberedd för uppgiften. Övningen ger dig i princip ett “facit” till uppgiften. Du bör dock satsa på att bygga din egen style så att du inte efterliknar övningens style. Ta ut svängarna och prova CSS-konstruktioner, färg och form. Det behöver inte nödvändigtvis vara snyggt, men gör så gott du kan.

#Krav

Utför följande krav.

1. Spara alla dina stylesheets under public/css. Förslagsvis har du en liknande struktur som finns i övningen men du kan själv välja hur du fördelar din CSS-kod i filer, du behöver dock minst ha filen public/css/style.css på plats.

2. Gör ett noga övertänkt val av vilka typsnitt (font-family) som du använder och välj olika typsnitt för rubriker och text. Det sägs ge ett bra utseende om man gör så. Din header kan du styla till lite extra med typsnitten. Du har ett exempelprogram i kursrepot under example/css/font-family som visar olika fonter och hur man importerar externa fonter som till exempel fria Google fonter.

3. Styla din navbar.

4. Styla din header med en “logo”, titel, undertitel och en bakgrund som kan vara en färg eller en bild.

5. Styla din footer i tre kolumner och en underliggande rad.

6. Dina sidkontroller me, about, report skall alla ha en liknande stylad struktur av main, article och eventuellt en aside.

7. Sidkontrollern about skall vara indelad i två kolumner och ha sin aside kolumn till höger.

8. Sidkontrollern report skall vara indelad i två kolumner och ha sin aside kolumn till vänster som innehåller artikelns “innehållsförteckning”.

9. Sidkontrollern report skall ha en byline.

10. Din byline skall innehålla en bild och lite text och vara stylad. Du skall också placera innehållet i din byline i en vy under view/byline.php och inkludera den där den används.

11. Styla till din sidkontroller today.php och försök att göra en “crazy” sida där du visar upp dagens datum och veckodag. Lek med CSS konstruktionerna.

12. Kontrollera att dina sidkontroller passerar HTML & CSS validatorn. Om du har några valideringsfel på CSS kan det ibland vara okey, men du bör inte ha något valideringsfel på HTML.

#Publicera

Avsluta uppgiften så här.

1. Kontrollera för dig själv att du har utfört samtliga krav.

2. När du är klar kan du publicera resultatet med dbwebb publish report.

3. Testa ditt resultat så att det passerar de automatiska testerna med dbwebb test kmom02.

#Revision history