Comment utiliser des images pour votre HTML5 et CSS3 page web manchettes base

En règle générale, vous devez utiliser les polices standard pour le contenu principal de l'HTML5 et CSS3 page web, afin d'avoir un réseau limité de polices est pas un gros problème. Parfois, cependant, vous souhaitez utiliser des polices dans vos titres. Vous pouvez utiliser un éditeur graphique, comme GIMP, pour créer des images à base de texte, puis de les intégrer dans vos pages.

Sommaire

    image0.jpg

    Voici le processus pour utiliser une police spéciale:

    1. Planifiez votre page.

      Lorsque vous utilisez des graphiques, vous perdez un peu de souplesse. Vous avez besoin de savoir exactement ce que les titres devraient être. Vous devez également savoir ce titre affiche à quel niveau. Plutôt que de compter sur le navigateur pour afficher vos titres, vous créez des graphiques dans votre outil graphique et de les placer directement dans la page.

    2. Créez vos images.

      Vous pouvez la fonctionnalité merveilleuse Logos dans GIMP (choisir Xtns # 10153- Script-Fu # 10153- logos) pour créer votre texte.

    3. Spécifier directement les tailles de police.

      Dans l'image, il est logique de spécifier les tailles de police en pixels car ici, vous parlez vraiment un certain nombre de pixels. Vous créez “ texte virtuelle ” dans votre éditeur graphique, afin de rendre le texte la taille que vous voulez qu'il soit dans la page finie.

    4. Utilisez une police que vous voulez.

      Vous ne devez pas vous inquiéter de savoir si l'utilisateur a la police parce que vous n'êtes pas l'envoi de la police, juste une image composée avec la police.

    5. Créer une image distincte pour chaque titre.




      Cet exercice particulier a deux images - un titre de niveau 1 et niveau 2. Parce que un vous créez des images directement, il est à vous de garder une trace de la façon dont l'image va communiquer son niveau global.

    6. Tenez compte du niveau global.

      Soyez sûr de faire le niveau global 2 valeurs regardent un peu plus petit ou moins souligné que le niveau 1. Autrement dit, si vous avez des images qui seront utilisés dans un 1 la mise en cap, ils doivent utiliser une police plus grande que les images qui seront utilisés dans un moins souligné niveau d'une position. Habituellement, cela se fait en ajustant la taille de la police dans vos images.

    7. Création de la page comme vous le feriez normalement.

      Après avoir créé ces images de spécialité, de construire une page Web régulière. Mettre

      et

      tags dans exactement les mêmes endroits que vous faites habituellement.

    8. Mettre balises à l'intérieur des rubriques.

      Plutôt que du texte ordinaire, les étiquettes lieu d'image à l'intérieur du

      et

      balises. Voir le code prochaine imageTitles.html si vous êtes un peu confus.

    9. Mettre du texte de titre dans le alt attribuer.

      La alt attribut est particulièrement important ici parce que si l'utilisateur a des graphiques éteint, le texte apparaît toujours comme un titre de style appropriée. Les gens avec des connexions lentes voir le texte avant le chargement des images, et les gens qui utilisent des lecteurs de texte peuvent toujours lire le texte alt de l'image.

    Voici le code utilisé pour générer les en-têtes basés sur l'image:

    imageTitles.html

    Cette page décrit les vaches célèbres dans l'histoire

    La plupart des gens ne sont pas conscients que les bovins tookpart effectivement dans la bataille. Ils ne l'ont pas bien sûr. Je justmade que vers le haut.

    Cette technique est un bon compromis entre les graphiques personnalisés et HTML ordinaire comme suit:

    • Vous avez une grande maîtrise de vos images. Si vous êtes habile avec votre outil graphique, vous pouvez faire tout type d'image que vous voulez agir comme un titre. Il ya littéralement aucune limite, sauf votre habileté et la créativité.

    • La page conserve sa structure. Vous avez encore des balises de titre en place, il est donc facile de voir que vous voulez dire une image particulière d'agir comme un titre. Vous pouvez encore voir l'organisation de la page dans le code HTML.

    • Vous avez un texte repli. La alt attributs seront activés si les images ne peuvent pas être affichés.

    • La signification sémantique des titres d'image est préservée. La alt balises fournissent une autre grande caractéristique. Si elles reproduisent le texte de l'image, ce texte est toujours disponible pour les lecteurs d'écran et les moteurs de recherche, afin que le texte ne soit pas enterré dans l'image.

    Cette technique est idéale pour les titres ou les autres zones, mais notez que le texte du titre a été répété dans la tag. Ceci est important parce que vous ne voulez pas perdre le texte. Les outils de recherche de moteurs et les lecteurs d'écran doivent le texte.

    Ne soyez pas tenté d'utiliser cette technique pour de plus grandes quantités de corps du texte. Cela provoque quelques problèmes:

    • Le texte est plus consultable. Les moteurs de recherche ne peuvent pas trouver du texte si elle est enterré dans les images.

    • Le texte est plus difficile à changer. Vous ne pouvez pas mettre à jour votre page avec un éditeur de texte. Au lieu de cela, vous devez télécharger l'image, modifier, et de le transférer à nouveau.

    • Images exigent beaucoup plus de bande passante que du texte. Ne pas utiliser des images si elles ne pratiquement pas ajouter à votre page. Vous pouvez faire l'affaire pour une rubrique quelques images, mais il est plus difficile de justifier avoir votre page entière enregistrée comme une image juste pour utiliser une police particulière.


    » » » » Comment utiliser des images pour votre HTML5 et CSS3 page web manchettes base