Utilisation des feuilles de style en cascade (CSS) est maintenant un moyen accepté de concevoir et de mettre sur un site Web. Si vous voulez créer une galerie d`images, Hypertext Markup Language (HTML) est utilisé pour placer les photos sur la page, et CSS leur donne une taille et l`emplacement spécifique. Comme les photos, une légende de texte est placé en utilisant HTML et de style en utilisant le CSS. Cela peut être fait à partir du même emplacement dans le document HTML.
Localisez la section correcte de votre code HTML. Si votre galerie de vignettes contient des photographies, le code pour chaque image commence probablement avec "img src" et se termine par un fichier dans le ".jpg" format. Il devrait y avoir plusieurs lignes avec un code similaire, un pour chaque image dans la galerie.
Trouver la fin du code pour le fichier d`image. Cela devrait être après où il est dit ".jpg." Placez le curseur là, et appuyez sur le retour, de sorte que vous avez une ligne vierge pour travailler avec, directement sous le code de l`image. Entrez le texte que vous souhaitez afficher la photo ci-dessous à cet endroit là.
Placez le texte dans les deux balises div, et donner à la div une description. Ceci est ce qui va vous permettre d`aller dans la partie CSS de votre document dans une étape future et de modifier la conception. Votre texte devrait ressembler à ceci:
Le texte que vous voulez la photo ci-dessous. Ce div sera placé à l`intérieur de la plus grande div, pour l`image entière. De cette façon, vous avez la possibilité de déterminer quels changements sont nécessaires.Repérez la partie CSS de votre document. Ce sera sous l`étiquette qui dit
Entrez le tag qui permettra à la CSS pour trouver la partie du document HTML que vous voulez faire des changements de style pour. Cette partie du code est appelé votre sélecteur. Il ressemblera à ceci: div.desc
Cela signifie que vous souhaitez apporter des modifications à la div que vous avez nommé "desc," qui est court pour la description.
Créer des changements de style à votre légende, si vous le souhaitez. Par exemple, en utilisant le CSS, vous pouvez aligner le texte pour qu`il soit centré avec l`image, et vous pouvez déterminer la largeur de l`espace est que la légende affichera sur. Vous auriez besoin d`ajouter ces balises sous votre sélection:
div.desc {
text-align: center;
largeur: 120px}
Conseils & Avertissements
- Vérifiez l`exactitude de votre travail en enregistrant le code HTML, puis en ouvrant le fichier pour votre galerie photo. Si le fichier est déjà ouvert, appuyez sur rafraîchir et les changements devraient apparaître.
- Vous pouvez également parcourir des tutoriels CSS (voir Ressources) pour trouver d`autres façons de styliser votre légende.
- Assurez-vous que toute modification du code HTML et CSS sont exacts. Si vous avez des fautes de frappe, ou si le code est incorrect, les résultats peuvent être imprévisibles.
