Comment utiliser les sprites CSS dans Fireworks et Dreamweaver

Jamais demandé comment utiliser Sprites CSS dans vos propres projets web? Aujourd'hui, Tom Green (notre expert Adobe résident) vous expliquera comment créer des sprites CSS dans Fireworks, puis les utiliser dans Dreamweaver. Si vous n'avez jamais utilisé de sprites CSS auparavant ou si vous cherchez simplement un moyen plus simple de les implémenter, ne cherchez pas plus loin.!


Que sont les sprites CSS?

En termes simples, une image-objet est une méthode qui consiste à utiliser une seule image pour stocker plusieurs images plus petites. Par exemple, jetez un coup d'œil au sprite utilisé sur Webdesigntuts:

Lorsque nous commençons à coder, nous pouvons simplement utiliser le positionnement CSS et le rognage de l'image pour afficher le morceau du sprite que nous voulons..

Pourquoi utiliser un sprite CSS? La vitesse! L'utilisation d'images-objets pour stocker des images réduira le temps nécessaire au chargement d'une page Web entière? lorsque les images sont réutilisées maintes et maintes fois sur plusieurs pages, cela peut vous faire gagner beaucoup de temps..

Les sprites sont mieux utilisés avec des images plus petites qui sont utilisées encore et encore. Par exemple, la plupart des actifs décrits dans un site entier peuvent en réalité être réduits à un sprite tel que celui-ci:

Dans un seul sprite, nous avons déjà préparé l'essentiel de nos graphiques de conception pour le codage? et tout est sous 19kb! Pas mal droit?

Pour créer votre propre image-objet, créez simplement un document vierge (commencez par n’importe quelle taille, vous réduirez éventuellement ce texte de façon à ce qu’il ne corresponde quasiment pas à chaque élément de l’image-objet), puis ajoutez les éléments de conception avec une marge raisonnable élément. Voici quelques astuces supplémentaires:

  • Les éléments espacés uniformément dans la conception doivent l'être également dans le sprite (comme les icônes de réseaux sociaux).
  • Si un élément est transparent (comme nos onglets de curseur), assurez-vous qu'il s'affiche correctement dans l'image-objet.
  • Enregistrer l'image finale du sprite au format PNG-24 transparent? alors vous êtes prêt pour le rock and roll!

Bon, maintenant que les bases sont finies, Tom va nous montrer comment les créer en quelques vidéos rapides.!


Les vidéos

Ces vidéos sont enregistrées en HD, alors n'hésitez pas à appuyer sur le bouton HD et à l'adapter à votre écran afin que vous puissiez suivre de près.

L'étape de feux d'artifice (Création de l'image-objet)

L'étape Dreamweaver (codage de l'image-objet)


C'est tout!

Assez facile non? Ajouter des sprites CSS à vos propres projets est simple et rapide? ce qui en fait un excellent outil à ajouter à votre sac à malice. Ce qui est mieux, c’est que Fireworks et Dreamweaver (ou n’importe quelle application de codage) vous permettent d’utiliser les images-objets "en chiffres", ce qui simplifie encore les choses.. C'est tout pour aujourd'hui - ajoutez ci-dessous vos questions, commentaires ou astuces!