Comment aligner des éléments avec des flottants dans Dreamweaver - les nuls

Les concepteurs alignent souvent une image, un tag ou un autre élément à gauche ou à droite d'une page Web dans Dreamweaver, puis enveloppent le texte ou tout autre contenu autour de cet élément. L'image est alignée sur la droite de la colonne afin que le texte s'enroule à côté de la gauche. Dans les étapes qui suivent, vous découvrez comment créer des styles comme celui-ci.

crédit: Image de istockphoto. com

CSS offre de nombreux avantages quand il s'agit d'aligner des éléments comme celui-ci, mais la façon dont vous configurez ces styles n'est pas aussi évidente que vous pourriez l'imaginer au début parce que vous utilisez l'option float.

Après avoir compris que vous pouvez faire flotter des éléments, tels que des images, vers la gauche ou la droite d'une page, il est assez facile de créer des styles qui atteignent cet objectif. Dans cet exercice, vous apprendrez à créer deux styles qui sont idéaux pour aligner les images à gauche et à droite d'une page, avec une petite marge là où vous en avez besoin.

Les mises en page CSS incluses dans Dreamweaver CC ont déjà des styles flottants que vous pouvez utiliser pour aligner les éléments à droite et à gauche. Ces styles de classe sont nommés. fltlft (car, vous l'avez deviné, flottez à gauche) et. fltrt (pour le flotteur à droite).

Pour créer deux styles de classe que vous pouvez utiliser pour aligner des images et d'autres éléments à gauche et à droite d'une page, procédez comme suit:

1. Cliquez sur le signe plus dans le panneau Sélecteurs CSS Designer.

   Selon le contenu de la page, un nouveau nom de style ou un champ vide dans lequel vous pouvez entrer un nom de style est ajouté au panneau Sélecteurs.

2. Double-cliquez pour sélectionner le nom que Dreamweaver a ajouté au panneau et remplacez-le par le nom que vous souhaitez pour votre nouveau style, ou cliquez pour sélectionner le champ vide et entrez un nom.

   Si aucun nom n'est ajouté, entrez le nom que vous désirez dans le champ vide. Vous pouvez nommer le style comme vous le souhaitez, mais assurez-vous d'entrer une période avant le nom si vous créez un style de classe ou un signe # pour un style d'ID.

3. Double-cliquez sur le nouveau nom et modifiez-le comme vous le souhaitez.

   Bien que vous puissiez nommer ces styles comme vous préférez, les styles d'alignement sont généralement nommés avec les raccourcis fltrt et fltlft, qui signifient respectivement float droit et float gauche.

   Par exemple, si vous créez un style pour aligner des éléments sur la gauche, vous devez le nommer. fltlft.

4. Dans le panneau Propriétés, cliquez sur l'icône qui définit Float vers la gauche.

   

5. Utilisez les paramètres de marge dans le panneau Propriétés pour créer une marge autour de l'élément flottant.

   Il est recommandé d'ajouter un espace de marge du côté opposé au réglage du flotteur. Si vous créez un style pour faire flotter une image vers la gauche, ajoutez 5 ou 10 pixels d'espace dans le champ Marge de droite.Lorsque vous alignez une image sur le côté gauche de la page, une marge sera créée entre l'image et tout autre élément qui entoure l'image.

6. Sélectionnez l'image ou l'autre élément que vous souhaitez aligner dans la page.

7. Sélectionnez le nom du style que vous avez créé dans la liste déroulante Classe de l'inspecteur des propriétés.

   Les règles de style que vous avez définies lors de la création du style sont automatiquement appliquées. Si vous avez sélectionné une image dans une page de texte, l'image se déplace vers le côté gauche de la page et le texte l'entoure avec une marge entre l'image et le texte.

8. Répétez les étapes 1 à 7, une fois avec le flotteur réglé sur Droite et 5 à 10 pixels d'espace marge dans le champ Marge gauche de la catégorie Boîtier, et de nouveau avec Float défini sur Gauche et 5 à 10 pixels d'espace marge dans le champ Marge droite de la catégorie Box.