Curso de Formatação Super 11

Formatação com vetores em movimento




Esta formatação dá efeitos muito bonitos ao e-mail. Teremos alguns vetores que se transformam e outros que se movimentam (floaties).

Veja um exemplo aqui

Podemos fazer variações neste script.

As variações costumeiras como estilo, cor, tamanho de bordas, cores nas barras coloridas e variações no filtro de transição, tamanho e cores dos vetores.

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, precisar indicar o tamanho (width e heigth) da imagem principal.

<!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: #000000 2px solid; BORDER-TOP: #000000 2px solid; SCROLLBAR-HIGHLIGHT-COLOR: #000000; BORDER-LEFT: #000000 2px solid; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #000000 2px solid; SCROLLBAR-BASE-COLOR: #ffffff
}
.offscr {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
.tab1 {
FILTER: revealTrans; LEFT: -1800px; VISIBILITY: hidden; BORDER-LEFT: #000000 2px solid; POSITION: absolute; TOP: -1800px
}
.tab2 {
BORDER-TOP: #000000 2px solid; FILTER: revealTrans; LEFT: -1800px; VISIBILITY: hidden; POSITION: absolute; TOP: -1800px
}
.mat {
BORDER-RIGHT: #000000 4px double; BORDER-TOP: #000000 4px double; BORDER-LEFT: #000000 4px double; BORDER-BOTTOM: #000000 4px double; POSITION: absolute; BACKGROUND-COLOR: #ffffff
}
.float {
BORDER-RIGHT: #000000 4px double; BORDER-TOP: #000000 4px double; VISIBILITY: hidden; BORDER-LEFT: #000000 4px double; BORDER-BOTTOM: #000000 4px double; POSITION: absolute; BACKGROUND-COLOR: #ffffff
}
.lilir {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12pt; Z-INDEX: 6; LEFT: -1800px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 100px; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: Comic Sans MS; POSITION: absolute; TOP: -1800px; HEIGHT: 30px; BACKGROUND-COLOR: #ffffff
}
.text {
BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 50px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 50px; FONT-SIZE: 12pt; Z-INDEX: 5; LEFT: 5%; VISIBILITY: hidden; PADDING-BOTTOM: 50px; OVERFLOW: auto; BORDER-LEFT: #000000 1px solid; WIDTH: 90%; COLOR: #000000; PADDING-TOP: 50px; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: Comic Sans MS; POSITION: absolute; TOP: 5%; HEIGHT: 90%; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center
}
A:link {
FONT-SIZE: 11pt; COLOR: #000000
}
A:visited {
FONT-SIZE: 11pt; COLOR: #000000
}
A:active {
FONT-SIZE: 11pt; COLOR: #000000
}
</STYLE>

<META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff
background="endereço do back">
<DIV><BR></DIV><BGSOUND balance=0
src="endereço da música"volume=0
loop=infinite><IMG class=offscr id=pic height=500
src="endereço da imagem central"
width=500><BUTTON class=lilir id=but1 hideFocus height="25"
width="100">Imagem</BUTTON><BUTTON class=lilir id=but2 hideFocus height="25"
width="100">Texto</BUTTON>
<DIV class=text id=txt>
<P>
<P><FONT size=1></FONT></P><FONT size=1></FONT></P>
<P><FONT size=1></FONT>&nbsp;</P>
<P><FONT size=4>Texto</FONT></P>
<DIV>&nbsp;</DIV>
<DIV><FONT size=1></FONT>&nbsp;</DIV>
<DIV><A href="http://ilove.terra.com.br/lili/palavrasesentimentos/"><FONT
size=1>Formatação e arte final: Lili Russo</FONT></A><BR></DIV>
<DIV><A href="http://br.groups.yahoo.com/group/lili_ilove/"><FONT
size=1>Grupo</FONT></A></DIV></DIV>
<DIV></DIV>
<DIV class=offscr id=faux></DIV>
<BLOCKQUOTE></BLOCKQUOTE><FONT style="BACKGROUND-COLOR: #ffffff" face=Arial
size=2></FONT>
<SCRIPT language=VBScript>
'-------------------------------
'Script by Lili Russo
'http://ilove.terra.com.br/lili
'feb. 2008 written in html course
'please leave these lines in
'-------------------------------

option explicit
setLocale("en-gb")

dim docw,doch,gap,sp,th1,an,ann,anne,f1,f2,musicpath,musicvol,loopno,mw,mh,lh,lw,rh,rw
dim annem,pw,ph,f3,A,R,B,S,i1,i2,ccl,cct,ccl2,cct2,W1,H1,W2,H2,th

'--------------------alterações possíveis----------------------------------------

window.status="::Tutorial de E-mails:: Lili Russo:: "

' floaties - p
'largura
pw=25
'altura
ph=25

'squares
'largura
mw=75
'altura
mh=75

'--------------------------filtro transição-------------------------------

f1="progid:DXImageTransform.Microsoft.Matrix(M11=0.5,M12=0.5,M21=0.5,M22=-.5, Dx=1,Dy=1,'bilinear',sizingMethod='auto expand');"
f2="progid:DXImageTransform.Microsoft.Iris(Irisstyle=plus,motion=out)alpha(opacity=75);"

for an=1 to 2
document.write ("<div id=l"&an&" class=tab2 border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></div>")
next
for ann=1 to 2
document.write ("<div id=r"&ann&" class=tab1 border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></div>")
next
for anne=1 to 4
document.write ("<div id=m"&anne&" class=mat border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></div>")
next
for annem=1 to 2
document.write ("<div id=p"&annem&" class=float border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></div>")
next

sp=100
A=6.28
R=180
B=3.14
S=180

sub window_onLoad()
size_and_position
go
end sub

sub size_and_position()
docw=document.body.clientWidth
doch=document.body.clientHeight
if doch>(pic.height+sp*2) then
gap=(doch-(pic.height+sp/10))/2+5
document.body.scroll="no"
else
gap=sp
document.body.scroll="yes"
end if
pic.style.top=gap
pic.style.left=(docw-pic.width)/2
pic.style.height=pic.height
pic.style.width=pic.width
txt.style.top=gap
txt.style.left=(docw-pic.width)/2
txt.style.height=pic.height
txt.style.width=pic.width
m1.style.top=gap-mh
m1.style.left=(docw-(pic.width+mw*2))/2
m1.style.height=mh
m1.style.width=mw
m2.style.top=gap-mh
m2.style.left=(docw+(pic.width))/2
m2.style.height=mh
m2.style.width=mw
m3.style.top=gap+pic.height
m3.style.left=(docw-(pic.width+mw*2))/2
m3.style.height=mh
m3.style.width=mw
m4.style.top=gap+pic.height
m4.style.left=(docw+(pic.width))/2
m4.style.height=mh
m4.style.width=mw
lh=2
lw=2
rh=2
rw=2
l1.style.top=gap-mh/2-1
l1.style.left=(docw-(pic.width+mw))/2+mw/2-1
l1.style.height=lh
l1.style.width=pic.width+2
r2.style.top=gap-mh/2-1
r2.style.left=(docw+(pic.width))/2+mw/2-1
r2.style.height=pic.height+mh
r2.style.width=lw
l2.style.top=gap+pic.height+mh/2-1
l2.style.left=(docw-(pic.width+mw))/2+mw/2-1
l2.style.height=lh
l2.style.width=pic.width+2
r1.style.top=gap-mh/2-1
r1.style.left=(docw-(pic.width+mw))/2-1
r1.style.height=pic.height+mh
r1.style.width=lw
p1.style.height=ph
p1.style.width=pw
p2.style.height=ph
p2.style.width=pw
ccl=(docw-pw-120)/2
cct=(gap+pic.height/2)-ph/2
ccl2=(docw-pw+120)/2
cct2=(gap+pic.height/2)-ph/2
W1=R*cos(A)+ccl
H1=R*sin(A)+cct
W2=R*cos(B)+ccl2
H2=S*cos(B)+cct2
faux.style.top=pic.height+sp
faux.style.left=0
faux.style.height=sp
faux.style.width=docw
but1.style.top=gap+pic.height-30
but1.style.left=docw/2-50
but1.style.width=100
but1.style.height=30
but2.style.top=gap+pic.height-30
but2.style.left=docw/2-50
but2.style.width=100
but2.style.height=30
end sub
sub go()
end sub
window.setTimeout "show", 2000
sub show()
but2.style.filter=f2
but2.filters(0).Apply()
but2.style.visibility="visible"
but2.filters(0).Play(3.000)
end sub
sub but2_onclick()
txt.style.filter=f2
txt.filters(0).Apply()
txt.style.visibility="visible"
txt.filters(0).Play(3.000)
but1.style.filter=f2
but1.filters(0).Apply()
but1.style.visibility="visible"
but1.filters(0).Play(3.000)
but2.style.visibility="hidden"
end sub
sub but1_onclick()
txt.style.filter=f2
txt.filters(0).Apply()
txt.style.visibility="hidden"
txt.filters(0).Play(3.000)
but1.style.visibility="hidden"
but2.style.filter=f2
but2.filters(0).Apply()
but2.style.visibility="visible"
but2.filters(0).Play(3.000)
end sub
window.setTimeout "lijn1", 1000
sub lijn1()
l1.filters(0).Apply()
l1.filters(0).transition=6
l1.style.visibility="visible"
l1.filters(0).Play(2.000)
window.setTimeout "lijn4", 2000
end sub
sub lijn4()
r2.filters(0).Apply()
r2.filters(0).transition=5
r2.style.visibility="visible"
r2.filters(0).Play(2.000)
window.setTimeout "lijn2", 2000
end sub
sub lijn2()
l2.filters(0).Apply()
l2.filters(0).transition=7
l2.style.visibility="visible"
l2.filters(0).Play(2.000)
window.setTimeout "lijn3", 2000
end sub
sub lijn3()
r1.filters(0).Apply()
r1.filters(0).transition=4
r1.style.visibility="visible"
r1.filters(0).Play(2.000)
window.setTimeout "mt1", 2500
end sub
sub mt1()
m1.style.filter=f1
m2.style.filter=f1
m4.style.filter=f1
m3.style.filter=f1
window.setTimeout "gaan", 1000
end sub

Sub gaan()
ClearInterval(th)
th=SetInterval("draai",50)
end sub
Sub draai()
A=A-0.08
w1=R*1.3*cos(A)+ccl
h1=R*sin(A)+cct
p1.style.posleft=W1
p1.style.postop=H1
p1.style.filter=f1
p1.style.visibility="visible"
B=B+0.08
W2=S*1.3*cos(B)+ccl2
H2=S*sin(B)+cct2
p2.style.posleft=W2
p2.style.postop=H2
p2.style.filter=f1
p2.style.visibility="visible"
End Sub

sub window_onresize()
size_and_position
end sub

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

Tarefa: Crie um e-mail com o script acima, alterando o tamanho da imagem central e todos os elementos que queira para compor um trabalho bem bonito. 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

 

Lilian Russo - Todos os Direitos Reservados - ©2002/2008



.