|
O objetivo desta
lição é: conhecer alguns atributos de tabela, organização do código
fonte (Origem) e aplicação de script para mensagem de rodapé. Veja
os modelos ilustrativos.
Material: 01 background, uma imagem com moldura (ou uma tag)
opcional, 01 texto, 01 arquivo de som.
Pegue aqui o modelo de
tabela que usaremos na lição. Salve o arquivo, descompacte-o e abra
o arquivo .eml. O código da tabela é esse:
<TABLE borderColor=#506642
cellSpacing=10 cellPadding=10 width="70%"
bgColor=#ecf5e1 border=5>
<TBODY>
<TR>
<TD>
<DIV>Seu Texto Aqui</DIV>
<DIV> </DIV>
<DIV> </DIV></TD></TR></TBODY></TABLE> |
bgColor=#ecf5e1 - é a cor do plano de fundo da tabela
borderColor=#506642 - é a cor da borda
border=5 - é a espessura da borda
width="70%" - é a largura da tabela em porcentagem (pode ser um
valor em pixel)
cellSpacing=10 e cellPadding=10 - são espaços entre células de uma
tabela e dentro de uma célula para que o texto não fique "colado"
nas bordas.
PARTE 1 - TESTANDO ATRIBUTOS, CENTRALIZANDO TABELA e TEXTO
1.1 - Com o modelo da tabela aberto, clique em Encaminhar (como se
fosse enviá-lo), vá na Origem e delete meus dados de envio.
1.2 - Ainda na Origem, vá alterando cada um dos atributos da tabela,
sempre um de cada vez e conferindo na aba Visualizar (ou Editar) que
alteração ocorreu.
Mude a cor do fundo, a cor da borda e a sua espessura;
Altere o valor de cellSpacing=10 para 40, por exemplo e veja o que
muda. Altere agora para ZERO e confira o que mudou. Volte ao valor
10.
Faça o mesmo com cellPadding=10 alterando para 40, depois para zero
e voltando ao valor 10.
1.3 - Na aba EDITAR, dê um clique na borda da tabela até aparecerem
uns quadradinhos nas laterais. Clique no botão de alinhamento
centralizado. Sua tabela deve ter-se deslocado para o centro.
Agora clique na aba Origem e veja que apareceu mais um atributo no
código da tabela: align=center
<TABLE borderColor=#506642 cellSpacing=10 cellPadding=10 width="70%"
align=center bgColor=#ecf5e1 border=5>
1.4 - Vamos fazer mais um teste e centralizar a tabela de outro
modo.
Volte na aba Origem e delete o comando align=center do tag TABLE. A
tabela deve ter voltado à posição inicial, na esquerda. Confere?
No tag STYLE, delete <STYLE></STYLE> cole o código abaixo:
<STYLE>BODY {
BORDER-RIGHT: #506642 5px inset; BORDER-TOP: #506642 5px outset;
MARGIN-TOP: 40px; SCROLLBAR-FACE-COLOR: #ecf5e1; FONT-SIZE: 10pt;
SCROLLBAR-HIGHLIGHT-COLOR: #506642; MARGIN-LEFT: 20px; BORDER-LEFT:
#506642 5px outset; SCROLLBAR-SHADOW-COLOR: #506642; COLOR: #506642;
SCROLLBAR-3DLIGHT-COLOR: #ecf5e1; MARGIN-RIGHT: 20px;
SCROLLBAR-ARROW-COLOR: #506642; SCROLLBAR-TRACK-COLOR: #ecf5e1;
BORDER-BOTTOM: #506642 5px inset; FONT-FAMILY: Verdana;
SCROLLBAR-DARKSHADOW-COLOR: #ecf5e1;
TEXT-ALIGN: center
}
</STYLE>
Veja na aba EDITAR que a tabela ficou centralizada (por causa do
comando TEXT-ALIGN: center).
Veja também que a frase da tabela "Seu texto aqui" assumiu a cor e o
tipo de fonte definido no tag STYLE. Só não assumiu o tamanho da
fonte definido no tag STYLE.
Tem como mudar o tamanho da fonte do texto, na tabela, sem usar os
recursos do Outlook? Tem. Trataremos desse assunto em lições mais
adiante.
1.5 - Centralizando o texto na tabela: você já sabe que pode
selecionar o texto e usar o botão de atalho do alinhamento
centralizado.
Vamos fazer diferente: vá na Origem e acrescente o comando align=middle
nesta parte do código da tabela:
<TD align=middle>
<DIV>Seu Texto Aqui</DIV>
Não apenas o texto ficará centralizado, como tudo o mais que for
inserido nesta célula, por exemplo uma imagem (veja o modelo 01).
PARTE 2 - COMPLETANDO A FORMATAÇÃO
Você pode continuar trabalhando no modelo de tabela, ou fechar a
mensagem sem salvar, abrir uma nova e formatá-la aplicando o código
da tabela que foi fornecido.
Na aba EDITAR, aplique o seu background (menu Formatar/ Plano de
fundo/imagem), insira a imagem com moldura (ou uma tag), digite o
seu texto e insira o som.
Caso sobrem muitos espaços na tabela, ao final do texto, faça assim:
na aba EDITAR, coloque o cursor do mouse na tabela, após o final do
texto e vá deletando os espaços a mais.
Altere atributos do no STYLE (cores, estilo de moldura, margens,
fonte, etc.) harmonizando com o seu background e/ou sua imagem
principal.
Atenção! Se o seu background tiver uma imagem na lateral esquerda,
não esqueça de alterar o valor da MARGIN-LEFT (veja o modelo 03).
Caso queira apresentar a lição com um TOP também terá de adequar o tag
STYLE. Consulte o arquivo .txt que foi fornecido na lição 20 da fase
Iniciante e o modelo 02 desta lição.
PARTE 3 - ACRESCENTANDO O SCRIPT PARA A MENSAGEM DE RODAPÉ
Pegue AQUI o arquivo compactado que
traz vários scripts para mensagens de rodapé com os respectivos
modelos de aplicação.
3.1 - Escolha um deles, copie e cole o script no BODY, logo abaixo
do código da tabela (veja os modelos).
3.2 - Digite a sua mensagem de rodapé no lugar especificado no
script. Não esqueça de preservar as aspas.
3.3 - Confira pela aba Visualizar se o script está funcionando
direitinho.
3.4 - Estando tudo certinho, confira o tamanho da mensagem (em kb),
aplique os recursos antibanner e envie à lista.
SCRIPT ADICIONAL: Peque aqui um
script muito interessante para a mensagem no topo. Teste-o em suas
formatações.
 |
