À l'aide de l'éditeur de texte et d'image, vous pouvez illustrer votre contenu de texte avec des images, créant des articles et des pages de présentation visuellement attrayants.
Vous avez quelques options pour ajouter une image à votre site Web :
- En tant qu’élément Inline via l’élément de texte dans la catégorie Texte et images.
- Via l’élément de texte et d’image, là où des images additionnelles peuvent être ajoutées en tant qu'éléments Inline.
- En tant qu’élément Inline unique dans la catégorie Texte et images.
Il est important de noter que si vous ajoutez une image via l’élément Image, comme dans l’exemple ci-dessus, vous ne pourrez pas ajouter des éléments de contenu additionnels comme du texte ou une vidéo. Ce n’est pas le cas avec les deux autres alternatives.
Il y a quelques options pour téléverser les images désirées :
- Glissez-déposez des images à partir de dossiers locaux, ou d'autres pages Web dans le panneau des propriétés.
Recherchez des images à partir des fichiers locaux sur votre ordinateur en cliquant dans la zone d'ajout d'image.
Ajoutez à partir de l'URL pour une image publiée sur un autre site. Copiez simplement l'adresse de l'image, collez-la dans le champ URL et cliquez sur Ajouter une image. Les images dont le nom comporte un croisillon « # » ou un point d’interrogation « ? » ne peuvent être téléchargées qu’en utilisant un glisser-déposer ou une URL.
Une autre option consisterait à tirer profit de notre onglet Bibliothèque d'images et de choisir parmi une variété de d'images.
Une fois que vous téléchargez une image, elle sera automatiquement définie à la taille par défaut. Choisissez parmi 3 tailles d'images prédéfinies : petite, moyenne et réelle, ou définissez la vôtre (taille personnalisée). Même si une image peut être redimensionnée, le système conserve l'image d'origine afin qu'elle puisse être ajustée ultérieurement. Toutes les images redimensionnées apparaîtront avec des détails améliorés sur un affichage à haute résolution de la rétine.
Cliquer sur une image fournira un panneau d’édition qui s’affichera à droite et qui comprend des options de modification, des paramètres de formatage, des bordures, des styles et des effets.
Vous pouvez modifier l'image sélectionnée à tout moment en cliquant sur le bouton Modifier. Choisissez Modifier et l'image s'ouvrira dans un éditeur externe où vous appliquerez la modification d'image de base, telle que le recadrage, le renversement, la rotation, le redimensionnement et les effets spéciaux limités.
Les options par défaut vous permettront de définir des dimensions d’images personnalisées en spécifiant la largeur et la hauteur désirées. Lorsque vous changez la taille, il est recommandé de cliquer sur l’icône du cadenas pour contraindre les proportions de l’image et empêcher sa distortion. Par exemple, quand nous modifions la largeur, la hauteur s’ajuste proportionnellement pour assurer que le ratio et la perspective demeurent relatives à l’échelle de l’image originale. Pour qu’une image retrouve son format d’origine, cliquez sur le lien de réinitialisation.
Changer la largeur et la taille d’une image dans l’éditeur modifiera seulement l’échelle de l’image aux nouvelles dimensions visuellement lorsque le navigateur chargera la page, mais le fichier d’image conservera sa taille originale. Pour optimiser le chargement plus rapide des images de plus grande taille, il est recommandé de retravailler la taille des images dans un programme d’édition d’image externe avant de téléverser le fichier dans l’éditeur de texte et d’image.
Le champ Légende s'affichant par pointage de la souris vous permet de spécifier un texte de description lié à l'image qui apparaîtra lorsqu'un utilisateur place son curseur sur l'image. Les légendes de survol ont également un rôle à jouer pour l'optimisation appropriée des moteurs de recherche de votre site Web. Par conséquent, il est recommandé de les ajouter aux images clés de vos pages.
Pour apporter d’autres changements à votre image, vous pouvez appliquer un effet d’image qui sera visible une fois que le changement aura été sauvegardé, en cliquant à l’extérieur de l’élément modifié.
Déterminer l’alignement d’une image et ajouter un lien sur l’image sont certaines des options à votre disposition. Sélectionner l’icône pour ajouter un lien affichera le sous-menu suivant au bas du menu à droite.
Ajustez l’espace autour de l’image en relation avec le contenu additionnel de l’élément en spécifiant la bordure haut, bas, gauche ou droite en pixels.
Vous pouvez ajouter une bordure à vos images en spécifiant la largeur de la bordure de l’image en pixels et en sélectionnant la couleur de la bordure désirée. Cliquer sur l’icône de couleur du cadre affichera une boîte à outils qui vous permettra d’appliquer ou d’enlever la couleur de la bordure.
Les images qui s’affichent par pointage de la souris ajoutent un élément d’interactivité à un site et peuvent aussi indiquer une action qui surviendra si on clique sur l’image. Cela pourrait être utile dans les cas où un lien a été ajouté sur une image.
Créez une image qui s’affiche par pointage de la souris avec des effets de transition en téléchargeant un deuxième fichier d’image sous l’option de l’image qui s’affiche par pointage de la souris. Lorsque l’image qui s’affiche par pointage de la souris a été téléversée, vous pouvez sélectionner une liste de transitions à utiliser entre ces deux images.
Les effets d’estompement et de dissolution semblent très semblables au premier coup d’oeil, mais la différence est importante lorsqu’ils sont appliqués à des images en partie transparentes. Avec l’effet Estompement l’image normale demeure pendant que l’image qui s’affiche par pointage de la souris s’estompe par dessus pour combiner les deux images. Avec l’effet Dissolution l’image normale s’estompe pendant que l’image qui s’affiche par pointage de la souris s’estompe par dessus.
Selon la taille des images que vous sélectionnez, les contrôles vous permettent d’ajuster les images directement dans l’éditeur de texte et d’image. Vous pouvez facilement recadrer une image et en agrandir une zone spécifique sans utiliser un autre outil. Le résultat pourra être affiché instantanément et dans le contexte de la page. Cette fonction s’applique aussi aux images qui s’affichent par pointage de la souris. La fonction de recadrage et d’agrandissement est offerte lorsque l’option avancée est activée et l’image source doit être plus grande que l’image affichée.
Les images qui sont plus grandes que leur format affiché présenteront une barre d’agrandissement et de rétrécissement sur laquelle vous pourrez cliquer afin de glisser et de positionner l’image selon les dimensions spécifiées. Cela facilite la mise au point sur une zone spécifique tel qu’il est affiché dans l’exemple ci-dessous. Les images avec une variation qui s’affiche par pointage de la souris afficheront un icône de commutateur dans le coin supérieur droit lorsqu’elles seront sélectionnées. Cliquer sur l’icône activera toutes les options de modifications pour l’image qui s’affiche par pointage de la souris.