Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Ajouter une bordure aux images dans Dreamweaver

 

Les images contenues dans une page web sont plus attractives et plus conviviales s'elles contiennnent une bordure. Il est intéressant d'aborder les images d'un site avec grand intérêt surtout que le visuel constitue un moyen d'attraction dans un site.

Dans ce petit tutoriel, nous verrons comment ajouter une bordure à une image avec Dreamweaver.

Or, il existe deux façons pour ajouter une marge à une image dans Dreamweaver:

1- En utilisant la feuille de style de votre template pour laisser un espacement autour de l'image;

2- En Modifiant la bordure de l'image dans le panneau des propriétés Dreamweaver.

Nous verrons dans ce tuto comment ajouter une bordure à l'image en utilisant le panneau des propriétés pour régler justement les propriétés de l'image. Nous travaillerons sur la bordure et aussi sur l'alignement de l'image puisque nous y sommes.

Voyons un exemple: une image insérée dans un texte sans bordure et avec un mauvais alignement:

Tutos gratuitsNous observons que l'image est mal alignée et que le texte touche la bordure de l'image alors qu'on peut faire avec Dreamweaver en essayant d'ajouter une petite bordure à notre image pour qu'elle puisse apparaitre plus élégante et plus en valeur puis en l'aligant correctement que ça soit à gauche ou à droite.

Nous allons cliquer sur l'image insérée pour la sélectionner puis nous irons en bas dans Propriétés pour faire les modifications nécessaires.

Inspecteur de propriétés pour modification d'image

Tutos gratuitsVoici à quoi va ressember l'image ajouter dans la page avec un aperçu des modifications apportées dans le panneau des propriétés.

Comme vous pouvez le voir, l'image est alignée à gauche avec un espacement qui la sépare un peu du texte. Ces réglages peuvent être effectués dans le panneau des propriétés. Faites les changements nécessaires et observez le résultat après.

Donc, dans cet exemple, j'ai fait Espace Vertical de 4: ce qui laisse une petit espace en haut par rapport à la ligne où commence le texte., Espace Horizontal de 10: ce qui sépare l'image du texte, Bordure: 0.

Modifications image

Voir aussi comment optimiser les images pour le web

 

   

 

 

   

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site