:: Tutorial de E-mails ::

Curso de Formatação Avançado- Lição 3

Estudo de tabela e de códigos

Esta aula é muito importante, porque a partir dela, iremos "desvendar" alguns mistérios dos códigos que permitem muitas variações em nossas formatações.

Hoje, iremos começar praticando:

Abra uma nova mensagem de e-mail, clique em "Origem", apague tudo e cole o seguinte código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Tutorial de E-mails - Lili Russo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16608" name=GENERATOR>
<STYLE>BODY {
BORDER-RIGHT: #fada00 5px groove; BORDER-TOP: #fada00 5px groove; SCROLLBAR-FACE-COLOR: #04b4e6; FONT-SIZE: 14pt; SCROLLBAR-HIGHLIGHT-COLOR: #231e12; BORDER-LEFT: #fada00 5px groove; SCROLLBAR-SHADOW-COLOR: #6cf67f; COLOR: #ab7979; SCROLLBAR-3DLIGHT-COLOR: #cfedf5; SCROLLBAR-ARROW-COLOR: #6cf67f; SCROLLBAR-TRACK-COLOR: #feecef; BORDER-BOTTOM: #fada00 5px groove; FONT-FAMILY: "Comic Sans MS"; SCROLLBAR-DARKSHADOW-COLOR: #45d4fd; TEXT-ALIGN: center
}
.Tabrd1 {
BORDER-RIGHT: #ee3b12 12px outset; BORDER-TOP: #ee3b12 12px ridge; BORDER-LEFT: #ee3b12 12px ridge; BORDER-BOTTOM: #ee3b12 12px outset
}
.Messrd1 {
BORDER-RIGHT: #3fb0c0 10px outset; BORDER-TOP: #3fb0c0 10px ridge; FONT-SIZE: 12pt; BORDER-LEFT: #3fb0c0 10px ridge; COLOR: #c000cc; BORDER-BOTTOM: #3fb0c0 10px outset; FONT-FAMILY: "Verdana"
}
</STYLE>
</HEAD>
<BODY bgColor=#f66e81 background="endereço do back">
<TABLE class=tabrd1 cellSpacing=35 cellPadding=0 width="60%">
<TBODY>
<TR>
<TD class=messrd1 align=middle bgColor=#cfedf5 height=450><IMG id=pic
style="WIDTH: 338px; POSITION: relative; TOP: 8px; HEIGHT: 400px"
src="endereço da imagem principal atenção às medidas da imagem"> </TD></TR>
<TR>
<TD align=middle bgColor=#cfedf5>
<DIV class=messrd1 style="OVERFLOW: auto; WIDTH: 500px; HEIGHT: 200px">
<DIV> </DIV>
<DIV><FONT face="Comic Sans MS" size=4>Dê um duplo clique e </FONT></DIV>
<DIV><FONT face="Comic Sans MS" size=4>escreva seu texto aqui</FONT></DIV>
<DIV> </DIV>
<DIV> </DIV></DIV></TD></TR></TBODY></TABLE>
<SCRIPT language=vbscript>
'==================================================
'please leave all these lines intact and in
'Script written by Ritad
'http://members.lycos.nl/ritad/
'Adapted by Lili Russo

'===================================================
window.status="... Sua mensagem de rodapé ..."
x=0
y=0

SetInterval"scrollback",62

Sub scrollback()
x=x
y=y-1
document.body.style.backgroundPosition=x&" "&y
End Sub

</SCRIPT>
</BODY></HTML>

Como estamos estudando a tabela e seus estilos, usei cores fortes, para facilitar.

Na primeira informação de estilo:

<STYLE>BODY {
BORDER-RIGHT: #fada00 5px groove; BORDER-TOP: #fada00 5px groove; SCROLLBAR-FACE-COLOR: #04b4e6; FONT-SIZE: 14pt; SCROLLBAR-HIGHLIGHT-COLOR: #231e12; BORDER-LEFT: #fada00 5px groove; SCROLLBAR-SHADOW-COLOR: #6cf67f; COLOR: #ab7979; SCROLLBAR-3DLIGHT-COLOR: #cfedf5; SCROLLBAR-ARROW-COLOR: #6cf67f; SCROLLBAR-TRACK-COLOR: #feecef; BORDER-BOTTOM: #fada00 5px groove; FONT-FAMILY: "Comic Sans MS"; SCROLLBAR-DARKSHADOW-COLOR: #45d4fd; TEXT-ALIGN: center
}

Encontramos os dados referentes ao estilo da mensagem em geral: moldura, barra de rolagem e fonte.

Na segunda informação de estilo:

.Tabrd1 {
BORDER-RIGHT: #ee3b12 12px outset; BORDER-TOP: #ee3b12 12px ridge; BORDER-LEFT: #ee3b12 12px ridge; BORDER-BOTTOM: #ee3b12 12px outset
}

encontramos os dados referentes ao estilo da tabela.

Na última informação de estilo:

.Messrd1 {
BORDER-RIGHT: #3fb0c0 10px outset; BORDER-TOP: #3fb0c0 10px ridge; FONT-SIZE: 12pt; BORDER-LEFT: #3fb0c0 10px ridge; COLOR: #c000cc; BORDER-BOTTOM: #3fb0c0 10px outset; FONT-FAMILY: "Verdana"
}

Encontramos as definições de estilo para a tabela que contém o texto.

Encontramos, depois, no corpo da mensagem, os dados das tabelas em si, as imagens que serão inseridas, o back que será usado.

O script já apresenta a mensagem de rodapé e faz também com que o back de fundo da mensagem se movimente, como vimos na aula anterior:

<SCRIPT language=vbscript>
'==================================================
'please leave all these lines intact and in
'Script written by Ritad
'http://members.lycos.nl/ritad/
'Adapted by Lili Russo

'===================================================
window.status="... Sua mensagem de rodapé ..."
x=0
y=0

SetInterval"scrollback",62

Sub scrollback()
x=x
y=y-1
document.body.style.backgroundPosition=x&" "&y
End Sub

Podemos mexer em alguns itens do código, além de alterações em cores e fontes, para chegarmos a um resultado que nos agrade. O importante é sempre manter os espaços, sinais, "aspas" determinados pelo código exatamente como estão.

Tarefa:

Use o código acima para criar uma mensagem de e-mail e escolha cores e imagens que combinem. Altere o estilo e a largura das bordas e das tabelas. Insira uma música.

Escreva algumas palavras e envie para o grupo.

Importante: Insira seu cartão de visitas!

Endereço do grupo: tutorial_emails@yahoogrupos.com.br

Lembre-se de indicar no campo Assunto: Nome do aluno, Nível e Número da lição. Caso a lição tenha sido refeita, inclua a palavra "refeita".

Lição elaborada por Lilian Russo


	.