mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-24 20:47:06 +08:00
152 lines
22 KiB
HTML
152 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Insérer des images</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="description" content="Ajouter une image à votre document et ajuster sa position et ses propriétés." />
|
|
<link type="text/css" rel="stylesheet" href="../../../../../../common/main/resources/help/editor.css" />
|
|
<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
|
|
<script type="text/javascript" src="../callback.js"></script>
|
|
<script type="text/javascript" src="../../../../../../common/main/resources/help/search/js/page-search.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="mainpart">
|
|
<div class="search-field">
|
|
<input id="search" class="searchBar" placeholder="Rechercher" type="text" onkeypress="doSearch(event)">
|
|
</div>
|
|
<h1>Insérer des images</h1>
|
|
<p><a href="https://www.onlyoffice.com/fr/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>L'éditeur de documents</b></a> vous permet d'insérer des images aux formats populaires dans votre document. Les formats d'image <a href="../HelpfulHints/supportedformats.htm" target="_blank">pris</a> en charge sont les suivants: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>.</p>
|
|
<h3>Insérer une image</h3>
|
|
<p>Pour insérer une image dans votre document de texte,</p>
|
|
<ol>
|
|
<li>Placez le curseur à l'endroit où vous voulez insérer l'image.</li>
|
|
<li>Passez à l'onglet <b>Insertion</b> de la barre d'outils supérieure.</li>
|
|
<li>Cliquez sur<div class="icon icon-image"></div>l'icône <b>Image</b> de la barre d'outils supérieure.</li>
|
|
<li>Sélectionnez l'une des options suivantes pour télécharger l'image:<ul>
|
|
<li>l'option <b>Image à partir d'un fichier</b> ouvre la fenêtre de dialogue standard pour sélectionner un fichier. Recherchez le fichier nécessaire sur votre ordinateur et cliquez sur le bouton0<b> Ouvrir</b>.<p class="note">Dans <i>l'éditeur en ligne</i>, vous pouvez sélectionnez plusieurs images à la fois.</p>
|
|
</li>
|
|
<li>l'option <b>Image à partir d'une URL</b> ouvre la fenêtre dans laquelle il faut saisir l'adresse Web de l'image, ensuite cliquez sur le bouton <b>OK</b>.</li>
|
|
<li class="onlineDocumentFeatures">l'option <b>Image de stockage</b> ouvrira la fenêtre<b> Sélectionner la source de données</b>. Sélectionnez une image stockée sur votre portail et cliquez sur le bouton <b>OK</b>.</li>
|
|
</ul>
|
|
</li>
|
|
<li>Une fois ajoutée, vous pouvez modifier sa taille, ses paramètres et sa position.</li>
|
|
</ol>
|
|
<p>Il est également possible d'ajouter une <b>légende</b> à l'image. Pour en savoir plus sur utilisation des légendes, veuillez consulter <a href="../UsageInstructions/AddCaption.htm" onclick="onhyperlinkclick(this)">cet article</a>.</p>
|
|
<p>Pour transformer une image en <b>lien cliquable</b>:</p>
|
|
<ul>
|
|
<li>sélectionnez l'image et utilisez la combinaison des touches <kbd>Ctrl</kbd>+<kbd>K</kbd> ou</li>
|
|
<li>sélectionnez l'image, passez à l'onglet <b>Insertion</b> ou <b>Références</b> et cliquez sur le bouton <b>Lien</b> ou</li>
|
|
<li>sélectionnez l'image, cliquez sur l'image avec le bouton droit de la souris et et choisissez <b>Lien</b> dans le menu.</li>
|
|
</ul>
|
|
<p>Pour en savoir plus sur les liens, veuillez consulter <a href="../UsageInstructions/AddHyperlinks.htm" target="_blank">cet article</a>.</p>
|
|
|
|
<h3>Déplacer et redimensionner des images</h3>
|
|
<p><span class="big big-moving_image"></span></p>
|
|
<p>Pour modifier la taille de l'image, faites glisser les petits carreaux <span class="icon icon-resize_square"></span> situés sur ses bords. Pour garder les proportions de l'image sélectionnée lors du redimensionnement, maintenez la touche <kbd>Maj</kbd> enfoncée et faites glisser l'une des icônes de coin.</p>
|
|
<p>Pour modifier la position de l'image, utilisez l'icône <span class="icon icon-arrow"></span> qui apparaît lorsque vous placez le curseur de votre souris sur l'image. Faites glisser l'image vers la position choisie sans relâcher le bouton de la souris.</p>
|
|
<p>Lorsque vous déplacez l'image, des lignes de guidage s'affichent pour vous aider à la positionner sur la page avec précision (si un style d'habillage autre que <em>aligné sur le texte</em> est sélectionné).</p>
|
|
<p>Pour faire pivoter une image, déplacer le curseur vers la poignée de rotation <span class="icon icon-greencircle"></span> et faites la glisser dans le sens horaire ou antihoraire. Pour faire pivoter par incréments de 15 degrés, maintenez enfoncée la touche <kbd>Maj</kbd> tout en faisant pivoter.</p>
|
|
<p class="note">La liste des raccourcis clavier qui peuvent être utilisés lorsque vous travaillez avec des objets est disponible <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">ici</a>.</p>
|
|
<hr />
|
|
<h3>Ajuster les paramètres de l'image</h3>
|
|
<p><img alt="Onglet Paramètres de l'image" src="../images/right_image.png" /></p>
|
|
<p>Certains paramètres de l'image peuvent être modifiés en utilisant l'onglet <b>Paramètres de l'image</b> de la barre latérale droite. Pour l'activer, cliquez sur l'image et sélectionnez l'icône <span class="icon icon-image_settings_icon"></span> <b>Paramètres de l'image</b> à droite. Vous pouvez y modifier les paramètres suivants:</p>
|
|
<ul>
|
|
<li><b>Taille</b> est utilisée pour afficher la <b>Largeur</b> et la <b>Hauteur</b> de l'image actuel. Le bouton Ajuster aux marges permet de redimensionner l'image et de l'ajuster dans les marges gauche et droite. Le cas échéant, vous pouvez rétablir la taille de l'image source en cliquant sur le bouton <b>Taille actuelle</b>. Le bouton <b>Ajuster aux marges</b> permet de redimensionner l'image qu'elle corresponde à la zone entre la marge droite et la marge gauche de la page.<p>Le bouton <b>Rogner</b> permet de rogner l'image. Cliquez sur le bouton <b>Rogner</b> pour activer les poignées de rognage qui appairaient par chaque coin et sur les côtés. Faites glisser manuellement les poignées pour définir la zone de rognage. Vous pouvez placer le curseur sur la bordure de la zone de rognage lorsque il se transforme en icône <span class="icon icon-arrow"></span> et faites glisser la zone.</p>
|
|
<ul>
|
|
<li>Pour rogner un seul côté, faites glisser la poignée située au milieu de ce côté.</li>
|
|
<li>Pour rogner simultanément deux côtés adjacents, faites glisser l'une des poignées d'angle.</li>
|
|
<li>Pour rogner également deux côtés opposés de l'image, maintenez la touche <kbd>Ctrl</kbd> enfoncée lorsque vous faites glisser la poignée au milieu de l'un de ces côtés.</li>
|
|
<li>Pour rogner également tous les côtés de l'image, maintenez la touche <kbd>Ctrl</kbd> enfoncée lorsque vous faites glisser l'une des poignées d'angle.</li>
|
|
</ul>
|
|
<p>Lorsque la zone de rognage est définie, cliquez sur le bouton <b>Rogner</b> encore une fois, ou appuyez sur la touche <kbd>Échap</kbd> ou cliquez n'importe où à l'extérieur de la zone de rognage pour valider les modifications.</p>
|
|
<p>Une fois la zone de rognage sélectionnée, il est également possible d'utiliser les options <b>Rogner à la forme</b>, <b>Remplir</b> et <b>Ajuster</b> disponibles dans le menu déroulant <b>Rogner</b>. Cliquez de nouveau sur le bouton <b>Rogner</b> et sélectionnez l'option de votre choix:</p>
|
|
<ul>
|
|
<li>Lorsque vous sélectionnez l'option <b>Rogner à la forme</b>, l'image va s'ajuster à une certaine forme. Vous pouvez sélectionner la forme appropriée dans la galerie qui s'affiche lorsque vous placez le pointeur de la souris sur l'option <b>Rogner à la forme</b>. Vous pouvez toujours utiliser les options <b>Remplir</b> et <b>Ajuster</b> pour choisir le façon d'ajuster votre image à la forme.</li>
|
|
<li>Si vous sélectionnez l'option <b>Remplir</b>, la partie centrale de l'image originale sera conservée et utilisée pour remplir la zone de cadrage sélectionnée, tandis que les autres parties de l'image seront supprimées.</li>
|
|
<li>Si vous sélectionnez l'option <b>Ajuster</b>, l'image sera redimensionnée pour correspondre à la hauteur ou à la largeur de la zone de rognage. Aucune partie de l'image originale ne sera supprimée, mais des espaces vides peuvent apparaître dans la zone de rognage sélectionnée.</li>
|
|
</ul>
|
|
<p>Pour réinitialiser la dimension en pixels d'une image, cliquez sur <b>Réinitialiser le rognage</b>.</p>
|
|
</li>
|
|
<li><b>Opacité</b> sert à régler le niveau <b>d'opacité</b> des formes automatiques en faisant glisser le curseur ou en saisissant la valeur de pourcentage à la main. La valeur par défaut est <b>100%</b>. Elle correspond à l'opacité complète. La valeur <b>0%</b> correspond à la transparence totale.</li>
|
|
<li><b>Rotation</b> permet de faire pivoter l'image de 90 degrés dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre, ainsi que de retourner l'image horizontalement ou verticalement. Cliquez sur l'un des boutons:<ul>
|
|
<li><div class="icon icon-rotatecounterclockwise"></div>pour faire pivoter l'image de 90 degrés dans le sens inverse des aiguilles d'une montre.</li>
|
|
<li><div class="icon icon-rotateclockwise"></div>pour faire pivoter l'image de 90 degrés dans le sens des aiguilles d'une montre.</li>
|
|
<li><div class="icon icon-fliplefttoright"></div>pour retourner l'image horizontalement (de gauche à droite).</li>
|
|
<li><div class="icon icon-flipupsidedown"></div>pour retourner l'image verticalement (à l'envers).</li>
|
|
</ul>
|
|
</li>
|
|
<li><b>Style d'habillage</b> sert à sélectionner l'un des styles d'habillage, ç-à-d <em>aligné sur le texte</em>, <em>carré</em>, <em>rapproché</em>, <em>au travers</em>, <em>haut et bas</em>, <em>devant le texte</em>, <em>derrière le texte</em> (pour en savoir plus, consultez la section <a href="../UsageInstructions/InsertImages.htm#textwrap">paramètres avancés ci-dessous</a>).</li>
|
|
<li><b>Remplacer l'image</b> sert à remplacer l'image actuelle et charger une autre <b>À partir d'un fichier, <b>À partir</b> de l'espace de stockage</b> ou <b>À partir d'une URL</b>.</li>
|
|
</ul>
|
|
<p>Certains paramètres de l'image peuvent être également modifiés en utilisant <b>le menu contextuel</b>. Les options du menu sont les suivantes:</p>
|
|
<ul>
|
|
<li><b>Couper, Copier, Coller</b> - les options nécessaires pour couper ou coller le texte / l'objet sélectionné et coller un passage de texte précédemment coupé / copié ou un objet à la position actuelle du curseur.</li>
|
|
<li><b>Organiser</b> sert à placer le graphique sélectionné au premier plan, envoyer à l'arrière-plan, avancer ou reculer ainsi que grouper ou dégrouper des graphiques pour effectuer des opérations avec plusieurs à la fois. . Pour en savoir plus sur l'organisation des objets, vous pouvez vous référer à <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">cette page</a>.</li>
|
|
<li><b>Aligner</b> sert à aligner l'image à gauche, au centre, à droite, en haut, au milieu ou en bas. Pour en savoir plus sur l'alignement des objets, veuillez consulter <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">cette page</a>.</li>
|
|
<li><b>Style d'habillage</b> sert à sélectionner l'un des styles d'habillage disponibles - aligné sur le <em>texte</em>, <em>carré</em>, <em>rapproché</em>, au <em>travers</em>, <em>haut et bas</em>, <em>devant le</em> texte, <em>derrière</em> le texte, ou modifier les limites du renvoi à la ligne. L'option <b>Modifier les limites du renvoi à la ligne</b> n'est disponible que si le style d'habillage défini n'est pas En ligne. Faites glisser les points d'habillage pour personnaliser les limites. Pour créer un nouveau point d'habillage, cliquez sur la ligne rouge et faites-la glisser vers la position désirée.<div class="big big-wrap_boundary"></div></li>
|
|
<li><b>Rotation</b> permet de faire pivoter l'image de 90 degrés dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre, ainsi que de retourner l'image horizontalement ou verticalement.</li>
|
|
<li><b>Enregistrer en tant qu'image</b> sert à sauvegarder l'image en tant qu'image sur votre ordinateur.</li>
|
|
<li>Rogner sert à sélectionner l'une des options de rognage: <b>Rogner</b>, <b>Remplir</b> , ou <b>Ajuster</b>. Sélectionnez l'option <b>Rogner</b> dans le sous-menu, ensuite faites glisser les poignées de rognage pour définir la zone de rognage, puis cliquez à nouveau sur l'une de ces trois options dans le sous-menu pour appliquer les modifications.</li>
|
|
<li><b>Taille actuelle</b> sert à changer la taille actuelle de l'image et rétablir la taille d'origine.</li>
|
|
<li><b>Remplacer l'image</b> sert à remplacer l'image actuelle et charger une autre <b>À partir d'un fichier, <b>À partir</b> de l'espace de stockage</b> ou <b>À partir d'une URL</b>.</li>
|
|
<li><b>Paramètres avancés de l'image </b>sert à ouvrir la fenêtre Image - Paramètres avancés.</li>
|
|
</ul>
|
|
<p><img alt="L'onglet Paramètres de la forme" src="../images/right_image_shape.png" /></p>
|
|
<p>Une fois l'image est sélectionnée, l'icône <span class="icon icon-shape_settings_icon"></span> <b>Paramètres de la forme</b> deviendra aussi disponible à droite. Vous pouvez cliquer sur cette icône pour ouvrir l'onglet <b>Paramètres de la forme</b> dans la barre latérale droite et ajuster le type, la taille, la couleur et l'opacité de la <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>line</b></a> ainsi que le type de la forme en sélectionnant une autre forme dans le menu <b>Modifier la forme automatique</b>. La forme de l'image changera en conséquence.</p>
|
|
<p>Sous l'onglet Paramètres de la forme, vous pouvez utiliser l'option Ajouter une ombre pour créer une zone ombrée autour de l'image.</p>
|
|
<hr />
|
|
<h3>Ajuster les paramètres de l'image</h3>
|
|
<p>Pour modifier les paramètres avancés, cliquez sur l'image avec le bouton droit de la souris et sélectionnez <b>Paramètres avancés de l'image</b> du menu contextuel ou cliquez sur le lien de la barre latérale droite <b>Afficher les paramètres avancés</b>. La fenêtre paramètres de l'image s'ouvre:</p>
|
|
<p><img alt="Image - Paramètres avancés: Taille" src="../images/image_properties.png" /></p>
|
|
<p>L'onglet <b>Taille</b> comporte les paramètres suivants:</p>
|
|
<ul>
|
|
<li><b>Largeur</b> et <b>Hauteur</b> - utilisez ces options pour changer la largeur et/ou la hauteur. Lorsque le bouton <b>Proportions constantes</b><div class="icon icon-constantproportions"></div>est activé (dans ce cas, il ressemble à ceci),<div class="icon icon-constantproportionsactivated"></div>la largeur et la hauteur seront changées en même temps, le ratio d'aspect du graphique original sera préservé. Pour rétablir la taille par défaut de l'image ajoutée, cliquez sur le bouton <b>Taille actuelle</b>.</li>
|
|
</ul>
|
|
<p><img alt="Image - Paramètres avancés: Rotation" src="../images/image_properties_4.png" /></p>
|
|
<p>L'onglet <b>Rotation</b> comporte les paramètres suivants:</p>
|
|
<ul>
|
|
<li><b>Angle</b> - utilisez cette option pour faire pivoter l'image d'un angle exactement spécifié. Entrez la valeur souhaitée mesurée en degrés dans le champ ou réglez-la à l'aide des flèches situées à droite.</li>
|
|
<li><b>Retourné</b> - cochez la case <b>Horizontalement</b> pour retourner l'image horizontalement (de gauche à droite) ou la case <b>Verticalement</b> pour retourner l'image verticalement (à l'envers).</li>
|
|
</ul>
|
|
<p><img alt="Image - Paramètres avancés: Habillage du texte" src="../images/image_properties_1.png" /></p>
|
|
<p id="textwrap">L'onglet <b>Habillage du texte</b> contient les paramètres suivants:</p>
|
|
<ul>
|
|
<li><b>Style d'habillage</b> - utilisez cette option pour changer la manière dont l'image est positionnée par rapport au texte : elle peut faire partie du texte (si vous sélectionnez le style <em>aligné sur le texte</em>) ou être contournée par le texte de tous les côtés (si vous sélectionnez l'un des autres styles).<ul>
|
|
<li>
|
|
<p><div class="icon icon-wrappingstyle_inline"></div><b>Aligné sur le texte</b> - l'image fait partie du texte, comme un caractère, ainsi si le texte est déplacé, le graphique est déplacé lui aussi. Dans ce cas-là les options de position ne sont pas accessibles.</p>
|
|
<p>Si vous sélectionnez l'un des styles suivants, vous pouvez déplacer l'image indépendamment du texte et définir sa position exacte :</p>
|
|
</li>
|
|
<li><p><div class="icon icon-wrappingstyle_square"></div><b>Carré</b> - le texte est ajusté autour des bords du graphique.</p></li>
|
|
<li><p><div class="icon icon-wrappingstyle_tight"></div><b>Rapproché</b> - le texte est ajusté sur le contour du graphique.</p></li>
|
|
<li><p><div class="icon icon-wrappingstyle_through"></div><b>Au travers</b> - le texte est ajusté autour des bords du graphique et occupe l'espace vide à l'intérieur de celui-ci. Pour créer l'effet, utilisez l'option<b> Modifier les limites du renvoi à la ligne</b> du menu contextuel.</p></li>
|
|
<li><p><div class="icon icon-wrappingstyle_topandbottom"></div><b>Haut et bas</b> - le texte est ajusté en haut et en bas du graphique.</p></li>
|
|
<li><p><div class="icon icon-wrappingstyle_infront"></div><b>Devant le texte</b> - l'image s'affiche sur le texte.</p></li>
|
|
<li><p><div class="icon icon-wrappingstyle_behind"></div><b>Derrière le texte </b> - le texte s'affiche sur l'image.</p></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<p>Si vous avez choisi le style <em>carré</em>, <em>rapproché</em>, <em>au travers</em>, <em>haut et bas</em>, vous avez la possibilité de configurer des paramètres supplémentaires, ç-à-d <b>Distance du texte</b> de tous les côtés (haut, bas, gauche, droit).</p>
|
|
<p id="position"><img alt="Image - Paramètres avancés: Position" src="../images/image_properties_2.png" /></p>
|
|
<p>L'onglet <b>Position</b> n'est disponible que si vous choisissez le style d'habillage autre que En ligne. Cet onglet contient les paramètres suivants qui varient selon le type d'habillage sélectionné:</p>
|
|
<ul>
|
|
<li>La section <b>Horizontal</b> vous permet de sélectionner l'un des trois types de positionnement d'image suivants:<ul>
|
|
<li><b>Alignement</b> (gauche, centre, droite) <b>par rapport au</b> caractère, à la colonne, à la marge de gauche, à la marge, à la page ou à la marge de droite,</li>
|
|
<li><b>Position</b> absolue mesurée en unités absolues, c.-à-d. <b>Centimètres</b>/<b>Points</b>/<b>Pouces</b> (selon l'option spécifiée dans l'onglet <b>Fichier</b> → <b>Paramètres avancés...</b>) à droite du caractère, de la colonne, de la marge de gauche, de la marge, de la page ou de la marge de droite.</li>
|
|
<li><b>Position relative</b> mesurée en pourcentage <b>par rapport à</b> la marge gauche, à la marge, à la page ou à la marge de droite.</li>
|
|
</ul>
|
|
</li>
|
|
<li>La section <b>Vertical</b> vous permet de sélectionner l'un des trois types de positionnement d'image suivants:<ul>
|
|
<li><b>Alignement</b> (haut, centre, bas) <b>par rapport à</b> la ligne, à la marge, à la marge inférieure, au paragraphe, à la page ou à la marge supérieure,</li>
|
|
<li><b>Position absolue</b> mesurée en unités absolues, c.-à-d. <b>Centimètres</b>/<b>Points</b>/<b>Pouces</b> (selon l'option spécifiée dans l'onglet <b>Fichier</b> → <b>Paramètres avancés...</b>) <b>au-dessous</b> de la ligne, de la marge, de la marge inférieure, du paragraphe, de la page ou la marge supérieure,</li>
|
|
<li><b>Position relative</b> mesurée en pourcentage <b>par rapport à</b> la marge, à la marge inférieure, à la page ou à la marge supérieure.</li>
|
|
</ul>
|
|
</li>
|
|
<li><b>Déplacer avec le texte</b> détermine si l'image se déplace en même temps que le texte sur lequel il est aligné.</li>
|
|
<li><b>Chevauchement</b> détermine si deux images sont fusionnées en une seule ou se chevauchent si vous les faites glisser les unes près des autres sur la page.</li>
|
|
</ul>
|
|
<p><img alt="Image - Paramètres avancés" src="../images/image_properties_3.png" /></p>
|
|
<p>L'onglet <b>Texte de remplacement</b> permet de spécifier un <b>Titre</b> et une <b>Description</b> qui sera lue aux personnes avec des déficiences cognitives ou visuelles.</p>
|
|
</div>
|
|
</body>
|
|
</html> |