Menu:

Oppdatere design


Det fine med å benytte et design med stilsett (stilsett = CSS), er at det blir veldig enkelt å oppdatere design. De endringene du ønsker gjør du rett og slett i stilsettet, og dermed er alle sider oppdatert på en gang. Det kan også hende at du ønsker å gjøre så fundamentale endringer i utseende at du heller vil bytte ut hele stilsettet.

I det følgende skal vi derfor se på to forskjellige metoder for designendringer:

1. Å endre eksisterende stilsett, og
2. Å bytte ut stilsettet med et annet stilsett.

1. Endre eksisterende stilsett

For å forandre farge på bakgrunn, endre forttype, endre fontfarge, gjøre overskrifter større etc., trenger du ikke et nytt stilsett. Du kan enkelt tilpasse det stilsettet du allerede benytter.



Tips: Lag en kopi av det opprinnelige stilsettet med et annet navn før du begynner å gjøre endringer. På den måten har du en original fil å gå tilbake til dersom noe går galt.

Sik gjør du:

1. Start First Page 2006.

2. Åpne stilsettet. CSS-filen finner du ved å se i filoversikten og velge den filen som har et slikt ikon:


Her finner du denne filen (men den kan hete noe annet hos deg enn i eksempelet under, fordi det kan hende du har valgt en annen mal til dine sider):


Du åpner stilsettet ved å dobbeltklikke på filnavnet der det er angitt i figuren over.

3. Du har nå fått en oversikt over stilsettet i hovedfeltet på First Page 2006:



4. Finn den egenskapen du vil endre. Det kan variere litt fra stilsett til stilsett hva den enkelte egenskapen heter, men navnene er som regel logiske.

5. Lagre filen etter at endringene er gjort. (Klikk på file / save i menyen.) NB! Husk at filen må ha samme navn som den hadde før du gjorde endringene.

Betegnelser i CSS-filen

Her er en liten forklaring over hva de forskjellige egenskapene heter i det stilsettet som er benyttet i eksempelet:

body - egenskaper som vedrører siden som helhet, for eksempel bakgrunnsfarge.

wrap - egenskaper som formaterer hvordan tekst brytes over til neste linje.

a - egenskaper som styrer hvordan lenker ser ut.

a:hover - egenskaper som styrer hvordan lenker ser ut mens musen føres over dem.

a img - egenskaper som styrer hvordan et bilde blir formatert når det opptrer som en lenke, altså at du kan klikke på bildet og komme til en annen side.

p - egenskaper som styrer hvordan et avsnitt skal formateres (skal det være innrykk, skal teksten gå ned til neste linje, etc.).

#header - egenskaper som styrer hvordan overskriftene ser ut generelt.

#header h1 - egenskaper som styrer hvordan de største overskfitene, de som er merket med H1, skal se ut.

#header h1 a - egenskaper som styrer hvordan de største overskriftene skal se ut når de er lenker, altså at det er mulig å klikke på dem og komme til en annen side.

#header p - egenskaper som styrer hvordan avsnittsmarkeringen etter overskriften skal se ut (for eksempel: skal teksten begynne ekstra langt ned etter en overskrift?).

# frontphoto - egenskaper som styres hvordan visningen av forsidebildet skal være. NB! Det er ikke her du bytter ut selve bildet, det gjør du i koden på selve forsiden din. Dette styrer bare for eksempel hvor stor marg det skal være rundt det bildet som brukes. Hvilket faktisk bilde som benyttes avgjøres av filnavnet som oppgis i den enkelte side. TIPS: Hvis du ønsker å bytte bilde i toppen på alle sider, så lagre et nytt bilde med samme navn som det gamle. Da behøver du ikke å bytte koden på hver enkelt side.
#leftside - egenskaper som styrer hvordan venstrespalten er formatert.

#leftside h2 - egenskaper som styrer hvordan H2-overskrifter i venstre spalte er formatert.

#leftside div.announce - egenskaper som styrer hvordan spesielle kunngjøringer i venstraspalten skal se ut.

ul.avmenu - egenskaper som styrer hvordan en ikke-nummerert liste i menyen skal se ut.

ul.avmenu li - egenskaper som styrer hvordan det enkelte punktet i en ikke-nummerert liste i menyen skal se ut.
ul.avmenu li a - egenskaper som styrer hvordan det enkelte punktet i en ikke-nummerert liste i menyen skal se ut når det er en klikkbar lenke.

#content - egenskaper som styrer generelt utseende på hovedinnholdet på siden.

#contentwide - egenskaper som styrer generelt utseende på hovedinnholdet på siden når innholdet vises over en bred spalte.

#footer - egenskaper som styrer hvordan kolofonen (= "avsenderinformasjonen") nederst på siden skal se ut.

#footer p - egenskaper som styrer hvordan et avsnitt nederst i kolofonen skal formateres.

#footer a - egenskaper som styrer hvordan en lenke i kolofonen skal se ut.

Innholdet i de enkelte feltene i CSS-filen

Innholdet i de enkelte beskrivelsene er som følger:

background-color: angir en bakgrunnsfarge oppgitt i heksadesimal kode, altså med #-tegn og seks bokstaver/tall, for eksempel #f4f4f4. Du bytter ut tallene for å endre fargen. Bruk fargekartet til høyre i First Page 2006 for å finne riktig fargekode (klikk på den fargen du vil ha, og klikk så på knappen FG for å få koden inn i teksten.

Se også figuren under:



border angir bredden i en ramme angitt i pixler (skrevet px), og eventuelt også fargen på rammen. Ett pixel er et enkelt punkt lys på skjermen.

color angir farge. Du kan endre fargeangivelse på samme måte som er beskrevet for bakgrunnsfarge over.

font-size: angir fontstørrelse. Kan angis i antall pixler eller som andeler av en annen måleenhet, for eksempel 0.9em.

line-height: angir linjehøyde. Kan angis i antall pixler eller som andeler av en annen måleenhet, for eksempel 1.4em.

margin angir margens bredde i pixler (skrevet px

padding angir bredde på tomrom mellom en linje og tekst, for eksempel hvor stor marg det er inne i en boks i en tabell. Angis i pixler skrevet px, for eksempel slik: 8px 5px 8px 8px. (Rekkefølgen er topp, høyre, bunn, venstre.)

Oppgave:

Prøv å endre en egenskap i stilsettet, bare for å se hvordan det fungerer. (ikke glem å ta en sikkerhetskopi av det opprinnelige stilsettet før du begynner.)


2. Bytte til et annet stilsett

For å bytte stilsett, må du endre angivelsen av hvilket stilsett HTML-filen benytter. Du må med andre ord endre selve bindingen mellom de to filene:



Husk at det kan være forskjell på angivelser i det gamle og det nye stilsettet. Sjekk derfor at det nye stilsettet fungerer med den første HTML-siden før du eventuelt bytter stilsett på alle HTML-filer.

Slik gjør du:

1. Start First Page 2006.

2. Åpne den første av de HTML-sidene du skal endre.

3. Gå helt øverst i koden. Stilsett-angivelsen står i header-elementet øverst i koden (se figuren under): (Husk at navnet på CSS-filen i din side kan være en annen enn det som står i eksempelet under.)


I tillegg til å tenke gjennom innholdsmessig oppdatering, så kan du også vurdere både designmessig og teknisk oppdatering etter hvert.

4. Bytt ut navnet på den CSS-filen som benyttes i dag med navnet på den CSS-filen du ønsker å benytte.

5. Lagre HTML-filen med samme navn (klikk file / save).

6. Gjenta for hver HTML-side.

Oppgave:

Hvis du har lyst, så prøv å bytte stilsett på en testside, bare for å se hvor annerledes din side kan bli med en annen stil.



Gå videre: Oppdatere teknikk
Eller: Gå tilbake til oversikten