Logo, header og footer

English

Vanligvis er header og footer de øverste og nederste delene som forblir de samme uansett hvilken nettside en besøkende navigerer til. Header kan også kalles topptekst, og footer for bunntekst. For enkelthetens skyld så bruker vi header og footer siden det er dette som brukes i selve CSS-koden. De definerer typisk stilen og designen til et nettsted og inneholder lenker til andre sider, en logo eller tittel på nettstedet og kontaktinformasjon.

I nettsideoppsettet er overskriften den øvre delen av nettsiden. Det er i headeren vi plasserer logoen.

I vår kode har vi satt opp på en enkel måte å legge logo i headeren. Vi har brukt velgeren (selector) .container-fluid for å lage en responsiv beholder (container) i selve headeren. Dermed har vi to velgere (selectors) for headeren og kan style på de på hver sin måte. Hovedheaderen er den som strekker seg i hele bredden:

  header {
    height: 150px; /*Høyde*/
    background-color: white; /*Valgfritt*/
    background-position: center; 
    margin-bottom: 15px; /*Anbefales å ha dette for å få mer luftrom rundt headern*/
    margin-top: 15px; /*Anbefales å ha dette for å få mer luftrom rundt headern*/
}

Vi kan endre bakgrunnsfarge og ha egen bakgrunnsbilde i headeren.

Beholderen (containeren) som inneholder selve logoen er slik:

header .container-fluid .row .col-sm-12 {
  background: url("img/logo.png") no-repeat top;
  background-size: contain; 
  background-position: center;
}

Logo

Hvilket bildeformat skal man bruke for logoen? Vi kan bruke tre typer bildeformater:

JPG/JPEG: Dette bildeformatet tar svært lite lagringsplass, og er raskt med å laste opp og ned.

PNG: Gir bilder av høy kvalitet og detaljerte ikoner.

SVG-filformatet: er todimensjonal grafikk og illustrasjoner. Også kalt vektorfil, som vil si at den kan skaleres opp eller ned uten å miste noe av oppløsningen.

Hvis du vil ha et hurtiglastende komprimert bilde, velg et JPG-format. Hvis du ser etter et klart bilde av høy kvalitet, velg en PNG.

Bildefilen til logoen lastes ned og plasseres i img mappen.

I dette eksemplet heter filen vi skal bruke logo.png. Vi kopierer hele filnavnet og limer det inn i denne koden for å definere filplasseringen, slikt:

header .container-fluid .row .col-sm-12 {
  background: url("img/logo.png") no-repeat top;
  background-size: contain; 
  background-position: center;
}

Footer:

Footer er feltet nederst på et nettsted. En footer inneholder vanligvis kontaktinformasjon og andre nyttige linker.

Footeren består av sleve bunnelementet og bunnteksten. For selve bunnelementet kan vi endre på høyden, bakgrunnsfarge og vi kan også legge til bakgrunnsbilder.

Selve bunnteksten kan endres og formateres i Compose. Dette gjøres i prosessbyggeren i egenskapene i innstillinger:

Den standardiserte bunnteksten er satt som:

Vi kan endre bunnteksten til f.eks: Drevet av [bold][link url="https://usecompose.com/"]Compose[/link][/bold]

Måte man legger til en hyperlenke og formaterer teksten er beskrevet her: https://composetogo.atlassian.net/wiki/spaces/DNO/pages/1494974517

Mer utfyllende design gjøres med CSS kode. Velgeren(selector) footer a {} hører til hyperlenken. Her kan man bruke elementer for å definere farge på selve hyperlenken.

footer {
  text-align: center; /*plassering av bunnteksten*/
  padding: 30px;
  background-color: Grey;
  margin-top: 10px;
}

footer a {
  color: var(--Blue); /*endre farge på hyperlenken*/
}