CSS sprites kan hjælpe webudviklere øger den hastighed, hvormed deres hjemmeside belastninger ved at bruge et enkelt billede fil, der indeholder flere grafik. En navigationslinjen kan indlæse som et enkelt billede, når websiden gengives, men stadig indeholde individuelle billeder , der kan redigeres og stylet på egen hånd inden navigationslinjen. Webbrowseren kun at hente et billede i stedet for flere billeder, der hver ville repræsenterer navigation elementer i navigationslinjen. Ting du skal
Adobe Photoshop
Text editor ansøgning
Vis Flere Instruktioner
1

Launch Adobe Photoshop og åbne det billede, du har designet til at være bruges som webstedets navigationslinje. Du bliver nødt til at henvise til denne fil til at bestemme pixel bredder , som du går på at skrive CSS kode, der vil definere, hvordan navigationsbjælken anvendes.
2

Start en teksteditor ansøgning og derefter åbne CSS-fil til websiden modtager sprite navigationslinje. Hvis du ikke har et speciale kodning program på hånden, kan du bruge Notesblok i Microsoft Windows eller TextEdit i Mac OS X.
3

Gå tilbage til billedet i Photoshop og vælg " , Image " fra listen over tilgængelige indstillinger i toppen af ​​Photoshop programvinduet. Vælg "Egenskaber" , og tage til efterretning, højde og bredde på din navigationslinjen billede som defineret i pixels. CSS kode vil bruge disse pixel definitioner.
4

Retur til CSS-fil i teksteditor og tilføje følgende kode. Ændre højde, bredde , billede filnavn og margenværdier i overensstemmelse med den størrelse og specs på dit billede

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

Giv navigationslinjen en passende orientering på din side ved hjælp af følgende linjer CSS kode og tilføje dem til din CSS dokument : Hej

# nav li { list -style -typen : ingen; float : left ;} # nav a { højde: 38px ; display: block ;}
< br > 6

Klik på "Vis" i Photoshop , derefter " Tilføj linealer " for at tilføje et sæt på skærmen regler til vinduet , hvor din navigationsbjælken billede vises. Zoom ind på billedet og måle bredden af ​​hver navigationsknappen i din navigationslinje.
7

Føj følgende kode til din CSS-fil , ved hjælp af de enkelte pixel målinger af hvert element . For eksempel : Hej

# list1 { bredde: 110px ;} # list2 { bredde: 110px ;} # list3 { bredde: 125px ;} # list4 { bredde: 123px ;} # list5 { bredde: 131px ;} < br >
8

Gem modificerede CSS-fil og uploade den og navigationslinjen billede til din webserver til at begynde at bruge det i hjemmesidens produktionsmiljø.
< br >