CSS sprites kan hjälpa webbutvecklare att öka den hastighet med vilken deras webbplats laster med hjälp av en enda bildfil som innehåller flera bilder . En navigeringsfältet kan läsa som en enda bild när webbsidan återges , men ändå innehåller enskilda bilder som kan redigeras och stylade på egen hand inom navigeringsfältet . Webbläsaren har bara att ladda ner en bild istället för flera bilder som skulle vart representerar navigering element i navigationsfältet . Saker du behöver
Adobe Photoshop
Textredigerare ansökan
Visa fler instruktioner
1
Starta Adobe Photoshop och öppna upp den bildfil du har utformats för att vara används som webbplatsens navigeringsfältet . Du kommer att behöva referera till denna fil för att bestämma pixel bredder som du går på för att skriva ut den CSS -kod som kommer att definiera hur navigeringsfältet används .
2
Starta en textredigerare och öppna sedan CSS -filen för webbsidan emot spriten navigeringsfältet . Om du inte har en specialitet kodning program till hands , kan du använda Anteckningar i Microsoft Windows eller Textredigeraren i Mac OS X.
3
Gå tillbaka till bilden i Photoshop och välj " , Bild " från listan över tillgängliga alternativ längst upp i Photoshop programfönstret . Välj "Egenskaper" och ta del av höjden och bredden på din navigeringsfältet bild som definieras i pixlar . CSS-koden kommer att använda dessa pixel definitioner .
4
Återgå till CSS-filen i textredigeraren och lägg till följande kod . Ändra höjd, bredd , namn bildfil och värderingar marginal för att överensstämma med den storlek och specifikationer på din bild
* {margin : 0px; padding : 0px ; } . # Nav {background : url ( navbarsprite.png ) , höjd : 35px ; width : 800px ; marginal : 0 auto ; # nav span { display: none ; }
5
Ge navigeringsfältet en lämplig inriktning på din sida genom att använda följande rader CSS -kod och lägga till dem i din CSS- dokument :
# nav li { list- style -type : none; float : left ; } # nav a { height: 38px ; display : block; }
6
Klicka på " Visa " i Photoshop , och sedan " Lägg Linjaler " för att lägga till en rad på skärmen regler till fönstret där navigeringsfältet bilden visas . Zooma in på bilden och mäta bredden på varje navigeringsknapp i navigeringsfältet .
7
Lägg till följande kod i din CSS-fil , med de enskilda pixel mätningar av varje element . Till exempel :
# list1 { width : 110px ; } # list2 { width : 110px ; } # List3 { width : 125px ; } # list4 { width : 123px ; } # list5 { width : 131px ; }
8
spara den ändrade CSS-fil och ladda upp den och navigeringsfältet bilden till din webbserver för att börja använda den i webbplatsens produktionsmiljö .
