CSS Sprites gebruiken in Fireworks en Dreamweaver

Ooit afgevraagd hoe gebruik CSS Sprites in je eigen webprojecten? Vandaag gaat Tom Green (onze interne Adobe-expert) doorlopen hoe CSS-sprites in Fireworks kunnen worden gemaakt en vervolgens in Dreamweaver kunnen worden gebruikt. Als u CSS Sprites nog niet eerder hebt gebruikt, of als u gewoon op zoek bent naar een eenvoudigere manier om ze te implementeren, hoeft u niet verder te zoeken!

Wat zijn CSS Sprites?

Simpel gezegd, een sprite is een methode om een enkele afbeelding te gebruiken als een middel om meerdere kleinere afbeeldingen op te slaan. Kijk bijvoorbeeld eens naar de sprite die bij Webdesigntuts wordt gebruikt:

Wanneer we beginnen met coderen, kunnen we gewoon CSS-positionering en bijsnijden van de afbeelding gebruiken om het stuk van de sprite te tonen dat we willen.

Waarom een CSS Sprite gebruiken?? Snelheid! Het gebruik van sprites om afbeeldingen op te slaan, vermindert de tijd die nodig is om een hele webpagina te laden? wanneer afbeeldingen steeds opnieuw op meerdere pagina's worden hergebruikt, kan dit veel tijd besparen.

Sprites kunnen het beste worden gebruikt met kleinere afbeeldingen die steeds opnieuw worden gebruikt. De meeste van de activa die op een hele site worden besproken, kunnen bijvoorbeeld worden gereduceerd tot een sprite als deze:

In één enkele Sprite hebben we al het grootste deel van onze ontwerpafbeeldingen klaargestoomd voor codering? en het is allemaal onder 19kb! Niet slecht toch?

Om een eigen sprite te maken, maakt u gewoon een leeg document (begin met een willekeurig formaat, u snijdt dit uiteindelijk af om nauwelijks elk element op de sprite te plaatsen) en voegt vervolgens de ontwerpelementen toe met een redelijke hoeveelheid opvulling tussen elke element. Hier zijn enkele extra trucs:

Elementen die gelijkmatig verdeeld zijn in het ontwerp moeten gelijkmatig verdeeld worden in de sprite (zoals de social media iconen)
Als een element transparant is (zoals onze schuifregelaars), zorg er dan voor dat het op de juiste manier transparant wordt weergegeven in de sprite
Sla de uiteindelijke sprite-afbeelding op als een transparante PNG-24? dan ben je klaar om te rocken en rollen!

Oké, nu de basis uit de weg is, laat Tom ons zien hoe je deze kunt maken in een paar snelle video's!

De video's

Deze video's worden opgenomen in HD, dus voel je vrij om op de HD-knop te drukken en deze te schalen om op je hele scherm te passen, zodat je nauwlettend kunt volgen.

De Fireworks-stap (de Sprite maken)

De Dreamweaver-stap (codering van de Sprite)

Dat is het!

Best gemakkelijk toch? Het toevoegen van CSS Sprites aan uw eigen projecten gaat snel en eenvoudig? waardoor het een geweldige tool is om toe te voegen aan je trukendoos. Wat beter is, is dat u met Fireworks en Dreamweaver (of een andere codeer-app) sprites kunt gebruiken "op basis van de cijfers", waardoor het nog eenvoudiger wordt. Dat is het voor vandaag - voeg hieronder nog vragen, opmerkingen of trucs toe!

Web ontwerp