mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-24 15:42:49 +08:00
126 lines
14 KiB
HTML
126 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Insérer des images</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="description" content="Ajouter une image à votre classeur et configurer sa position et sa taille" />
|
|
<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/spreadsheet-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>L'éditeur de classeurs</b></a> vous permet d'insérer des images aux formats populaires dans votre feuille de calcul. Les formats d'image pris en charge sont les suivants: BMP, GIF, JPEG, JPG, PNG.</p>
|
|
<h3>Insérer une image</h3>
|
|
<p>Pour insérer une image dans votre classeur,</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 l'icône <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 charger l'image :
|
|
<ul>
|
|
<li>l'option <b>Image à partir d'un fichier</b> ouvre la fenêtre de dialogue standard pour sélectionner le fichier. Sélectionnez le fichier de votre choix sur le disque dur de votre ordinateur et cliquez sur le bouton <b>Ouvrir</b>
|
|
<p class="note">Dans l'éditeur en ligne, vous pouvez sélectionnez plusieurs images à la fois.</p>
|
|
</li>
|
|
<li>l'option<b> Image à partir d'une URL</b> ouvre la fenêtre où vous pouvez saisir l'adresse Web de l'image et cliquer 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>
|
|
</ol>
|
|
<p>Après cela, l'image sera ajouté à la feuille de calcul. Vous pouvez sauvegarder l'image sur votre ordinateur à l'aide de l'option <b>Enregistrer en tant qu'image</b> dans le menu contextuel.</p>
|
|
<h3>Régler les paramètres de l'image</h3>
|
|
<p>Après avoir ajouté l'image, vous pouvez <a href="ManipulateObjects.htm" onclick="onhyperlinkclick(this)">modifier sa taille et sa position</a>.</p>
|
|
<p>Pour spécifier les dimensions exactes de l'image:</p>
|
|
<ol>
|
|
<li>sélectionnez l'image avec la souris,</li>
|
|
<li>
|
|
cliquez sur l'icône <b>Paramètres de l'image</b> <div class = "icon icon-image_settings_icon"></div> sur la barre latérale droite,
|
|
<p><img alt="Fenêtre Paramètres de l'image du panneau latéral droit" src="../images/imagesettings.png" /></p>
|
|
</li>
|
|
<li>Dans la section <b>Taille</b>, définissez les valeurs <b>Largeur</b> et <b>Hauteur</b> requises. 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>
|
|
</ol>
|
|
<p>Pour rogner l'image:</p>
|
|
<p>Cliquez sur le bouton <b>Rogner</b> pour activer les poignées de recadrage qui appairaient par chaque coin et sur les côtés. Faites glisser manuellement les pognées pour définir la zone de recadrage. Vous pouvez placer le curseur sur la bordure de la zone de rognage lorsque il se transforme en icône fléchée <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 <em>Ctrl</em> 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 <em>Ctrl</em> enfoncée lorsque vous faites glisser l'une des poignées d'angle.</li>
|
|
</ul>
|
|
<p>Lorsque la zone de recadrage est définie, cliquez à nouveau sur le bouton <b>Rogner</b>, ou appuyez sur la touche <em>Echap</em>, ou cliquez n'importe où à l'extérieur de la zone de recadrage pour appliquer les modifications.</p>
|
|
<p>Une fois la zone de recadrage 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>Remplissage</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 recadrage. Aucune partie de l'image originale ne sera supprimée, mais des espaces vides peuvent</li>
|
|
</ul>
|
|
<p>Pour faire pivoter l'image:</p>
|
|
<ol>
|
|
<li>sélectionnez l'image avec la souris,</li>
|
|
<li>cliquez sur l'icône <b>Paramètres de l'image</b> <div class = "icon icon-image_settings_icon"></div> sur la barre latérale droite,</li>
|
|
<li>
|
|
dans la section <b>Rotation</b>, 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>
|
|
<p class="note">Vous pouvez également cliquer avec le bouton droit sur l'image et utiliser l'option <b>Faire pivoter</b> dans le menu contextuel.</p>
|
|
</li>
|
|
</ol>
|
|
<p>Pour remplacer l'image insérée,</p>
|
|
<ol>
|
|
<li>sélectionnez l'image avec la souris,</li>
|
|
<li>cliquez sur l'icône <b>Paramètres de l'image</b> <div class = "icon icon-image_settings_icon"></div> sur la barre latérale droite,</li>
|
|
<li>Cliquez sur le bouton<b> Remplacer</b> <b>l'image</b>,</li>
|
|
<li>
|
|
choisissez l'option appropriée: <b>D'un fichier</b>, <b>À partir de l'espace de stockage</b> ou <b>D'une URL</b> et sélectionnez l'image désirée.
|
|
<p class="note">Vous pouvez également cliquer avec le bouton droit sur l'image et utiliser l'option <b>Remplacer l'image</b> dans le menu contextuel.</p>
|
|
</li>
|
|
</ol>
|
|
<p>L'image sélectionnée sera remplacée.</p>
|
|
<p>Une fois l'image est sélectionnée, l'icône <b>Paramètres de la forme</b> <span class="icon icon-shape_settings_icon"></span> 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>Ligne</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>
|
|
<p><img alt="L'onglet Paramètres de la forme" src="../images/right_image_shape.png" /></p>
|
|
<h3>Ajuster les paramètres avancés 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="La fenêtre Image - Paramètres avancés Rotation" src="../images/imageadvancedsettings1.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="La fenêtre Image - Paramètres avancés Alignement dans une cellule" src="../images/imageadvancedsettings2.png" /></p>
|
|
<p>L'onglet<b> Alignement dans une cellule</b> comprend les options suivantes:</p>
|
|
<ul>
|
|
<li><b>Déplacer et dimensionner avec des cellules</b> - cette option permet de placer l'image derrière la cellule. Quand une cellule se déplace (par exemple: insertion ou suppression des lignes/colonnes), l'image se déplace aussi. Quand vous ajustez la largeur ou la hauteur de la cellule, la dimension de l'image s'ajuste aussi.</li>
|
|
<li><b>Déplacer sans dimensionner avec les cellules</b> - cette option permet de placé l'image derrière la cellule mais d'empêcher le redimensionnement. Quand une cellule se déplace, l'image se déplace aussi, mais si vous redimensionnez la cellule, l'image demeure inchangé.</li>
|
|
<li><b>Ne pas déplacer et dimensionner avec les cellules</b> - cette option empêche le déplacement ou redimensionnement de l'image si la position ou la dimension de la cellule restent inchangées.</li>
|
|
</ul>
|
|
<p><img alt="La fenêtre Image - Paramètres avancés L'onglet Texte de remplacement" src="../images/imageadvancedsettings.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 pour les aider à mieux comprendre l'information de l'image.</p>
|
|
<p>Pour supprimer l'image insérée, cliquez sur celle-ci et appuyez sur la touche <b>Suppr.</b></p>
|
|
<h3>Affecter une macro à une image</h3>
|
|
<p>Pour rendre l'accès à macro plus rapide et facile dans une feuille de calcul, vous pouvez affecter une macro à une image. Une fois la macro affectée, l'image apparaît ainsi comme un bouton de contrôle et vous pouvez lancer la macro par un clic dessus.</p>
|
|
<p>Pour affecter une macro:</p>
|
|
<ul type="circle">
|
|
<li>
|
|
Cliquer avec le bouton droit de la souris sur l'image et sélectionnez l'option <b>Affecter une macro</b> dans le menu déroulant.
|
|
<p><img alt="Affecter une macro dans le menu" src="../images/assignmacro_rightclickimage.png" /></p>
|
|
</li>
|
|
<li>La boîte de dialogue Affecter une macro s'affiche.</li>
|
|
<li>
|
|
Sélectionnez la macro dans la liste ou saisissez le nom et cliquez sur <b>OK</b>.
|
|
<p><img alt="Affecter une macro" src="../images/assignmacro.png" /></p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html> |