Na WEB desde 11/04/97

mais um site associado à:

Atualizada em: 07/07/03
© 1997-2008 by Francisco Panizo Beceiro

Formatando Imagens:

A inserção de imagens, numa página HTML, é algo extremamente simples, e que vimos na lição # 2. Entretanto devemos nos lembrar que apenas inserir uma imagem pode não trazer todo o efeito esperado. Nem sempre é conveniente colocar uma imagem sozinha numa linha. Um texto digitado ao seu lado pode trazer maior impacto à própria imagem, ou à página. Mas imagens em geral têm altura maior que o texto ao seu lado; então como "alinhar" de modo desejado o texto e a imagem?. E se o fundo de uma imagem se choca com o próprio fundo da página?. Para saber como resolver, cada uma destas questões, vamos então acompanhar as etapas, passo-a-passo, necessárias:

Alinhando Imagens e Texto:

Para alinhar um texto e uma imagem, que devem ficar posicionados na mesma linha, deve-se seguir as seguintes etapas:

1. Insira a imagem desejada, na posição correta da página;
2. Posicione o cursor logo à direita da imagem;
3. Digite o texto que se deseja colocar ao lado da imagem;
4. Clique com o botão direito do mouse sobre a imagem;
5. No menu de contexto, que se abre, selecione a opção "Image Properties..."
   ou apenas pressione [ALT]+[ENTER] simultaneamente;
6. Clique na aba Appearance;
7. Na seção LAYOUT defina o campo ALIGNMENT numa das opções disponíveis^(*):
   1. BOTTOM: A imagem é alinhada com a parte inferior do texto;
   2. MIDDLE: A imagem é alinhada com a parte média do texto;
   3. TOP: A imagem é alinhada com a parte superior do texto;
   4. LEFT: A imagem é alinhada à esquerda do texto, com o mesmo subdividindo-se em quantas linhas forem necessárias, ao lado da imagem;
   5. RIGHT: A imagem é alinhada à direita do texto, com o mesmo subdividindo-se em quantas linhas forem necessárias, ao lado da imagem;
8. No campo "Border Thickness" defina um valor para a espessura da mesma,
   ou deixe em zero (que significa imagem sem borda);
9. No campo "Horizontal Spacing" defina um valor para o espaçamento, na horizontal, entre a imagem e o texto (em pixels);
10. No campo "Vertical Spacing" defina um valor para o espaçamento, na vertical, entre a imagem e o texto (em pixels);
11. Na seção SIZE pode-se definir um tamanho fixo para a imagem, para isso:
    1. marque o campo "Specify Size";
    2. assinale a largura desejada no campo Width (pode ser igual ao real = SEM DISTORÇÃO, menor ou maior - e pode ser definido em pixels ou em % da página);
    3. assinale a altura desejada no campo Height (pode ser igual ao real = SEM DISTORÇÃO, menor ou maior - e pode ser definido em pixels ou em % da página);

Exemplos de Alinhamentos Possíveis
(em todos os casos acima o espaçamento horizontal foi definido como igual a 5 pixels, e a borda igual a um)

Alinhando o texto pela parte inferior	Alinhando o texto pela parte média	Alinhando o texto pela parte superior
Texto alinhado por BOTTOM	Texto alinhado por MIDDLE	Texto alinhado por TOP
Alinhando o texto para que envolva a imagem colocada à sua esquerda	Alinhando o texto para que envolva a imagem colocada à sua direita	Atenção:
Texto com linhas que quebram ao lado da imagem, colocada à esquerda - por LEFT	Texto com linhas que quebram ao lado da imagem, colocada à direita - por RIGHT	Mesmo querendo o alinhamento RIGHT, digite o texto à direita, como em todas as demais situações...

^(*): o FrontPage possui algumas outras opções de alinhamento, porém elas são virtualmente similares às descritas aqui.

Fazendo o Fundo de Uma Imagem Transparente:

Muitas vezes obtemos uma bela imagem, que incrementa o texto, inserimo-la em nossa página, formatamo-la como indicado acima, porém notamos que algo não combina:

O fundo da imagem, está em briga total com o fundo de nossa página...

No exemplo abaixo mostramos, à esquerda uma imagem GIF que têm fundo branco (muito conveniente para usar em páginas com fundo branco).... Veja que o fundo branco aparece tapando parte do fundo creme....

Imagem original (com fundo branco)	Imagem alterada (com fundo transparente)

Como podemos verificar, se pudéssemos alterar o fundo branco para ficar da mesma (?) cor do fundo da nossa página, tudo se encaixaria harmoniosamente. Para fazer isso o que precisaríamos?:

• Um software editor gráfico (tal como o Paint Shop Pro 5.0 que usamos em nossas páginas);
• Habilidade para editarmos as nossas imagens, torcendo para que elas sejam tão simples como a do exemplo acima;
• Um fundo de página numa cor sólida (uma única cor);

Bom e se uma das condições acima não for satisfeita? Só nos resta alterar nosso fundo de página e/ou buscar uma outra imagem para usarmos. Mas será que o FrontPage não nos dá uma alternativa?

A resposta é um rotundo SIM.

Veja como fazer uma imagem ficar com a cor do fundo transparente:

1. Clique uma vez sobre a imagem;
2. Veja que o FrontPage abriu uma janela Image;
3. Coloque o cursor sobre o botão da seta, no lado direito da janela
   (o título do botão é "Make Transparent");
4. Perceba que o cursor mudou de formato e cor, e tem uma setinha na sua ponta;
5. Coloque a setinha sobre uma área que pertença ao fundo da sua imagem;
6. Dê um clique;

Bom, há mais uma coisa que quero te avisar:

O FrontPage não tem como, nem a WEB, manter uma instrução dentro da página que faça com que aquela cor de fundo apareça diferente. Isso tem de ser gravado dentro da imagem. Assim ao você sair, ou gravar, dessa página ele te pedirá para salvar a imagem alterada para um arquivo.

A janela que o FrontPage abre tem a seguinte pergunta:

SAVE THIS IMAGE TO A FILE?

Observe que no campo "SAVE AS" aparece o nome completo da imagem original. Você tem duas opções, escolha a mais adequada para o seu caso:

• SUBSTITUIR A IMAGEM: clique no botão [REPLACE] para substituir a imagem original pela nova imagem, com a cor de fundo marcada como transparente;
• SALVAR COM OUTRO NOME: clique no botão [BROWSE], dê um novo nome para sua imagem alterada, e clique o botão [YES];

Usando Imagens Como Links:

Quase sempre colocamos imagens em nossas páginas. Muitas vezes poderíamos usar as próprias imagens como nossos links (veja exemplo no fim desta página: um globo, com uma seta apontando para cima, indica que se pressionarmos na figura algo vai ocorrer; veja também que se colocarmos o mouse em cima dessa figura ela muda para uma "mãozinha", o que prova que é um link).

Como fazer? Muito simples mesmo:

1. Insira a imagem na posição desejada de sua página;
2. Clique na imagem com o mouse;
3. Clique no botão "Create or Edit Hyperlink" na barra de ferramentas;
4. Clique na aba "Open Pages" ou na aba "World Wide Web" (a que se adpatar melhor à sua situação);
5. Indique, ou digite a página, para onde o link deverá apontar;
6. Clique no botão [OK];

[Índice] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]