CSS sprites kan helpen Webontwikkelaars verhogen de snelheid waarmee hun website laadt met behulp van een enkel beeld bestand dat meerdere afbeeldingen bevat . Een navigatiebalk kunt laden als een afbeelding als de webpagina wordt gerenderd , maar toch individuele beelden die kunnen worden bewerkt en gestyled op hun eigen binnen de navigatiebalk bevatten . De webbrowser heeft alleen voor een beeld te downloaden in plaats van meerdere beelden die zouden vertegenwoordigen elk de navigatie-elementen in de navigatiebalk . Wat je nodig hebt
Adobe Photoshop
tekst editor toepassing
Toon Meer Aanwijzingen
1 Lancering Adobe Photoshop en open de afbeelding die u hebt ontworpen te zijn gebruikt als de website navigatiebalk . U moet refereren dit bestand te pixelbreedten bepalen als je op uit te schrijven van de CSS- code die zal bepalen hoe de navigatiebalk wordt gebruikt . Kopen van 2 Lanceer een tekstverwerker en open vervolgens het CSS-bestand voor de webpagina die de sprite navigatiebalk . Als je niet een specialiteit codering programma bij de hand hebt , kunt u gebruik maken van Notepad in Microsoft Windows of TextEdit in Mac OS X.
3 Ga terug naar de afbeelding in Photoshop en selecteer " , beeld " uit de lijst met beschikbare opties aan de bovenkant van het venster Photoshop- applicatie . Selecteer " Eigenschappen" en kennis te nemen van de hoogte en breedte van uw afbeelding navigatiebalk zoals gedefinieerd in pixels . De CSS-code gebruikt deze pixel definities .
4 Terug naar het CSS- bestand in de teksteditor en voeg de volgende code . Wijzig de hoogte, breedte , bestandsnaam en margewaarden te voldoen aan de grootte en de specs van je afbeelding
* { margin : 0px ; padding : 0px ; } . # Nav { background : url ( navbarsprite.png ) ; height : 35px ; width : 800px ; margin : 0 auto ; # nav overspanning { display: none ; }
5 Geef de navigatiebalk een geschikte oriëntatie op uw pagina met behulp van de volgende regels van CSS-code en toe te voegen aan uw CSS document :
# nav li { list - style-type : none ; float : left ; } # nav een { height: 38px ; display: block ; }
< br > 6 Klik op " View" in Photoshop , dan " Rulers toevoegen " om een reeks van on-screen regels toe te voegen aan het venster waarin het beeld van uw navigatiebalk weergegeven . Zoom in op de afbeelding en meet de breedte van elke navigatieknop in uw navigatiebalk .
7 Voeg de volgende code toe aan je CSS -bestand , met behulp van de afzonderlijke pixel metingen van elk element . Bijvoorbeeld :
# list1 { width : 110px ; } # list2 { width : 110px ; } # list3 { width : 125px ; } # List4 { width : 123px ; } # list5 { width : 131px ; } < br >
8 Sla het gewijzigde CSS-bestand en upload het imago van de navigatiebalk het en om uw webserver te gaan gebruiken in de website productieomgeving .
< br > |
