|
sprites CSS peuvent aider les développeurs Web augmentent la vitesse à laquelle leurs charges de site Web en utilisant un seul fichier image qui contient plusieurs graphiques . Une barre de navigation permet de charger en une seule image lorsque la page Web est rendue , mais encore contenir des images individuelles qui peuvent être édités et coiffés de leur propre chef au sein de la barre de navigation. Le navigateur Web n'a qu'à télécharger une image au lieu de plusieurs images qui représentent chacun les éléments de navigation dans la barre de navigation . Choses que vous devez
Adobe Photoshop
éditeur de texte demande
Voir Plus Instructions
1 Lancez Adobe Photoshop et ouvrez le fichier image que vous avez conçu pour être utilisé comme la barre de navigation du site. Vous aurez besoin de faire référence à ce fichier pour déterminer des largeurs en pixels que vous passez à écrire le code CSS qui va définir la façon dont la barre de navigation est utilisé.
2 lancer une application d'édition de texte , puis ouvrez le fichier CSS pour la page Web de la réception de la barre de navigation sprite . Si vous ne disposez pas d'un programme de codage de spécialité en main, vous pouvez utiliser le Bloc-notes de Microsoft Windows ou TextEdit sous Mac OS X.
3 Retour à l'image dans Photoshop et sélectionnez " ; image "dans la liste des options disponibles dans la partie supérieure de la fenêtre de l'application Photoshop. Sélectionnez "Propriétés" et prendre note de la hauteur et la largeur de l'image de votre barre de navigation tel que défini en pixels. Le code CSS va utiliser ces définitions pixels.
4 Retour vers le fichier CSS dans l'éditeur de texte et ajoutez le code suivant. Modifier la hauteur, la largeur , le nom du fichier image et les valeurs de marge pour se conformer à la taille et les spécifications de votre image
* {margin: 0px; padding: 0px; } . # Nav {background: url ( navbarsprite.png ) ; hauteur : 35px ; width: 800px ; margin: 0 auto; # nav { durée de display: none; }
5 Donner la barre de navigation une orientation appropriée sur votre page en utilisant les lignes suivantes de code CSS et les ajouter à votre document CSS :
# nav li {list- style-type : none; float: left; } # nav a { height: 38px ; display: block ;}
6 Cliquez sur «Afficher» dans Photoshop, puis " Ajouter Rulers " pour ajouter un ensemble de règles à l'écran pour la fenêtre dans laquelle l'image de votre barre de navigation apparaît. Zoom avant sur l'image et mesurer la largeur de chaque bouton de navigation dans votre barre de navigation.
7 Ajoutez le code suivant à votre fichier CSS, en utilisant les mesures de pixels individuels de chaque élément . Par exemple:
# list1 {width : 110px ; } # list2 {width : 110px ; } # list3 {width: 125px ; } # list4 {width: 123px ; } # list5 {width: 131px ; }
8 Enregistrez le fichier CSS modifié et le télécharger et l'image de la barre de navigation de votre serveur Web pour commencer à l'utiliser dans l'environnement de production du site.
< br >
|
