Come usare CSS Sprites in Fireworks e Dreamweaver

Vi siete mai chiesti come l'uso CSS Sprites nei tuoi progetti web? Oggi, Tom Green (il nostro esperto Adobe residente) spiega come creare gli sprite CSS in Fireworks e poi li mette in uso in Dreamweaver. Se non hai mai utilizzato CSS Sprites o se stai cercando un modo più semplice per implementarli, non cercare oltre!

Cosa sono gli Sprites CSS?

In parole povere, uno sprite è un metodo per utilizzare una singola immagine come mezzo per memorizzare diverse immagini più piccole. Ad esempio, dai uno sguardo allo sprite che viene utilizzato su Webdesigntuts:

Quando iniziamo a programmare, possiamo semplicemente usare il posizionamento e il ritaglio CSS dell'immagine per mostrare il pezzo dello sprite che vogliamo.

Perché usare un CSS Sprite? Velocità! Utilizzare gli sprite per archiviare le immagini ridurrà il tempo necessario per caricare un'intera pagina web? quando le immagini vengono riutilizzate più e più volte su più pagine, questo può significare molto tempo risparmiato.

Gli sprite vengono utilizzati al meglio con immagini più piccole che vengono riutilizzate più e più volte. Ad esempio, la maggior parte delle risorse discusse in un intero sito può essere ridotta a uno sprite come questo:

In un singolo sprite, abbiamo già preparato la maggior parte della nostra grafica di progettazione per la codifica? ed è tutto sotto 19kb! Non male vero?

Per creare il tuo sprite personale, basta creare un documento vuoto (partendo con qualsiasi dimensione, alla fine si ridurrà questo solo per adattarlo a malapena a ogni elemento dello sprite), quindi aggiungere gli elementi del disegno con una quantità ragionevole di padding tra ogni elemento. Ecco alcuni trucchi aggiuntivi:

Gli elementi che sono distanziati uniformemente nel disegno dovrebbero essere distanziati uniformemente nello sprite (come le icone dei social media)
Se un elemento è trasparente (come le nostre schede di scorrimento), assicurati che sia mostrato come trasparente nello sprite
Salva l'immagine sprite finale come PNG-24 trasparente? allora sei pronto per il rock and roll!

Bene, ora che le basi sono fuori strada, Tom ci mostrerà come crearle in un paio di video veloci!

I video

Questi video sono registrati in HD, quindi sentiti libero di premere il pulsante HD e ridimensionarlo per adattarlo all'intero schermo in modo da poter seguire da vicino.

Il passaggio di Fireworks (creazione dello sprite)

The Dreamweaver Step (Coding the Sprite)

Questo è tutto!

Abbastanza facile vero? Aggiungere CSS Sprites ai tuoi progetti è semplice e veloce? che lo rende un ottimo strumento da aggiungere al tuo bagaglio di trucchi. La cosa migliore è che Fireworks e Dreamweaver (o qualsiasi app di codifica) ti consentono di utilizzare gli sprite "in base ai numeri", il che lo semplifica ulteriormente. È tutto per oggi - aggiungi domande, commenti o trucchi di seguito!

Web design