:: Tutorial de E-mails ::

Curso de Formatação Super 13

Efeito de água

Esta formatação permite um efeito de água, sem a necessidade de fazer gif animada, deixando o e-mail mais leve. Você só precisa escolher uma imagem com água (anote as medidas da imagem - largura e altura). No PSP, abra esta imagem e salve-a em formato .jpg. Com a ferramenta freehand, selecione a parte da imagem com água, ocupando toda a largura da imagem. (Se sua imagem for toda de água, selecione alguns trechos da mesma, mas mantenha a mesma largura.) Copie e cole a parte que você copiou como uma nova imagem e salve-a como gif. (anote tb a largura e a altura desta imagem).

Veja um exemplo aqui

Caso você não trabalhe com imagens, pode usar as minhas do exemplo .

Deixei um script prontinho, com bordas, barra de rolagem colorida, links, efeitos. É só copiar e colar na Origem. No próprio script, indiquei as alterações que podem ser feitas. Evidentemente, vc poderá mudar as cores das bordas, barra de rolagem, do gradiente da tabela de texto e assim por diante.

Acrescentei uns passarinhos voando (esta imagem é em formato .gif)

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>BODY {
BORDER-RIGHT: #311808 4px double; BACKGROUND-POSITION: left top; BORDER-TOP: #311808 4px double; BACKGROUND-ATTACHMENT: scroll; BORDER-LEFT: #311808 4px double; SCROLLBAR-ARROW-COLOR: #2c353a; BORDER-BOTTOM: #311808 4px double; BACKGROUND-REPEAT: repeat; SCROLLBAR-BASE-COLOR: #eeb748; BACKGROUND-COLOR: #2c353a; TEXT-ALIGN: center; scroll-track-color: #eeb748
}
IMG.lr1 {
Z-INDEX: 10; LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
DIV.lr1 {
Z-INDEX: 10; LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
IMG.lr2 {
Z-INDEX: 3; LEFT: 0px; POSITION: absolute; TOP: 0px
}
IMG.lr3 {
Z-INDEX: 4; LEFT: 0px; POSITION: absolute; TOP: 0px
}
DIV.lr4 {
BORDER-RIGHT: #311808 double; BORDER-TOP: #311808 double; Z-INDEX: 2; LEFT: -1800px; VISIBILITY: hidden; OVERFLOW: hidden; BORDER-LEFT: #311808 double; WIDTH: 10px; BORDER-BOTTOM: #311808 double; POSITION: absolute; TOP: -1800px; HEIGHT: 10px
}
DIV.lr5 {
BORDER-RIGHT: #311808 double; BORDER-TOP: #311808 double; Z-INDEX: -1; LEFT: -1800px; BORDER-LEFT: #311808 double; WIDTH: 10px; BORDER-BOTTOM: #311808 double; POSITION: absolute; TOP: -1800px; HEIGHT: 10px; BACKGROUND-COLOR: #935d23
}
IMG.lr6 {
Z-INDEX: 6; LEFT: 70px; POSITION: absolute; TOP: 25px
}
DIV.av1 {
BORDER-RIGHT: #311808 double; PADDING-RIGHT: 20px; BORDER-TOP: #311808 double; PADDING-LEFT: 20px; FONT-SIZE: 13pt; LEFT: 5px; VISIBILITY: hidden; PADDING-BOTTOM: 20px; OVERFLOW: auto; BORDER-LEFT: #311808 double; WIDTH: 70%; COLOR: #513f1d; SCROLLBAR-ARROW-COLOR: #d3ba50; PADDING-TOP: 20px; BORDER-BOTTOM: #311808 double; FONT-FAMILY: Comic Sans MS; SCROLLBAR-BASE-COLOR: #dbc154; POSITION: absolute; TOP: 5px; HEIGHT: 70%; BACKGROUND-COLOR: #e4aa49; TEXT-ALIGN: center
}
A:link {
COLOR: #513f1d
}
A:visited {
COLOR: #513f1d
}
A:hover {
COLOR: #513f1d
}
</STYLE>

<META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD>
<BODY bgColor=#c9ac52 background=cid:0a6b01c8f8ed$738b8480$6500a8c0@Lire
scroll=auto><BGSOUND balance=0 src="cid:0a6c01c8f8ed$738b8480$6500a8c0@Lire"
volume=-600 loop=infinite>
<DIV class=lr5 id=dv2></DIV>
<DIV class=lr4 id=dv1><IMG class=lr2 id=zic1 height=372
src="cid:0a6801c8f8ed$738b8480$6500a8c0@Lire" width=496> <IMG class=lr3 id=agua
height=180 src="cid:0a6901c8f8ed$738b8480$6500a8c0@Lire" width=496> <IMG
class=lr6 id=ave height=45 src="cid:0a6a01c8f8ed$738b8480$6500a8c0@Lire"
width=56> </DIV>
<DIV class=lr1 id=dv13></DIV>
<DIV class=av1 id=mz1>
<DIV>
<SCRIPT language=VBScript>
option explicit
setLocale("en-au")
dim dz, ez, docw, doch, phaze, phazechange, direction, speed, mzh, insp, bw, fn1, fn2, fn3, GRstart, GRend, faux, sp1, bTop, bLeft
dz=""
ez=""

'------------------------------------------
'Script written by Lili Russo
'Html course - feb 2008
'please do not remove these lines
'------------------------------------------

'------ alterações que podem ser feitas-------

'phase (fase de transição)
phazechange=5

'direction of wave ("up" or "down")
direction="up"

'speed of animation (quanto maior o número, maior a velocidade das ondas)
speed=55

'messagebox height
mzh=300

'inside space
insp=30

'largura da borda
bw=6

'gradient do back
GRstart="#935d23"
GRend="#f7f7a5"

'posição das aves
bTop=80
bLeft=350

'------------fim das alterações----------------------

fn1="progid:DXImageTransform.Microsoft.Gradient(startColorstr="&GRstart&", endColorstr="&GRend&", GradientType=0)"
fn2="progid:DXImageTransform.Microsoft.Wave(freq=8, strength=3, phase=25, add=0, lightstrength=10, enabled=1)"
fn3="progid:DXImageTransform.Microsoft.Checkerboard(squaresX=10, squaresY=10)"

mz1.style.filter=fn1&fn3
dv1.style.filter=fn3
agua.style.filter=fn2

sub window_onLoad()
dv1.style.borderWidth=bw&"px"
dv2.style.borderWidth=bw&"px"
mz1.style.borderWidth=bw&"px"

dddposition
lilir1
rippleIt
z15
end sub

sub dddposition()
faux=30
sp1=0

docw=document.body.clientWidth
if document.body.clientHeight>(zic1.height+mzh+bw*5+insp*2) then
doch=document.body.clientHeight
document.body.scroll="no"
sp1=(doch-(zic1.height+mzh+bw*5+insp*2))/2
else
sp1=faux
doch=zic1.height+mzh+bw*4+insp*2+sp1*2
document.body.scroll="yes"
end if

'faux
dv13.style.left=faux
dv13.style.top=0
dv13.style.width=faux
dv13.style.height=zic1.height+mzh+bw*5+insp*2+faux*2

'full image
dv1.style.left=(docw-(zic1.width+bw*2))/2
dv1.style.top=sp1+bw+insp
dv1.style.height=zic1.height+bw*2
dv1.style.width=zic1.width+bw*2
dv1.style.display=""

'messagebox
mz1.style.left=(docw-(zic1.width+bw*2))/2
mz1.style.top=sp1+zic1.height+bw*3+insp
mz1.style.height=mzh+bw
mz1.style.width=zic1.width+bw*2
mz1.style.display=""

'outer border
dv2.style.left=(docw-(zic1.width+bw*4+insp*2))/2
dv2.style.top=sp1
dv2.style.height=zic1.height+bw*5+insp*2+mzh
dv2.style.width=zic1.width+bw*4+insp*2
dv2.style.display=""

'agua
phaze=agua.filters(0).phase
agua.style.top=zic1.height-agua.height

'ave
ave.style.top=bTop
ave.style.left=bLeft
end sub

sub rippleIt()
window.clearTimeout
if direction="down" then
phaze=phaze-phazechange
else
phaze=phaze+phazechange
end if
agua.filters(0).phase=phaze
window.setTimeout "rippleIt", speed
end sub

sub lilir1()
dv1.filters(0).apply()
dv1.style.visibility="visible"
dv1.filters(0).play(4.000)

mz1.filters(1).apply()
mz1.style.visibility="visible"
mz1.filters(1).play(4.000)
end sub

sub z15()
'important do not remove this
end sub

sub window_onResize()
dddposition
end sub

</SCRIPT>
Texto aqui</DIV>
<DIV> </DIV>
<DIV><A href="http://br.groups.yahoo.com/group/lili_ilove/"><IMG alt="" hspace=0
src="cid:0a6a01c8f8ed$738b8480$6500a8c0@Lire" align=baseline border=0></A></DIV>
<DIV><FONT size=2><A href="http://www.tempodeart.com/">Créditos: Tube by Suzi
Sgay</A></FONT></DIV>
<DIV><FONT size=2><A
href="http://ilove.terra.com.br/lili/palavrasesentimentos/">Formatação e script:
Lili Russo</A></FONT></DIV>
<DIV><FONT size=2><A
href="http://br.groups.yahoo.com/group/lili_ilove/">Grupo</A></FONT></DIV>
<DIV> </DIV>
<DIV><A href="http://br.groups.yahoo.com/group/lili_ilove/"><IMG alt="" hspace=0
src="cid:0a6a01c8f8ed$738b8480$6500a8c0@Lire" align=baseline
border=0></A></FONT></DIV></DIV>

</BODY></HTML>

Tarefa: Crie um e-mail com esse efeito de água. Escreva um texto que combine e, se quiser, acrescente outros detalhes.

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


	.