Hvordan lage en jevn stigning på en webside

May 20

En webdesigner har mange muligheter for å skape utseendet av en webside. Bakgrunns gradienter er et slikt alternativ. De kan være en funksjonell eller dekorative del av webdesign. Den vanligste metoden for å legge til en gradient i en enkel webside er beskrevet her. Du trenger HTML ferdigheter.

Bruksanvisning

Lag din Gradient bilde

1 Bestem farger, span, og retningen på graderingen basert på websiden din layout behov. Spennet er hvor mange piksler gradienten vil nå fra ende til annen. Orienteringen er vanligvis vertikal eller horisontal (med vertikal er den vanligste), men diagonal, radial, og uregelmessige orienteringer er mulig.

2 Start din bilderedigeringsprogram (for eksempel Photoshop) og lage et bilde for å holde gradient. For å gi ditt nettsted seere den raskeste siden lasting erfaring, bør dette bildet være så lite i dimensjoner som mulig. For en vertikal gradient, kan det være en piksel bred med antall piksler i spenn. Dette er fordi bildet vil være flislagt (dvs. gjentas) så mange ganger som nødvendig for å fylle opp på siden. For en horisontal gradient, bare bytte disse verdiene rundt: 1 pixel høy og uansett hvor mange piksler bred. For mer kompliserte gradienter, vil flislegging trikset ikke fungerer, og du blir nødt til å lage en full-størrelse bilde.

3 Opprett gradient bruker gradient verktøy for oppretting av programmet.

4 Lagre bildet med et minneverdig navn og laste den opp til webområdet ditt. For god content management, bør bildene bli plassert sammen i en egen mappe på din nettside vertsserver.

Plasser din Gradient i en webside ved hjelp av en global Style Sheet

5 Opprett eller åpne websiden globale stilark. Dette er en egen fil fra HTML-dokumentet. Det skal hete "style.css". Du kan opprette og redigere CSS-filer med en enkel notisblokk.

6 Skriv følgende språk i CSS dokumentet:

kropp {

background-image: URL(AAA)

GÅ

background-repeat: BBB

GÅ

background-position: CCC DDD

GÅ

background-color: XXXXXX

GÅ
}

Bevar alle linjer og mellomrom. Denne undervisningen vil endre nettsidens "kroppen" element. Hvis stilark har allerede kroppen informasjon, modifisere (om nødvendig) verdiene av de fire attributtene spesifisert ovenfor. Noe annet:

Erstatt "AAA" med den lokale nettadressen til bildet, fra rotkatalogen. For eksempel, hvis bildet heter "gradient.png" og ligger i "bilder" -mappen på nettstedet ditt, kan du erstatte "XXX" med "images / gradient.png."

Erstatt "BBB" med riktig gjenta attributtverdi. Hvis du bruker en vertikal gradient bilde som er bare en piksel bred, ville du trenger å sette inn "gjenta-x" i stedet for "BBB". Hvis du bruker en horisontal gradient, du ville bruke "gjenta-y" i stedet. Og hvis du bruker en full størrelse, kompleks gradient, skriver du inn "no-repeat".

For det andre to verdier, posisjon og farge, ta kontakt med en CSS referanse manuell eller elektronisk ressurs for å se nøyaktig hva syntaks å bruke. Posisjonsinformasjonen vil plassere gradient i riktig område av websiden. Bakgrunnsfargen skal være identisk med terminalen fargen på gradient, slik at de to blander sammen jevnt.

7 Ring stilark i hver nettside på nettstedet ditt ved å legge til følgende linje med HTML overalt inne i <head> tag på toppen av hver HTML-dokument:

Da er du ferdig. Så lenge du setter en <body> tag i HTML-dokument-som er standard praksis-gradienten vil automatisk bli lagt til når en besøkende laster siden.

Hint

"CSS" står for "gjennomgripende stilark." CSS er et supplement til HTML (Hypertext Markup Language). En stilark skal inneholde alle oppsettet informasjon på en enkel webside, mens selve websiden (HTML-dokumentet) er ment å inneholde selve innholdet på websiden. Denne divisjonen gjør det mulig å gjøre endringer i oppsettet til en hel nettside ved å endre bare én fil-CSS-filen-snarere enn å gå gjennom hver HTML-dokument individuelt.