CSS sprites kan hjelpe webutviklere øke hastigheten som deres nettside laster ved hjelp av en enkelt bildefil som inneholder flere grafikk. En navigasjonsfeltet kan laste som ett enkelt bilde når websiden gjengis, men likevel inneholde individuelle bilder som kan redigeres og stylet på egen hånd innenfor navigasjonsfeltet. Nettleseren har bare å laste ned ett bilde i stedet for flere bilder som ville hver representerer navigasjon elementer i navigasjonsfeltet. Du trenger
Adobe Photoshop
tekst editor program
Vis flere instruksjoner
en

Launch Adobe Photoshop og åpne opp bildefilen du har laget for å være brukt som nettstedets navigasjon bar . Du trenger å referere til denne filen for å finne pixel bredder som du går på å skrive ut CSS-kode som vil definere hvordan navigasjonsfeltet brukes .
2

Start en tekst editor program og åpne CSS-fil for websiden mottar sprite navigasjonsfeltet. Hvis du ikke har en spesialitet koding program på hånden , kan du bruke Notepad i Microsoft Windows eller TextEdit i Mac OS X.
3

Gå tilbake til bildet i Photoshop og velg " ; Image " fra listen over tilgjengelige alternativer på toppen av Photoshop programvinduet. Velg "Properties" og legg merke til høyden og bredden på navigasjonsfeltet image som definert i piksler . CSS-koden vil bruke disse pixel definisjoner .
4

Tilbake til CSS-filen i teksteditor og legge til følgende kode . Endre høyde, bredde, bildefilen navn og margverdiene å samsvare med størrelsen og specs på bildet

* { margin: 0px; padding: 0px; } . # Nav {background : url ( navbarsprite.png ) ; høyde: 35px ; bredde : 800px ; margin: 0 auto ; # nav span {display : none; }
5

Gi navigasjonsfeltet en hensiktsmessig orientering på siden din ved hjelp av følgende linjer CSS-kode og legge dem til din CSS -dokument : en

# nav li { list-style -type : none; float : left; } # nav et { height: 38px ; display: block; }

6

Klikk på "Vis" i Photoshop , og deretter " Legg linjaler " for å legge til et sett på skjermen regler til vinduet der navigasjonsfeltet bildet vises. Zoom inn på bildet og måle bredden på hver navigasjon knappen i navigasjonsfeltet.
7

Legg til følgende kode i CSS -filen , ved hjelp av de enkelte pixel målinger av hvert element . For eksempel : en

# list1 { width : 110px ; } # list2 { width : 110px ; } # List3 { width : 125px ; } # list4 { width : 123px ; } # LIST5 { width : 131px ; }
side 8

Lagre den modifiserte CSS-fil og laste det opp og navigasjonsfeltet bildet til din Web -server for å begynne å bruke den i nettstedets produksjonsmiljø.