Primeira Página

Inserir Imagens no Editor de Texto


O Editor de Texto possui uma funcionalidade que permite inserir ou editar imagens. Mas antes disso devemos ter em atenção o seguinte, embora a nossa ferramenta permita redimensionar imagens com tamanho superior ao desejado, recomendamos que esta operação seja feita previamente num quaquer editor gráfico (Corel Photo Paint, Adobe Photoshop, FastStone Image). Desta forma a imagem irá aparecer com muito mais qualidade e com um tamanho em Kb inferior o que é muito importante para obter um bom desempenho do seu site.

Outro aspecto que deve ter em consideração é o nome  que vai atribuir à imagem. Os caracteres especiais dos quais fazem parte por exemplo as plicas (‘), o ponto e virgula (;), as aspas (“), os acentos (~,´,`,^), os espaços e ainda certas letras e caracteres como ç, ã, é, í, $, €, #... podem não ser reconhecidos pelo servidor pelo que não são aceites pelo nosso editor. Use caracteres normais, sem acentuação e sem espaços para dar nome às suas imagens.

Exemplo de Nomes CORRECTOS:

  • imagem.jpg

  • foto_1.jpg

  • casa.gif

  • logo_empresa.jpg

Exemplo de Nomes INCORRECTOS:

  • espaço.jpg (ç)
  • logo da empresa.jpg (espaços)
  • casarão.gif (ã)
  • logo#.jpg (#)

Se a imagem já tem o tamanho desejado e um nome correcto podemos continuar. Em baixo explicamos-lhe passo a passo o que deve fazer para inserir a imagem no seu texto:

1.

Em primeiro lugar coloque o cursor na zona do texto onde pretende inserir a imagem. O cursor aparece como uma pequena linha intermitente que deverá ser deslocada para a posição desejada.

2.

Agora deverá clicar no botão Inserir/Editar Imagem  que aparece na barra de ferramentas do Editor de Imagens conforme mostramos na figura em baixo:

  
3.

Neste momento esta a ver uma janela com o titulo Propriedades da Imagem. É nesta janela que se realizam todas as operações relacionadas com as imagens. No topo da janela encontra quatro áreas (Tabs) diferentes de acordo com figura em baixo; Informação da Imagem, Hiperligação, Carregar e Avançado. Clique em Carregar.

4.

Carregar a imagem significa transferir a imagem do seu computador para o servidor onde está alojado o seu site. Só pode inserir imagens que estejam guardadas no servidor. Na figura em baixo ilustramos o caminho da imagem até ao destino final, o texto.

Para transferir a imagem do seu computador para o servidor deverá na janela que tem à sua frente (Ver Fig em baixo) seleccionar o Directório do servidor onde a pretende guardar. Dependendo do seu modelo poderá ter diversos directórios disponíveis. Por norma a Optimeios usa o directório Geral para guardar as imagens inseridas nos textos.

Após seleccionar o directório Geral poderá transferir até 6 fotografias de cada vez para o servidor. Clique no botão Procurar para procurar e seleccionar a imagem no seu computador. Após escolher as imagens que pretende transferir clique no botão Adicionar. Neste momento se lhe aparece a frase "Ficheiro Adicionado" a imagem já se encontra no servidor.

5.

Clique agora na Tab Informação da Imagem. Nesta área vamos seleccionar e configurar a imagem que acabamos de transferir para o servidor. Na figura em baixo podemos ver essa área e todos os campos configuráveis da imagem.

Informação da Imagem


O próximo passo é seleccionar a imagem que transferimos para o servidor para isso deverá clicar na opção Navegar no Servidor. Esta opção irá abrir uma outra janela onde poderá visualizar as imagens contidas nos directórios de imagem do servidor. No campo Directórios de Imagem seleccione o directório Geral, onde guardou a sua imagem. Deverá agora clicar sobre a imagem que pretende inserir no texto.

Neste momento podemos ver o endereço da imagem no campo URL e a própria imagem na caixa Pré-visualizar. Falta-nos apenas configurar alguns campos para que tudo apareça correctamente conforme o desejado!

6.

De seguida vamos explicar para que serve e como se preenche cada campo do formulário:

Exemplo

Texto Alternativo

Aqui pode colocar o texto que aparece em substituição da imagem quando ocorre algum erro. Este campo serve também para colocar um comentário na imagem que aparece quando passamos o rato por cima desta. Por exemplo, se passar o rato na imagem em cima irá aparecer uma caixa amarela com o texto "Exemplo".

Largura e Altura

Pode alterar o tamanho original da imagem através destes dois campos. Na caixa do Preview irá aparecer a imagem com o tamanho especificado. Para manter a proporcionalidade da imagem deverá primir o botão Proporcional , desta forma sempre que alterar um dos campos o programa calculará automáticamente o outro mantendo assim a proporcionalidade. Para colocar os tamanhos originais da imagem clique no botão Tamanho Original . Caso estes campos sejam deixados em branco, o editor assumirá o tamanho original da imagem.

Limite

Aqui pode especificar o tamanho do bordo da imagem. Se deixar em branco ou colocar 0 não será colocado o bordo. Se colocar 1 irá aparecer um bordo com 1 pixel preto em torno da imagem.

Espaçamento Horizontal (Esp. Horiz)

Define o espaço horizontal que ficará entre a imagem e o restante conteúdo. Se por exemplo definir este campo com 5, a imagém irá ter uma margem de 5 pixeis do lado esquerdo e do lado direito.

Espaçamento Vertical (Esp. Vert)

Define o espaço vertical que ficará entre a imagem e o restante conteúdo. Se por exemplo definir este campo com 5, a imagem terá uma margem em cima e em baixo de 5 pixeis.

Alinhamento

Seleccione o alinhamento da imagem. O alinhamento do exemplo em cima está definido à Esquerda, desta forma o texto e a imagem são alinhados à esquerda. Ver a figura em baixo, a caixa amarela representa a fotografia e as linhas cinza o texto.

Os restates tipos de alinhamento permitem alinhar a imagem noutras posições de acordo com o nome de cada um.

7.

Por fim clique no botão OK  que aparece em baixo para finalizar o processo. A imagem vai aparecer conforme o configurado na posição do cursor.

Outras Opções

Hiperligação

Caso deseje que a sua imagem tenha um link para um determinado endereço clique na Tab Hiperligação conforme a figura em baixo:

No campo URL coloque o endereço para onde aponta a imagem, caso seja para outra página colocar "http://" no inicio do endereço. Ex: http://www.optimeios.com

No campo Destino defina onde vai abrir o novo endereço.Pode optar por abrir na mesma janela, numa nova janela etc. Se escolher Nova Janela irá aparecer uma nova janela com o endereço definido na URL.

Para que não apareça um bordo lilás em torno da imagem, normal nas imagens com link, deverá colocar no campo Limite na Tab Informação da Imagem o valor 0.

O botão Navegar no Servidor permite apontar o link para ficheiros internos no servidor. Esta opção foi desactivada por razões de segurança. Caso pretenda criar um link para uma página do seu próprio site e não consega determinar o seu URL por favor contacte o nosso suporte técnico.

Avançado

Nesta área uma das operações mais comuns é a definição de margens em separado. Assim poderá escrever no campo Estilo os seguintes parâmetros de acordo com os exemplos em baixo:

Definir margem de topo com 5 pixeis:

margin-top: 5px;

Definir marge esquerda com 5 pixeis:

margin-left: 5px;

Existe ainda os codigo margin-right e margin-bottom. Estes códigos podem ser definidos em simultaneo desde que separados por ponto e virgula ";".

Ex:

margin-right: 5px; margin bottom: 10px;

Ao contrário do que acontece com o Espaçamento horizontal e Espaçamento vertical explicados em cima na Tab Informação da Imagem aqui é possível definir as margens separadamente.

Para saber como remover imagens que transferiu para o servidor consulte aqui a Gestão de Imagens


Perguntas Frequentes

Como limpar completamente a cache ?
Porque aparecem as imagens que apaguei no painel ?
Activar o Google Analytics no seu Modelo
Como retirar o sublinhado dos links ?
Como posso inserir vídeos do Youtube ?
Porque não consigo inserir imagens ?
Onde posso criar caixas de correio / emails ?
Como usar o gestor de mail RDMail ?
Como fazer para que as fotografias (telas) ocupem todo o painel ?

LISTAR TODAS AS CURIOSIDADES »

Novidades & Informações

10 Ago 2012

Manual do Modelo 18 em construção

Informamos que já se encontram disponíveis algumas páginas do manual do Modelo 18. Brevemente iremos disponibilizar mais informação sobre este modelo.

25 Mai 2012

Manual do Modelo 17 disponível

Já está disponível o manual do Modelo 17 para sites e

30 Mar 2011

Nova Secção SEO

Nesta secção encontrará informação e dicas úteis para posicionar o seu site nos primeiros lugares dos motores de busca

29 Mar 2011

Manual do Modelo 16

Já está disponível para consulta o manual do novo Modelo 16 com uma descrição detalhada de todas as funcionalidades e configurações possíveis.

LISTAR TODAS »

HOME

TERMOS E CONDIÇÕES

CONTACTOS

Copyright © OPTIMEIOS.net 2011 - Todos os direitos reservados

Desenvolvido por OPTIMEIOS