:: Tutorial de E-mails ::

Curso de Formatação Super 5

Vários efeitos em scripts

Nesta lição iremos trabalhar com um script que desenvolvi e que pode ser alterado, de acordo com o tipo de imagem e cores que forem usadas,

Todos os itens, tais como: moldura, barra de rolagem, cores da tabela, cor do filtro, também poderão ser alteradas.

Atente para o tamanho da imagem central que deverá ser indicado

Abaixo está um script pronto.

<!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: #9ab0c2 5px ridge; BACKGROUND-POSITION: left top; BORDER-TOP: #9ab0c2 5px ridge; BACKGROUND-ATTACHMENT: scroll; BORDER-LEFT: #9ab0c2 5px ridge; SCROLLBAR-ARROW-COLOR: #d6dee2; BORDER-BOTTOM: #9ab0c2 5px ridge; BACKGROUND-REPEAT: repeat; SCROLLBAR-BASE-COLOR: #778ea3; BACKGROUND-COLOR: #9ab0c2; TEXT-ALIGN: center
}
IMG.pn1 {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
TABLE.pn2 {
BORDER-RIGHT: #46566f 10px dashed; BORDER-TOP: #46566f 10px dashed; VISIBILITY: hidden; BORDER-LEFT: #46566f 10px dashed; BORDER-BOTTOM: #46566f 10px dashed
}
TABLE.pn3 {
VISIBILITY: hidden
}
DIV.bz1 {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 12pt; PADDING-BOTTOM: 10px; OVERFLOW: auto; WIDTH: 600px; COLOR: #c6d5e0; SCROLLBAR-ARROW-COLOR: #778ea3; PADDING-TOP: 10px; FONT-FAMILY: "Comic Sans MS"; SCROLLBAR-BASE-COLOR: #778ea3; HEIGHT: 350px; BACKGROUND-COLOR: #6f859a; TEXT-ALIGN: center
}
A:link {
COLOR: #c6d5e0
}
A:visited {
COLOR: #c6d5e0
}
A:hover {
CURSOR: hand; COLOR: #c6d5e0
}
</STYLE>

<META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD>
<BODY bgColor=#6f859a background="endereço do back"
scroll=auto><BGSOUND balance=0 src="endereço do som "
volume=0 loop=infinite><IMG
class=pn1 id=tabback1 height=150
src="endereço da imagem" width=200> <IMG class=pn1 id=tabback2 height=50
src="endereço da imagem" width=50> <IMG class=pn1 id=tabback3 height=50
src="endereço da imagem" width=50> 
<TABLE class=pn3 id=lilib1 cellSpacing=1 cellPadding=1 align=center>
<TBODY>
<TR>
<TD>
<TABLE class=pn3 id=lilib2 cellSpacing=2 cellPadding=5 align=center>
<TBODY>
<TR>
<TD>
<TABLE class=pn3 id=lilib3 cellSpacing=0 cellPadding=0
align=center><TBODY>
<TR>
<TD>
<TABLE class=pn2 id=lilib4 cellSpacing=2 cellPadding=5
align=center>
<TBODY>
<TR>
<TD>
<TABLE class=pn3 id=lilib5 cellSpacing=1 cellPadding=1
align=center>
<TBODY>
<TR>
<TD>
<TABLE class=pn3 id=lilib6 cellSpacing=2
cellPadding=10 align=center>
<TBODY>
<TR>
<TD>
<TABLE class=pn3 id=lilib7 cellSpacing=1
cellPadding=1 align=center>
<TBODY>
<TR>
<TD>
<TABLE class=pn3 id=lilib8 cellSpacing=30
cellPadding=2 align=center>
<TBODY>
<TR>
<TD id=ddd1>
<CENTER>
<DIV id=ddd3><IMG
id=zic1 height=414
src="endereço da imagem lembre-se de alterar as medidas em height e width"
width=464 border=0></A></CENTER></DIV></TD></TR>
<DIV></DIV>
<TR>
<TD id=ddd2>
<DIV class=bz1 id=mz1>
<CENTER><FONT size=2>Texto aqui</FONT></CENTER>
</DIV>
</DIV></FONT></TD></TR></TR></TBODY></TABLE>
<SCRIPT language=VBScript>
option explicit
setLocale("en-au")
dim dz, ez, c, docw, doch, mzH, fn1, fn2, chC
dz="<-> Script by Lili Russo <->"
ez="Formatação e arte: Lili Russo"
c=0

'------------------------------------------
'Script written by Lili Russo
'© june 2007
'You are welcome to use this script but
'please do not remove these credits
'this script is encoded and can be traced
'------------------------------------------

'= vc pode mudar =

'altura ca caixa de texto
mzH=200

'chroma colour
chC="#708495"

'= fim =

fn1="progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=Wedge)"
fn2="progid:DXImageTransform.Microsoft.Chroma(color="&chC&")"

mz1.style.filter=fn2

lilib1.style.filter=fn1
lilib2.style.filter=fn1
lilib3.style.filter=fn1
lilib4.style.filter=fn1
lilib5.style.filter=fn1
lilib6.style.filter=fn1

ddd1.style.filter=fn1
ddd2.style.filter=fn1
ddd3.style.filter=fn1

sub window_onLoad()
lilib1.style.backgroundImage="URL("&tabback1.src&")"
lilib2.style.backgroundImage="URL("&tabback2.src&")"
lilib3.style.backgroundImage="URL("&tabback1.src&")"
lilib4.style.backgroundImage="URL("&tabback2.src&")"
lilib5.style.backgroundImage="URL("&tabback1.src&")"
lilib6.style.backgroundImage="URL("&tabback2.src&")"
lilib7.style.backgroundImage="URL("&tabback1.src&")"
lilib8.style.backgroundImage="URL("&tabback2.src&")"
ddd1.style.backgroundImage="URL("&tabback1.src&")"
ddd2.style.backgroundImage="URL("&tabback1.src&")"
ddd3.style.backgroundImage="URL("&tabback3.src&")"
mz1.style.backgroundImage="URL("&tabback3.src&")"

mz1.style.color=chC
mz1.style.scrollbarArrowColor=chC
mz1.style.scrollbarHighlightColor=chC

dddposition
lili1
z15
end sub

sub dddposition()
docw=document.body.clientWidth
doch=document.body.clientHeight

mz1.style.height=mzH
mz1.style.width=zic1.width
end sub

sub lili1()
lilib1.filters(0).apply()
lilib1.style.visibility="visible"
lilib1.filters(0).play(4.000)

lilib2.filters(0).apply()
lilib2.style.visibility="visible"
lilib2.filters(0).play(4.000)

lilib3.filters(0).apply()
lilib3.style.visibility="visible"
lilib3.filters(0).play(4.000)

lilib4.filters(0).apply()
lilib4.style.visibility="visible"
lilib4.filters(0).play(4.000)

lilib5.filters(0).apply()
lilib5.style.visibility="visible"
lilib5.filters(0).play(4.000)

lilib6.filters(0).apply()
lilib6.style.visibility="visible"
lilib6.filters(0).play(4.000)
window.setTimeout "lili2", 4000
end sub

sub lili2()
ddd1.filters(0).apply()
ddd1.style.visibility="visible"
ddd1.filters(0).play(4.000)

ddd2.filters(0).apply()
ddd2.style.visibility="visible"
ddd2.filters(0).play(4.000)

ddd3.filters(0).apply()
ddd3.style.visibility="visible"
ddd3.filters(0).play(4.000)
end sub

window.setInterval "scrollIt",64
sub scrollIt()
c=c+1
lilib1.style.backgroundPosition=-c&" "&-c
lilib3.style.backgroundPosition=-c&" "&-c
lilib5.style.backgroundPosition=-c&" "&-c
lilib7.style.backgroundPosition=-c&" "&-c
ddd1.style.backgroundPosition=-c&" "&-c
ddd2.style.backgroundPosition=-c&" "&-c
end sub

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

sub window_onResize()
dddposition
end sub

</SCRIPT>
</TD></TR></TBODY></TABLE></TR></TBODY></TABLE></TR></TBODY></TABLE></TR></TBODY></TABLE></TR></TBODY></TABLE></TR></TBODY></TABLE></TR></TBODY></TABLE></BODY></HTML>

Aqui você encontra um exemplo

Tarefa

Crie um e-mail usando o script pronto (ou, se preferir, crie o seu com base no modelo), alterando as cores, o tamanho da imagem

e acrescentando os demais itens: back, moldura, barra de rolagem colorida, música, mensagem de rodapé.

Escreva um texto e envie ao grupo.

Bom trabalho!

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


	.