mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-25 06:15:53 +08:00
151 lines
19 KiB
HTML
151 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Inserir imagens</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="descrição" content="Adicione uma imagem ao seu documento e ajuste sua posição e propriedades" />
|
|
<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="Search" type="text" onkeypress="doSearch(event)">
|
|
</div>
|
|
<h1>Inserir imagens</h1>
|
|
<p>No <a href="https://www.onlyoffice.com/pt/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Editor de Documentos</b></a>, você pode inserir imagens nos formatos mais populares em seu documento. Os seguintes formatos de imagem são suportados: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>.</p>
|
|
<h3>Insira uma imagem</h3>
|
|
<p>Para inserir uma imagem no texto do documento,</p>
|
|
<ol>
|
|
<li>coloque o cursor onde deseja que a imagem seja colocada,</li>
|
|
<li>mude para a guia <b>Inserir</b> da barra de ferramentas superior,</li>
|
|
<li>clique no ícone <div class = "icon icon-image"></div> <b>Imagem</b> na barra de ferramentas superior,</li>
|
|
<li>selecione uma das seguintes opções para carregar a imagem:
|
|
<ul>
|
|
<li>a opção <b>Imagem do arquivo</b> abrirá uma janela de diálogo padrão para selecionar um arquivo. Procure na unidade de disco rígido do seu computador o arquivo necessário e clique no botão <b>Abrir</b>
|
|
<p class="note">No <em>editor online</em>, você pode selecionar várias imagens de uma só vez.</p>
|
|
</li>
|
|
<li>a opção <b>Imagem da URL</b> abrirá a janela onde você pode inserir o endereço da web da imagem necessária e clicar no botão <b>OK</b></li>
|
|
<li class="onlineDocumentFeatures"> a opção <b>Imagem do armazenamento</b> abrirá a janela <b>Selecionar fonte de dados</b>. Selecione uma imagem armazenada em seu portal e clique no botão <b>OK</b></li>
|
|
</ul>
|
|
</li>
|
|
<li>depois que a imagem é adicionada, você pode alterar seu tamanho, propriedades e posição.</li>
|
|
</ol>
|
|
<p>Também é possível adicionar uma legenda à imagem. Para saber mais sobre como trabalhar com legendas para imagens, você pode consultar <a href="../UsageInstructions/AddCaption.htm" onclick="onhyperlinkclick(this)">este artigo</a>.</p>
|
|
<h3>Mover e redimensionar imagens</h3>
|
|
<p><span class="big big-moving_image"></span></p>
|
|
<p>Para alterar o tamanho da imagem, arraste pequenos quadrados <span class = "icon icon-resize_square"></span> situados em suas bordas. Para manter as proporções originais da imagem selecionada durante o redimensionamento, mantenha pressionada a tecla <b>Shift</b> e arraste um dos ícones do canto.</p>
|
|
<p>Para alterar a posição da imagem, use o ícone <span class = "icon icon-arrow"></span> que aparece depois de passar o cursor do mouse sobre a imagem. Arraste a imagem para a posição necessária sem soltar o botão do mouse.</p>
|
|
<p>Ao mover a imagem, as linhas de guia são exibidas para ajudá-lo a posicionar o objeto com precisão na página (se o estilo de contorno selecionado for diferente do inline).</p>
|
|
<p>Para girar a imagem, passe o cursor do mouse sobre a alça de rotação <span class = "icon icon-greencircle"></span> e arraste-a no sentido horário ou anti-horário. Para restringir o ângulo de rotação a incrementos de 15 graus, mantenha pressionada a tecla <b>Shift</b> enquanto gira.</p>
|
|
<p class="note">
|
|
<b>Nota</b>: a lista de atalhos de teclado que podem ser usados ao trabalhar com objetos está disponível <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">aqui</a>.
|
|
</p>
|
|
<hr />
|
|
<h3>Ajustar configurações de imagem</h3>
|
|
<p><img alt="Guia de configurações de imagem" src="../images/right_image.png" /></p>
|
|
<p>Algumas das configurações de imagem podem ser alteradas usando a guia <b>Configurações de imagem</b> da barra lateral direita. Para ativá-lo, clique na imagem e escolha ícone <b>Configurações de imagem</b> <span class = "icon icon-image_settings_icon"></span> à direita. Aqui você pode alterar as seguintes propriedades:</p>
|
|
<ul>
|
|
<li><b>Tamanho</b> é usado para visualizar a <b>Largura</b> e a <b>Altura</b> da imagem atual. Se necessário, você pode restaurar o tamanho real da imagem clicando no botão <b>Tamanho real</b>. O botão <b>Ajustar à margem</b> permite redimensionar a imagem, para que ela ocupe todo o espaço entre as margens esquerda e direita da página.
|
|
<p>O botão <b>Cortar</b> é usado para cortar a imagem. Clique no botão <b>Cortar</b> para ativar as alças de corte que aparecem nos cantos da imagem e no centro de cada lado. Arraste manualmente as alças para definir a área de corte. Você pode mover o cursor do mouse sobre a borda da área de corte para que ela se transforme no ícone <span class = "icon icon-arrow"></span> e arraste a área. </p>
|
|
<ul>
|
|
<li>Para cortar um único lado, arraste a alça localizada no centro desse lado.</li>
|
|
<li>Para cortar simultaneamente dois lados adjacentes, arraste uma das alças dos cantos.</li>
|
|
<li>Para cortar igualmente os dois lados opostos da imagem, mantenha pressionada a tecla <em>Ctrl</em> ao arrastar a alça no centro de um desses lados. </li>
|
|
<li>Para cortar igualmente todos os lados da imagem, mantenha pressionada a tecla <em>Ctrl</em> ao arrastar qualquer uma das alças dos cantos.</li>
|
|
</ul>
|
|
<p>Quando a área de corte for especificada, clique no botão <b>Cortar</b> novamente ou pressione a tecla <em>Esc</em> ou clique em qualquer lugar fora da área de corte para aplicar as alterações. </p>
|
|
<p>Depois de selecionar a área de corte, também é possível usar as opções <b>Cortar no formato</b>, <b>Preencher</b> e <b>Ajustar</b> disponíveis no menu suspenso <b>Cortar</b>. Clique no botão <b>Cortar</b> mais uma vez e selecione a opção que você precisa: </p>
|
|
<ul>
|
|
<li>Se você selecionar a opção <b>Cortar no formato</b>, a imagem preencherá uma determinada forma. Você pode selecionar uma forma na galeria, que é aberta quando você passa o ponteiro do mouse sobre a opção <b>Cortar para Forma</b>. Você ainda pode usar as opções <b>Preencher</b> e <b>Ajustar</b> para escolher como sua imagem corresponde à forma.</li>
|
|
<li>Se você selecionar a opção <b>Preencher</b>, a parte central da imagem original será preservada e usada para preencher a área de corte selecionada, enquanto as outras partes da imagem serão removidas.</li>
|
|
<li>Se você selecionar a opção <b>Ajustar</b>, a imagem será redimensionada para caber na altura e na largura da área de corte. Nenhuma parte da imagem original será removida, mas espaços vazios podem aparecer na área de corte selecionada.</li>
|
|
</ul>
|
|
</li>
|
|
<li><b>Rotação</b> é usada para girar a imagem em 90 graus no sentido horário ou anti-horário, bem como para inverter a imagem horizontal ou verticalmente. Clique em um dos botões:
|
|
<ul>
|
|
<li><div class = "icon icon-rotatecounterclockwise"></div> para girar a imagem em 90 graus no sentido anti-horário</li>
|
|
<li><div class = "icon icon-rotateclockwise"></div> para girar a imagem em 90 graus no sentido horário</li>
|
|
<li><div class = "icon icon-fliplefttoright"></div> para inverter a imagem horizontalmente (da esquerda para a direita)</li>
|
|
<li><div class = "icon icon-flipupsidedown"></div> para virar a imagem verticalmente (de cabeça para baixo)</li>
|
|
</ul>
|
|
</li>
|
|
<li><b>Estilo de rap</b> é usado para selecionar um estilo de quebra automática de texto dentre os disponíveis - em linha, quadrado, apertado, através, superior e inferior, na frente, atrás (para obter mais informações, consulte a descrição das configurações avançadas abaixo).</li>
|
|
<li><b>Substituir imagem</b> é usado para substituir a imagem atual carregando outra <b>Do arquivo</b>, <b>Do armazenamento</b> ou <b>De URL</b>.</li>
|
|
</ul>
|
|
<p>Você também pode encontrar algumas dessas opções no <b>menu do botão direito</b>. As opções do menu são:</p>
|
|
<ul>
|
|
<li><b>Recortar, Copiar, Colar</b> - opções padrão que são usadas para recortar ou copiar o texto/objeto selecionado e colar a passagem de texto ou objeto recortado/copiado anteriormente na posição atual do cursor.</li>
|
|
<li><b>Organizar</b> é usado para trazer a imagem selecionada para o primeiro plano, enviá-la para o fundo, avançar ou retroceder, bem como agrupar ou desagrupar imagens para realizar operações com várias delas ao mesmo tempo. Para saber mais sobre como organizar objetos, consulte <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">esta página</a>.</li>
|
|
<li><b>Alinhar</b> é usado para alinhar a imagem à esquerda, no centro, à direita, no topo, no meio ou na parte inferior. Para saber mais sobre como alinhar objetos, consulte <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">esta página</a>.</li>
|
|
<li><b>Estilo de embrulho</b> é usado para selecionar um estilo de quebra de texto dentre os disponíveis - em linha, quadrado, apertado, através, superior e inferior, na frente, atrás - ou editar o limite de quebra. A opção <b>Editar limite de contorno</b> só está disponível se o estilo de contorno selecionado não for embutido. Arraste os pontos de contorno para personalizar o limite. Para criar um novo ponto de quebra, clique em qualquer lugar na linha vermelha e arraste-o para a posição desejada. <div class = "big big-wrap_boundary"></div></li>
|
|
<li><b>Girar</b> é usado para girar a imagem em 90 graus no sentido horário ou anti-horário, bem como para inverter a imagem horizontal ou verticalmente.</li>
|
|
<li><b>Cortar</b> é usado para aplicar uma das opções de corte: <b>Cortar</b>, <b>Preencher</b> ou <b>Ajustar</b>. Selecione a opção <b>Cortar</b> no submenu, arraste as alças de corte para definir a área de corte e clique em uma dessas três opções no submenu novamente para aplicar as alterações.</li>
|
|
<li><b>Tamanho real</b> é usado para alterar o tamanho da imagem atual para o real.</li>
|
|
<li><b>Substituir imagem</b> é usado para substituir a imagem atual carregando outra <b>Do arquivo</b> ou <b>Do URL</b>.</li>
|
|
<li><b>Configurações avançadas de imagem</b> é usado para abrir a janela 'Imagem - Configurações avançadas'.</li>
|
|
</ul>
|
|
<p><img alt="Guia Configurações de forma" src="../images/right_image_shape.png" /></p>
|
|
<p>Quando a imagem é selecionada, o ícone <b>Configurações de forma</b> <span class = "icon icon-shape_settings_icon"></span> também está disponível à direita. Você pode clicar neste ícone para abrir a guia <b>Configurações de forma</b> na barra lateral direita e ajustar a forma <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Tipo de linha</b></a>, tamanho e cor, bem como alterar o tipo de forma selecionando outra forma no menu <b>Alterar forma automática</b>. A forma da imagem mudará correspondentemente.</p>
|
|
<p>Na guia <b>Configurações de forma</b>, você também pode usar a opção <b>Mostrar sombra</b> para adicionar uma sombra à imagem.</p>
|
|
<hr />
|
|
<h3>Ajustar configurações avançadas de imagem</h3>
|
|
<p>Para alterar as configurações avançadas da imagem, clique na imagem com o botão direito do mouse e selecione a opção <b>Configurações avançadas da imagem</b> no menu do botão direito ou apenas clique em <b>Mostrar configurações avançadas</b> link na barra lateral direita. A janela de propriedades da imagem será aberta:</p>
|
|
<p><img alt="Imagem - Configurações Avançadas: Tamanho" src="../images/image_properties.png" /></p>
|
|
<p>A guia <b>Tamanho</b> contém os seguintes parâmetros:</p>
|
|
<ul>
|
|
<li><b>Largura</b> e <b>Altura</b> - use essas opções para alterar a largura e/ou altura. Se as <b>proporções constantes</b> <div class = "icon icon-constantproportions"></div> botão é clicado (neste caso, parece com isso <div class = "icon icon-constantproportionsactivated"></div>), a largura e a altura serão alteradas juntas, preservando a proporção da imagem original. Para restaurar o tamanho real da imagem adicionada, clique no botão <b>Tamanho real</b>.</li>
|
|
</ul>
|
|
<p><img alt="Imagem - Configurações avançadas: rotação" src="../images/image_properties_4.png" /></p>
|
|
<p>A guia <b>Rotação</b> contém os seguintes parâmetros:</p>
|
|
<ul>
|
|
<li><b>Ângulo</b> - use esta opção para girar a imagem em um ângulo exatamente especificado. Insira o valor necessário medido em graus no campo ou ajuste-o usando as setas à direita. </li>
|
|
<li><b>Invertida</b> - marque a caixa <b>Horizontalmente</b> para inverter a imagem horizontalmente (da esquerda para a direita) ou marque a caixa <b>Verticalmente</b> para inverter a imagem verticalmente (de cabeça para baixo).</li>
|
|
</ul>
|
|
<p><img alt="Imagem - Configurações avançadas: Quebra automática de texto" src="../images/image_properties_1.png" /></p>
|
|
<p>A guia <b>Quebra de texto</b> contém os seguintes parâmetros:</p>
|
|
<ul>
|
|
<li><b>Estilo de embrulho</b> - use esta opção para alterar a forma como a imagem é posicionada em relação ao texto: será uma parte do texto (no caso de você selecionar o estilo embutido) ou ignorado por ele de todos os lados (se você seleciona um dos outros estilos).
|
|
<ul>
|
|
<li><p><div class = "icon icon-wrappingstyle_inline"></div> <b>Em linha</b> - a imagem é considerada parte do texto, como um caractere, então quando o texto se move, a imagem também se move. Nesse caso, as opções de posicionamento ficam inacessíveis.</p>
|
|
<p>Se um dos seguintes estilos for selecionado, a imagem pode ser movida independentemente do texto e posicionada exatamente na página:</p>
|
|
</li>
|
|
<li><p><div class = "icon icon-wrappingstyle_square"></div> <b>Quadrado</b> - o texto envolve a caixa retangular que limita a imagem.</p></li>
|
|
<li><p><div class = "icon icon-wrappingstyle_tight"></div> <b>Firme</b> - o texto envolve as bordas reais da imagem.</p></li>
|
|
<li><p><div class = "icon icon-wrappingstyle_through"></div> <b>Através</b> - o texto envolve as bordas da imagem e preenche o espaço em branco aberto dentro da imagem. Para que o efeito apareça, use a opção <b>Editar limite de disposição</b> no menu do botão direito.</p></li>
|
|
<li><p><div class = "icon icon-wrappingstyle_topandbottom"></div> <b>Superior e inferior</b> - o texto está apenas acima e abaixo da imagem.</p></li>
|
|
<li><p><div class = "icon icon-wrappingstyle_infront"></div> <b>Na frente</b> - a imagem se sobrepõe ao texto.</p></li>
|
|
<li><p><div class = "icon icon-wrappingstyle_behind"></div> <b>Atrás</b> - o texto sobrepõe a imagem.</p></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<p>Se você selecionar o estilo quadrado, apertado, através ou superior e inferior, poderá configurar alguns parâmetros adicionais - <b>distância do texto</b> em todos os lados (superior, inferior, esquerda, direita).</p>
|
|
<p id="position"><img alt="Imagem - Configurações avançadas: Posição" src="../images/image_properties_2.png" /></p>
|
|
<p>A guia <b>Posição</b> estará disponível somente se você selecionar um estilo de quebra automática diferente de embutido. Esta guia contém os seguintes parâmetros que variam dependendo do estilo de embrulho selecionado:</p>
|
|
<ul>
|
|
<li>
|
|
A seção <b>Horizontal</b> permite selecionar um dos três tipos de posicionamento de imagem a seguir:
|
|
<ul>
|
|
<li><b>Alinhamento</b> (esquerda, central, direita) <b>relativo a</b> caractere, coluna, margem esquerda, margem, página ou margem direita,</li>
|
|
<li>Absoluta <b>Posição</b> medida em unidades absolutas, ou seja, <b>Centímetros</b>/<b>Pontos</b>/<b>Polegadas</b> (dependendo da opção especificada em a guia <b>Arquivo</b> -> <b>Configurações avançadas...</b>) <b>à direita de</b> caractere, coluna, margem esquerda, margem, página ou margem direita, </li>
|
|
<li><b>Posição relativa</b> medida em porcentagem <b>relativa à</b> margem esquerda, margem, página ou margem direita.</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
A seção <b>Vertical</b> permite selecionar um dos três tipos de posicionamento de imagem a seguir:
|
|
<ul>
|
|
<li><b>Alinhamento</b> (superior, central, inferior) <b>relativo a</b> linha, margem, margem inferior, parágrafo, página ou margem superior,</li>
|
|
<li>Absoluta <b>Posição</b> medida em unidades absolutas, ou seja, <b>Centímetros</b>/<b>Pontos</b>/<b>Polegadas</b> (dependendo da opção especificada em a guia <b>Arquivo</b> -> <b>Configurações avançadas...</b>) <b>abaixo</b> da linha, margem, margem inferior, parágrafo, página ou margem superior,</li>
|
|
<li><b>Posição relativa</b> medida em porcentagem <b>relativa à</b> margem, margem inferior, página ou margem superior.</li>
|
|
</ul>
|
|
</li>
|
|
<li><b>Mover objeto com texto</b> garante que a imagem se mova junto com o texto ao qual está ancorada.</li>
|
|
<li><b>Permitir sobreposição</b> permite que duas imagens se sobreponham se você arrastá-las próximas uma da outra na página.</li>
|
|
</ul>
|
|
<p><img alt="Imagem - Configurações avançadas" src="../images/image_properties_3.png" /></p>
|
|
<p>A guia <b>Texto Alternativo</b> permite especificar um <b>Título</b> e uma <b>Descrição</b> que serão lidos para pessoas com deficiência visual ou cognitiva para ajudá-los a entender melhor quais informações o a imagem contém.</p>
|
|
</div>
|
|
</body>
|
|
</html> |