[Ett NTI-Galleri!]I detta dokument beskrivs uppgiften NTI-Galleri. Du har här i uppgift att återskapa en hemsida utifrån en bild. Denna uppgift återknyter till såväl HTML och CSS kunskaper.

2012

NTI Umeå

Rikard Berggren

Målet:Målet är att återskapa hemsidan till höger. Ni kommer att få en grunduppsättning filer att utgå från som ni sedan arbetar vidare med.

Beskrivning av sidan:Sidan är uppdelad i olika delar som alla ligger inom en DIV som heter wrapper. Denna används för att sätta bredden på sidan och för att centera den. Här nedanför ställer jag upp vilka krav som gäller för de olika delarna av sidan.

Wrapper: Header Nav Article

o Section Footer

Länka in CSS-filerI denna uppgift börjar du med att länka in två CSS-filer, dessa ligger båda i katalogen css och heter styles.css respektive normalize.css. Länka först in normalize.css. Om du gör tvärtom kan det bli så att du gör inställningar i styles som sedan skrivs över av normalize eftersom denna länkas in efteråt!

BodyVi skall nu sätta en bakgrundsfärg som upprepas över hela sidan. Bakgrundsbilden heter background.png och ligger i katalogen images.

Nu borde du ha en bakgrundsbild som upprepas över hela sidan!

Wrapper:Du skall i CSS-filen skapa ett ID som heter wrapper (Kom ihåg! id = # och class = .)Ställ in följande för Wrapper:

Bredd 960 px Backgrundsfärg vit. Centrera sidan (margin: 0px auto;)

HeaderHeader är ett nytt HTML5 element som används just till att skapa en header på din sida. Det är annars vanligt att varje sida istället använder sig av en div med id’t header.

<div id=”header”></div>

Eftersom header finns med på i princip alla sidor fick den en eget element. Detta gör det också lättare för sökmotorer att förstå hur sidan är uppbyggd och därmed söka av den snabbare.

Header skall ha följande inställningar:

Bakgrundsfärgen skall vara : #005a81; Bredden på header skall vara 960pixlar. Höjden skall vara 150pixlar. Bakgrundsbild. ./images/logotype.png Bakgrundsbilden ska inte upprepas! Med hjälp av background-position ska du flytta ner bilden 20 pixlar från toppen.

H1 – Rubriker som ligger i header ( header H1)

Du har nu till uppgift att flytta h1 texten så att det ser ut som på bilden. Typsnittet på hemsidan skall vara Verdana (font-family). Färgen på texten skall vara vit. Förstora texten med 4em.

A – Länkar som ligger i header och i h1 (header h1 a)

Vi plockar bort understrykningen hos länkarna. Vi sätter färgen på länkar till vit.

NAVDelen av sidan som heter Nav är också ett nytt html5 element som används för delar av sidan som används för navigation. Istället för att används <div id=”menu”> Kan man istället alltså använda <nav>.

I Nav finns en lista onumrerad lista (ul). Denna innehåller tre punkter.

Det första vi skall göra är att sätta bakgrundsfärgen till. #0c6d97; Vi sätter sedan bredden till 960px; Och höjden till: 40px;

nav ulVi ska nu göra inställningar som gäller för onumrerade listor som finns inne i ett element som heter nav.

Vi sätter marginalerna till 0 px.

nav ul liVi berättar att alla list-items skall ställa sig på rad med hjälpa av ”display: inline-block;”.Vi säger också åt dem att de skall flyta åt vänster samt att ha en bredd på 200pixlar.

nav ul li aVi pekar vidare och nu på nav element som har (ul)onumrerade listor I sig som I sin tur består av listpunkter(li) som har länkar i sig(a).

Vi ger dessa följande inställningar:

Vi sätter deras färg till vit Vi tar bort understrecket på länken Vi sätter typsnitt till Veradana Vi sätter Line-height till 40px.

nav ul li a:hoverHover är en så kallad pseudo-klass som anropas om man håller muspekaren över. Vi skall nu ställa in så att texten blir i fetstil om man håller muspekaren över.

SectionNu kommer ännu ett nytt HTML5-element som heter <Section>. Detta element används för att berätta att en del av en sida handlar om en viss sak. Du kanske har blogg som innehåller blogg inlägg. Då kan du skapa en section åt dessa.

Du kan sedan säga att denna del av sidan innehåller olika underdelar, bloggposterna! Dessa underdelar kan du lägga inom egna element som kallas article.

Då google läser av sidan ser den det finns en del av sidan som handlar om en viss sak. Detta ser den genom elementet section. Den ser sedan att denna del innehåller olika underdelar med hjälp av article. Detta underlättar sökningen av sidan en hel del!

Vi ger section följande inställningar:

Minsta höjden 800px Marginal till vänster 40px; Padding 20px

Section h2Vi ställer nu in så att alla h2 taggar i section skall ha textstorleken 20px och färgen #1f7aa1.

Section articleVi gör nu inställningar för varje del av sidan. Vi bestämmer att de minst skall vara minst 200px

höga och ett de skall ha en kantlinje på botten som är 2px tjock och som har färgen #073e56.

section article imgVi berättar nu att alla bilder som ligger i en article som ligger i en section skall visas med 20% storlek. Detta gör vi med hjälp av width: 20%;

FooterVi lägger nu till det sista elementet på sidan vilket är footern. Vi ger footern en padding på 20pixlar.Vi sätter bakgrundsfärgen till #005a81 och den mista höjden till 100px.

footer pText som ligger I footer skall vara centrerad färgen på texten skall vara vit.

Om du är klar skall sidan se ut på detta viset:

Extrauppgift. Du har nu i uppgift att försöka på Lightbox att fungera.