Så här använder du CSS Sprites i fyrverkerier och Dreamweaver

Någonsin undrat hur du använder CSS Sprites i dina egna webbprojekt? Idag kommer Tom Green (vår inhemska Adobe-expert) att gå igenom hur man skapar CSS sprites i Fireworks och sedan sätta dem till användning i Dreamweaver. Om du inte har använt CSS Sprites tidigare, eller om du bara letar efter ett enklare sätt att implementera dem, kolla inte längre!

Vad är CSS Sprites?

Enkelt sagt, en sprite är en metod att använda en enda bild som ett sätt att lagra flera mindre bilder. Ta en titt på sprite som används på Webdesigntuts:

När vi börjar kodning kan vi helt enkelt använda CSS-positionering och beskärning av bilden för att visa den del av sprite som vi vill ha.

Varför använd en CSS Sprite? Fart! Använda sprites för att lagra bilder kommer att minska tiden som krävs för att ladda en hel webbsida? När bilderna återanvändas om och om igen på flera sidor kan det innebära mycket sparad tid.

Sprites används bäst med mindre bilder som används över och om igen. Till exempel kan de flesta tillgångar som diskuteras på en hel webbplats faktiskt reduceras till en sprite som denna:

I en enda sprite har vi redan prepped huvuddelen av vår designgrafik för kodning? och det är allt under 19kb! Inte dåligt rätt?

För att skapa din egen sprite, skapa bara ett tomt dokument (starta med vilken storlek som helst, du kommer så småningom gräva ner det här så att det bara passar knappt varje element på spritet), lägg sedan till designelementen med en rimlig mängd vadderingar mellan varje element. Här är några extra knep:

Element som är fördelade jämnt i designen ska fördelas jämnt i sprite (som sociala medierikoner)
Om ett element är transparent (som våra flikar på glider), se till att det visas som korrekt transparent i spriten
Spara den sista spritbilden som en transparent PNG-24? då är du redo att rocka och rulla!

Okej, nu när grunderna är ute, kommer Tom att visa oss hur man skapar dessa i ett par snabba videoklipp!

Videon

Dessa videoklipp är inspelade i HD, så gärna hoppa HD-knappen och skala upp det för att passa hela skärmen så att du kan följa upp noggrant.

Fireworks-steget (skapa sprite)

Dreamweaver Step (kodning av Sprite)

Det är allt!

Ganska lätt rätt? Att lägga CSS Sprites till dina egna projekt är snabbt och enkelt? vilket gör det till ett utmärkt verktyg för att lägga till din väska med tricks. Vad är bättre är att Fireworks och Dreamweaver (eller någon kodande app) låter dig använda sprites "by the numbers", vilket förenklar det ännu längre. Det är det för idag - lägg till några frågor, kommentarer eller egna tricks nedan!

Webbdesign