mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-24 18:59:34 +08:00
90 lines
11 KiB
HTML
90 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Inserir e ajustar imagens</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="descrição" content="Adicione uma imagem à sua apresentação e ajuste seu tamanho e posição." />
|
|
<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 e ajustar imagens</h1>
|
|
<h3>Insira uma imagem</h3>
|
|
<p>No <a target="_blank" href="https://www.onlyoffice.com/pt/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Editor de Apresentações</b></a>, você pode inserir imagens nos formatos mais populares em sua apresentação. Os seguintes formatos de imagem são suportados: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>.</p>
|
|
<p>Para <b>adicionar</b> uma imagem em um slide,</p>
|
|
<ol>
|
|
<li>na lista de slides à esquerda, selecione o slide ao qual deseja adicionar a imagem,</li>
|
|
<li>clique no ícone <div class = "icon icon-image"></div> <b>Imagem</b> na guia <b>Página Inicial</b> ou <b>Inserir</b> de a 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á a janela de diálogo padrão para que você possa escolher um arquivo. Navegue na unidade de disco rígido do seu computador para selecionar 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 de 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 <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">alterar seu tamanho e posição</a>.</li>
|
|
</ol>
|
|
<p>Você também pode adicionar uma imagem em um espaço reservado de texto pressionando <span class = "icon icon-placeholder_imagefromfile"></span> <b>Imagem do arquivo</b> nele e selecionando a imagem necessária armazenada em seu PC, ou use o botão <span class="icon icon-placeholder_imagefromurl"></span> <b>Imagem da URL</b> e especifique o endereço do URL da imagem:</p>
|
|
<p><img alt="Adicionar imagem ao espaço reservado" src="../images/placeholder_object.png" /></p>
|
|
<p>Também é possível adicionar uma imagem a um layout de slide. Para saber mais, consulte este <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">artigo</a>.</p>
|
|
<hr />
|
|
<h3>Ajustar configurações de imagem</h3>
|
|
<p>A barra lateral direita é ativada quando você clica com o botão esquerdo em uma imagem e escolhe o ícone <b>Configurações de imagem</b> <span class="icon icon-image_settings_icon"></span> à direita. Ele contém as seguintes seções:</p>
|
|
<img alt="guia Configurações de imagem" src="../images/imagesettingstab.png" />
|
|
<p><b>Tamanho</b> - é usado para visualizar a <b>Largura</b> e a <b>Altura</b> da imagem atual ou restaurar seu <b>Tamanho padrão</b> se necessário.</p>
|
|
|
|
<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 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 para dar forma</b>, <b>Preencher</b> e <b>Ajustar</b> disponíveis no menu suspenso <b>Cortar</b>. Clique no botão <b>Cortar</b> novamente e selecione a opção desejada: </p>
|
|
<ul>
|
|
<li>Se você selecionar a opção <b>Cortar para dar forma</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 dar 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 outras partes da imagem serão removidas.</li>
|
|
<li>Se você selecionar a opção <b>Ajustar</b>, a imagem será redimensionada para que caiba na altura ou 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>
|
|
<p><b>Substituir imagem</b> - é usado para carregar outra imagem em vez da atual da fonte desejada. Você pode selecionar uma das opções: <b>Do arquivo</b>, <b>De armazenamento</b> ou <b>Da URL</b>. A opção <b>Substituir imagem</b> também está disponível no menu do botão direito.</p>
|
|
<p><b>Rotação</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. Clique em um dos botões:</p>
|
|
<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>
|
|
<p>Quando a imagem é selecionada, o ícone <b>Configurações da 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 da forma</b> na barra lateral direita e ajustar o <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"> <b>Linha</b></a> tipo, tamanho e cor da forma, bem como alterar seu tipo 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>
|
|
<p><img alt="guia Configurações de forma" src="../images/right_image_shape.png" /></p>
|
|
<hr />
|
|
<p>Para alterar as <b>configurações avançadas</b> da imagem, clique com o botão direito do mouse na imagem e selecione a opção <b>Configurações avançadas da imagem</b> no menu contextual ou clique com o botão esquerdo na imagem e pressione o link <b>Exibir configurações avançadas</b> na barra lateral direita. A janela de propriedades da imagem será aberta:</p>
|
|
<p><img alt="Propriedades da imagem" src="../images/image_properties.png" /></p>
|
|
<p>A guia <b>Posicionamento</b> permite que você defina as seguintes propriedades de imagem:</p>
|
|
<ul>
|
|
<li><b>Tamanho</b> - use esta opção para alterar a largura e/ou altura da imagem. Se o botão <b>Proporções constantes</b> <div class = "icon icon-constantproportions"></div> for clicado (neste caso, parece com isto <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 padrão</b>.</li>
|
|
<li><b>Posição</b> - defina a posição exata usando os campos <b>Horizontal</b> e <b>Vertical</b>, bem como o campo <b>De</b> onde você pode acessar configurações como <b>Canto superior esquerdo</b> e <b>Centro</b>.</li>
|
|
</ul>
|
|
<p><img alt="Propriedades da imagem: rotação" src="../images/image_properties2.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>Invertido</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="Propriedades da Imagem" src="../images/image_properties1.png" /></p>
|
|
<p>A guia <b>Texto alternativo</b> permite especificar o <b>Título</b> e a <b>Descrição</b> que serão lidos para pessoas com deficiência visual ou cognitiva para ajudá-los a entender melhor o conteúdo do a imagem.</p>
|
|
<hr />
|
|
<p>Para <b>excluir</b> a imagem inserida, clique nela com o botão esquerdo e pressione a tecla <b>Excluir</b>.</p>
|
|
<p>Para saber como <b>alinhar</b> uma imagem no slide ou <b>organizar</b> várias imagens, consulte o <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">Alinhar e organizar objetos em uma seção de slide</a>.</p>
|
|
</div>
|
|
</body>
|
|
</html> |