You are on page 1of 5

NTI Umeå

Rikard Berggren

[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.

css respektive normalize. Bakgrundsbilden heter background. dessa ligger båda i katalogen css och heter styles.  Wrapper:  Header  Nav  Article o Section  Footer Länka in CSS-filer I denna uppgift börjar du med att länka in två CSS-filer. Länka först in normalize. 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.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 = .Målet: Målet är att återskapa hemsidan till Ni kommer att få en grunduppsättning utgå från som ni sedan arbetar vidare höger. . filer att med. Beskrivning av sidan: Sidan är uppdelad i olika delar som alla ligger inom en DIV som heter wrapper.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! Body Vi skall nu sätta en bakgrundsfärg som upprepas över hela sidan.css.) Ställ in följande för Wrapper:   Bredd 960 px Backgrundsfärg vit.

NAV Delen 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. Förstora texten med 4em.) Header Header är ett nytt HTML5 element som används just till att skapa en header på din sida. Färgen på texten skall vara vit. Centrera sidan (margin: 0px auto. Bakgrundsbild.    Det första vi skall göra är att sätta bakgrundsfärgen till. Det är annars vanligt att varje sida istället använder sig av en div med id’t header. . Bredden på header skall vara 960pixlar. Typsnittet på hemsidan skall vara Verdana (font-family). <div id=”header”></div> Eftersom header finns med på i princip alla sidor fick den en eget element.png Bakgrundsbilden ska inte upprepas! Med hjälp av background-position ska du flytta ner bilden 20 pixlar från toppen. Header skall ha följande inställningar:       Bakgrundsfärgen skall vara : #005a81. Höjden skall vara 150pixlar. 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. Istället för att används <div id=”menu”> Kan man istället alltså använda <nav>. Denna innehåller tre punkter. I Nav finns en lista onumrerad lista (ul). Vi sätter sedan bredden till 960px. #0c6d97. Vi sätter färgen på länkar till vit. 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./images/logotype. A – Länkar som ligger i header och i h1 (header h1 a)   Vi plockar bort understrykningen hos länkarna. Och höjden till: 40px. .

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.”. Du kan sedan säga att denna del av sidan innehåller olika underdelar. Section Nu kommer ännu ett nytt HTML5-element som heter <Section>. nav ul li a Vi 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). Padding 20px . Vi ger dessa följande inställningar:     Vi Vi Vi Vi sätter deras färg till vit tar bort understrecket på länken sätter typsnitt till Veradana sätter Line-height till 40px.nav ul Vi ska nu göra inställningar som gäller för onumrerade listor som finns inne i ett element som heter nav. Då google läser av sidan ser den det finns en del av sidan som handlar om en viss sak. bloggposterna! Dessa underdelar kan du lägga inom egna element som kallas article. Vi säger också åt dem att de skall flyta åt vänster samt att ha en bredd på 200pixlar. Du kanske har blogg som innehåller blogg inlägg. Vi sätter marginalerna till 0 px. nav ul li a:hover Hover är en så kallad pseudo-klass som anropas om man håller muspekaren över. Då kan du skapa en section åt dessa. Vi skall nu ställa in så att texten blir i fetstil om man håller muspekaren över. Den ser sedan att denna del innehåller olika underdelar med hjälp av article. Detta element används för att berätta att en del av en sida handlar om en viss sak. nav ul li Vi berättar att alla list-items skall ställa sig på rad med hjälpa av ”display: inlineblock. Detta ser den genom elementet section.

section article img Vi berättar nu att alla bilder som ligger i en article som ligger i en section skall visas med 20% storlek. Footer Vi lägger nu till det sista elementet på sidan vilket är footern. Vi ger footern en padding på 20pixlar. Du har nu i uppgift att försöka på Lightbox att fungera. . 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. Om du är klar skall sidan se ut på detta viset: Extrauppgift. footer p Text som ligger I footer skall vara centrerad färgen på texten skall vara vit. Section article Vi gör nu inställningar för varje del av sidan. Detta gör vi med hjälp av width: 20%.Section h2 Vi ställer nu in så att alla h2 taggar i section skall ha textstorleken 20px och färgen #1f7aa1.Vi sätter bakgrundsfärgen till #005a81 och den mista höjden till 100px.