Inserir Imagens no Editor de Texto

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.

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:

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.