Hvordan lage nettleseren Bakgrunn Bak Min webside

Hvordan lage nettleseren Bakgrunn Bak Min webside


Innhold er konge på internett, men dårlig nettside design kan ødelegge opplevelsen og vende seg bort lesere. Den mest synlige elementet er bakgrunnen. Det kan være en farge, en repeterende bilde eller en full-farge fotografi. Du kan bruke alle tre.

Bruksanvisning

Velge riktig type bilde

1 Liste bildene nettstedet ditt innhold bringer tankene. Hvis nettstedet bruker en logo eller avatar, bruke det som et utgangspunkt for listen.

2 Vurdere innhold og bruk. En bakgrunn kan påvirke lastetider og belastningen på øynene. Lastetidene bør være rask, og belastningen på øynene bør holdes på et minimum.

3 Lag, provisjon eller søk etter mulige bakgrunnsbilder. Respekter opphavsrett. Aldri anta at bilder på internett er lovlig for deg å bruke.

4 Test dine favoritt bilder, fonter og farger. Dette vil hjelpe deg å finne den beste kombinasjonen for området.

Klarbakgrunnsbilde

5 Endre størrelsen på bildet. De fleste datamaskiner har en skjermoppløsning på 1024x768. Hvis du planlegger å bruke et enkelt, fast bilde, holder den størrelsen i tankene.

6 Sett de viktigste visuelle elementer på venstre side. Mindre oppløsninger og vindusstørrelser vil beskjære bakgrunn fra høyre side.

7 Lagre filen som en JPG eller PNG. JPG fungerer best for bilder og PNG for illustrasjoner.

8 Hold størrelse bildets filen under 100 kB. Det vil holde gjengi tid ned for siden.

Skrive Cascading Style Sheet (CSS)

9 Sett en bakgrunnsfarge. Type: body {background-color: # FF0000;}

Farger kan også angis ved et navn, body {background-color: red;}, eller ved RGB, {background-color: rgb (255,0,0);}.

10 Angi et bakgrunnsbilde. Type: body {background-image: url ( 'myimage.jpg');}

Som standard bilde fliser i alle retninger.

11 Angi hvordan bilde fliser. Type: body {background-image: url ( 'myimage.jpg'); background-repeat: repeat-x; }

"Repeat-x" setter fliser til bare horisontalt. Bruk "repeat-y" for vertikal flislegging.

12 Lag en ikke-repeterende bilde som ruller med siden. Type: body {background-image: url ( 'myimage.jpg'); background-repeat: no-repeat; }

1. 3 Fest bildet så teksten ruller over det. Type: body {background-image: url ( 'myimage.jpg'); background-repeat: no-repeat; background-attachment: fixed; }

Hint

  • Når du arbeider med bilder, starte store. Bilder kan alltid bli krympet, men ikke forstørres. Detaljer også kan trekkes fra store bilder som skal brukes som dekorative elementer på nettsiden for å lage en mer helhetlig design opplevelse.
  • Bilder i CSS står i forhold til CSS-filen.
  • CSS kan lagres i en egen CSS-fil, legg på toppen av websiden i overskriften eller skrevet som inline stiler. En egen fil som fungerer best når et nettsted har flere sider.