:: Tutorial de E-mails ::

Curso de Formatação Super 12

Formatação delicada com vários efeitos

Esta formatação dá efeitos muito bonitos ao e-mail.

Veja um exemplo aqui

Deixei um script prontinho, com bordas, barra de rolagem colorida, links, efeitos. É só copiar e colar na Origem, apagando antes tudo o que lá está escrito. Marquei em vermelho algumas das alterações possíveis. Existem outras e você poderá fazê-las à vontade.

Importante: Neste script, é preciso indicar o tamanho (width e heigth) da imagem principal.

Use um back glitter (sem animação) no segundo back da tabela para ter um efeito de brilho.

<!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=windows-1252">
<STYLE type=text/css>BODY {
BORDER-RIGHT: #a48491 10px inset; BORDER-TOP: #a48491 10px outset; SCROLLBAR-FACE-COLOR: #d9cac7; BORDER-LEFT: #a48491 10px outset; SCROLLBAR-SHADOW-COLOR: #d9cac7; SCROLLBAR-ARROW-COLOR: #a48491; SCROLLBAR-TRACK-COLOR: #d9cac7; BORDER-BOTTOM: #a48491 10px inset; SCROLLBAR-DARKSHADOW-COLOR: #d9cac7; SCROLLBAR-BASE-COLOR: #d9cac7; BACKGROUND-COLOR: #d9cac7; scrollbar-3dhighlight-color: #D9CAC7
}
.tab {
BORDER-RIGHT: #000000 1px ridge; BORDER-TOP: #000000 1px ridge; BORDER-LEFT: #000000 1px ridge; BORDER-BOTTOM: #000000 1px ridge
}
.lili {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
.dv {
LEFT: 0px; WIDTH: 100%; POSITION: relative; TOP: 0px
}
.pl {
FILTER: progid:DXImageTransform.Microsoft.Stretch(stretchStyle='push'); LEFT: 0px; POSITION: relative; TOP: 75px
}
.texto {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-WEIGHT: normal; FONT-SIZE: 24pt; LEFT: 0px; PADDING-BOTTOM: 10px; OVERFLOW: auto; COLOR: #000000; PADDING-TOP: 10px; FONT-FAMILY: "Comic Sans MS"; POSITION: relative; TOP: 125px; TEXT-ALIGN: center
}
</STYLE>

<META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD>
<BODY bgColor=#e3d2ce>
<DIV><BR></DIV><IMG class=lili id=bg1
src="endereço do back1"> <IMG class=lili id=bg2
src="endereço do back glittere"> 
<TABLE id=tab align=center>
<TBODY>
<TR>
<TD>
<DIV class=dv id=div1>
<TABLE id=h1 style="LEFT: 25px; POSITION: absolute; TOP: 5px" height=10
width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=h2 style="RIGHT: 25px; POSITION: absolute; TOP: 5px" height=10
width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=h3 style="RIGHT: 25px; BOTTOM: 5px; POSITION: absolute"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=h4 style="LEFT: 25px; BOTTOM: 5px; POSITION: absolute" height=10
width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=h5 style="LEFT: 25px; POSITION: absolute; TOP: 25px" height=10
width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=h6 style="RIGHT: 25px; POSITION: absolute; TOP: 25px" height=10
width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=h7 style="RIGHT: 25px; BOTTOM: 25px; POSITION: absolute"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=h8 style="LEFT: 25px; BOTTOM: 25px; POSITION: absolute"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=h9 style="LEFT: 5px; POSITION: absolute; TOP: 25px" height=10
width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=h10 style="RIGHT: 5px; POSITION: absolute; TOP: 25px" height=10
width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=h11 style="RIGHT: 5px; BOTTOM: 25px; POSITION: absolute"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=h12 style="LEFT: 5px; BOTTOM: 25px; POSITION: absolute"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b1
style="LEFT: 51px; BOTTOM: 51px; POSITION: absolute" height=10 width=10
align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b2 style="RIGHT: 51px; POSITION: absolute; TOP: 51px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b3
style="RIGHT: 51px; BOTTOM: 51px; POSITION: absolute" height=10 width=10
align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b4 style="LEFT: 51px; POSITION: absolute; TOP: 51px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b5
style="LEFT: 59px; BOTTOM: 59px; POSITION: absolute" height=10 width=10
align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b6 style="RIGHT: 59px; POSITION: absolute; TOP: 59px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b7
style="RIGHT: 59px; BOTTOM: 59px; POSITION: absolute" height=10 width=10
align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b8 style="LEFT: 59px; POSITION: absolute; TOP: 59px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b9
style="LEFT: 43px; BOTTOM: 43px; POSITION: absolute" height=10 width=10
align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b10 style="RIGHT: 43px; POSITION: absolute; TOP: 43px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b11
style="RIGHT: 43px; BOTTOM: 43px; POSITION: absolute" height=10 width=10
align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE class=tab id=b12 style="LEFT: 43px; POSITION: absolute; TOP: 43px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=lb1
style="LEFT: 10px; POSITION: absolute; TOP: 30px; HEIGHT: 1px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=l3
style="LEFT: 30px; POSITION: absolute; TOP: 10px; HEIGHT: 1px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=l1
style="LEFT: 30px; BOTTOM: 10px; POSITION: absolute; HEIGHT: 1px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=lb3
style="LEFT: 10px; BOTTOM: 30px; POSITION: absolute; HEIGHT: 1px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=l2
style="RIGHT: 10px; WIDTH: 1px; POSITION: absolute; TOP: 30px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=l4 style="LEFT: 10px; WIDTH: 1px; POSITION: absolute; TOP: 30px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=lb2
style="RIGHT: 30px; WIDTH: 1px; POSITION: absolute; TOP: 15px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=lb4
style="LEFT: 30px; WIDTH: 1px; POSITION: absolute; TOP: 15px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=60 cellPadding=2 width="100%" align=center>
<TBODY>
<TR>
<TD align=middle>
<DIV class=dv id=div2>
<TABLE id=hb1 style="LEFT: 5px; POSITION: absolute; TOP: 25px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=hb2 style="RIGHT: 5px; POSITION: absolute; TOP: 25px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=hb3 style="RIGHT: 5px; BOTTOM: 25px; POSITION: absolute"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=hb4 style="LEFT: 5px; BOTTOM: 25px; POSITION: absolute"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=hb5 style="LEFT: 25px; POSITION: absolute; TOP: 5px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=hb6 style="RIGHT: 25px; POSITION: absolute; TOP: 5px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=hb7 style="RIGHT: 25px; BOTTOM: 5px; POSITION: absolute"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=hb8 style="LEFT: 25px; BOTTOM: 5px; POSITION: absolute"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=hb9 style="LEFT: 25px; BOTTOM: 25px; POSITION: absolute"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=hb10 style="RIGHT: 25px; POSITION: absolute; TOP: 25px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=hb11 style="RIGHT: 25px; BOTTOM: 25px; POSITION: absolute"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=hb12 style="LEFT: 25px; POSITION: absolute; TOP: 25px"
height=10 width=10 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=l5
style="LEFT: 30px; POSITION: absolute; TOP: 10px; HEIGHT: 1px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=lb5
style="LEFT: 10px; POSITION: absolute; TOP: 30px; HEIGHT: 1px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=lb7
style="LEFT: 10px; BOTTOM: 30px; POSITION: absolute; HEIGHT: 1px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=l7
style="LEFT: 30px; BOTTOM: 10px; POSITION: absolute; HEIGHT: 1px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=l6
style="RIGHT: 10px; WIDTH: 1px; POSITION: absolute; TOP: 30px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=l8
style="LEFT: 10px; WIDTH: 1px; POSITION: absolute; TOP: 30px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=lb6
style="RIGHT: 30px; WIDTH: 1px; POSITION: absolute; TOP: 10px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=lb8
style="LEFT: 30px; WIDTH: 1px; POSITION: absolute; TOP: 10px"
cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<DIV class=pl id=pic style="WIDTH: 350px; HEIGHT: 350px"><IMG alt=""
hspace=0 src="imagem central" border=0></DIV>
<DIV class=texto id=mess style="WIDTH: 350px; HEIGHT: 350px">
<DIV><FONT size=5>Texto</FONT></DIV>
<DIV></FONT></DIV>
<DIV><A href="http://www.ilove.terra.com.br/lili"><IMG alt=""
hspace=0 src="imagem pequena" align=baseline
border=0></A></DIV></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
<SCRIPT language=VBscript>
'---------------------------------
'script written by Lili Russo
'http://www.ilove.terra.com.br/lili
'please don't remove these lines
'may 2008
'-----------------------------------

Window.status=" Stat by Lili Russo"
Dim scw, sch, th, th1

pich=pic.offsetheight
picw=pic.offsetwidth
messh=mess.offsetheight
messw=mess.offsetwidth

a=0
n=0
e=0
Sub Window_Onload()
clearinterval(th1)
scw=document.body.clientwidth
sch=document.body.clientheight
document.body.style.backgroundImage="URL("&bg1.src&")"
h1.style.backgroundImage= "URL("&bg2.src&")"
h2.style.backgroundImage= "URL("&bg2.src&")"
h3.style.backgroundImage= "URL("&bg2.src&")"
h4.style.backgroundImage= "URL("&bg2.src&")"
h5.style.backgroundImage= "URL("&bg2.src&")"
h6.style.backgroundImage= "URL("&bg2.src&")"
h7.style.backgroundImage= "URL("&bg2.src&")"
h8.style.backgroundImage= "URL("&bg2.src&")"
h9.style.backgroundImage= "URL("&bg2.src&")"
h10.style.backgroundImage= "URL("&bg2.src&")"
h11.style.backgroundImage= "URL("&bg2.src&")"
h12.style.backgroundImage= "URL("&bg2.src&")"
b1.style.backgroundImage= "URL("&bg2.src&")"
b2.style.backgroundImage= "URL("&bg2.src&")"
b3.style.backgroundImage= "URL("&bg2.src&")"
b4.style.backgroundImage= "URL("&bg2.src&")"
l1.style.backgroundImage= "URL("&bg2.src&")"
l2.style.backgroundImage= "URL("&bg2.src&")"
l3.style.backgroundImage= "URL("&bg2.src&")"
l4.style.backgroundImage= "URL("&bg2.src&")"
lb1.style.backgroundImage= "URL("&bg2.src&")"
lb2.style.backgroundImage= "URL("&bg2.src&")"
lb3.style.backgroundImage= "URL("&bg2.src&")"
lb4.style.backgroundImage= "URL("&bg2.src&")"
hb1.style.backgroundImage= "URL("&bg2.src&")"
hb2.style.backgroundImage= "URL("&bg2.src&")"
hb3.style.backgroundImage= "URL("&bg2.src&")"
hb4.style.backgroundImage= "URL("&bg2.src&")"
hb5.style.backgroundImage= "URL("&bg2.src&")"
hb6.style.backgroundImage= "URL("&bg2.src&")"
hb7.style.backgroundImage= "URL("&bg2.src&")"
hb8.style.backgroundImage= "URL("&bg2.src&")"
hb9.style.backgroundImage= "URL("&bg2.src&")"
hb10.style.backgroundImage= "URL("&bg2.src&")"
hb11.style.backgroundImage= "URL("&bg2.src&")"
hb12.style.backgroundImage= "URL("&bg2.src&")"
l5.style.backgroundImage= "URL("&bg2.src&")"
l6.style.backgroundImage= "URL("&bg2.src&")"
l7.style.backgroundImage= "URL("&bg2.src&")"
l8.style.backgroundImage= "URL("&bg2.src&")"
lb5.style.backgroundImage= "URL("&bg2.src&")"
lb6.style.backgroundImage= "URL("&bg2.src&")"
lb7.style.backgroundImage= "URL("&bg2.src&")"
lb8.style.backgroundImage= "URL("&bg2.src&")"
tab.style.width=picw+300
lb1.style.width=picw+270
lb3.style.width=picw+270
l3.style.width=picw+230
l1.style.width=picw+230
lb5.style.width=picw+150
lb7.style.width=picw+150
l5.style.width=picw+110
l7.style.width=picw+110
div1.style.height=pich+messh+200
div2.style.height=pich+messh+200
lb2.style.height=pich+messh+295
lb4.style.height=pich+messh+295
l2.style.height=pich+messh+260
l4.style.height=pich+messh+260
lb6.style.height=pich+messh+175
lb8.style.height=pich+messh+175
l6.style.height=pich+messh+135
l8.style.height=pich+messh+135
ClearInterval(th)
th=setinterval("scroll", 64)
ClearTimeOut (th1)
th1=SetTimeOut ("start",2200)
End Sub

Sub start()
ClearTimeOut(th1)
pic.filters(0).Apply()
pic.filters(0).Duration=6.000
pic.filters(0).Play()
th1=SetTimeOut ("start", 12000)
End Sub

Sub scroll()
a=a-1
n=n+1
e=e
h1.style.backgroundPosition = a&" "&a
h2.style.backgroundPosition = n&" "&a
h3.style.backgroundPosition = n&" "&n
h4.style.backgroundPosition = a&" "&n
h5.style.backgroundPosition = a&" "&a
h6.style.backgroundPosition = n&" "&a
h7.style.backgroundPosition = n&" "&n
h8.style.backgroundPosition = a&" "&n
h9.style.backgroundPosition = a&" "&a
h10.style.backgroundPosition = n&" "&a
h11.style.backgroundPosition = n&" "&n
h12.style.backgroundPosition = a&" "&n
b1.style.backgroundPosition = a&" "&n
b2.style.backgroundPosition = n&" "&a
b3.style.backgroundPosition = n&" "&n
b4.style.backgroundPosition = a&" "&a
l1.style.backgroundPosition = a&" "&a
l2.style.backgroundPosition = a&" "&a
l3.style.backgroundPosition = a&" "&a
l4.style.backgroundPosition = a&" "&a
lb1.style.backgroundPosition = a&" "&a
lb2.style.backgroundPosition = a&" "&a
lb3.style.backgroundPosition = a&" "&a
lb4.style.backgroundPosition = a&" "&a
hb1.style.backgroundPosition = a&" "&a
hb2.style.backgroundPosition = n&" "&a
hb3.style.backgroundPosition = n&" "&n
hb4.style.backgroundPosition = a&" "&n
hb5.style.backgroundPosition = a&" "&a
hb6.style.backgroundPosition = n&" "&a
hb7.style.backgroundPosition = n&" "&n
hb8.style.backgroundPosition = a&" "&n
hb9.style.backgroundPosition = a&" "&a
hb10.style.backgroundPosition = n&" "&a
hb11.style.backgroundPosition = n&" "&n
hb12.style.backgroundPosition = a&" "&n
l5.style.backgroundPosition = n&" "&a
l6.style.backgroundPosition = n&" "&a
l7.style.backgroundPosition = n&" "&a
l8.style.backgroundPosition = n&" "&a
lb5.style.backgroundPosition = n&" "&a
lb6.style.backgroundPosition = n&" "&a
lb7.style.backgroundPosition = n&" "&a
lb8.style.backgroundPosition = n&" "&a
End Sub

Sub Window_OnResize()
window_OnLoad
End Sub

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

Tarefa: Copie e cole o código acima e veja o resultado deste script. Faça as modificações que desejar, experimente fazer alterações em várias partes do script, tendo em vista a imagem central que você escolheu. Escreva um pequeno texto e envie ao 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


	.