Hvordan Design en CSS Sprite Navigation Bar

CSS sprites kan hjelpe webutviklere øke hastigheten som deres nettside laster ved hjelp av en enkelt bildefil som inneholder flere grafikk. En navigasjonsfeltet kan lastes inn som et enkelt bilde når websiden er gjengitt, men likevel inneholde enkeltbilder som kan redigeres og stylet på egen hånd innenfor navigasjonslinjen. Nettleseren har bare å laste ned ett bilde i stedet for flere bilder som ville hver representerer navigasjonselementene i navigasjonsfeltet.

Bruksanvisning

1 Start Adobe Photoshop og åpne opp bildefilen du har laget for å brukes som nettstedets navigasjonsfeltet. Du trenger å referere til denne filen for å finne pikselbredder som du går på å skrive ut CSS-kode som vil definere hvordan navigasjonsfeltet brukes.

2 Start en teksteditor programmet og deretter åpne CSS-fil for websiden mottar sprite navigasjonslinjen. 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 øverst i programvinduet Photoshop. Velg "Properties" og legg merke til høyden og bredden på navigasjonslinjen image som definert i piksler. CSS-koden vil bruke disse piksel definisjoner.

4 Gå tilbake til CSS-filen i teksteditor og legge til følgende kode. Endre høyde, bredde, bildefil navn og margverdier å samsvare med størrelsen og spesifikasjoner av bildet.

{Margin: 0px; padding: 0px; } nav {

bakgrunn: url (navbarsprite.png);
height: 35px;
width: 800px;
margin: 0 auto;

nav span {

display: none;
}

5 Gi navigasjon bar en passende orientering på siden din ved hjelp av følgende linjer med CSS-kode og legge dem til i CSS dokumentet:

nav li {

list-style-type: none;
float: left;

}

nav et {

height: 38px;
display: block;

}

6 Klikk på "View" i Photoshop, og deretter "Legg linjaler" for å legge til et sett av regler på skjermen til vinduet der navigasjonslinjen bildet vises. Zoom inn på bildet og måle bredden på hver navigasjonsknappen i navigasjonsfeltet.

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

list1 {width: 110px; } List2 {width: 110px; } List3 {width: 125px; } List4 {width: 123px; } LIST5 {width: 131px; }

8 Lagre den modifiserte CSS-fil og laste det opp og navigasjonslinjen bildet til webserveren til å begynne å bruke den i nettproduksjonsmiljø.